From 13bb88e93ad31a2e03cfb88301cd816c23acee1b Mon Sep 17 00:00:00 2001
From: Gabriele Musco <gabmus@disroot.org>
Date: Tue, 13 Apr 2021 23:30:34 +0200
Subject: [PATCH] added featured articles option with distinct style

---
 README.md                          |  2 ++
 assets/scss/style.scss             | 30 +++++++++++++++++++++++++++-
 layouts/index.html                 | 32 +++++++++++++++++++++++++++++-
 layouts/index.json                 | 20 ++++++++++++-------
 layouts/partials/js_paginator.html |  1 -
 5 files changed, 75 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index ab85609..65a15f1 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,8 @@ summaryLength = 70  # number of words for article summaries
     searchbarEverywhere = true  # if the searchbar should be shown in every page; requires enableSearch
     searchMenuLink = false  # add a search link to the navigation menu; requires enableSearch
 
+    enableFeatured = false  # enable a particular view for articles marked as featured (featured: true in the article frontmatter)
+
     # enable comments support with commento using the script from your server
     commento = "https://example.com/js/commento.js"
 
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 467608f..ccb0744 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -244,7 +244,7 @@ h1, h2, h3, h4, h5, h6 {
     padding-bottom: 25px;
 
     &.discrete {
-        background: $highlight_bg_color;
+        background-color: $highlight_bg_color;
         border-radius: 10px;
         padding: 20px;
         padding-top: 1px;
@@ -370,3 +370,31 @@ ul.list {
         &, #searchbar {font-size: 1em;}
     }
 }
+
+.featuredCardLink {
+    border: none;
+    padding: 0;
+    .featuredCard {
+        @extend .card;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        position: relative;
+        height: 250px;
+        .contentArea {
+            position: absolute;
+            bottom: 0;
+            padding: 15px;
+            h2 {
+                margin: 0;
+            }
+            .date {
+                margin: 0;
+            }
+        }
+        &.discrete {
+            border-radius: 10px;
+            padding: 0;
+        }
+    }
+}
diff --git a/layouts/index.html b/layouts/index.html
index eba1899..3ce65d0 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -2,7 +2,37 @@
 
     {{/* get all the pages that are regular posts and not pages */}}
     {{ $postsDir := .Site.Params.Posts | default (slice "posts" "post") }}
-    {{ $postsList := where .Site.RegularPages "Section" "in" $postsDir }}
+    {{ $allPostsList := where .Site.RegularPages "Section" "in" $postsDir }}
+    {{ $featuredPostsList := slice }}
+    {{ $postsList := $allPostsList }}
+    {{ if .Site.Params.enableFeatured | default false }}
+        {{ $featuredPostsList = where $allPostsList "Params.featured" true }}
+        {{ $postsList = union (where $allPostsList "Params.featured" false) (where $allPostsList "Params.featured" nil) }}
+    {{ end }}
+
+    <div class="featured postlist gridView">
+    {{ range $featuredPostsList }}
+        <a class="featuredCardLink" href="{{ .Permalink }}">
+            <article class="featuredCard {{ if .Site.Params.discreteCards }}discrete{{ end }}"
+                style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.7) 100%), url('{{ .Params.Image }}');">
+                <div class="contentArea">
+                    <h2>{{ .Title }}</h2>
+                    <p class="date">
+                        <span title="Date"> </span>
+                        {{ .Date.Format "2006-01-02" }}
+                        {{ if .Params.tags }}
+                        <br />
+                        <span title="Tags"> </span>
+                        {{ range .Params.tags }}
+                            #{{ . }}
+                        {{ end }}
+                    {{ end }}
+                    </p>
+                </div>
+            </article>
+        </a>
+    {{ end }}
+    </div>
 
     {{/* pagination */}}
     <div class="postlist {{ if .Site.Params.gridView }}gridView{{ end }}" id="postlist">
diff --git a/layouts/index.json b/layouts/index.json
index bfa8dde..1791c4f 100644
--- a/layouts/index.json
+++ b/layouts/index.json
@@ -1,16 +1,17 @@
 {{ define "main" }}
 {
     {{ $postsDir := .Site.Params.Posts | default (slice "posts" "post") }}
-    {{ $postsList := where .Site.RegularPages "Section" "in" $postsDir }}
-    "page": "{{ .Paginator.PageNumber }}",
-    "next": {{ if .Paginator.HasNext }}
-        {{ .Paginator.Next.URL | absURL | jsonify }}
-    {{ else }}""{{ end }},
+    {{ $allPostsList := where .Site.RegularPages "Section" "in" $postsDir }}
+    {{ $featuredPostsList := slice }}
+    {{ $postsList := $allPostsList }}
+    {{ if .Site.Params.enableFeatured | default false }}
+        {{ $featuredPostsList = where $allPostsList "Params.featured" true }}
+        {{ $postsList = union (where $allPostsList "Params.featured" false) (where $allPostsList "Params.featured" nil) }}
+    {{ end }}
     {{ $mscratch := newScratch }}
     {{ $mscratch.Add "articles" slice }}
     {{ range (.Paginate $postsList).Pages }}
         {{ $mscratch.Add "articles" (dict
-            "ignore" (not (in $postsDir .Section))
             "title" .Title
             "date" (.Date.Format "2006-01-02")
             "tags" (or .Params.tags slice)
@@ -18,6 +19,11 @@
             "link" .Permalink
             "image" (or .Params.Image "")) }}
     {{ end }}
-    "articles": {{ $mscratch.Get "articles" | jsonify }}
+    "articles": {{ $mscratch.Get "articles" | jsonify }},
+    "test": "{{range $postsList}}{{.Title}}   {{end}}",
+    "page": "{{ .Paginator.PageNumber }}",
+    "next": {{ if .Paginator.HasNext }}
+        {{ .Paginator.Next.URL | absURL | jsonify }}
+    {{ else }}""{{ end }}
 }
 {{ end }}
diff --git a/layouts/partials/js_paginator.html b/layouts/partials/js_paginator.html
index 7459881..bcb0791 100644
--- a/layouts/partials/js_paginator.html
+++ b/layouts/partials/js_paginator.html
@@ -13,7 +13,6 @@
         return `<img src="${image}" />`
     }
     function renderSingleArticle(article) {
-        if (article.ignore) return '';
         return `
         <article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
             <div>