refactor: improve pr-1602

_includes/post-description.html

@@ -3,8 +3,9 @@
 {% endcomment %}
 
 {% assign max_length = include.max_length | default: 200 %}
+
 {% if post.description %}
-  {{ post.description | strip | truncate: max_length | escape }}
+  {{ post.description | strip | truncate: max_length }}
 {% else %}
   {% include no-linenos.html content=post.content %}
   {{ content | markdownify | strip_html | truncate: max_length | escape }}

_includes/related-posts.html

@@ -81,9 +81,7 @@ <h3 class="mb-4" id="related-label">
               {% include datetime.html date=post.date lang=include.lang %}
               <h4 class="pt-0 my-2">{{ post.title }}</h4>
               <div class="text-muted">
-                <p>
-                  {% include post-description.html max_length=200 %}
-                </p>
+                <p>{% include post-description.html %}</p>
               </div>
             </div>
           </a>

_layouts/home.html

@@ -2,6 +2,7 @@
 layout: default
 refactor: true
 ---
+
 {% include lang.html %}
 
 {% assign pinned = site.posts | where: 'pin', 'true' %}
@@ -71,9 +72,7 @@
             <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
 
             <div class="card-text content mt-0 mb-3">
-              <p>
-                {% include post-description.html max_length=300 %}
-              </p>
+              <p>{% include post-description.html %}</p>
             </div>
 
             <div class="post-meta flex-grow-1 d-flex align-items-end">

_layouts/post.html

@@ -14,6 +14,9 @@
 <article class="px-1">
   <header>
     <h1 data-toc-skip>{{ page.title }}</h1>
+    {% if page.description %}
+      <p class="lh-base mb-4">{{ page.description }}</p>
+    {% endif %}
 
     <div class="post-meta text-muted">
       <!-- published date -->

_posts/2019-08-08-text-and-typography.md

@@ -1,6 +1,6 @@
 ---
 title: Text and Typography
-description: See markdown syntax rendering on Chirpy, so you can use it as an example of writing.
+description: Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.
 author: cotes
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
@@ -14,8 +14,6 @@ image:
   alt: Responsive rendering of Chirpy theme on multiple devices.
 ---
 
-This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
-
 ## Headings
 
 <!-- markdownlint-capture -->

_posts/2019-08-08-write-a-new-post.md

@@ -1,6 +1,5 @@
 ---
 title: Writing a New Post
-description: This tutorial will guide you how to write a post in the Chirpy template.
 author: cotes
 date: 2019-08-08 14:10:00 +0800
 categories: [Blogging, Tutorial]
@@ -74,17 +73,18 @@ Having said that, the key `author` can also identify multiple entries.
 > The benefit of reading the author information from the file `_data/authors.yml`{: .filepath } is that the page will have the meta tag `twitter:creator`, which enriches the [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution) and is good for SEO.
 {: .prompt-info }
 
-### Post description
+### Post Description
 
-The `description` field is optional. If it isn't defined, the first words of the post are used to display on the `Home` page for a list of posts, in the `Further Reading` section, and in the XML of the RSS feed. If you don't want to display the auto-generated description for the post, you can customize it using the `description` field in the `Front Matter` as follows:
+By default, the first words of the post are used to display on the home page for a list of posts, in the _Further Reading_ section, and in the XML of the RSS feed. If you don't want to display the auto-generated description for the post, you can customize it using the `description` field in the _Front Matter_ as follows:
 
 ```yaml
 ---
-title: Post title
-description: Short summary of the post
+description: Short summary of the post.
 ---
 ```
 
+Additionally, the `description` text will also be displayed under the post title on the post's page.
+
 ## Table of Contents
 
 By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml`{: .filepath} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/):

_posts/2019-08-09-getting-started.md

@@ -1,6 +1,8 @@
 ---
 title: Getting Started
-description: A quick start guide to help you get started with Chirpy.
+description: >-
+  Get started with Chirpy basics in this comprehensive overview.
+  You'll learn how to install, use, and host your first Chirpy-based website on a web server.
 author: cotes
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]

_posts/2019-08-11-customize-the-favicon.md

@@ -1,6 +1,5 @@
 ---
 title: Customize the Favicon
-description: How to customize the favicon of Chirpy.
 author: cotes
 date: 2019-08-11 00:34:00 +0800
 categories: [Blogging, Tutorial]

_sass/layout/post.scss

@@ -14,19 +14,26 @@
   padding-right: $pr;
 }
 
-h1 + .post-meta {
-  span + span::before {
-    @include dot;
+header {
+  p {
+    font-family: $font-family-heading;
+    font-size: 1.1rem;
   }
 
-  em,
-  time {
-    @extend %text-highlight;
-  }
+  .post-meta {
+    span + span::before {
+      @include dot;
+    }
 
-  em {
-    a {
-      color: inherit;
+    em,
+    time {
+      @extend %text-highlight;
+    }
+
+    em {
+      a {
+        color: inherit;
+      }
     }
   }
 }

assets/feed.xml

@@ -45,7 +45,7 @@ permalink: /feed.xml
     {% endfor %}
   {% endif %}
 
-  <summary>{% include post-description.html max_length=1000 %}</summary>
+  <summary>{% include post-description.html max_length=400 %}</summary>
 
   </entry>
 {% endfor %}