[camel-website] branch master updated: chore: add related content to the blog post

[zregvart]

This is an automated email from the ASF dual-hosted git repository.

zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 856bd48  chore: add related content to the blog post
856bd48 is described below

commit 856bd48dea0d7952ec1ffd070edfad2040845d01
Author: Zoran Regvart <zregv...@apache.org>
AuthorDate: Thu Dec 3 22:15:34 2020 +0100

    chore: add related content to the blog post
    
    Configures and adds a up to five summaries of related blog posts to the
    end of a blog post. Also tweaks the summary blog post display by moving
    the publishing date to the header, below the title and liks to the blog
    post from the title as well from the "Continue reading" link.
---
 antora-ui-camel/src/css/blog.css | 37 +++++++++++++++++++++++++++++++++++++
 config.toml                      | 21 +++++++++++++++++++++
 layouts/blog/post.html           | 22 +++++++++++++++-------
 layouts/blog/summary.html        |  5 +++--
 4 files changed, 76 insertions(+), 9 deletions(-)

diff --git a/antora-ui-camel/src/css/blog.css b/antora-ui-camel/src/css/blog.css
index e9e0930..41e0ca2 100644
--- a/antora-ui-camel/src/css/blog.css
+++ b/antora-ui-camel/src/css/blog.css
@@ -50,6 +50,11 @@ article.blog p {
   font-weight: bold;
 }
 
+.blog header time {
+  color: var(--color-gray-60);
+  font-style: italc;
+}
+
 .blog .post {
   margin-top: 1rem;
   display: flex;
@@ -239,3 +244,35 @@ article.blog p {
     margin-top: 4.5rem;
   }
 }
+
+.blog .related {
+  display: flex;
+  flex-wrap: wrap;
+  border-top: 1px solid var(--color-camel-orange);
+  margin-top: 3rem;
+}
+
+.blog .related > h3 {
+  min-width: 100%;
+}
+
+.blog .related article {
+  padding-right: 0;
+  width: 50%;
+  margin: 0;
+}
+
+.blog .related article:nth-child(2n) {
+  padding-left: 0;
+}
+
+.blog .related article header h1 {
+  font-size: 1rem;
+}
+
+@media screen and (max-width: 1023px) {
+  .blog .related article {
+    width: 100%;
+    padding-left: 0;
+  }
+}
diff --git a/config.toml b/config.toml
index f48ca18..fb3f87f 100644
--- a/config.toml
+++ b/config.toml
@@ -70,6 +70,27 @@ defaultMarkdownHandler = "blackfriday"
     source = "data"
     target = "data"
 
+[related]
+  includeNewer = false
+  threshold = 80
+  toLower = false
+
+  [[related.indices]]
+    name = "categories"
+    weight = 50
+
+  [[related.indices]]
+    name = "keywords"
+    weight = 100
+
+  [[related.indices]]
+    name = "authors"
+    weight = 50
+
+  [[related.indices]]
+    name = "date"
+    weight = 10
+
 [permalinks]
     blog = "blog/:year/:month/:filename/"
 
diff --git a/layouts/blog/post.html b/layouts/blog/post.html
index 288b14a..add0640 100644
--- a/layouts/blog/post.html
+++ b/layouts/blog/post.html
@@ -34,15 +34,23 @@
         <div class="post-content">
             {{ $featured := (.Resources.ByType "image").GetMatch "*featured*" 
}}
             {{ with $featured }}
-            {{ if ne $featured.MediaType.SubType "svg" }}
-            {{ $featured := .Resize "800x q95 Gaussian" }}
-            <img class="featured" alt="Blog post featured image" src="{{ 
$featured.RelPermalink }}"
-                width="{{ $featured.Width }}" height="{{ $featured.Height }}">
-            {{ else }}
-            <img class="featured" alt="Blog post featured image" src="{{ 
$featured.RelPermalink }}" width="800">
-            {{ end }}
+                {{ if ne $featured.MediaType.SubType "svg" }}
+                    {{ $featured := .Resize "800x q95 Gaussian" }}
+                    <img class="featured" alt="Blog post featured image" 
src="{{ $featured.RelPermalink }}"
+                        width="{{ $featured.Width }}" height="{{ 
$featured.Height }}">
+                {{ else }}
+                    <img class="featured" alt="Blog post featured image" 
src="{{ $featured.RelPermalink }}" width="800">
+                {{ end }}
             {{ end }}
             {{ .Content }}
+            <div class="related">
+            {{ with .Site.RegularPages.Related . | first 5 }}
+                <h3 id="related"><a class="anchor" href="#related"></a>Related 
posts</h3>
+                {{ range . }}
+                    {{  .Render "summary" }}
+                {{ end }}
+            {{ end }}
+            </div>
         </div>
     </div>
 
diff --git a/layouts/blog/summary.html b/layouts/blog/summary.html
index edb1ea9..8f1bb61 100644
--- a/layouts/blog/summary.html
+++ b/layouts/blog/summary.html
@@ -1,7 +1,8 @@
 <article class="blog doc">
 
     <header>
-        <h1>{{ .Title }}</h1>
+        <a href="{{ .RelPermalink }}"><h1>{{ .Title }}</h1></a>
+        <time itemprop="published" datetime="{{ dateFormat "2006-01-02" 
.PublishDate }}" title="{{ dateFormat "Monday, January 2, 2006" .PublishDate 
}}">{{ dateFormat "January 2, 2006" .PublishDate }}</time>
     </header>
     <p>{{ .Summary }}</p>
     <p><a class="continue" href="{{ .RelPermalink }}">Continue reading 
&#10095;</a></p>
@@ -9,7 +10,7 @@
         {{ if .Params.categories }}
             {{ range .Params.categories }}<a class="category" href="{{ 
"/categories/" | relURL }}{{ . | urlize }}/">{{ upper . }}</a>{{ end }}
         {{end}}
-        &#11825; <time itemprop="published" datetime="{{ dateFormat 
"2006-01-02" .PublishDate }}" title="{{ dateFormat "Monday, January 2, 2006" 
.PublishDate }}">{{ dateFormat "January 2, 2006" .PublishDate }}</time> 
&#11825; {{ range $idx, $author := .Params.authors }}{{ if gt $idx 0 }}, {{ end 
}}<span rel="author">{{ (getJSON  "https://api.github.com/users/"; $author).name 
}}</span>{{ end }}
+         &#11825; {{ range $idx, $author := .Params.authors }}{{ if gt $idx 0 
}}, {{ end }}<span rel="author">{{ (getJSON  "https://api.github.com/users/"; 
$author).name }}</span>{{ end }}
     </p>
 
 </article>