ResiLien
/
portails
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #798 from h-enk/blog-pages 

Better blog pages
This commit is contained in:
Henk Verlinde 2022-07-05 11:16:59 +02:00 committed by GitHub
parent 9e1f7b9677 f8d4d0915f
commit 97b7af326b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 272 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
archetypes/blog.md
View File

@ -1,11 +1,15 @@
---
title: "{{ replace .Name "-" " " | title }}"
description: ""
lead: ""
excerpt: ""
date: {{ .Date }}
lastmod: {{ .Date }}
draft: true
weight: 50
images: ["{{ .Name | urlize }}.jpg"]
images: []
categories: []
tags: []
contributors: []
pinned: false
homepage: false
---

0
assets/images/.gitkeep
View File

BIN
assets/images/default-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

2
assets/js/highlight.js
View File

@ -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) => {

6
assets/scss/common/_dark.scss
View File

@ -570,3 +570,9 @@ $navbar-dark-active-color: $link-color-dark;
[data-dark-mode] details summary::before {
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}
[data-dark-mode] .btn-light {
color: $link-color-dark;
background: $body-overlay-dark;
border: 1px solid $body-overlay-dark;
}

4
assets/scss/common/_global.scss
View File

@ -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;
}

35
assets/scss/layouts/_posts.scss
View File

@ -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;
}

16
config/_default/config.toml
View File

@ -59,6 +59,8 @@ rel = "sitemap"
[taxonomies]
contributor = "contributors"
category = "categories"
tag = "tags"
[permalinks]
blog = "/blog/:title/"
@ -67,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

4
config/_default/params.toml
View File

@ -60,6 +60,10 @@ imageImageSizes = ["480","720","1080","1280","1600","2048"]
singleSize = false
imageAddClass = "img-fluid lazyload blur-up"
### 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>"

10
content/en/blog/say-hello-to-doks/index.md
View File

@ -1,11 +1,17 @@
---
title: "Say hello to Doks 👋"
description: "Introducing Doks, a Hugo theme helping you build modern documentation websites that are secure, fast, and SEO-ready — by default."
lead: "Introducing Doks, a Hugo theme helping you build modern documentation websites that are secure, fast, and SEO-ready — by default."
excerpt: "Introducing Doks, a Hugo theme helping you build modern documentation websites that are secure, fast, and SEO-ready — by default."
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"]
images: []
categories: ["News"]
tags: ["security", "performance", "SEO"]
contributors: ["Henk Verlinde"]
pinned: false
homepage: false
---
Introducing Doks, a Hugo theme helping you build modern documentation websites that are secure, fast, and SEO-ready — by default.

BIN
content/en/blog/say-hello-to-doks/say-hello-to-doks.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.0 KiB

29
layouts/_default/list.html
View File

@ -1,12 +1,31 @@
{{ define "main" }}
<div class="row justify-content-center">
<div class="col-md-12 col-lg-10 col-xl-8">
{{ range .Paginator.Pages }}
<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><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
{{ .Description }}
<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>
{{ end }}
</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>

20
layouts/_default/terms.html Normal file
View File

@ -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 }}

24
layouts/blog/list.html
View File

@ -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.lead | safeHTML }}</p>
{{ partial "main/blog-meta.html" . -}}
</div>
</div>
{{ end -}}
{{ $.Scratch.Set "paginator" true }}
{{ template "_internal/pagination.html" . }}
</div>
</article>
</div>
</div>
{{ end }}

51
layouts/blog/single.html
View File

@ -1,14 +1,59 @@
{{ define "main" }}
<div class="row justify-content-center">
<div class="col-md-12 col-lg-10 col-xl-8">
<article>
<div class="row justify-content-center">
<div class="col-md-12 col-lg-10">
<div class="blog-header">
<h1>{{ .Title }}</h1>
{{ partial "main/blog-meta.html" . }}
</div>
<p class="lead">{{ .Params.lead | safeHTML }}</p>
</div>
<div class="col-md-13">
<div class="mt-n4">
{{- .Scratch.Set "fillImage" "1270x715 Center" -}}
{{ partial "content/figure.html" . }}
</div>
</div>
<div class="col-md-12 col-lg-9">
{{ .Content }}
{{ if .Params.tags -}}
<div class="mt-4">
{{ range $index, $tag := .Params.tags -}}
<a class="btn btn-light" href="{{ "/tags/" | absURL }}{{ . | urlize }}/" role="button">{{ . }}</a>
{{ end -}}
</div>
{{ end -}}
</div>
</div>
</article>
{{ $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 "fillImageCard" "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 }}

23
layouts/contributors/list.html
View File

@ -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.lead | safeHTML }}</p>
{{ partial "main/blog-meta.html" . -}}
{{ end -}}
</div>
</div>
{{ end -}}
</div>
</article>
</div>
</div>
{{ end }}

22
layouts/partials/content/card-image.html Normal file
View File

@ -0,0 +1,22 @@
{{ $fillImage := .Scratch.Get "fillImageCard" }}
{{ 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 -}}
{{ $webp := printf "%s%s" $fillImage " webp" }}
{{ $image = $image.Resize $webp}}
{{ $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 }}">

37
layouts/partials/content/figure.html Normal file
View File

@ -0,0 +1,37 @@
{{ $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 -}}
{{ $imgSrc := "" -}}
{{ $imgSrcSet := slice -}}
{{ $widths := site.Params.landscapePhotoWidths -}}
{{ if gt $image.Height $image.Width -}}
{{ $widths = site.Params.portraitPhotoWidths -}}
{{ end -}}
{{ range $widths -}}
{{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}}
{{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}
{{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}
{{ end -}}
{{ $imgSrcSet = (delimit $imgSrcSet ",") -}}
{{ if gt $image.Width site.Params.smallLimit -}}
<figure class="figure">
<img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}">
<noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}"></noscript>
<!-- {{ with .Title }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end -}} -->
</figure>
{{ else -}}
<img class="img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}">
{{ end -}}

32
layouts/partials/content/image.html Normal file
View File

@ -0,0 +1,32 @@
{{ $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 site.Params.fillImage }}
{{ $lqip := $image.Resize site.Params.lqipWidth -}}
{{ $imgSrc := "" -}}
{{ $imgSrcSet := slice -}}
{{ $widths := site.Params.landscapePhotoWidths -}}
{{ if gt $image.Height $image.Width -}}
{{ $widths = site.Params.portraitPhotoWidths -}}
{{ end -}}
{{ range $widths -}}
{{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}}
{{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}
{{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}
{{ end -}}
{{ $imgSrcSet = (delimit $imgSrcSet ",") -}}
{{ if gt $image.Width site.Params.smallLimit -}}
<figure class="figure">
<img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}">
<noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}"></noscript>
<!-- {{ with .Title }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end -}} -->
</figure>
{{ else -}}
<img class="img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ .Title }}">
{{ end -}}

2
layouts/partials/header/header.html
View File

@ -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">

2
layouts/partials/main/blog-meta.html
View File

@ -1,2 +1,2 @@
{{ $last := sub (len .Params.contributors) 1 }}
<p><small>Posted {{ .PublishDate.Format "January 2, 2006" }} by {{ if .Params.contributors -}}{{ range $index, $contributor := .Params.contributors }}{{ if gt $index 0 }}{{ if eq $index $last }} and {{ else }}, {{ end }}{{ end }}<a class="stretched-link position-relative" href="{{ "/contributors/" | relURL }}{{ . | urlize }}/">{{ . }}</a>{{ end -}}{{ end -}}&nbsp;&hyphen;&nbsp;<strong>{{ .ReadingTime -}}&nbsp;min read</strong></small><p>
<p><small>Posted{{ if .Params.categories -}}&nbsp;in&nbsp;{{ range $index, $category := .Params.categories -}}{{ if gt $index 0 -}}, {{ end -}}<a class="stretched-link position-relative link-muted" href="{{ "/categories/" | absURL }}{{ . | urlize }}/">{{ . }}</a>{{ end -}}{{ end -}}&nbsp;on&nbsp;{{ .PublishDate.Format "January 2, 2006" }} by {{ if .Params.contributors -}}{{ range $index, $contributor := .Params.contributors }}{{ if gt $index 0 }}{{ if eq $index $last }} and {{ else }}, {{ end }}{{ end }}<a class="stretched-link position-relative" href="{{ "/contributors/" | relURL }}{{ . | urlize }}/">{{ . }}</a>{{ end -}}{{ end -}}&nbsp;&hyphen;&nbsp;<strong>{{ .ReadingTime -}}&nbsp;min read</strong></small><p>