feat: enable posts to be starred (#223)

* feat(starr-posts): add check if post got starred

If isStarred: true in a posts front matter, the star SVG will be rendered for this post in the list of posts.

* feat(starr-posts): add CSS to display a star icon for a starred post in the list of posts

* feat(starr-posts): add optional front matter config isStarred to default archetypes

If isStarred is not specified or set to false in a posts front matter, no star icon will appear.

* feat(starr-posts): add new optional isStarred config to en-us Markdown Syntax Guide example site

To demo the new optional feature, the config isStarred was added to an example post which will be rendered as soon as someone uses the theme for the first time (because en-us is the default language).

archetypes/default.md

@@ -3,5 +3,6 @@ title:
 date: {{ .Date }}
 draft: true
 description:
+isStarred: false
 ---
 

assets/sass/_listpage.scss

@@ -1,3 +1,16 @@
 .list-page .post-year {
     padding-bottom: .5rem;
+}
+
+.icon-star {
+  color: orange;
+  height: 16px;
+  margin-right: 1rem;
+  width: 16px;
+  display: block;
+}
+
+.post-item-right {
+  margin-left: auto;
+  margin-right: 0;
 }

exampleSite/content/en/posts/markdown-syntax/index.md

@@ -3,6 +3,7 @@ title: Markdown Syntax Guide
 date: 2023-02-11
 author: Hugo Authors
 description: Sample article showcasing basic Markdown syntax and formatting for HTML elements.
+isStarred: true
 ---
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

layouts/partials/postCard.html

@@ -5,6 +5,11 @@ <h4 class="post-item-title">
     {{/* format date string to create an ISO 8601 string */}}
     {{ $ISO_date := "2006-01-02T15:04:05Z0700" }}
     {{ $configDateFormat := .Site.Params.dateFormat | default "2 Jan 2006" }}
+    {{ if .Params.isStarred }}
+    <div class="post-item-right">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="icon-star"><path d="M16 23.027L24.24 28l-2.187-9.373 7.28-6.307-9.587-.827-3.747-8.827-3.747 8.827-9.587.827 7.267 6.307L7.759 28l8.24-4.973z"></path></svg>
+    </div>
+    {{ end }}
     <time class="post-item-meta" datetime="{{ dateFormat $ISO_date .Date }}">
         {{ time.Format $configDateFormat .Date }}
         {{/* OLD FORMAT: .Date.Format $configDateFormat */}}