Feat/style and publish front matter summary in article (#402)

* feat: enable summaries in list pages

* feat: publish front matter summary in articles

* blog: add front matter summary to article as demo

Author: f-hollow

assets/css/custom.css

@@ -19,3 +19,9 @@
    li {
   line-height: 1.65;
 }
+
+.article-summary {
+  font-style: italic;
+  padding-left: 10px;
+  border-left: 4px solid #e7352c;
+}

config/_default/params.toml

@@ -87,7 +87,7 @@ smartTOCHideUnfocusedChildren = false
   layoutBackgroundBlur = true # only used when heroStyle equals background
   layoutBackgroundHeaderSpace = false
   showBreadcrumbs = false
-  showSummary = false
+  showSummary = true
   showViews = true
   showLikes = true
   showTableOfContents = true

content/blog/meet-espressif-developer-portal/index.md

@@ -5,9 +5,11 @@ showAuthor: false
 featureAsset: "img/featured/featured-espressif.webp"
 authors:
   - "kirill-chalov"
+summary: "This article introduces the Espressif Developer Portal, discusses its purpose, the expected content, and how we--the community---can contribute and collaborate."
+tags: ["Espressif", "News", "Announcement", "Community", "Contribute"]
 ---
 
-This post covers the following:
+We will explore the following topics:
 
 - [Motives](#motives) for creating the portal
 - [Goals](#goals) to be achieved with the portal

layouts/_default/single.html

@@ -74,6 +74,12 @@ <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
 
       <div class="min-w-0 min-h-0 max-w-fit">
 
+        {{ if .Params.summary }}
+          <div class="article-summary max-w-prose mb-30">
+            {{ .Summary | emojify }}
+          </div>
+        {{ end }}
+
         <div class="article-content max-w-prose mb-20">
           {{ .Content | emojify }}
         </div>