From 18008fa9d72272e4fdd0edd16a25699089fa0091 Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Fri, 13 Nov 2020 02:46:42 +0700
Subject: [PATCH] Add blog subscription

---
 assets/css/styles.css     |  2 +-
 assets/js/subscription.js | 50 ++++++++++++++++++++++++++++++++++++++
 package.json              |  2 +-
 partials/site-header.hbs  | 51 +++++++++++++++++++++++++++++++++++++++
 tailwind.config.js        | 15 +++++-------
 5 files changed, 109 insertions(+), 11 deletions(-)
 create mode 100644 assets/js/subscription.js

diff --git a/assets/css/styles.css b/assets/css/styles.css
index fab3410..666d6ea 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -238,7 +238,7 @@ footer {
 /* 4. Navbar */
 
 .nav-group {
-
+  @apply flex flex-col h-full;
 }
 #menushow {
   @apply cursor-pointer w-16 h-16 relative px-2 py-2 transition duration-300 ease-in-out text-center whitespace-no-wrap;
diff --git a/assets/js/subscription.js b/assets/js/subscription.js
new file mode 100644
index 0000000..3e1d426
--- /dev/null
+++ b/assets/js/subscription.js
@@ -0,0 +1,50 @@
+
+// Parse the URL parameter
+function getParameterByName(name, url) {
+    if (!url) url = window.location.href;
+    name = name.replace(/[\[\]]/g, "\\$&");
+    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+        results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, " "));
+}
+
+$("#subscribe-button").click(function(){
+    $("#subscribe-dialog").show();
+    $("#subscribe-form").show();
+    $("#subscribe-success").hide();
+    $("#subscribe-confirmation").hide();
+    $("#subscribe-failure").hide();
+})
+
+$("#subscribe-back").click(function(){
+    $("#subscribe-dialog").hide();
+})
+
+$("#subscribe-submit").click(function() {
+    $("#subscribe-form").hide();
+    $("#subscribe-success").hide();
+    $("#subscribe-confirmation").show();
+    $("#subscribe-failure").hide();
+
+})
+$(document).ready(function () {
+    var action = getParameterByName('action');
+    var success = getParameterByName('success');
+    
+    if (action == 'subscribe' && (success === null || success === 'true')) {
+        $("#subscribe-dialog").show();
+        $("#subscribe-form").hide();
+        $("#subscribe-success").show();
+        $("#subscribe-confirmation").hide();
+        $("#subscribe-failure").hide();
+    }
+    if (action == 'subscribe' && success === 'false') {
+        $("#subscribe-dialog").show();
+        $("#subscribe-form").hide();
+        $("#subscribe-success").hide();
+        $("#subscribe-confirmation").hide();
+        $("#subscribe-failure").show();
+    }
+});
\ No newline at end of file
diff --git a/package.json b/package.json
index 10c6693..3d9d974 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "yuika",
     "description": "nanao.moe's blog theme",
-    "version": "2.3.0",
+    "version": "2.4.0",
     "engines": {
         "ghost-api": "v3"
     },
diff --git a/partials/site-header.hbs b/partials/site-header.hbs
index 30e05bd..0b65fb1 100644
--- a/partials/site-header.hbs
+++ b/partials/site-header.hbs
@@ -18,6 +18,57 @@
       </div>
       <div class="nav-group">
         {{navigation}}
+        {{#if @labs.members}}
+        <div class="flex-grow"></div>
+        <ul class="nav">
+          <li>
+            <a id="subscribe-button" href="#">Subscribe</a>
+          </li>
+        </ul>
+        {{/if}}
       </div>
     </header>
   </div>
+</div>
+
+{{#if @labs.members}}
+{{!-- Subscription dialog --}}
+<div class="fixed left-0 right-0 top-0 bottom-0 z-30 hidden" id="subscribe-dialog">
+  <div class="h-full w-full responsive-site-header-img bg-cover bg-yuika-blue-500">
+    <div class="h-full w-full bg-black opacity-50">
+    </div>
+  </div>
+  <div class="absolute left-0 right-0 top-0 bottom-0 z-40">
+    <div class="h-full w-full py-16 px-4 text-white">
+      <div id="subscribe-form">
+        <h1 class="text-2xl">Subscribe to {{@site.title}}</h1>
+        <p>Get the latest posts delivered straight to your inbox</p>
+        <form data-members-form="subscribe">
+        <div class="py-8">
+          <label class="text-sm">Email address</label>
+          <input type="email" data-members-email class="appearance-none bg-transparent focus:outline-none text-xl border-b w-full px-2 py-1">
+        </div>
+        <button id="subscribe-submit" type="submit" class="px-4 py-2 appearance-none focus:outline-none bg-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out">
+          Subscribe
+        </button>
+        </form>
+      </div>
+      <div id="subscribe-confirmation">
+        <h1 class="text-2xl">One more step....</h1>
+        <p>Please check your email inbox to confirm your subscription!</p>
+      </div>
+      <div id="subscribe-success">
+        <h1 class="text-2xl">Thank you for subscribing to {{@site.title}}!</h1>
+        <p>The latest posts will be periodically delivered to you when they are published.</p>
+      </div>
+      <div id="subscribe-failure">
+        <h1 class="text-2xl">Invalid subscription link</h1>
+        <p>The link might have expired, or you entered the wrong link. You can try resubscribing.</p>
+      </div>
+    </div>
+  </div>
+  <div class="absolute left-0 top-0 z-50 py-2 pl-2 text-white hover:bg-yuika-blue-700 transition duration-300 ease-in-out flex flex-row items-center justify-center">
+    <a id="subscribe-back" href="#"><span class="h-12 w-12 px-2 py-3 text-white material-icons">arrow_back</span></a>
+  </div>
+</div>
+{{/if}}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 3b6b1c7..17c55b5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,13 +1,10 @@
 module.exports = {
-  purge: {
-    enabled: true,
-    content: [
-      './**/*.hbs',
-      './assets/**/*.js',
-      './assets/css/styles.css', // This file defines required styles for the Ghost editor
+  purge: [
+    './**/*.hbs',
+    './assets/**/*.js',
+    './assets/css/styles.css', // This file defines required styles for the Ghost editor
       // etc.
-    ],
-  },
+  ],
   theme: {
     extend: {
       colors: {
@@ -35,7 +32,7 @@ module.exports = {
       'body': ['"Exo 2"',' -apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
     }
   },
-  variants: ['responsive', 'group-hover', 'hover', 'active' ],
+  variants: ['responsive', 'group-hover', 'hover', 'active','focus' ],
   plugins: [
   ],
   future: {