Comments

assets/css/styles.css

@@ -12,7 +12,12 @@ html {
 header {
   @apply py-4;
 }
-
+header a:hover {
+  @apply no-underline;
+}
+a:hover {
+  @apply underline;
+}
 /* 2. Site Header */
 .index-navbar {
   top: 0;
@@ -242,11 +247,14 @@ footer {
 }
 .nav li.separator {
   height: 0;
-  @apply border border-white;
+  @apply border border-white border-t opacity-75;
 }
 .nav li a {
   @apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
 }
+.nav li a:hover {
+  @apply no-underline;
+}
 .nav li:hover {
   @apply bg-yuika-blue-500 transition duration-300 ease-in-out;
 }

members/account.hbs

@@ -0,0 +1,50 @@
+{{!< ../default}}
+
+
+{{#unless @member}}
+<script>window.location = '{{@site.url}}';</script>
+{{/unless}}
+<div class="relative group index-header">
+  {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
+    <div class="w-full 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 class="text-white">
+        <div>
+            {{#if @member}}
+            <div class="flex flex-row items-center mb-2">
+                {{#if @member.avatar_image}} 
+                <img class="author-image" src="{{@member.avatar_image}}" alt="{{@member.email}}" />
+                {{/if}}
+            <p class="text-white text-2xl md:text-4xl ml-4">{{@member.email}}</p>
+            </div>
+            {{/if}}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<article class="post-article">
+<main class="content container" id="post">
+  <div class="content-full">
+    {{#if @member.paid}}
+    {{else if @member}}
+        <h1 class="text-2xl">You are subscribed to updates</h1>
+        <p>You are currently subscribed to updates from <strong>{{@site.title}}</strong>.</p>
+    {{else}}
+    {{/if}}
+  </div>
+</main>
+{{#contentFor "scripts"}}
+<script>
+$(document).ready(function () {
+        // FitVids - start
+        var $postContent = $("#post");
+        $postContent.fitVids();
+        // FitVids - end
+});
+</script>
+{{/contentFor}}

members/signin.hbs

@@ -0,0 +1,58 @@
+{{!< ../default}}
+
+
+{{#if @member}}
+<script>window.location = '{{@site.url}}';</script>
+{{/if}}
+<div class="relative group index-header large">
+  {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
+    <div class="w-full h-full opacity-50 bg-black">
+    </div>
+  </div>
+  <div class="absolute left-0 right-0 top-0 bottom-0 flex flex-row items-center justify-center">
+   <div class="container mx-auto content-full">
+    <div class="text-white">
+      <div id="subscribe-form">
+        <h1 class="text-2xl">Welcome back!</h1>
+        <p>Sign into your account again for full access</p>
+        <form id="subscribe-form" data-members-form="signin">
+          <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 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">
+            Send login link
+          </button>
+          <div class="pt-4">
+            <div class="message-success">
+              <p>Please check your email inbox to complete sign in.</p>
+            </div>
+            <div class="message-error">
+              <p>Please enter a valid email address!</p>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+   </div>
+  </div>
+</div>
+
+<article class="post-article">
+<main class="content container" id="post">
+  <div class="content-full">
+    {{#post}}
+    {{content}}
+    {{/post}}
+  </div>
+</main>
+{{#contentFor "scripts"}}
+<script>
+$(document).ready(function () {
+        // FitVids - start
+        var $postContent = $("#post");
+        $postContent.fitVids();
+        // FitVids - end
+});
+</script>
+{{/contentFor}}

members/signup.hbs

@@ -0,0 +1,108 @@
+{{!< ../default}} <div class="relative group index-header large">
+  {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background
+  image--}}
+  <div class="w-full h-full opacity-50 bg-black">
+  </div>
+  </div>
+  <div class="absolute left-0 right-0 top-4 bottom-0 flex flex-row items-center justify-center">
+    <div class="container mx-auto content-full">
+      <div class="text-white">
+        <div>
+          {{#if @member.paid}}
+          {{!-- Logged in, paying member: Redirect home --}}
+          <script>window.location = '{{@site.url}}';</script>
+          {{else if @member}}
+          <h1 class="text-2xl md:text-4xl">
+            Join The Damillora Network
+          </h1>
+          <p class="text-lg md:text-xl">Become an Autonomous System member</p>
+          <p>By subscribing as an Autonomous System, you can get additional benefits and support me at the same time!
+          </p>
+
+          {{else}}
+          <h1 class="text-2xl md:text-4xl">Subscribe to {{@site.title}}</h1>
+          <p>Get the latest posts delivered straight to your inbox.</p>
+          <form id="subscribe-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>
+            <div class="message-success">
+              <p>Please check your email inbox to confirm your subscription!</p>
+            </div>
+            <div class="message-error">
+              <p>Please enter a valid email address!</p>
+            </div>
+          </form>
+          {{/if}}
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+
+  <article class="post-article">
+    <main class="content container" id="post">
+      <div class="content-full">
+        {{#if @member}}
+        <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>
+            <ul class="text-center pt-4 list-disc md:h-64">
+              <li><strong>Autonomous System</strong> role in <a href="//nanao.moe/discord">The Network Discord
+                  server</a>.</li>
+              <li><strong>Full access to posts</strong> in <a href="{{@site.url}}">{{@site.title}}</a>, including
+                members-only posts!</li>
+              <li><strong>Access to exclusive content</strong> in <a href="//nanao.moe/channel">my YouTube channel</a>.
+              </li>
+              <li><strong>Help shape the future</strong> of my content!</li>
+              <li><strong>More</strong> coming soon!</li>
+            </ul>
+            <p class="text-xl md:text-2xl text-center pt-4">
+              <span class="uppercase">{{@price.currency}}</span> <strong>{{@price.monthly}}</strong>
+            </p>
+            <div class="flex justify-center pt-2">
+              <a class="px-4 py-2  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 text-white"
+                href="javascript:" data-members-plan="Monthly">Choose this plan</a>
+            </div>
+          </div>
+          <div class="md:w-1/2 md:pl-4">
+            <h2 class="text-xl md:text-2xl text-center">Yearly</h2>
+            <ul class="text-center pt-4 list-disc md:h-64">
+              <li><strong>Everything</strong> in the Monthly plan.</li>
+              <li><strong>Two months</strong> free!</li>
+              <li><strong>More</strong> coming soon!</li>
+            </ul>
+            <p class="text-xl md:text-2xl text-center pt-4">
+              <span class="uppercase">{{@price.currency}}</span> <strong>{{@price.yearly}}</strong>
+            </p>
+            <div class="flex justify-center pt-2">
+              <a class="px-4 py-2 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 text-white"
+                href="javascript:" data-members-plan="Yearly">Choose this plan</a>
+            </div>
+          </div>
+        </div>
+        {{else}}
+        {{#page}}
+        {{content}}
+        {{/page}}
+        {{/if}}
+      </div>
+    </main>
+  </article>
+  {{#contentFor "scripts"}}
+  <script>
+    $(document).ready(function () {
+      // FitVids - start
+      var $postContent = $("#post");
+      $postContent.fitVids();
+      // FitVids - end
+    });
+  </script>
+  {{/contentFor}}

package.json

@@ -1,7 +1,7 @@
 {
     "name": "yuika",
     "description": "nanao.moe's blog theme",
-    "version": "2.8.0",
+    "version": "2.8.1",
     "engines": {
         "ghost-api": "v3"
     },

pages/exclude.hbs

@@ -0,0 +1,77 @@
+{{!< ../default}}
+  <div class="relative group index-header large">
+    {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the
+    background image--}}
+    <div class="w-full h-full opacity-50 bg-black">
+    </div>
+  </div>
+  <div class="absolute left-0 right-0 top-0 bottom-0 flex flex-row items-center justify-center">
+    <div class="container mx-auto content-full">
+      <div class="text-white">
+        <div id="subscribe-form">
+          <div>
+            <h1 class="text-2xl md:text-4xl">Plausible Exclude</h1>
+            <p>Click the button below to toggle your exclusion in analytics for this
+              site</p>
+            <p></p>You currently <span id="plausible_not">are not</span><span id="plausible_yes">are</span>
+              excluding your visits.</p>
+            <div class="py-4">
+              <a 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" href="javascript:toggleExclusion()">Exclude my visits</a>
+            </div>
+          </div>
+
+          <script>
+            window.addEventListener('load', function (e) {
+              var exclusionState = window.localStorage.plausible_ignore == "true"
+
+              if (exclusionState) {
+                document.getElementById("plausible_not").style.display = "none"
+                document.getElementById("plausible_yes").style.display = "inline"
+                document.getElementById("plausible_button").innerHTML = 'Stop excluding my visits'
+              } else {
+                document.getElementById("plausible_yes").style.display = "none"
+                document.getElementById("plausible_not").style.display = "inline"
+                document.getElementById("plausible_button").innerHTML = 'Exclude my visits'
+              }
+            });
+
+            function toggleExclusion(e) {
+              var exclusionState = window.localStorage.plausible_ignore == "true"
+
+              if (exclusionState) {
+                delete window.localStorage.plausible_ignore
+                document.getElementById("plausible_yes").style.display = "none"
+                document.getElementById("plausible_not").style.display = "inline"
+                document.getElementById("plausible_button").innerHTML = 'Exclude my visits'
+              } else {
+                window.localStorage.plausible_ignore = "true"
+                document.getElementById("plausible_not").style.display = "none"
+                document.getElementById("plausible_yes").style.display = "inline"
+                document.getElementById("plausible_button").innerHTML = 'Stop excluding my visits'
+              }
+            }
+          </script>
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+
+  <article class="post-article">
+    <main class="content container" id="post">
+      <div class="content-full">
+        {{#post}}
+        {{content}}
+        {{/post}}
+      </div>
+    </main>
+    {{#contentFor "scripts"}}
+    <script>
+      $(document).ready(function () {
+        // FitVids - start
+        var $postContent = $("#post");
+        $postContent.fitVids();
+        // FitVids - end
+      });
+    </script>
+    {{/contentFor}}

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,15 +1,28 @@
-
 {{#if primary_tag}}
 {{#primary_tag}}
-      <p>
-        <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}}
-          {{/if}}
-          <span class="text-base text-white hover:underline">{{name}}</span>
-        </a>
-      </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}}
+    {{/if}}
+    <span class="text-base text-white hover:underline">{{name}}</span>
+  </a>
+</div>
 {{/primary_tag}}
-{{/if}}
+{{/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}}

partials/site-header.hbs

@@ -17,6 +17,30 @@
         </div>
       </div>
       <div class="nav-group">
+        <ul class="nav">
+        {{#if @member}}
+          {{#unless @member.paid}}
+          <li>
+            <a href="{{@site.url}}/subscribe/">Join The Damillora Network</a>
+          </li>
+            <li class="separator"></li>
+          {{/unless}}
+          <li>
+            <a href="{{@site.url}}/account/">{{@member.email}}</a>
+           </li>
+          <li>
+            <a href="#signout" data-members-signout>Sign out</a>
+          </li>
+        {{else}}
+          <li>
+            <a href="{{@site.url}}/signin/">Sign in</a>
+          </li>
+          <li>
+            <a href="{{@site.url}}/subscribe/">Subscribe</a>
+          </li>
+        {{/if}}
+          <li class="separator"></li>
+        </ul>
         {{navigation}}
       </div>
     </header>

post.hbs

@@ -1,32 +1,31 @@
-{{!< default}}
-
-{{#post}}
-<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>
+{{!< default}} {{#post}} <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">
           {{#foreach authors}}
-            {{#if profile_image}}
-              <div class="h-8 ml-1 mr-3">
-                <a href="{{url}}">
-                  <img class="h-full rounded-full" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/>
-                </a>
-              </div>
-            {{/if}}
+          {{#if profile_image}}
+          <div class="h-8 ml-1 mr-3">
+            <a href="{{url}}">
+              <img class="h-full rounded-full" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
+            </a>
+          </div>
+          {{/if}}
           {{/foreach}}
         </div>
         <div class="author-names">
@@ -37,35 +36,64 @@
       </div>
     </div>
   </div>
-</div>
-
-<article class="post-article">
-<main class="content container" id="post">
-  <div class="content-full">
-    {{content}}
   </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">
-        <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>
-          <p>{{title}}</p>
+
+  <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>
-      </a>
-      {{/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">
-        <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>
-        </div>
-        <span class="material-icons ml-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_forward</span>
-      </a>
-      {{/next_post}}
+        {{/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 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>
+            <p>{{title}}</p>
+          </div>
+        </a>
+        {{/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 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>
+          </div>
+          <span class="material-icons ml-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_forward</span>
+        </a>
+        {{/next_post}}
+      </div>
     </div>
 </div>
 <div class="my-4 w-full content-full">
@@ -74,48 +102,70 @@
       <p>Comments are disabled for post previews</p>
       {{else}}
       {{!-- Comments  --}}
-        
+<div id="coral_thread"></div>
+<script type="text/javascript">
+  (function() {
+      var d = document, s = d.createElement('script');
+      s.src = 'https://comments.nanao.moe/assets/js/embed.js';
+      s.async = false;
+      s.defer = true;
+      s.onload = function() {
+          Coral.createStreamEmbed({
+              id: "coral_thread",
+              autoRender: true,
+              rootURL: 'https://comments.nanao.moe',
+              // Uncomment these lines and replace with the ID of the
+              // story's ID and URL from your CMS to provide the
+              // tightest integration. Refer to our documentation at
+              // https://docs.coralproject.net for all the configuration
+              // options.
+              // storyID: '${storyID}',
+              // storyURL: '${storyURL}',
+          });
+      };
+      (d.head || d.body).appendChild(s);
+  })();
+</script>        
       {{/is}}
     </div>
-</div>
-<div class="mx-auto px-4 my-4 w-full">
-            {{#if primary_tag}}
-              {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
-                {{#if related_posts}}
-                  {{#../primary_tag}}
-                      <div class="px-3 w-full">
-                        <p class="text-2xl">
-                          More in 
-                          <a href="{{url}}">
-                            {{#if accent_color}} 
-                            <span class="tag-accent-color medium" style="background-color: {{accent_color}};"></span>
-                            {{else}}
-                            <span class="tag-accent-color medium"></span>{{name}}
-                            {{/if}}
-                            <span class="hover:underline">{{name}}</span>
-                          </a>
-                        </p>
-                      </div>
-                  {{/../primary_tag}}
-                  <div class="grid grid-rows-3 grid-cols-1 row-gap-4 my-4">
-                  {{#foreach related_posts}}
-                    {{> post-card}}
-                  {{/foreach}}
-                  </div>
-                {{/if}}
-              {{/get}}
+    <div class="mx-auto px-4 my-4 w-full">
+      {{#if primary_tag}}
+      {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
+      {{#if related_posts}}
+      {{#../primary_tag}}
+      <div class="px-3 w-full">
+        <p class="text-2xl">
+          More in
+          <a href="{{url}}">
+            {{#if accent_color}}
+            <span class="tag-accent-color medium" style="background-color: {{accent_color}};"></span>
+            {{else}}
+            <span class="tag-accent-color medium"></span>{{name}}
             {{/if}}
-</div>
-{{/post}}
-</article>
+            <span class="hover:underline">{{name}}</span>
+          </a>
+        </p>
+      </div>
+      {{/../primary_tag}}
+      <div class="grid grid-rows-3 grid-cols-1 row-gap-4 my-4">
+        {{#foreach related_posts}}
+        {{> post-card}}
+        {{/foreach}}
+      </div>
+      {{/if}}
+      {{/get}}
+      {{/if}}
+    </div>
+    {{/post}}
+  </article>
 
-{{#contentFor "scripts"}}
-<script>
-$(document).ready(function () {
-        // FitVids - start
-        var $postContent = $("#post");
-        $postContent.fitVids();
-        // FitVids - end
-});
-</script>
-{{/contentFor}}
+  {{#contentFor "scripts"}}
+  <script>
+    $(document).ready(function () {
+      // FitVids - start
+      var $postContent = $("#post");
+      $postContent.fitVids();
+      // FitVids - end
+    });
+  </script>
+  {{/contentFor}}