diff --git a/archetypes/blog.md b/archetypes/blog.md index b4ad21a..24c911b 100644 --- a/archetypes/blog.md +++ b/archetypes/blog.md @@ -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 --- diff --git a/assets/images/.gitkeep b/assets/images/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/assets/images/default-image.png b/assets/images/default-image.png new file mode 100644 index 0000000..a34ff9f Binary files /dev/null and b/assets/images/default-image.png differ diff --git a/assets/js/highlight.js b/assets/js/highlight.js index c96b781..4ad6017 100644 --- 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) => { diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss index 4694fd5..91de923 100644 --- a/assets/scss/common/_dark.scss +++ b/assets/scss/common/_dark.scss @@ -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; +} diff --git a/assets/scss/common/_global.scss b/assets/scss/common/_global.scss index cbc8e41..e1cee67 100644 --- 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; } diff --git a/assets/scss/layouts/_posts.scss b/assets/scss/layouts/_posts.scss index da27660..27d316a 100644 --- 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; +} diff --git a/config/_default/config.toml b/config/_default/config.toml index 75d4703..b6a1f4e 100644 --- a/config/_default/config.toml +++ b/config/_default/config.toml @@ -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 diff --git a/config/_default/params.toml b/config/_default/params.toml index d80b6cb..2eb69ac 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -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 Netlify, Hugo, and Doks" diff --git a/content/en/blog/say-hello-to-doks/index.md b/content/en/blog/say-hello-to-doks/index.md index e9c3185..d14d357 100644 --- a/content/en/blog/say-hello-to-doks/index.md +++ b/content/en/blog/say-hello-to-doks/index.md @@ -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. diff --git 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 deleted file mode 100644 index 70d8c78..0000000 Binary files a/content/en/blog/say-hello-to-doks/say-hello-to-doks.png and /dev/null differ diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 1401ccd..2778b20 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,13 +1,32 @@ {{ define "main" }}
-
- {{ range .Paginator.Pages }} - - {{ end }} - {{ template "_internal/pagination.html" . }} +
+

{{ .Title }}

+ {{ with .Content -}}
{{ . }}
{{ end -}} +
+
+
+ {{ $paginator := .Paginate (.Data.Pages) -}} + {{ range $paginator.Pages -}} +
+
+ {{- .Scratch.Set "fillImage" "1270x620 Center" -}} + {{ partial "content/card-image.html" . }} +
+
+

{{ .Params.title }}

+

{{ .Params.excerpt | safeHTML }}

+ {{ partial "main/blog-meta.html" . -}} +
+
+
+
+ {{ end -}} +
+
+
+ {{ $.Scratch.Set "paginator" true }} + {{ template "_internal/pagination.html" . }}
{{ end }} \ No newline at end of file diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html new file mode 100644 index 0000000..73fdeb8 --- /dev/null +++ b/layouts/_default/terms.html @@ -0,0 +1,20 @@ +{{ define "main" }} +
+
+

{{ .Title }}

+
{{ .Content }}
+
+ {{ range .Paginator.Pages }} +
+
+ +
+
+ {{ end }} +
+ {{ template "_internal/pagination.html" . }} +
+
+{{ end }} diff --git a/layouts/blog/list.html b/layouts/blog/list.html deleted file mode 100644 index 9695387..0000000 --- a/layouts/blog/list.html +++ /dev/null @@ -1,24 +0,0 @@ -{{ define "main" }} -
-
-
-

{{ .Title }}

-
{{ .Content }}
-
- {{ $paginator := .Paginate (.Data.Pages) -}} - {{ range $paginator.Pages -}} -
-
-

{{ .Params.title }}

-

{{ .Params.lead | safeHTML }}

- {{ partial "main/blog-meta.html" . -}} -
-
- {{ end -}} - {{ $.Scratch.Set "paginator" true }} - {{ template "_internal/pagination.html" . }} -
-
-
-
-{{ end }} \ No newline at end of file diff --git a/layouts/blog/single.html b/layouts/blog/single.html index 48fdb82..178fe31 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -1,14 +1,59 @@ {{ define "main" }} +
-
-
-
-

{{ .Title }}

- {{ partial "main/blog-meta.html" . }} -
-

{{ .Params.lead | safeHTML }}

- {{ .Content }} -
+
+
+

{{ .Title }}

+ {{ partial "main/blog-meta.html" . }} +
+
+
+
+ {{- .Scratch.Set "fillImage" "1270x715 Center" -}} + {{ partial "content/figure.html" . }} +
+
+
+ {{ .Content }} + {{ if .Params.tags -}} +
+ {{ range $index, $tag := .Params.tags -}} + {{ . }} + {{ end -}} +
+ {{ end -}}
-{{ end }} \ No newline at end of file +
+ +{{ $related := .Site.RegularPages.Related . | first 3 -}} +{{ with $related -}} +
+
+
+

Related posts

+
+
+
+ {{ range . -}} +
+
+ {{- .Scratch.Set "fillImageCard" "1270x620 Center" -}} + {{ partial "content/card-image.html" . }} +
+
+

{{ .Params.title }}

+

{{ .Params.excerpt | safeHTML }}

+ {{ partial "main/blog-meta.html" . -}} +
+
+
+
+ {{ end -}} +
+
+{{ end -}} + +{{ end }} + + diff --git a/layouts/contributors/list.html b/layouts/contributors/list.html deleted file mode 100644 index adc53aa..0000000 --- a/layouts/contributors/list.html +++ /dev/null @@ -1,23 +0,0 @@ -{{ define "main" }} -
-
-
-

{{ .Title }}

-
{{ .Content }}
-
- {{ range .Data.Pages -}} -
-
-

{{ .Params.title }}

- {{ if eq .Section "blog" -}} -

{{ .Params.lead | safeHTML }}

- {{ partial "main/blog-meta.html" . -}} - {{ end -}} -
-
- {{ end -}} -
-
-
-
-{{ end }} \ No newline at end of file diff --git a/layouts/partials/content/card-image.html b/layouts/partials/content/card-image.html new file mode 100644 index 0000000..7a3a43e --- /dev/null +++ b/layouts/partials/content/card-image.html @@ -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 -}} + +{{ .Title }} diff --git a/layouts/partials/content/figure.html b/layouts/partials/content/figure.html new file mode 100644 index 0000000..fbb0bde --- /dev/null +++ b/layouts/partials/content/figure.html @@ -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 -}} +
+ {{ .Title }} + + +
+{{ else -}} + {{ .Title }} +{{ end -}} diff --git a/layouts/partials/content/image.html b/layouts/partials/content/image.html new file mode 100644 index 0000000..2772531 --- /dev/null +++ b/layouts/partials/content/image.html @@ -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 -}} +
+ {{ .Title }} + + +
+{{ else -}} + {{ .Title }} +{{ end -}} diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html index d6e0f6e..93584f4 100644 --- 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 }}

  • {{ . }}{{ end -}}{{ end -}} ‐ {{ .ReadingTime -}} min read

    +

    Posted{{ if .Params.categories -}} in {{ range $index, $category := .Params.categories -}}{{ if gt $index 0 -}}, {{ end -}}{{ . }}{{ end -}}{{ end -}} on {{ .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 }}{{ . }}{{ end -}}{{ end -}} ‐ {{ .ReadingTime -}} min read

    \ No newline at end of file