Add post pinning

README.md

@@ -175,19 +175,43 @@ build:
 ---
 ```
 
-### Page images
+### Posts
 
-You can embed images to normal pages either with the markdown syntax or a more flexible shortcode.
+#### Pinned posts
 
-#### Markdown
+You can pin posts to the home page carousel by setting `pinned: true` in the front matter of a post:
+
+```yaml
+---
+title: "Post title"
+date: 2024-08-18
+summary: "Short summary."
+params:
+  pinned: true
+---
+```
+
+You can optionally set `pinnedUntil` to a date. The post will be pinned in Hugo builds until that date, but not after. If you set `pinnedUntil` as date without hours and minutes, the post will be unpinned starting from that date.
+
+```yaml
+params:
+  pinned: true
+  pinnedUntil: 2024-09-18
+```
+
+#### Photos
+
+You can embed images to normal pages either with the markdown syntax or a more flexible shortcode:
+
+##### 1. Markdown syntax
 
 ```md
 ![Alt text](screenshot-1.png "A title")
 ```
 
 If the title exists, the image will be rendered inside a `<figure>` element and the title will be turned into a caption.
 
-#### Shortcode
+##### 2. Shortcode
 
 ```md
 {{< image src="profile.jpg" alt="Picture of the author" title="Credit: John Doe" figure=true maxWidth="50%" />}}

assets/css/_app.scss

@@ -59,6 +59,18 @@
   text-overflow: ellipsis;
 }
 
+.App-postFooter {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: end;
+  gap: var(--spacing-xs);
+}
+
+.App-postFooter svg {
+  fill: var(--color-icon);
+}
+
 .App-postTime {
   font-size: var(--size-body-small);
   font-weight: 500;

layouts/index.html

@@ -13,7 +13,16 @@
         <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
         {{- .Content -}}
       </div>
-      {{- $posts := where .Site.RegularPages.ByDate.Reverse "Section" "posts" -}}
+      {{- $allPosts := where .Site.RegularPages.ByDate.Reverse "Section" "posts" -}}
+      {{- $tempPinnedPosts := where $allPosts ".Params.pinned" "eq" true -}}
+      {{- $pinnedPosts := slice -}}
+      {{- range $tempPinnedPosts -}}
+        {{- if and .Params.pinned (or (eq .Params.pinnedUntil nil) (gt (time.AsTime .Params.pinnedUntil) now)) -}}
+          {{- $pinnedPosts = $pinnedPosts | append . -}}
+        {{- end -}}
+      {{- end -}}
+      {{- $normalPosts := complement $pinnedPosts $allPosts  -}}
+      {{- $posts := append $normalPosts $pinnedPosts -}}
       {{- with $posts -}}
         <div class="App-postsContainer">
           <h2 class="u-responsiveHPadding">
@@ -26,7 +35,12 @@ <h2 class="u-responsiveHPadding">
                 <h3 class="App-postTitle u-noMargin">{{ .Title }}</h3>
                 {{- $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" -}}
                 {{- $dateHuman := .Date | time.Format ":date_long" -}}
-                <time class="App-postTime" datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
+                <div class="App-postFooter">
+                  <time class="App-postTime" datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
+                  {{- if and .Params.pinned (or (eq .Params.pinnedUntil nil) (gt (time.AsTime .Params.pinnedUntil) now)) -}}
+                      {{- (resources.Get "svg/PushPin.svg").Content | safeHTML -}}
+                  {{- end -}}
+                </div>
               </a>
             {{- end }}
           </div>