feat: update blog pages

2022-06-27 14:41:00 +02:00 · 2022-06-27 14:41:00 +02:00 · 59a3f00529
parent 9f2a3fbbc5
commit 59a3f00529
15 changed files with 154 additions and 66 deletions
--- a/assets/images/.gitkeep
+++ b/assets/images/.gitkeep
--- a/content/en/blog/say-hello-to-doks/say-hello-to-doks.png
+++ b/content/en/blog/say-hello-to-doks/say-hello-to-doks.png
--- a/assets/js/highlight.js
+++ b/assets/js/highlight.js
@ -7,6 +7,7 @@ import xml from 'highlight.js/lib/languages/xml';
 import ini from 'highlight.js/lib/languages/ini';
 import yaml from 'highlight.js/lib/languages/yaml';
 import markdown from 'highlight.js/lib/languages/markdown';
+import python from 'highlight.js/lib/languages/python';

 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('json', json);
@ -16,6 +17,7 @@ hljs.registerLanguage('ini', ini);
 hljs.registerLanguage('toml', ini);
 hljs.registerLanguage('yaml', yaml);
 hljs.registerLanguage('md', markdown);
+hljs.registerLanguage('python', python);

 document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('pre code:not(.language-mermaid)').forEach((block) => {
--- a/assets/scss/common/_global.scss
+++ b/assets/scss/common/_global.scss
@ -4,7 +4,9 @@
 .error404 .content,
 .docs.list .content,
 .tutorial.list .content,
-.showcase.list .content {
+.showcase.list .content,
+.categories.list .content,
+.tags.list .content {
  padding-top: 1rem;
  padding-bottom: 3rem;
 }
--- a/assets/scss/layouts/_posts.scss
+++ b/assets/scss/layouts/_posts.scss
@ -1,6 +1,9 @@
 .home .card,
 .contributors.list .card,
-.blog.list .card {
+.blog.list .card,
+.blog.single .card,
+.categories.list .card,
+.tags.list .card {
  margin-top: 2rem;
  margin-bottom: 2rem;
  transition: transform 0.3s;
@ -8,16 +11,34 @@

 .home .card:hover,
 .contributors.list .card:hover,
-.blog.list .card:hover {
+.blog.list .card:hover,
+.blog.single .card:hover,
+.categories.list .card:hover,
+.tags.list .card:hover {
  transform: scale(1.025);
 }

+.contributors.list .card.card-terms:hover,
+.categories.list .card.card-terms:hover,
+.tags.list .card.card-terms:hover {
+  transform: none;
+}
+
 .home .card-body,
 .contributors.list .card-body,
-.blog.list .card-body {
+.blog.list .card-body,
+.blog.single .card-body,
+.categories.list .card-body,
+.tags.list .card-body {
  padding: 0 2rem 1rem;
 }

+.contributors.list .card-terms .card-body,
+.categories.list .card-terms .card-body,
+.tags.list .card-terms .card-body {
+  padding: 1rem;
+}
+
 .blog-header {
  text-align: center;
  margin-bottom: 2rem;
@ -26,3 +47,11 @@
 .blog-footer {
  text-align: center;
 }
+
+.related-posts {
+  margin-top: 4rem;
+}
+
+h2.section-title {
+  margin-bottom: 1.25rem;
+}
--- a/config/_default/config.toml
+++ b/config/_default/config.toml
@ -69,6 +69,20 @@ rel  = "sitemap"
 [minify.tdewolff.html]
  keepWhitespace = false

+[related]
+  threshold = 80
+  includeNewer = true
+  toLower = false
+    [[related.indices]]
+    name = "categories"
+    weight = 100
+    [[related.indices]]
+    name = "tags"
+    weight = 80
+    [[related.indices]]
+    name = "date"
+    weight = 10
+
 [module]
  [module.hugoVersion]
    extended = true
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@ -53,6 +53,10 @@ portraitPhotoWidths = [800, 700, 600, 500]
 lqipWidth = "20x"
 smallLimit = "300"

+### Image template
+defaultImage = "default-image.png" # put in `./assets/images/`
+fillImage = "1270x740 Center" # normalize image size
+
 # Footer
 footer = "Powered by <a class=\"text-muted\" href=\"https://www.netlify.com/\">Netlify</a>, <a class=\"text-muted\" href=\"https://gohugo.io/\">Hugo</a>, and <a class=\"text-muted\" href=\"https://getdoks.org/\">Doks</a>"

--- a/content/en/blog/say-hello-to-doks/index.md
+++ b/content/en/blog/say-hello-to-doks/index.md
@ -6,9 +6,9 @@ date: 2020-11-04T09:19:42+01:00
 lastmod: 2020-11-04T09:19:42+01:00
 draft: false
 weight: 50
-images: ["say-hello-to-doks.png"]
-categories: []
-tags: []
+images: []
+categories: ["Startups", "News"]
+tags: ["security"]
 contributors: ["Henk Verlinde"]
 pinned: false
 homepage: false
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -1,13 +1,32 @@
 {{ define "main" }}
 <div class="row justify-content-center">
-  <div class="col-md-12 col-lg-10 col-xl-8">
-  {{ range .Paginator.Pages }}
-    <article>
-      <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
-      {{ .Description }}
-    </article>
-  {{ end }}
-  {{ template "_internal/pagination.html" . }}
+  <div class="col-md-12 col-lg-9">
+    <h1 class="text-center">{{ .Title }}</h1>
+    {{ with .Content -}}<div class="text-center">{{ . }}</div>{{ end -}}
+  </div>
+</div>
+<div class="row row-cols-1 row-cols-lg-2 g-lg-5">
+  {{ $paginator := .Paginate (.Data.Pages) -}}
+  {{ range $paginator.Pages -}}
+  <div class="col">
+    <div class="card">
+      {{- .Scratch.Set "fillImage" "1270x620 Center" -}}
+      {{ partial "content/card-image.html" . }}
+      <div class="card-body">
+        <article>
+          <h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
+          <p>{{ .Params.excerpt | safeHTML }}</p>
+          {{ partial "main/blog-meta.html" . -}}
+        </article>
+      </div>
+    </div>
+  </div>
+  {{ end -}}
+</div>
+<div class="row justify-content-center">
+  <div class="col-md-12 col-lg-9">
+    {{ $.Scratch.Set "paginator" true }}
+    {{ template "_internal/pagination.html" . }}
  </div>
 </div>
 {{ end }}
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@ -0,0 +1,20 @@
+{{ define "main" }}
+<div class="row justify-content-center">
+  <div class="col-md-12 col-lg-10 col-xl-8">
+    <h1 class="text-center">{{ .Title }}</h1>
+    <div class="text-center">{{ .Content }}</div>
+    <div class="card-list">
+      {{ range .Paginator.Pages }}
+        <div class="card card-terms my-3">
+          <div class="card-body">
+            <article>
+              <a class="stretched-link" href="{{ .RelPermalink }}">{{ .Params.title | title }} &rarr;</a>
+            </article>
+          </div>
+        </div>
+      {{ end }}
+    </div>
+    {{ template "_internal/pagination.html" . }}
+  </div>
+</div>
+{{ end }}
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@ -1,24 +0,0 @@
-{{ define "main" }}
-<div class="row justify-content-center">
-  <div class="col-md-12 col-lg-10 col-xl-8">
-    <article>
-      <h1 class="text-center">{{ .Title }}</h1>
-      <div class="text-center">{{ .Content }}</div>
-			<div class="card-list">
-				{{ $paginator := .Paginate (.Data.Pages) -}}
-				{{ range $paginator.Pages -}}
-					<div class="card">
-						<div class="card-body">
-							<h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
-							<p>{{ .Params.excerpt | safeHTML }}</p>
-							{{ partial "main/blog-meta.html" . -}}
-						</div>
-					</div>
-				{{ end -}}
-				{{ $.Scratch.Set "paginator" true }}
-				{{ template "_internal/pagination.html" . }}
-			</div>
-    </article>
-  </div>
-</div>
-{{ end }}
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@ -8,13 +8,13 @@
      {{ partial "main/blog-meta.html" . }}
    </div>
  </div>
-  <div class="col-md-12">
+  <div class="col-md-13">
    <div class="mt-n3">
      {{- .Scratch.Set "fillImage" "1270x620 Center" -}}
      {{ partial "content/figure.html" . }}
    </div>
  </div>
-  <div class="col-md-12 col-lg-10 col-xl-8">
+  <div class="col-md-12 col-lg-9">
    {{ .Content }}
    {{ if .Params.tags -}}
    <div class="mt-4">
@ -26,4 +26,35 @@
  </div>
 </div>
 </article>
-{{ end }}
+
+{{ $related := .Site.RegularPages.Related . | first 3 -}}
+{{ with $related -}}
+<div class="related-posts">
+<div class="row justify-content-center">
+  <div class="col">
+    <h2 class="section-title">Related posts</h2>
+  </div>
+</div>
+<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-lg-5">
+  {{ range . -}}
+  <div class="col">
+    <div class="card">
+      {{- .Scratch.Set "fillImage" "1270x620 Center" -}}
+      {{ partial "content/card-image.html" . }}
+      <div class="card-body">
+        <article>
+          <h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
+          <p>{{ .Params.excerpt | safeHTML }}</p>
+          {{ partial "main/blog-meta.html" . -}}
+        </article>
+      </div>
+    </div>
+  </div>
+  {{ end -}}
+</div>
+</div>
+{{ end -}}
+
+{{ end }}
+
+
--- a/layouts/contributors/list.html
+++ b/layouts/contributors/list.html
@ -1,23 +0,0 @@
-{{ define "main" }}
-<div class="row justify-content-center">
-  <div class="col-md-12 col-lg-10 col-xl-8">
-    <article>
-      <h1 class="text-center">{{ .Title }}</h1>
-      <div class="text-center">{{ .Content }}</div>
-			<div class="card-list">
-				{{ range .Data.Pages -}}
-					<div class="card">
-						<div class="card-body">
-							<h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
-							{{ if eq .Section "blog" -}}
-								<p>{{ .Params.excerpt | safeHTML }}</p>
-								{{ partial "main/blog-meta.html" . -}}
-							{{ end -}}
-						</div>
-					</div>
-				{{ end -}}
-			</div>
-    </article>
-  </div>
-</div>
-{{ end }}
--- a/layouts/partials/content/card-image.html
+++ b/layouts/partials/content/card-image.html
@ -0,0 +1,14 @@
+{{ $fillImage := .Scratch.Get "fillImage" }}
+{{ if not $fillImage -}}
+  {{ $fillImage = site.Params.fillImage }}
+{{ end -}}
+
+{{ $image := .Resources.GetMatch (printf "**%s" (index .Params.images 0)) }}
+{{ if not $image -}}
+  {{ $image = resources.Get (printf "%s%s" "images/" site.Params.defaultImage) }}
+{{ end -}}
+
+{{ $image = $image.Fill $fillImage }}
+{{ $lqip := $image.Resize site.Params.lqipWidth -}}
+
+<img class="card-img-top img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}">
--- a/layouts/partials/header/header.html
+++ b/layouts/partials/header/header.html
@ -53,7 +53,7 @@
            {{- $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) -}}
            {{- $active = or $active (eq .Name $current.Title) -}}
            {{- $active = or $active (and (eq .Name ($section | humanize)) (eq $current.Section $section)) -}}
-            {{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "contributors")) -}}
+            {{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "contributors" "categories" "tags")) -}}
            {{ if .HasChildren }}
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle ps-0 py-1" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">