✨ Related articles feature added

assets/css/compiled/main.css

@@ -2874,7 +2874,6 @@ select {
 
 .to-transparent {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
-  --tw-gradient-to-position:  ;
 }
 
 .bg-clip-padding {
@@ -4485,7 +4484,14 @@ body:has(#menu-controller:checked) {
 }
 
 .thumbnail_card {
-  height: 250px;
+  height: 200px;
+  background-repeat:no-repeat;
+  background-size:cover;
+  background-position:center;
+}
+
+.thumbnail_card_related {
+  height: 150px;
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center;

assets/css/main.css

@@ -348,7 +348,14 @@ body:has(#menu-controller:checked) {
 }
 
 .thumbnail_card {
-  height: 250px;
+  height: 200px;
+  background-repeat:no-repeat;
+  background-size:cover; 
+  background-position:center;
+}
+
+.thumbnail_card_related {
+  height: 150px;
   background-repeat:no-repeat;
   background-size:cover; 
   background-position:center;

config/_default/config.toml

@@ -33,3 +33,33 @@ buildFuture = false
 
 [outputs]
   home = ["HTML", "RSS", "JSON"]
+
+[related]
+  threshold = 0
+  toLower = false
+
+    [[related.indices]]
+        name = "tags"
+        weight = 100
+
+    [[related.indices]]
+        name = "categories"
+        weight = 100
+
+    [[related.indices]]
+        name = "series"
+        weight = 50
+
+    [[related.indices]]
+        name = "authors"
+        weight = 20
+
+    [[related.indices]]
+        name = "date"
+        weight = 10
+
+    [[related.indices]]
+      applyFilter = false
+      name = 'fragmentrefs'
+      type = 'fragments'
+      weight = 10

config/_default/params.toml

@@ -66,6 +66,8 @@ disableImageOptimization = false
   invertPagination = false
   showReadingTime = true
   showTableOfContents = false
+  # showRelatedContent = false
+  # relatedContentLimit = 3
   showTaxonomies = false
   showAuthorsBadges = false
   showWordCount = true

exampleSite/assets/js/home.js

@@ -35,8 +35,8 @@ window.addEventListener("DOMContentLoaded", (event) => {
 });
 
 var list_config = [
-  "CardViewScreenWidth",
   "CardViewProse",
+  "CardViewScreenWidth",
   "NormalView"
 ]
 

exampleSite/config/_default/config.toml

@@ -33,3 +33,33 @@ googleAnalytics = "G-PEDMYR1V0K"
 
 [outputs]
   home = ["HTML", "RSS", "JSON"]
+
+[related]
+  threshold = 0
+  toLower = false
+
+    [[related.indices]]
+        name = "tags"
+        weight = 100
+
+    [[related.indices]]
+        name = "categories"
+        weight = 100
+
+    [[related.indices]]
+        name = "series"
+        weight = 50
+
+    [[related.indices]]
+        name = "authors"
+        weight = 20
+
+    [[related.indices]]
+        name = "date"
+        weight = 10
+
+    [[related.indices]]
+      applyFilter = false
+      name = 'fragmentrefs'
+      type = 'fragments'
+      weight = 10

exampleSite/config/_default/menus.en.toml

@@ -15,37 +15,36 @@
   pageRef = "docs"
   weight = 10
 
-[[main]]
+#[[main]]
-  name = "Examples"
+#  name = "Examples"
-  weight = 20
+#  weight = 20
+
 
-[[main]]
-  name = "Recipes"
-  parent = "Examples"
-  pageRef = "guides"
-  weight = 10
 
 [[main]]
   name = "Samples"
-  parent = "Examples"
   pageRef = "samples"
   weight = 20
 
 [[main]]
   name = "Showcase"
-  parent = "Examples"
   pageRef = "examples"
   weight = 30
 
 [[main]]
-  name = "Users"
+  name = "Recipes"
-  pageRef = "users"
+  pageRef = "guides"
   weight = 40
 
 [[main]]
-  name = "Merch"
+  name = "Users"
-  url = "http://tee.pub/lic/qwSlWVBL5zc"
+  pageRef = "users"
-  weight = 50
+  weight = 90
+
+#[[main]]
+#  name = "Merch"
+#  url = "http://tee.pub/lic/qwSlWVBL5zc"
+#  weight = 100
 
 #[[main]]
 #  name = "Test"
@@ -56,19 +55,19 @@
   identifier = "twitter"
   pre = "twitter"
   url = "https://twitter.com/burufugu"
-  weight = 60
+  weight = 200
 
 [[main]]
   identifier = "mastodon"
   pre = "mastodon"
   url = "https://masto.ai/@blowfish"
-  weight = 70
+  weight = 300
 
 [[main]]
   identifier = "github"
   pre = "github"
   url = "https://github.com/nunocoracao/blowfish"
-  weight = 80
+  weight = 400
 
 
 # -- Footer Menu --

exampleSite/config/_default/params.toml

@@ -18,7 +18,7 @@ mainSections = ["docs"]
 disableImageOptimization = false
 
 defaultBackgroundImage = "/img/bg.jpg"
-#defaultFeaturedImage = "/img/blowfish_logo.png"
+defaultFeaturedImage = "/img/paint.png"
 
 highlightCurrentMenuArea = true
 smartTOC = true
@@ -38,7 +38,7 @@ smartTOCHideUnfocusedChildren = true
   layout = "custom" # valid options: page, profile, hero, card, background, custom
   # homepageImage = "/img/iceland.jpg" # used in: hero, and card
   showRecent = false
-  showRecentItems = 10
+  showRecentItems = 6
   showMoreLink = true
   showMoreLinkDest = "docs"
   cardView = false
@@ -65,6 +65,8 @@ smartTOCHideUnfocusedChildren = true
   invertPagination = false
   showReadingTime = true
   showTableOfContents = true
+  showRelatedContent = true
+  relatedContentLimit = 6
   showTaxonomies = true 
   showAuthorsBadges = true 
   showWordCount = false

exampleSite/content/docs/configuration/index.md

@@ -182,7 +182,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 ### Article
 
 | Name                                  | Default   | Description                                                                                                                                                                                                                                                                                                            |
-| ------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `article.showDate`                    | `true`    | Whether or not article dates are displayed.                                                                                                                                                                                                                                                                            |
 | `article.showViews`                   | `false`   | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                             |
 | `article.showLikes`                   | `false`   | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below.                                                                                                                                                                                                             |
@@ -203,6 +203,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `article.invertPagination`            | `false`   | Whether or not to flip the direction of the next/previous article links.                                                                                                                                                                                                                                               |
 | `article.showReadingTime`             | `true`    | Whether or not article reading times are displayed.                                                                                                                                                                                                                                                                    |
 | `article.showTableOfContents`         | `false`   | Whether or not the table of contents is displayed on articles.                                                                                                                                                                                                                                                         |
+| `article.showRelatedContent`          | `false`   | Display related content for each post. Might required additional configuration to your `config.toml`. Please check the theme `config.toml` if you want to enable this feature and copy all the relevant *related* entries. Also check [Hugo's docs](https://gohugo.io/content-management/related/) on related content. |
+| `article.relatedContentLimit`         | `3`       | Limit of related articles to display if `      showRelatedContent` is turned on.                                                                                                                                                                                                                                       |
 | `article.showTaxonomies`              | `false`   | Whether or not the taxonomies related to this article are displayed.                                                                                                                                                                                                                                                   |
 | `article.showAuthorsBadges`           | `false`   | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.                                                           |
 | `article.showWordCount`               | `false`   | Whether or not article word counts are displayed.                                                                                                                                                                                                                                                                      |

exampleSite/content/docs/hosting-deployment/index.md

@@ -4,7 +4,7 @@ date: 2020-08-07
 draft: false
 description: "Learn how to deploy a Blowfish site."
 slug: "hosting-deployment"
-tags: ["hosting", "deployment", "docs", "github", "netlify", "render"]
+tags: ["docs", "hosting", "deployment", "github", "netlify", "render"]
 series: ["Documentation"]
 series_order: 14
 ---

exampleSite/layouts/partials/recent-articles-demo.html

@@ -9,7 +9,7 @@
 <div class="flex mb-6 px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
     <span class="flex items-center justify-between grow dark:text-neutral-300">
         <span class="prose dark:prose-invert">This is a demo of theme's list configurations: <code
-                id="config">card view with full width</code></span>
+                id="config">card view</code></span>
         <button id="switch-config-button"
             class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700">
             Switch config &orarr;
@@ -17,12 +17,12 @@
     </span>
 </div>
 
-<div id="CardViewScreenWidth" class="">
+<div id="CardViewProse" class="h-full">
-    {{ partial "recent-articles/cardview-fullwidth.html" . }}
+    {{ partial "recent-articles/cardview.html" . }}
 </div>
 
-<div id="CardViewProse" class="hidden h-full">
+<div id="CardViewScreenWidth" class="hidden h-full">
-    {{ partial "recent-articles/cardview.html" . }}
+    {{ partial "recent-articles/cardview-fullwidth.html" . }}
 </div>
 
 <div id="NormalView" class="hidden h-full">

i18n/bg.yaml

@@ -24,6 +24,8 @@ article:
   part_of_series: "Тази статия е част от поредица."
   part: "Част"
   this_article: "Тази Статия"
+  related_articles: "Related"
+
 
 author:
   byline_title: "Автор"

i18n/bn.yaml

@@ -24,6 +24,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "লেখক"

i18n/cs.yaml

@@ -24,6 +24,7 @@ article:
   part_of_series: "Tento článek patří do série."
   part: "Část"
   this_article: "Tento článek"
+  related_articles: "Related"
 
 author:
   byline_title: "Autor"

i18n/de.yaml

@@ -18,6 +18,7 @@ article:
   part_of_series: "Dieser Artikel ist Teil einer Serie."
   part: "Teil"
   this_article: "Dieser Artikel"
+  related_articles: "Related"
 
 author:
   byline_title: "Autor"

i18n/en.yaml

@@ -24,6 +24,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "Author"

i18n/es.yaml

@@ -18,6 +18,7 @@ article:
   part_of_series: "Este artículo es parte de una serie."
   part: "Parte"
   this_article: "Este artículo"
+  related_articles: "Related"
 
 author:
   byline_title: "Autor"

i18n/fi.yaml

@@ -18,6 +18,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "Kirjoittaja"

i18n/fr.yaml

@@ -18,6 +18,7 @@ article:
   part_of_series: "Cet article fait partie d'une série."
   part: "Partie"
   this_article: "Cet article"
+  related_articles: "Related"
 
 author:
   byline_title: "Auteur"

i18n/he.yaml

@@ -18,6 +18,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "מחבר"

i18n/hr.yaml

@@ -24,6 +24,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "Autor"

i18n/hu.yaml

@@ -18,6 +18,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "Szerző"

i18n/id.yaml

@@ -24,6 +24,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "Penulis"

i18n/it.yaml

@@ -18,6 +18,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "Autore"

i18n/ja.yaml

@@ -18,6 +18,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "著者"

i18n/pl.yaml

@@ -24,6 +24,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "Autor"

i18n/pt-BR.yaml

@@ -21,6 +21,7 @@ article:
   part_of_series: "Este artigo faz parte de uma série de artigos."
   part: "Parte"
   this_article: "Esse Artigo"
+  related_articles: "Relacionados"
 
 author:
   byline_title: "Autor"

i18n/pt-PT.yaml

@@ -21,6 +21,7 @@ article:
   part_of_series: "Este artigo faz parte de uma série."
   part: "Parte"
   this_article: "Este artigo"
+  related_articles: "Relacionados"
 
 author:
   byline_title: "Autor"

i18n/ro.yaml

@@ -18,6 +18,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "Autor"

i18n/ru.yaml

@@ -24,6 +24,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "Автор"

i18n/tr.yaml

@@ -17,6 +17,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "Yazar"

i18n/vi.yaml

@@ -24,6 +24,7 @@ article:
   part_of_series: "Bài viết này là một phần của loạt bài."
   part: "Phần"
   this_article: "Bài viết này"
+  related_articles: "Related"
 
 author:
   byline_title: "Tác giả"

i18n/zh-CN.yaml

@@ -17,6 +17,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "作者"

i18n/zh-TW.yaml

@@ -17,6 +17,7 @@ article:
   part_of_series: "This article is part of a series."
   part: "Part"
   this_article: "This Article"
+  related_articles: "Related"
 
 author:
   byline_title: "作者"

layouts/_default/list.html

@@ -10,6 +10,14 @@
 {{ end }}
 {{- end -}}
 
+ <script>
+      var oid = "views_{{ .File.Path }}"
+      var oid_likes = "likes_{{ .File.Path }}"
+    </script>
+    {{ $jsPage := resources.Get "js/page.js" }}
+    {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint "sha512" }}
+    <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
+
 {{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in
 .TableOfContents "<ul") }} <header>
   {{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
@@ -35,13 +43,7 @@
     <div class="min-w-0 min-h-0 max-w-prose">
       {{ .Content | emojify }}
     </div>
-    <script>
+   
-      var oid = "views_{{ .File.Path }}"
-      var oid_likes = "likes_{{ .File.Path }}"
-    </script>
-    {{ $jsPage := resources.Get "js/page.js" }}
-    {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint "sha512" }}
-    <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
   </section>
   {{ if gt .Pages 0 }}
 

layouts/_default/single.html

@@ -25,12 +25,15 @@
     </div>
   </header>
   <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
+    {{ if or (and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in
+    .TableOfContents "<ul")) (.Site.Params.article.showRelatedPosts | default false) }} <div
+      class="order-first sm:max-w-prose lg:ml-auto px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
+      <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky {{ if eq .Site.Params.header.layout " fixed" }}
+        lg:top-[140px] {{ else }} lg:top-10 {{ end }}">
+
         {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in
-    .TableOfContents "<ul") }} 
+        .TableOfContents "<ul") }} {{ partial "toc.html" . }} {{ end }} {{ if .Site.Params.article.showRelatedPosts |
-    <div class="order-first sm:max-w-prose lg:ml-auto px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
+          default false }} sd {{ end }} </div>
-      <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky {{ if eq .Site.Params.header.layout "fixed" }} lg:top-[140px] {{ else }} lg:top-10 {{ end }}">
-        {{ partial "toc.html" . }}
-      </div>
       </div>
       {{ end }}
       <div class="min-w-0 min-h-0 max-w-prose">
@@ -75,6 +78,9 @@
     {{ end }}
 
     {{ partial "sharing-links.html" . }}
+
+    {{ partial "related.html" . }}
+
     {{ partial "article-pagination.html" . }}
     {{ if .Params.showComments | default (.Site.Params.article.showComments | default false) }}
     {{ if templates.Exists "partials/comments.html" }}

layouts/partials/article-link/card-related.html

@@ -0,0 +1,72 @@
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+{{ with .Params.externalUrl }}
+<a href="{{ . }}" target="_blank" rel="external" class="min-w-full">
+  {{ else }}
+  <a href="{{ .RelPermalink }}" class="min-w-full">
+    {{ end }}
+    <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
+
+      {{- with $.Params.images -}}
+      {{- range first 6 . }}
+      <meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
+      {{- else -}}
+      {{- $images := $.Resources.ByType "image" -}}
+      {{- $featured := $images.GetMatch "*feature*" -}}
+      {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+      {{- if not $featured }}{{ with .Site.Params.defaultFeaturedImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
+      {{- with $featured -}}
+      {{ if $disableImageOptimization }}
+        {{ with . }}
+        <div class="w-full thumbnail_card_related nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
+      {{ else }}
+        {{ with .Resize "600x" }}
+        <div class="w-full thumbnail_card_related nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+        {{ end }}
+      {{ end }}
+      {{- else -}}
+      {{- with $.Site.Params.images }}
+      <meta property="og:image" content="{{ index . 0 | absURL }}" />{{ end -}}
+      {{- end -}}
+      {{- end -}}
+
+
+      {{ if and .Draft .Site.Params.article.showDraftLabel }}
+      <span class="absolute top-0 right-0 m-2">
+        {{ partial "badge.html" (i18n "article.draft" | emojify) }}
+      </span>
+      {{ end }}
+
+      <div class="px-6 py-4">
+
+        {{ with .Params.externalUrl }}
+        <div>
+          <div
+            class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
+            {{ $.Title | emojify }}
+            <span class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500">
+              <span class="rtl:hidden">&#8599;</span>
+              <span class="ltr:hidden">&#8598;</span>
+            </span>
+          </div>
+        </div>
+        {{ else }}
+        <div class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
+          href="{{ .RelPermalink }}">{{ .Title | emojify }}</div>
+        {{ end }}
+
+        <div class="text-sm text-neutral-500 dark:text-neutral-400">
+          {{ partial "article-meta/basic.html" . }}
+        </div>
+
+        {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
+        <div class="py-1 prose dark:prose-invert">
+          {{ .Summary | emojify }}
+        </div>
+        {{ end }}
+      </div>
+      <div class="px-6 pt-4 pb-2">
+
+      </div>
+    </div>
+  </a>

layouts/partials/related.html

@@ -0,0 +1,11 @@
+{{ if .Params.showRelatedContent | default (.Site.Params.article.showRelatedContent | default false)}}
+{{ $related := .Site.RegularPages.Related . | first .Site.Params.article.relatedContentLimit }}
+{{ with $related }}
+<h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "article.related_articles" | emojify }}</h2>
+<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+  {{ range . }}
+  {{ partial "article-link/card-related.html" . }}
+  {{ end }}
+</section>
+{{ end }}
+{{ end }}