Add blog subscription

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;

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();
+    }
+});

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"
     },

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}}

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: {