feat: support to pin articles (#50)

This feature can allow you to top articles via post front meta property `top`, the value is a number, the smaller the number is, the higher priority the article has. Example: ``` title: My Article top: <number> ```
jeffreytse · Aug 23, 2023 · 30437ac · 30437ac
1 parent f3d2a6f
commit 30437ac
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 115 deletions.
diff --git a/_includes/views/pagination-item.html b/_includes/views/pagination-item.html
@@ -0,0 +1,32 @@
+{%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
+
+{% assign article = post.content %}
+{% assign lang = post.lang %}
+{%- include functions.html func='get_reading_time' -%}
+{% assign reading_time = return %}
+{%- include functions.html func='get_article_excerpt' -%}
+{% assign excerpt = return %}
+{%- assign post_url = post.url | relative_url -%}
+
+<li class="{{ post_item_class }}">
+  <h2 class="post-title">
+    <a class="post-link" href="{{ post_url }}">
+      {{ post.title | escape }}
+      {%- include views/post-badges.html -%}
+    </a>
+  </h2>
+  <div class="post-meta">
+    <span class="post-date"><i class="fa fa-calendar"></i> {{ post.date | date: date_format }}</span>
+    <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
+  </div>
+  <a class="post-excerpt" href="{{ post_url }}">
+    <p>
+    {{ excerpt }} <span class="read_more">Read More</span>
+    </p>
+  </a>
+  <div class="post-tags">
+    {%- for tag in post.tags -%}
+    <a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a>
+    {%- endfor -%}
+  </div>
+</li>
diff --git a/_includes/views/pagination.html b/_includes/views/pagination.html
@@ -8,38 +8,24 @@
 <div class="pagination">
   <!-- Post list links -->
   <ul class="post-list">
-    {%- for post in paginator.posts -%}
-    <li>
-      {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
-
-      {% assign article = post.content %}
-      {% assign lang = post.lang %}
-      {%- include functions.html func='get_reading_time' -%}
-      {% assign reading_time = return %}
-      {%- include functions.html func='get_article_excerpt' -%}
-      {% assign excerpt = return %}
-      {%- assign post_url = post.url | relative_url -%}
+    <!-- Top list item -->
+    {%- if paginator == site or paginator.page == 1 -%}
+      {%- assign post_item_class = "top-post" -%}
+      {%- assign posts = site.posts
+        | where_exp: "item", "item.top > 0"
+        | sort: "top" -%}
+      {%- for post in posts -%}
+        {%- include views/pagination-item.html -%}
+      {%- endfor -%}
+    {%- endif -%}
 
-      <h2 class="post-title">
-        <a class="post-link" href="{{ post_url }}">
-          {{ post.title | escape }}
-        </a>
-      </h2>
-      <div class="post-meta">
-        <span class="post-date"><i class="fa fa-calendar"></i> {{ post.date | date: date_format }}</span>
-        <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
-      </div>
-      <a class="post-excerpt" href="{{ post_url }}">
-        <p>
-        {{ excerpt }} <span class="read_more">Read More</span>
-        </p>
-      </a>
-      <div class="post-tags">
-        {%- for tag in post.tags -%}
-        <a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a>
-        {%- endfor -%}
-      </div>
-    </li>
+    <!-- Normal list item -->
+    {%- assign post_item_class = "" -%}
+    {%- for post in paginator.posts -%}
+      {%- if post.top -%}
+        {%- continue -%}
+      {%- endif -%}
+      {%- include views/pagination-item.html -%}
     {%- endfor -%}
   </ul>
 

diff --git a/_includes/views/post-badges.html b/_includes/views/post-badges.html
@@ -0,0 +1,4 @@
+<span class="post-badges">
+  <span class="post-badge badge-top">TOP</span>
+  <span class="post-badge badge-new">NEW</span>
+</span>
diff --git a/_includes/views/post-item.html b/_includes/views/post-item.html
@@ -9,5 +9,6 @@
 <span>
   <a class="post-link" href="{{ post.url | relative_url }}">
     {{ post.title | escape }}
+    {%- include views/post-badges.html -%}
   </a>
 </span>
diff --git a/_includes/views/segments.html b/_includes/views/segments.html
@@ -13,7 +13,13 @@ <h2 id="{{ key }}" class="segment-name">{{ key }}</h2>
       {% assign items = site.posts | where: field, key %}
       {% for item in items %}
         {% if item != nil %}
-        <li> {% include views/post-item.html %} </li>
+          {%- assign post_item_class = "" -%}
+          {%- if item.top -%}
+            {%- assign post_item_class = "top-post" -%}
+          {%- endif -%}
+          <li class="{{ post_item_class }}">
+            {%- include views/post-item.html -%}
+          </li>
         {% endif %}
       {% endfor %}
     {% endfor %}

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -50,7 +50,18 @@
       <ul>
         {% assign posts = site[page.collection] | sample:4 %}
         {%- for post in posts -%}
-        <li><a class="post-link" href="{{post.url | relative_url}}" title="{{ page.next.title | escape }}">{{ post.title | escape | truncatewords: 12 }}</a></li>
+          {%- assign post_item_class = "" -%}
+          {%- if post.top -%}
+            {%- assign post_item_class = "top-post" -%}
+          {%- endif -%}
+        <li class="{{ post_item_class }}">
+          <a class="post-link"
+            href="{{ post.url | relative_url }}"
+            title="{{ post.title | escape }}">
+            {{ post.title | escape | truncatewords: 12 }}
+            {%- include views/post-badges.html -%}
+          </a>
+        </li>
         {%- endfor -%}
       </ul>
     </div>

diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss
@@ -101,16 +101,6 @@ html[data-theme="dark"]  {
   }
 
   .pagination {
-    .post-title {
-      a:visited:after {
-        background-color: $dark-background-color;
-      }
-
-      a:after {
-        color: $dark-background-color;
-      }
-    }
-
     .post-link {
       color: #bbb;
     }
@@ -135,14 +125,6 @@ html[data-theme="dark"]  {
       a {
         color: #ddd;
       }
-
-      a:visited:after {
-        background-color: $dark-background-color;
-      }
-
-      a:after {
-        color: $dark-background-color;
-      }
     }
   }
 
@@ -166,15 +148,6 @@ html[data-theme="dark"]  {
         color: #d7d7d7;
       }
 
-      a:visited:after {
-        color: $dark-background-color;
-        background-color: $dark-background-color;
-      }
-
-      a:after {
-        color: $dark-background-color;
-      }
-
       a:hover {
         color: #aaa;
       }
@@ -223,5 +196,14 @@ html[data-theme="dark"]  {
       }
     }
   }
+
+  a .post-badges .post-badge {
+    color: $dark-background-color !important;
+  }
+
+  a:visited .post-badges .post-badge.badge-new {
+    display: none;
+    background-color: $dark-background-color;
+  }
 }
 
diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss
@@ -285,25 +285,6 @@ html {
 
     a {
       text-decoration: none;
-
-      &:after {
-        content: 'NEW';
-        position: absolute;
-        margin-left: 8px;
-        margin-top: 3px;
-        padding: 0px 3px;
-        background-color: $brand-color;
-        color: #fff;
-        font-size: 10px;
-        font-weight: 600;
-        border-radius: 2px;
-        transition-duration: $base-transition-duration;
-      }
-
-      &:visited:after {
-        color: $background-color;
-        background-color: $background-color;
-      }
     }
   }
 
@@ -477,24 +458,6 @@ html {
       &:hover {
         color: darken($grey-color, 50%);
       }
-
-      &:after {
-        content: 'NEW';
-        position: absolute;
-        margin-left: 8px;
-        margin-top: 3px;
-        padding: 0px 3px;
-        background-color: $brand-color;
-        color: $background-color;
-        font-size: 10px;
-        font-weight: 600;
-        border-radius: 2px;
-      }
-
-      &:visited:after {
-        color: $background-color;
-        background-color: $background-color;
-      }
     }
   }
 }
@@ -503,7 +466,6 @@ html {
   padding-top: 25px;
 }
 
-
 /**
  * Posts misc
  */
@@ -754,23 +716,6 @@ html {
     &:hover {
       color: #000;
     }
-
-    &:after {
-      content: 'NEW';
-      position: absolute;
-      margin-left: 8px;
-      margin-top: 3px;
-      padding: 0px 3px;
-      background-color: $brand-color;
-      color: #fff;
-      font-size: 10px;
-      font-weight: 600;
-      border-radius: 2px;
-    }
-
-    &:visited:after {
-      background-color: #fff;
-    }
   }
 }
 
@@ -783,3 +728,51 @@ html {
   background-color: #e3e3e3e3;
   vertical-align: baseline;
 }
+
+/**
+ * Post badge
+ */
+.post-badges {
+  display: inline-block;
+  position: relative;
+  margin-left: 8px;
+  margin-top: 3px;
+  user-select: none;
+}
+
+.pagination .post-badges {
+  bottom: 0.5em;
+}
+
+.post-related .post-badges {
+  bottom: 0.1em;
+}
+
+.page-segments .post-badges {
+  bottom: 0.1em;
+}
+
+.post-badge {
+  display: none;
+  padding: 0px 3px;
+  background-color: $brand-color;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  border-radius: 2px;
+  transition-duration: $base-transition-duration;
+}
+
+.post-badge.badge-new {
+  display: inline-block;
+}
+
+.top-post .post-badges .post-badge.badge-top {
+  display: inline-block;
+}
+
+a:visited .post-badges .post-badge.badge-new {
+  display: none;
+  color: $background-color;
+  background-color: $background-color;
+}