Merge branch 'master' into scroll-spy

README.md

@@ -34,7 +34,7 @@
   </a>
 </p>
 
-![Doks — Modern Documentation Theme](https://raw.githubusercontent.com/h-enk/doks/master/images/tn.png)
+![Doks — Modern Documentation Theme](https://raw.githubusercontent.com/h-enk/doks/master/images/doks.png)
 
 ## Demo
 
@@ -156,4 +156,4 @@ Support this project by becoming a sponsor. Your logo will show up here with a l
 
 Support this project by becoming a backer. Your avatar will show up here.
 
-[![Backers](https://opencollective.com/doks/tiers/backer.svg)](https://opencollective.com/doks)
+[![Backers](https://opencollective.com/doks/tiers/backer.svg?49741992)](https://opencollective.com/doks)

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

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

assets/js/index.js

@@ -94,7 +94,20 @@ Source:
 
   // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
 
-  {{ $list := (where .Site.Pages "Section" "docs") -}}
+  {{ $list := slice }}
+  {{- if and (isset .Site.Params.options "searchsectionsindex") (not (eq (len .Site.Params.options.searchSectionsIndex) 0)) }}
+  {{- if eq .Site.Params.options.searchSectionsIndex "ALL" }}
+  {{- $list = .Site.Pages }}
+  {{- else }}
+  {{- $list = (where .Site.Pages "Type" "in" .Site.Params.options.searchSectionsIndex) }}
+  {{- if (in .Site.Params.options.searchSectionsIndex "HomePage") }}
+  {{ $list = $list | append .Site.Home }}
+  {{- end }}
+  {{- end }}
+  {{- else }}
+  {{- $list = (where .Site.Pages "Section" "docs") }}
+  {{- end }}
+
   {{ $len := (len $list) -}}
 
   {{ range $index, $element := $list -}}

assets/js/to-top.js

@@ -0,0 +1,20 @@
+var topbutton = document.getElementById('toTop');
+
+if (topbutton !== null) {
+
+  topbutton.style.display = 'none';
+  window.onscroll = function() {
+    scrollFunction()
+  };
+
+}
+
+function scrollFunction() {
+
+  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
+    topbutton.style.display = 'block';
+  } else {
+    topbutton.style.display = 'none';
+  }
+
+}

assets/scss/common/_dark.scss

@@ -573,4 +573,10 @@ $navbar-dark-active-color:          $link-color-dark;
 
 [data-dark-mode] #toc a.active {
   color: $link-color-dark;
+
+[data-dark-mode] .btn-light {
+  color: $link-color-dark;
+  background: $body-overlay-dark;
+  border: 1px solid $body-overlay-dark;
+
 }

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

assets/scss/components/_images.scss

@@ -1,5 +1,19 @@
 figure {
-  margin: 2rem 0;
+  margin: 0 0 1rem;
+  display: inline-block;
+}
+
+figure img {
+  margin-bottom: 0.5rem;
+  line-height: 1;
+  max-width: 100%;
+  height: auto;
+}
+
+figure figcaption {
+  margin: 0.25rem 0 0.75rem;
+  font-size: 0.875em;
+  color: #6c757d;
 }
 
 .figure-caption {

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

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
@@ -78,6 +94,9 @@ rel  = "sitemap"
   [[module.mounts]]
     source = "static"
     target = "static"
+  [[module.mounts]]
+    source = "layouts"
+    target = "layouts"
   [[module.mounts]]
     source = "node_modules/flexsearch"
     target = "assets/js/vendor/flexsearch"
@@ -87,3 +106,6 @@ rel  = "sitemap"
   [[module.mounts]]
     source = "node_modules/mermaid"
     target = "assets/js/vendor/mermaid"
+  [[module.mounts]]
+    source = "node_modules/@hyas/images/layouts"
+    target = "layouts"

config/_default/params.toml

@@ -53,6 +53,17 @@ portraitPhotoWidths = [800, 700, 600, 500]
 lqipWidth = "20x"
 smallLimit = "300"
 
+# Images
+imageResponsive = true
+imageConvertTo = "webp"
+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>"
 
@@ -83,6 +94,8 @@ lastMod = false
   clipBoard = true
   instantPage = true
   flexSearch = true
+  searchSectionsShow = []
+  searchSectionsIndex = []
   darkMode = true
   bootStrapJs = true
   breadCrumb = false

config/postcss.config.js

@@ -23,6 +23,10 @@ module.exports = {
         'container-xxl',
         'container-fluid',
         'offcanvas-backdrop',
+        'img-fluid',
+        'lazyload',
+        'blur-up',
+        'figcaption',
         ...whitelister([
           './assets/scss/components/_alerts.scss',
           './assets/scss/components/_buttons.scss',

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.

content/en/docs/help/_index.md

@@ -6,4 +6,5 @@ date: 2020-10-06T08:49:15+00:00
 lastmod: 2020-10-06T08:49:15+00:00
 draft: false
 images: []
+weight: 600
 ---

content/en/docs/prologue/_index.md

@@ -6,4 +6,5 @@ date: 2020-10-06T08:48:45+00:00
 lastmod: 2020-10-06T08:48:45+00:00
 draft: false
 images: []
+weight: 100
 ---

layouts/_default/_markup/render-image.html

@@ -1,36 +0,0 @@
-{{ $image := "" -}}
-{{ if (urls.Parse .Destination).IsAbs }}
-  {{ $image = resources.GetRemote .Destination -}}
-{{ else -}}
-  {{ $image = .Page.Resources.GetMatch .Destination -}}
-{{ end -}}
-{{ with $image -}}
-  {{ $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="{{ $.Text }}">
-      <noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}"></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="{{ $.Text }}">
-  {{ end -}}
-{{ else -}}
-  {{ erroridf "image-not-found" "Image not found" -}}
-{{ end -}}

layouts/_default/baseof.html

@@ -23,5 +23,10 @@
     {{ block "sidebar-footer" . }}{{ end }}
     {{ partial "footer/footer.html" . }}
     {{ partial "footer/script-footer.html" . }}
+    {{ if eq .Site.Params.options.toTopButton true -}}
+    <div class="d-flex fixed-bottom pb-4 pb-lg-5 pe-4 pe-lg-5">
+      <a id="toTop" href="#" class="btn btn-outline-primary rounded-circle ms-auto p-2"><span class="visually-hidden">Top</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg></a>
+    </div>
+    {{ end }}
   </body>
 </html>

layouts/_default/list.html

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

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

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

layouts/blog/single.html

@@ -1,14 +1,59 @@
 {{ define "main" }}
+<article>
 <div class="row justify-content-center">
-  <div class="col-md-12 col-lg-10 col-xl-8">
+  <div class="col-md-12 col-lg-10">
-    <article>
     <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 }}
-    </article>
+    {{ 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 }}
+
+

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

layouts/index.headers

@@ -2,7 +2,7 @@
   Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
   X-Content-Type-Options: nosniff
   X-XSS-Protection: 1; mode=block
-  Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self' https://*.netlify.app; connect-src 'self' https://*.netlify.app; font-src 'self' https://*.netlify.app; img-src 'self' https://*.netlify.app data:; script-src 'self' https://*.netlify.app 'sha512-RGGByJUOP98hE4wFZM78RM/3MijWJs0Tm0DbfrFhCDCXKXfDx60fii+syp5iMs3UcNX/1H4zJNgmqSejfhHrYw==' 'sha512-RBYr6Ld4w1yVqaACrgrBLQfPgGhj/1jyacA74WxJ1KM6KVcSWymwrdDwb3HDcdpwiNJ5yssot1He0U9vXoQVlg==' 'sha256-aWZ3y/RxbBYKHXH0z8+8ljrHG1mSBvyzSfxSMjBSaXk=' 'sha256-vOgyKS2vkH4n5TxBJpeh9SgzrE6LVGsAeOAvEST6oCc='; style-src 'self' https://*.netlify.app 'unsafe-inline'
+  Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self' https://*.netlify.app; connect-src 'self' https://*.netlify.app; font-src 'self' https://*.netlify.app; img-src 'self' https://*.netlify.app data: https://i.giphy.com; script-src 'self' https://*.netlify.app 'sha512-RGGByJUOP98hE4wFZM78RM/3MijWJs0Tm0DbfrFhCDCXKXfDx60fii+syp5iMs3UcNX/1H4zJNgmqSejfhHrYw==' 'sha512-RBYr6Ld4w1yVqaACrgrBLQfPgGhj/1jyacA74WxJ1KM6KVcSWymwrdDwb3HDcdpwiNJ5yssot1He0U9vXoQVlg==' 'sha256-aWZ3y/RxbBYKHXH0z8+8ljrHG1mSBvyzSfxSMjBSaXk=' 'sha256-vOgyKS2vkH4n5TxBJpeh9SgzrE6LVGsAeOAvEST6oCc='; style-src 'self' https://*.netlify.app 'unsafe-inline'
   X-Frame-Options: SAMEORIGIN
   Referrer-Policy: strict-origin
   Feature-Policy: geolocation 'self'

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 -}}
+
+<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 }}">

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

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

layouts/partials/footer/script-footer.html

@@ -34,9 +34,14 @@
   {{ $slice = $slice | append $instantPage -}}
 {{ end -}}
 
-{{ if .Site.Params.options.flexSearch -}}
+{{ $showFlexSearch := .Site.Params.options.flexSearch }}
+
+{{ if $showFlexSearch -}}
   {{ $flexSearch := resources.Get "js/vendor/flexsearch/dist/flexsearch.bundle.js" -}}
   {{ $slice = $slice | append $flexSearch -}}
+  {{ if and (isset .Site.Params.options "searchsectionsshow") (not (eq .Site.Params.options.searchSectionsShow "ALL")) -}}
+  {{ $showFlexSearch = or (eq (len .Site.Params.options.searchSectionsShow) 0) (in .Site.Params.options.searchSectionsShow .Section) (and .IsHome (in .Site.Params.options.searchSectionsShow "HomePage")) -}}
+  {{ end -}}
 {{ end -}}
 
 {{ if .Site.Params.options.darkMode -}}
@@ -60,6 +65,12 @@
 {{ $scrollLock := resources.Get "js/scroll-lock.js" | js.Build -}}
 {{ $slice = $slice | append $scrollLock -}}
 
+{{ if .Site.Params.options.toTopButton -}}
+  {{ $toTopButton := resources.Get "js/to-top.js" -}}
+  {{ $toTopButton := $toTopButton | js.Build -}}
+  {{ $slice = $slice | append $toTopButton -}}
+{{ end -}}
+
 {{ $js := $slice | resources.Concat "main.js" -}}
 
 {{ if eq (hugo.Environment) "development" -}}
@@ -77,7 +88,7 @@
   {{ with .Params.mermaid -}}
     <script src="{{ $mermaid.RelPermalink }}" defer></script>
   {{ end -}}
-  {{ if .Site.Params.options.flexSearch -}}
+  {{ if $showFlexSearch -}}
     <script src="{{ $index.RelPermalink }}" defer></script>
   {{ end -}}
 {{ else -}}
@@ -102,7 +113,7 @@
   {{ with .Params.mermaid -}}
     <script src="{{ $mermaid.RelPermalink }}" integrity="{{ $mermaid.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
-  {{ if .Site.Params.options.flexSearch -}}
+  {{ if $showFlexSearch -}}
     <script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
 {{ end -}}

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">
@@ -77,7 +77,14 @@
           {{ end -}}
         </ul>
 
-        {{ if .Site.Params.options.flexSearch -}}
+        {{- $showFlexSearch := .Site.Params.options.flexSearch }}
+        {{- if $showFlexSearch }}
+        {{- if and (isset .Site.Params.options "searchsectionsshow") (not (eq .Site.Params.options.searchSectionsShow "ALL")) }}
+        {{- $showFlexSearch = or (eq (len .Site.Params.options.searchSectionsShow) 0) (in .Site.Params.options.searchSectionsShow .Section) (and .IsHome (in .Site.Params.options.searchSectionsShow "HomePage")) }}
+        {{- end }}
+        {{- end }}
+
+        {{ if $showFlexSearch -}}
         <hr class="text-black-50 my-4 d-lg-none">
         <form class="doks-search position-relative flex-grow-1 ms-lg-auto me-lg-2">
           <input id="search" class="form-control is-search" type="search" placeholder="Search docs..." aria-label="Search docs..." autocomplete="off">

layouts/partials/main/blog-meta.html

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

layouts/partials/sidebar/auto-collapsible-menu.html

@@ -3,7 +3,7 @@
   {{ $currentPage := . -}}
   {{ $section := $currentPage.Section -}}
   {{ range (where .Site.Sections "Section" "in" $section) }}
-    {{ range .Sections.ByWeight.Reverse }}
+    {{ range .Sections }}
       {{ $active := in $currentPage.RelPermalink .RelPermalink }}
       <li class="mb-1">
         <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#section-{{ md5 .Title }}" aria-expanded="{{ if $active }}true{{ else }}false{{ end }}">

layouts/partials/sidebar/auto-default-menu.html

@@ -2,7 +2,7 @@
 {{ $currentPage := . -}}
 {{ $section := $currentPage.Section -}}
 {{ range (where .Site.Sections "Section" "in" $section) }}
-  {{ range .Sections.ByWeight.Reverse }}
+  {{ range .Sections }}
     {{ $active := in $currentPage.RelPermalink .RelPermalink }}
     <h3 class="h6 text-uppercase mb-2">{{ .Title }}</h3>
     <ul class="list-unstyled">

netlify.toml

@@ -30,7 +30,6 @@
     ignorePeriod = 0
     providers = [
       "google",
-      "bing",
       "yandex"
     ]
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hyas/doks",
   "description": "Doks theme",
-  "version": "0.5.0-alpha.1",
+  "version": "0.5.0-alpha.3",
   "engines": {
     "node": ">=16.15.1"
   },
@@ -38,15 +38,16 @@
     "version": "auto-changelog -p && git add CHANGELOG.md"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17",
+    "@babel/cli": "^7.18",
     "@babel/core": "^7.18",
     "@babel/preset-env": "^7.18",
     "@fullhuman/postcss-purgecss": "^4.1",
+    "@hyas/images": "^0.2.1",
     "auto-changelog": "^2.4",
     "autoprefixer": "^10.4",
     "bootstrap": "^5.2.0-beta1",
     "clipboard": "^2.0",
-    "eslint": "^8.18",
+    "eslint": "^8.19",
     "exec-bin": "^1.0.0",
     "flexsearch": "^0.7.21",
     "highlight.js": "^11.5",
@@ -58,7 +59,7 @@
     "netlify-plugin-submit-sitemap": "^0.4.0",
     "node-fetch": "^3.2",
     "postcss": "^8.4",
-    "postcss-cli": "^9.1",
+    "postcss-cli": "^10.0",
     "purgecss-whitelister": "^2.4",
     "shx": "^0.3.4",
     "stylelint": "^14.9",