Add paid content handling

assets/css/styles.css

@@ -12,6 +12,9 @@ html {
 header {
   @apply py-4;
 }
+header a:hover {
+  @apply no-underline;
+}
 a:hover {
   @apply underline;
 }

members/signup.hbs

@@ -50,7 +50,7 @@
     <main class="content container" id="post">
       <div class="content-full">
         {{#if @member}}
-        <h1 class="text-red-500">Access restricted. Required infrastructure not yet in place.</h1>
+        <h1 class="text-red-500">Access disabled. Required infrastructure not yet in place.</h1>
         <div class="md:flex md:flex-row pointer-events-none opacity-50">
           <div class="md:w-1/2 md:pr-4">
             <h2 class="text-xl md:text-2xl text-center">Monthly</h2>

partials/post-card.hbs

@@ -4,21 +4,35 @@
       {{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
     </a>
     <div class="md:pl-4">
-      <div class="pt-4 md:pt-0">
+      <div class="pt-4 md:pt-0 flex flex-row">
       {{#if primary_tag}}
       {{#primary_tag}}
-      <p>
+      <div class="pr-2">
         <a href="{{url}}">
           {{#if accent_color}} 
           <span class="tag-accent-color small" style="background-color: {{accent_color}};"></span>
           {{else}}
-          <span class="tag-accent-color small"></span>{{name}}
+          <span class="tag-accent-color small"></span>
           {{/if}}
           <span class="text-sm hover:underline">{{name}}</span>
         </a>
-      </p>
+      </div>
       {{/primary_tag}}
       {{/if}}
+      {{#has visibility="paid"}}
+      <div class="pr-2">
+        <a href="/subscribe">
+          <span class="text-sm text-red-700 hover:underline">Autonomous Systems only</span>
+        </a>
+      </div>
+      {{/has}}
+      {{#has visibility="members"}}
+      <div class="pr-2">
+        <a href="/subscribe">
+          <span class="text-sm text-yuika-blue-700 hover:underline">Subscribers only</span>
+        </a>
+      </div>
+      {{/has}}
       </div>
       <div class="mt-0 text-yuika-blue-700 hover:underline transition duration-500 ease-in-out">
         <a href="{{url}}"><h1 class="text-xl md:text-2xl font-light">{{title}}</h1></a>

partials/primary-tag.hbs

@@ -1,7 +1,6 @@
-
 {{#if primary_tag}}
 {{#primary_tag}}
-      <p>
+<div class="pr-2">
   <a href="{{url}}">
     {{#if accent_color}}
     <span class="tag-accent-color small" style="background-color: {{accent_color}};"></span>
@@ -10,6 +9,20 @@
     {{/if}}
     <span class="text-base text-white hover:underline">{{name}}</span>
   </a>
-      </p>
+</div>
 {{/primary_tag}}
 {{/if}}
+{{#has visibility="paid"}}
+<div class="pr-2">
+  <a href="/subscribe">
+    <span class="text-sm text-red-200 hover:underline">Autonomous Systems only</span>
+  </a>
+</div>
+{{/has}}
+{{#has visibility="members"}}
+<div class="pr-2">
+  <a href="/subscribe">
+    <span class="text-sm text-yuika-blue-200 hover:underline">Subscribers only</span>
+  </a>
+</div>
+{{/has}}

post.hbs

@@ -1,21 +1,20 @@
-{{!< default}}
+{{!< default}} {{#post}} <div class="relative group index-header">
-
+  {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background
-{{#post}}
+  image--}}
-<div class="relative group index-header">
-  {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
   <div class="h-full opacity-50 bg-black">
   </div>
   </div>
   <div class="absolute bottom-0 py-4 left-0 right-0">
     <div class="container mx-auto content-full">
-      <div>
+      <div class="flex">
         {{> primary-tag}}
       </div>
       <div>
         <h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
       </div>
       <div class="mb-4">
-        <p><span class="text-white text-sm"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span></p>
+        <p><span class="text-white text-sm"><time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
+              YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span></p>
       </div>
       <div class="author-list text-base text-white">
         <div class="author-images">
@@ -42,13 +41,40 @@
   <article class="post-article">
     <main class="content container" id="post">
       <div class="content-full">
+        {{#if access}}
         {{content}}
+        {{else}}
+        <div class="w-full py-8 text-center bg-yuika-blue-700 text-white md:px-8">
+          <h1>Access level insufficient</h1>
+          {{#has visibility="paid"}}
+          <h2>Access level: Autonomous System</h2>
+          <p>By subscribing as an Autonomous System, you can unlock access to the contents of this post, get additional benefits and support me at the same time!</p>
+          <div class="flex justify-center">
+            <a class="px-4 py-2 bg-white border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out"
+              href="/subscribe">
+              Become a member now
+            </a>
+          </div>
+          {{/has}}
+          {{#has visibility="members"}}
+          <h2>Access level: Subscriber</h2>
+          <p>Subscribing gives you access to the contents of this post, and get notified on subsequent posts!</p>
+          <div class="flex justify-center">
+            <a class="px-4 py-2 bg-white border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out"
+              href="/subscribe">
+              Subscribe now 
+            </a>
+          </div>
+          {{/has}}
+        </div>
+        {{/if}}
       </div>
     </main>
     <div class="my-4 w-full content-full">
       <div class="flex flex-col md:flex-row justify-between">
         {{#prev_post}}
-      <a href="{{url}}" class="block w-full md:w-1/3 flex flex-row items-center justify-start md:justify-end hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4">
+        <a href="{{url}}"
+          class="block w-full md:w-1/3 flex flex-row items-center justify-start md:justify-end hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4 hover:no-underline">
           <span class="material-icons mr-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_back</span>
           <div class="flex flex-col items-start md:items-end ">
             <p class="text-xl text-yuika-blue-700 group-hover:text-white">Previous post</p>
@@ -58,7 +84,8 @@
         {{/prev_post}}
         <div class="flex flex-grow"></div>
         {{#next_post}}
-      <a href="{{url}}" class="block w-full md:w-1/3 flex flex-row items-center justify-end md:justify-start hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4">
+        <a href="{{url}}"
+          class="block w-full md:w-1/3 flex flex-row items-center justify-end md:justify-start hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4 hover:no-underline">
           <div class="flex flex-col items-end md:items-start">
             <p class="text-xl text-yuika-blue-700 group-hover:text-white">Next post</p>
             <p>{{title}}</p>