fix: article.njk — unpublish posts are showing up (#281)

fix: `article.njk` — unpublish posts are showing up

Author: EmptyWork

src/_includes/layouts/article.njk

@@ -2,36 +2,46 @@
 layout: 'layouts/secondary.njk'
 style: 'article.css'
 ---
+
 {% set previousPost = collections.post | getPreviousCollectionItem(page) %}
 {% set nextPost = collections.post | getNextCollectionItem(page) %}
-
 <header class="header header_article">
-  <img width="1920" height="1080" loading="lazy" src="{{ image }}" alt="{{ title }}">
+  <img width="1920"
+       height="1080"
+       loading="lazy"
+       src="{{ image }}"
+       alt="{{ title }}">
 </header>
 <main class="main">
   <div class="main-container">
     <article class="article">
       <header>
         <span>
           <a class="breadcrumb" href="/">Home</a> ›
-          <a class="breadcrumb" href="/blog">Blog</a> › {{ title }}
+          <a class="breadcrumb" href="/blog">Blog</a> › <span aria-current="page">{{ title }}</span>
         </span>
         <h1 class="article-title" id="{{ title | slug }}">{{ title }}</h1>
         <p class="article-summary">{{ description }}</p>
         <div class="article-detail_list article-flex_list">
           <div class="article-detail_item">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-              stroke="currentColor" class="article-detail_item_svg">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 fill="none"
+                 viewBox="0 0 24 24"
+                 stroke-width="1.5"
+                 stroke="currentColor"
+                 class="article-detail_item_svg">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
             </svg>
             {{ author }}
           </div>
           <div class="article-detail_item">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-              stroke="currentColor" class="article-detail_item_svg">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 fill="none"
+                 viewBox="0 0 24 24"
+                 stroke-width="1.5"
+                 stroke="currentColor"
+                 class="article-detail_item_svg">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
             </svg>
             <time datetime="{{ date | htmlDateString }}">{{ date | postDate }}</time>
           </div>
@@ -41,21 +51,36 @@ style: 'article.css'
         {{ content | safe }}
       </main>
       <section class="more">
-        {% if nextPost %}
-        <div class="more-next">
-          ← Next Post<br /> <a href="{{ nextPost.url }}">{{ nextPost.data.title }}
-          </a>
-        </div>
+        {% if not nextPost.data.draft and nextPost %}
+          <div class="more-next">
+            ← Next Post
+            <br />
+            <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a>
+          </div>
         {% endif %}
-        {% if previousPost %}
-        <div class="more-previous">
-          Previous Post →<br /> <a href="{{ previousPost.url }}">{{ previousPost.data.title }}
-          </a>
-        </div>
+        {% if nextPost and isDevelopment and nextPost.data.draft %}
+          <div class="more-next">
+            ← Next Post <i>(Draft)</i>
+            <br />
+            <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a>
+          </div>
+        {% endif %}
+        {% if not previousPost.data.draft and previousPost %}
+          <div class="more-previous">
+            Previous Post →
+            <br />
+            <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a>
+          </div>
+        {% endif %}
+        {% if previousPost and isDevelopment and previousPost.data.draft %}
+          <div class="more-next">
+            Previous Post <i>(Draft)</i> →
+            <br />
+            <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a>
+          </div>
         {% endif %}
       </section>
     </article>
   </div>
 </main>
-
-<script src="/js/blog.js"></script>
+<script src="/js/blog.js"></script>