docs: upgrade to doks 0.5.0 (#3689)

2024-09-14 22:47:21 +07:00 · 2022-07-14 14:29:54 +10:00 · 2022-07-14 14:29:54 +10:00 · c101a836be
commit c101a836be
parent cc3b26080b
49 changed files with 682 additions and 496 deletions
--- a/docs/archetypes/blog.md
+++ b/docs/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
 ---
--- a/docs/archetypes/docs.md
+++ b/docs/archetypes/docs.md
@ -9,6 +9,7 @@ images: []
 menu:
  docs:
    parent: ""
+    identifier: "{{ .Name }}-{{ delimit (shuffle (split (md5 .Name) "" )) "" }}"
 weight: 999
 toc: true
 ---
--- a/docs/assets/images/default-image.png
+++ b/docs/assets/images/default-image.png
--- a/docs/assets/js/index.js
+++ b/docs/assets/js/index.js
@ -91,8 +91,8 @@ Source:

  {{ $len := (len $list) -}}

-  index.add(
-    {{ range $index, $element := $list -}}
+  {{ range $index, $element := $list -}}
+    index.add(
      {
        id: {{ $index }},
        href: "{{ .RelPermalink }}",
@ -103,12 +103,9 @@ Source:
          description: {{ .Summary | plainify | jsonify }},
        {{ end -}}
        content: {{ .Plain | jsonify }}
-      })
-      {{ if ne (add $index 1) $len -}}
-        .add(
-      {{ end -}}
-    {{ end -}}
-  ;
+      }
+    );
+  {{ end -}}

  search.addEventListener('input', show_results, true);

--- a/docs/assets/js/to-top.js
+++ b/docs/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';
+  }
+
+}
--- a/docs/assets/scss/common/_dark.scss
+++ b/docs/assets/scss/common/_dark.scss
@ -570,3 +570,13 @@ $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] #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;
+}
--- a/docs/assets/scss/common/_global.scss
+++ b/docs/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;
 }
@ -130,6 +132,10 @@ body {
      z-index: 1000;
      height: calc(100vh - 4rem);
    }
+
+    .docs-sidebar-top {
+      top: 0;
+    }
  }
 }

@ -173,6 +179,10 @@ body {
    height: calc(100vh - 4rem);
    overflow-y: auto;
  }
+
+  .docs-toc-top {
+    top: 0;
+  }
 }

 .docs-content {
@ -206,11 +216,17 @@ body {
  text-decoration: none;
 }

-#TableOfContents ul {
+#TableOfContents ul,
+#toc ul {
  padding-left: 0;
  list-style: none;
 }

+#toc a.active {
+  color: $primary;
+  font-weight: 500;
+}
+
 ::selection {
  background: rgba(212, 53, 159, 0.2);
 }
--- a/docs/assets/scss/components/_buttons.scss
+++ b/docs/assets/scss/components/_buttons.scss
@ -4,9 +4,7 @@
 }

 #mode {
-  padding-right: 0.25rem;
-  padding-left: 0.25rem;
-  margin-right: -0.25rem;
+  padding: 0.5rem;
 }

 .btn-link:focus {
@ -18,10 +16,10 @@
  margin-left: 1.25rem;
 }

-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(lg) {
  #mode {
-    margin-left: 1.125rem;
-    margin-right: -0.375rem;
+    margin-left: 0.5rem;
+    margin-right: 0.25rem;
  }

  .navbar .btn-link {
@ -187,6 +185,20 @@ pre {
  color: $link-color;
 }

+.dropdown-menu {
+  /*
+  width: 100%;
+  */
+
+  width: auto;
+}
+
+@include media-breakpoint-up(lg) {
+  .dropdown-menu {
+    width: auto;
+  }
+}
+
 .doks-navbar .dropdown-menu,
 .doks-subnavbar .dropdown-menu {
  font-size: 0.875rem;
@ -219,16 +231,6 @@ pre {
  margin-right: -0.3125rem;
 }

-.dropdown-menu.dropdown-menu-main {
-  width: 100%;
-}
-
-@include media-breakpoint-up(md) {
-  .dropdown-menu.dropdown-menu-main {
-    width: auto;
-  }
-}
-
 .dropdown-menu-main .dropdown-item {
  color: inherit;
  font-size: $font-size-base;
--- a/docs/assets/scss/components/_images.scss
+++ b/docs/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 {
--- a/docs/assets/scss/components/_search.scss
+++ b/docs/assets/scss/components/_search.scss
@ -4,10 +4,19 @@

 #suggestions {
  position: absolute;
-  left: 0;
+  right: 0;
  margin-top: 0.5rem;
  width: calc(100vw - 3rem);
+  max-width: calc(400px - 3rem);
  z-index: $zindex-dropdown;
+
+  @include media-breakpoint-up(md) {
+    right: -2rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    right: 0;
+  }
 }

 #suggestions a,
@ -57,9 +66,10 @@
  color: $gray-700;
 }

-@include media-breakpoint-up(sm) {
+@include media-breakpoint-up(lg) {
  #suggestions {
    width: 31.125rem;
+    max-width: 31.125rem;
  }

  #suggestions a {
--- a/docs/assets/scss/custom.scss
+++ b/docs/assets/scss/custom.scss
@ -1,3 +1,8 @@
+figure.figure-blog {
+  display: flex;
+  justify-content: center;
+}
+
 .text-orange {
  --bs-text-opacity: 1;

--- a/docs/assets/scss/layouts/_header.scss
+++ b/docs/assets/scss/layouts/_header.scss
@ -39,6 +39,8 @@
@include media-breakpoint-up(lg) {
  .navbar {
    z-index: 1025;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
  }
 }

@ -87,13 +89,19 @@
 }

 button#doks-languages {
-  margin-right: -0.5625rem;
-  margin-left: 0.75rem;
+  margin: 0.25rem 0 0;
+
+  @include media-breakpoint-up(lg) {
+    margin: 0.25rem 0.5rem 0 0.25rem;
+  }
 }

 button#doks-versions {
-  margin-right: -0.5625rem;
-  margin-left: 0;
+  margin: 0.25rem 0 0;
+
+  @include media-breakpoint-up(lg) {
+    margin: 0.25rem 0.5rem 0 0.25rem;
+  }
 }

 .offcanvas .nav-link {
@ -185,6 +193,14 @@ button#doks-versions {
  padding-right: 4rem;
  border: 1px solid transparent;
  background: $gray-100;
+
+  @include media-breakpoint-up(md) {
+    width: calc(100% + 2rem);
+  }
+
+  @include media-breakpoint-up(lg) {
+    width: 100%;
+  }
 }

 .form-control.is-search:focus {
@ -206,6 +222,14 @@ button#doks-versions {
  content: "Ctrl + /";
  border: 1px solid $gray-300;
  border-radius: 0.25rem;
+
+  @include media-breakpoint-up(md) {
+    right: -1.4625rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    right: 0.3125rem;
+  }
 }

 /*
@ -389,6 +413,11 @@ button#doks-versions {

 .btn-menu {
  margin-left: 1rem;
+  border: transparent;
+}
+
+.btn-doks-light {
+  border: transparent;
 }

 .btn-menu,
@ -402,23 +431,29 @@ button#doks-versions {
 .btn-doks-light:hover,
 .doks-sidebar-toggle:hover {
  background: $pink-100;
+  border: transparent;
 }

 .btn-menu:focus,
+.btn-doks-light:focus,
 .doks-sidebar-toggle:focus,
 .doks-mode-toggle:focus {
  outline: 0;
+  border: transparent;
 }

-.doks-sidebar-toggle .doks-collapse {
+.doks-sidebar-toggle .doks-collapse,
+.doks-toc-toggle .doks-collapse {
  display: none;
 }

-.doks-sidebar-toggle:not(.collapsed) .doks-expand {
+.doks-sidebar-toggle:not(.collapsed) .doks-expand,
+.doks-toc-toggle:not(.collapsed) .doks-expand {
  display: none;
 }

-.doks-sidebar-toggle:not(.collapsed) .doks-collapse {
+.doks-sidebar-toggle:not(.collapsed) .doks-collapse,
+.doks-toc-toggle:not(.collapsed) .doks-collapse {
  display: inline-block;
 }

@ -443,3 +478,16 @@ button#doks-versions {
 .dropdown-item:active {
  color: inherit;
 }
+
+.social-link {
+  padding-left: 0.5rem;
+
+  @include media-breakpoint-up(md) {
+    padding-left: 0;
+  }
+
+  @include media-breakpoint-up(lg) {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+}
--- a/docs/assets/scss/layouts/_posts.scss
+++ b/docs/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/docs/config/_default/config.toml
+++ b/docs/config/_default/config.toml
@ -5,7 +5,6 @@ disableHugoGeneratorInject = true
 enableEmoji = true
 enableGitInfo = true
 enableRobotsTXT = true
-languageCode = "en-US"
 paginate = 7
 rssLimit = 10
 title = "Authelia"
@ -60,6 +59,8 @@ rel  = "sitemap"

 [taxonomies]
  contributor = "contributors"
+  category = "categories"
+  tag = "tags"

 [permalinks]
  blog = "/blog/:title/"
@ -67,6 +68,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 +93,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 +105,6 @@ rel  = "sitemap"
  [[module.mounts]]
    source = "node_modules/mermaid"
    target = "assets/js/vendor/mermaid"
+  [[module.mounts]]
+    source = "node_modules/@hyas/images/layouts"
+    target = "layouts"
--- a/docs/config/_default/languages.toml
+++ b/docs/config/_default/languages.toml
@ -4,3 +4,4 @@
  weight = 10
  [en.params]
    languageISO = "EN"
+    languageTag = "en-US"
--- a/docs/config/_default/params.toml
+++ b/docs/config/_default/params.toml
@ -52,6 +52,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>"

@ -71,12 +82,15 @@ docsRepoSubPath = "docs"
 editPage = true
 lastMod = true

+[sections]
+  sectionNav = ["docs", "guides"]
+
 [options]
  lazySizes = true
  clipBoard = true
  instantPage = true
  flexSearch = true
-  searchSectionsShow = ["overview", "configuration", "integration", "contributing", "reference"]
+  searchSectionsShow = "ALL"
  searchSectionsIndex = ["overview", "configuration", "integration", "contributing", "reference", "blog"]
  darkMode = true
  bootStrapJs = true
@ -86,6 +100,9 @@ lastMod = true
  multilingualMode = false
  docsVersioning = false
  fullWidth = false
+  navbarSticky = true
+  toTopButton = false
+  scrollSpy = false # experimental; needs Bootstrap >= 5.2.0-beta1

 [menu]
  [menu.section]
--- a/docs/config/postcss.config.js
+++ b/docs/config/postcss.config.js
@ -22,6 +22,11 @@ module.exports = {
        'alert-link',
        'container-xxl',
        'container-fluid',
+        'offcanvas-backdrop',
+        'img-fluid',
+        'lazyload',
+        'blur-up',
+        'figcaption',
        ...whitelister([
          './assets/scss/components/_alerts.scss',
          './assets/scss/components/_buttons.scss',
--- a/docs/content/en/contributing/prologue/financial/index.md
+++ b/docs/content/en/contributing/prologue/financial/index.md
@ -48,7 +48,7 @@ We are currently directly looking for someone to sponsor:

 Our [apt repository](https://apt.authelia.com) is hosted thanks to [Balto](https://www.getbalto.com/?from=Authelia).

-{{< figure src="balto.svg" alt="Balto" height="50" style="padding-right: 10px" >}}
+{{< figure src="/images/logos/balto.svg" alt="Balto" width="193" style="padding-right: 10px"  ignoreStaticImages="false" >}}

 ### Buildkite

@ -63,7 +63,7 @@ Our [localization platform](https://translate.authelia.com) is hosted by [Crowdi

 Our development IDE's are provided by [JetBrains](https://www.jetbrains.com/?from=Authelia).

-{{< figure src="jetbrains.svg" alt="JetBrains" height="50" style="padding-right: 10px" >}}
+{{< figure src="/images/logos/jetbrains.svg" alt="JetBrains" width="50" style="padding-right: 10px" ignoreStaticImages="false" >}}

 ### Microsoft

@ -71,9 +71,9 @@ Our pipeline agents which we rely on for productivity are hosted on [Azure](http
 and our [git repositories](https://github.com/authelia) are hosted on [GitHub](https://github.com/?from=Authela)
 which are both [Microsoft](https://www.microsoft.com/?from=Authelia) products.

-{{< figure src="microsoft.svg" alt="Microsoft" height="50" style="padding-right: 10px" >}}
+{{< figure src="/images/logos/microsoft.svg" alt="Microsoft" width="234.45" style="padding-right: 10px" ignoreStaticImages="false" >}}

-{{< figure src="azure.svg" alt="Azure" height="50" style="padding-right: 10px" >}}
+{{< figure src="/images/logos/azure.svg" alt="Azure" width="173.55" style="padding-right: 10px" ignoreStaticImages="false" >}}

 ### Netlify

--- a/docs/content/en/contributing/prologue/financial/azure.svg
+++ b/docs/content/en/contributing/prologue/financial/azure.svg
--- a/docs/content/en/contributing/prologue/financial/balto.svg
+++ b/docs/content/en/contributing/prologue/financial/balto.svg
@ -1,90 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="30.638742mm"
-   height="7.9375401mm"
-   viewBox="0 0 30.638742 7.9375401"
-   version="1.1"
-   id="svg8"
-   inkscape:version="1.0beta2 (2b71d25, 2019-12-03)"
-   sodipodi:docname="Logo.svg">
-  <style
-     id="style35"></style>
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="11.2"
-     inkscape:cx="38.03386"
-     inkscape:cy="17.96534"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     inkscape:document-rotation="0"
-     showgrid="true"
-     inkscape:window-width="1600"
-     inkscape:window-height="1209"
-     inkscape:window-x="0"
-     inkscape:window-y="23"
-     inkscape:window-maximized="0">
-    <inkscape:grid
-       originy="-144.19792"
-       originx="-90.222915"
-       id="grid20"
-       type="xygrid" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(-90.222917,-144.19792)"
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <path
-       inkscape:connector-curvature="0"
-       id="path14"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.58329999999999949px;line-height:1.25;font-family:'Montserrat Alternates';-inkscape-font-specification:'Montserrat Alternates Bold';fill:#0055d6;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 95.906247,146.27227 c 0.529165,0 1.008939,0.12347 1.439324,0.37041 0.437447,0.23989 0.77964,0.58209 1.02658,1.02658 0.246947,0.43745 0.37042,0.94897 0.37042,1.53458 0,0.58561 -0.123473,1.10067 -0.37042,1.54516 -0.24694,0.43745 -0.589133,0.77964 -1.02658,1.02658 -0.430385,0.23989 -0.910159,0.35984 -1.439324,0.35984 -1.979164,0 -3.831247,0 -5.68333,0 l 0.330566,-1.4726 1.957889,-0.0178 c -0.682235,-2.01853 -1.792931,-5.05462 -2.288455,-6.4471 l 1.897472,2e-5 1.197269,3.28196 c 0.392654,-0.78934 1.483869,-1.20763 2.588565,-1.20763 z m -0.285749,4.50848 c 0.423332,0 0.769053,-0.14111 1.037163,-0.42333 0.275166,-0.28927 0.412749,-0.6738 0.412749,-1.15358 0,-0.47977 -0.137583,-0.86077 -0.412749,-1.14299 -0.26811,-0.28928 -0.613831,-0.43392 -1.037163,-0.43392 -0.423332,0 -0.772581,0.14464 -1.047747,0.43392 -0.26811,0.28222 -0.402165,0.66322 -0.402165,1.14299 0,0.47978 0.134055,0.86431 0.402165,1.15358 0.275166,0.28222 0.624415,0.42333 1.047747,0.42333 z"
-       sodipodi:nodetypes="sccscccccccccsscscscscsc" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path16"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.58329999999999949px;line-height:1.25;font-family:'Montserrat Alternates';-inkscape-font-specification:'Montserrat Alternates Bold';fill:#0055d6;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 105.61592,146.35693 v 5.69382 h -1.57691 v -0.65617 q -0.61384,0.74084 -1.778,0.74084 -0.80433,0 -1.46049,-0.35984 -0.64558,-0.35983 -1.015991,-1.02658 -0.37042,-0.66674 -0.37042,-1.54516 0,-0.87841 0.37042,-1.54516 0.370411,-0.66675 1.015991,-1.02658 0.65616,-0.35983 1.46049,-0.35983 1.09008,0 1.70391,0.68791 v -0.60325 z m -3.06916,4.42382 q 0.62442,0 1.03716,-0.42333 0.41275,-0.43391 0.41275,-1.15358 0,-0.71966 -0.41275,-1.14299 -0.41274,-0.43392 -1.03716,-0.43392 -0.635,0 -1.04775,0.43392 -0.41274,0.42333 -0.41274,1.14299 0,0.71967 0.41274,1.15358 0.41275,0.42333 1.04775,0.42333 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path18"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.58329999999999949px;line-height:1.25;font-family:'Montserrat Alternates';-inkscape-font-specification:'Montserrat Alternates Bold';fill:#0055d6;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 109.1767,152.13542 q -0.96308,0 -1.50283,-0.508 -0.53975,-0.51858 -0.53975,-1.4605 v -5.96898 h 1.651 v 5.87373 q 0,0.35983 0.17992,0.56092 0.19049,0.1905 0.52916,0.1905 0.127,0 0.254,-0.0317 0.13758,-0.0318 0.21167,-0.0741 l 0.0741,1.28058 q -0.41275,0.13759 -0.85725,0.13759 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path20"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.58329999999999949px;line-height:1.25;font-family:'Montserrat Alternates';-inkscape-font-specification:'Montserrat Alternates Bold';fill:#0055d6;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 114.28381,151.77558 q -0.24342,0.17992 -0.60325,0.27517 -0.34925,0.0847 -0.73025,0.0847 -1.02658,0 -1.57691,-0.51859 -0.55033,-0.51858 -0.55033,-1.52399 v -4.99532 h 1.65099 v 1.38641 h 1.40758 v 1.27 h -1.40758 v 2.31774 q 0,0.35983 0.17992,0.56092 0.17991,0.1905 0.51858,0.1905 0.381,0 0.67733,-0.21167 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path22"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.58329999999999949px;line-height:1.25;font-family:'Montserrat Alternates';-inkscape-font-specification:'Montserrat Alternates Bold';fill:#0055d6;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 117.73958,152.13542 q -0.89958,0 -1.61924,-0.37042 -0.70908,-0.381 -1.11125,-1.04775 -0.40216,-0.66674 -0.40216,-1.51341 0,-0.84666 0.40216,-1.51341 0.40217,-0.66675 1.11125,-1.03716 0.71966,-0.381 1.61924,-0.381 0.89958,0 1.60866,0.381 0.70909,0.37041 1.11125,1.03716 0.40217,0.66675 0.40217,1.51341 0,0.84667 -0.40217,1.51341 -0.40216,0.66675 -1.11125,1.04775 -0.70908,0.37042 -1.60866,0.37042 z m 0,-1.35467 q 0.635,0 1.03717,-0.42333 0.41274,-0.43391 0.41274,-1.15358 0,-0.71966 -0.41274,-1.14299 -0.40217,-0.43392 -1.03717,-0.43392 -0.635,0 -1.04774,0.43392 -0.41275,0.42333 -0.41275,1.14299 0,0.71967 0.41275,1.15358 0.41274,0.42333 1.04774,0.42333 z" />
-  </g>
-</svg>
--- a/docs/content/en/contributing/prologue/financial/jetbrains.svg
+++ b/docs/content/en/contributing/prologue/financial/jetbrains.svg
@ -1,66 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="120.1px" height="130.2px" viewBox="0 0 120.1 130.2" style="enable-background:new 0 0 120.1 130.2;" xml:space="preserve"
-	>
-<g>
-	<linearGradient id="XMLID_2_" gradientUnits="userSpaceOnUse" x1="31.8412" y1="120.5578" x2="110.2402" y2="73.24">
-		<stop  offset="0" style="stop-color:#FCEE39"/>
-		<stop  offset="1" style="stop-color:#F37B3D"/>
-	</linearGradient>
-	<path id="XMLID_3041_" style="fill:url(#XMLID_2_);" d="M118.6,71.8c0.9-0.8,1.4-1.9,1.5-3.2c0.1-2.6-1.8-4.7-4.4-4.9
-		c-1.2-0.1-2.4,0.4-3.3,1.1l0,0l-83.8,45.9c-1.9,0.8-3.6,2.2-4.7,4.1c-2.9,4.8-1.3,11,3.6,13.9c3.4,2,7.5,1.8,10.7-0.2l0,0l0,0
-		c0.2-0.2,0.5-0.3,0.7-0.5l78-54.8C117.3,72.9,118.4,72.1,118.6,71.8L118.6,71.8L118.6,71.8z"/>
-	<linearGradient id="XMLID_3_" gradientUnits="userSpaceOnUse" x1="48.3607" y1="6.9083" x2="119.9179" y2="69.5546">
-		<stop  offset="0" style="stop-color:#EF5A6B"/>
-		<stop  offset="0.57" style="stop-color:#F26F4E"/>
-		<stop  offset="1" style="stop-color:#F37B3D"/>
-	</linearGradient>
-	<path id="XMLID_3049_" style="fill:url(#XMLID_3_);" d="M118.8,65.1L118.8,65.1L55,2.5C53.6,1,51.6,0,49.3,0
-		c-4.3,0-7.7,3.5-7.7,7.7v0c0,2.1,0.8,3.9,2.1,5.3l0,0l0,0c0.4,0.4,0.8,0.7,1.2,1l67.4,57.7l0,0c0.8,0.7,1.8,1.2,3,1.3
-		c2.6,0.1,4.7-1.8,4.9-4.4C120.2,67.3,119.7,66,118.8,65.1z"/>
-	<linearGradient id="XMLID_4_" gradientUnits="userSpaceOnUse" x1="52.9467" y1="63.6407" x2="10.5379" y2="37.1562">
-		<stop  offset="0" style="stop-color:#7C59A4"/>
-		<stop  offset="0.3852" style="stop-color:#AF4C92"/>
-		<stop  offset="0.7654" style="stop-color:#DC4183"/>
-		<stop  offset="0.957" style="stop-color:#ED3D7D"/>
-	</linearGradient>
-	<path id="XMLID_3042_" style="fill:url(#XMLID_4_);" d="M57.1,59.5C57,59.5,17.7,28.5,16.9,28l0,0l0,0c-0.6-0.3-1.2-0.6-1.8-0.9
-		c-5.8-2.2-12.2,0.8-14.4,6.6c-1.9,5.1,0.2,10.7,4.6,13.4l0,0l0,0C6,47.5,6.6,47.8,7.3,48c0.4,0.2,45.4,18.8,45.4,18.8l0,0
-		c1.8,0.8,3.9,0.3,5.1-1.2C59.3,63.7,59,61,57.1,59.5z"/>
-	<linearGradient id="XMLID_5_" gradientUnits="userSpaceOnUse" x1="52.1736" y1="3.7019" x2="10.7706" y2="37.8971">
-		<stop  offset="0" style="stop-color:#EF5A6B"/>
-		<stop  offset="0.364" style="stop-color:#EE4E72"/>
-		<stop  offset="1" style="stop-color:#ED3D7D"/>
-	</linearGradient>
-	<path id="XMLID_3057_" style="fill:url(#XMLID_5_);" d="M49.3,0c-1.7,0-3.3,0.6-4.6,1.5L4.9,28.3c-0.1,0.1-0.2,0.1-0.2,0.2l-0.1,0
-		l0,0c-1.7,1.2-3.1,3-3.9,5.1C-1.5,39.4,1.5,45.9,7.3,48c3.6,1.4,7.5,0.7,10.4-1.4l0,0l0,0c0.7-0.5,1.3-1,1.8-1.6l34.6-31.2l0,0
-		c1.8-1.4,3-3.6,3-6.1v0C57.1,3.5,53.6,0,49.3,0z"/>
-	<g id="XMLID_3008_">
-		<rect id="XMLID_3033_" x="34.6" y="37.4" style="fill:#000000;" width="51" height="51"/>
-		<rect id="XMLID_3032_" x="39" y="78.8" style="fill:#FFFFFF;" width="19.1" height="3.2"/>
-		<g id="XMLID_3009_">
-			<path id="XMLID_3030_" style="fill:#FFFFFF;" d="M38.8,50.8l1.5-1.4c0.4,0.5,0.8,0.8,1.3,0.8c0.6,0,0.9-0.4,0.9-1.2l0-5.3l2.3,0
-				l0,5.3c0,1-0.3,1.8-0.8,2.3c-0.5,0.5-1.3,0.8-2.3,0.8C40.2,52.2,39.4,51.6,38.8,50.8z"/>
-			<path id="XMLID_3028_" style="fill:#FFFFFF;" d="M45.3,43.8l6.7,0v1.9l-4.4,0V47l4,0l0,1.8l-4,0l0,1.3l4.5,0l0,2l-6.7,0
-				L45.3,43.8z"/>
-			<path id="XMLID_3026_" style="fill:#FFFFFF;" d="M55,45.8l-2.5,0l0-2l7.3,0l0,2l-2.5,0l0,6.3l-2.3,0L55,45.8z"/>
-			<path id="XMLID_3022_" style="fill:#FFFFFF;" d="M39,54l4.3,0c1,0,1.8,0.3,2.3,0.7c0.3,0.3,0.5,0.8,0.5,1.4v0
-				c0,1-0.5,1.5-1.3,1.9c1,0.3,1.6,0.9,1.6,2v0c0,1.4-1.2,2.3-3.1,2.3l-4.3,0L39,54z M43.8,56.6c0-0.5-0.4-0.7-1-0.7l-1.5,0l0,1.5
-				l1.4,0C43.4,57.3,43.8,57.1,43.8,56.6L43.8,56.6z M43,59l-1.8,0l0,1.5H43c0.7,0,1.1-0.3,1.1-0.8v0C44.1,59.2,43.7,59,43,59z"/>
-			<path id="XMLID_3019_" style="fill:#FFFFFF;" d="M46.8,54l3.9,0c1.3,0,2.1,0.3,2.7,0.9c0.5,0.5,0.7,1.1,0.7,1.9v0
-				c0,1.3-0.7,2.1-1.7,2.6l2,2.9l-2.6,0l-1.7-2.5h-1l0,2.5l-2.3,0L46.8,54z M50.6,58c0.8,0,1.2-0.4,1.2-1v0c0-0.7-0.5-1-1.2-1
-				l-1.5,0v2H50.6z"/>
-			<path id="XMLID_3016_" style="fill:#FFFFFF;" d="M56.8,54l2.2,0l3.5,8.4l-2.5,0l-0.6-1.5l-3.2,0l-0.6,1.5l-2.4,0L56.8,54z
-				 M58.8,59l-0.9-2.3L57,59L58.8,59z"/>
-			<path id="XMLID_3014_" style="fill:#FFFFFF;" d="M62.8,54l2.3,0l0,8.3l-2.3,0L62.8,54z"/>
-			<path id="XMLID_3012_" style="fill:#FFFFFF;" d="M65.7,54l2.1,0l3.4,4.4l0-4.4l2.3,0l0,8.3l-2,0L68,57.8l0,4.6l-2.3,0L65.7,54z"
-				/>
-			<path id="XMLID_3010_" style="fill:#FFFFFF;" d="M73.7,61.1l1.3-1.5c0.8,0.7,1.7,1,2.7,1c0.6,0,1-0.2,1-0.6v0
-				c0-0.4-0.3-0.5-1.4-0.8c-1.8-0.4-3.1-0.9-3.1-2.6v0c0-1.5,1.2-2.7,3.2-2.7c1.4,0,2.5,0.4,3.4,1.1l-1.2,1.6
-				c-0.8-0.5-1.6-0.8-2.3-0.8c-0.6,0-0.8,0.2-0.8,0.5v0c0,0.4,0.3,0.5,1.4,0.8c1.9,0.4,3.1,1,3.1,2.6v0c0,1.7-1.3,2.7-3.4,2.7
-				C76.1,62.5,74.7,62,73.7,61.1z"/>
-		</g>
-	</g>
-</g>
-</svg>
--- a/docs/content/en/contributing/prologue/financial/microsoft.svg
+++ b/docs/content/en/contributing/prologue/financial/microsoft.svg
@ -1,42 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="MS-symbol" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 337.6 72" style="enable-background:new 0 0 337.6 72;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#737373;}
-	.st1{fill:#F25022;}
-	.st2{fill:#7FBA00;}
-	.st3{fill:#00A4EF;}
-	.st4{fill:#FFB900;}
-</style>
-<path class="st0" d="M140.4,14.4v43.2h-7.5V23.7h-0.1l-13.4,33.9h-5l-13.7-33.9h-0.1v33.9h-6.9V14.4h10.8l12.4,32h0.2l13.1-32H140.4
-	z M146.6,17.7c0-1.2,0.4-2.2,1.3-3c0.9-0.8,1.9-1.2,3.1-1.2c1.3,0,2.4,0.4,3.2,1.2s1.3,1.8,1.3,3c0,1.2-0.4,2.2-1.3,3
-	c-0.9,0.8-1.9,1.2-3.2,1.2s-2.3-0.4-3.1-1.2C147.1,19.8,146.6,18.8,146.6,17.7z M154.7,26.6v31h-7.3v-31H154.7z M176.8,52.3
-	c1.1,0,2.3-0.2,3.6-0.8c1.3-0.5,2.5-1.2,3.6-2v6.8c-1.2,0.7-2.5,1.2-4,1.5c-1.5,0.3-3.1,0.5-4.9,0.5c-4.6,0-8.3-1.4-11.1-4.3
-	c-2.9-2.9-4.3-6.6-4.3-11c0-5,1.5-9.1,4.4-12.3c2.9-3.2,7-4.8,12.4-4.8c1.4,0,2.8,0.2,4.1,0.5c1.4,0.3,2.5,0.8,3.3,1.2v7
-	c-1.1-0.8-2.3-1.5-3.4-1.9c-1.2-0.4-2.4-0.7-3.6-0.7c-2.9,0-5.2,0.9-7,2.8s-2.6,4.4-2.6,7.6c0,3.1,0.9,5.6,2.6,7.3
-	C171.6,51.4,173.9,52.3,176.8,52.3z M204.7,26.1c0.6,0,1.1,0,1.6,0.1s0.9,0.2,1.2,0.3v7.4c-0.4-0.3-0.9-0.6-1.7-0.8
-	s-1.6-0.4-2.7-0.4c-1.8,0-3.3,0.8-4.5,2.3s-1.9,3.8-1.9,7v15.6h-7.3v-31h7.3v4.9h0.1c0.7-1.7,1.7-3,3-4
-	C201.2,26.6,202.8,26.1,204.7,26.1z M207.9,42.6c0-5.1,1.5-9.2,4.3-12.2c2.9-3,6.9-4.5,12-4.5c4.8,0,8.6,1.4,11.3,4.3
-	s4.1,6.8,4.1,11.7c0,5-1.5,9-4.3,12c-2.9,3-6.8,4.5-11.8,4.5c-4.8,0-8.6-1.4-11.4-4.2C209.3,51.3,207.9,47.4,207.9,42.6z
-	 M215.5,42.3c0,3.2,0.7,5.7,2.2,7.4s3.6,2.6,6.3,2.6c2.6,0,4.7-0.8,6.1-2.6c1.4-1.7,2.1-4.2,2.1-7.6c0-3.3-0.7-5.8-2.1-7.6
-	c-1.4-1.7-3.5-2.6-6-2.6c-2.7,0-4.7,0.9-6.2,2.7C216.2,36.5,215.5,39,215.5,42.3z M250.5,34.8c0,1,0.3,1.9,1,2.5
-	c0.7,0.6,2.1,1.3,4.4,2.2c2.9,1.2,5,2.5,6.1,3.9c1.2,1.5,1.8,3.2,1.8,5.3c0,2.9-1.1,5.2-3.4,7c-2.2,1.8-5.3,2.6-9.1,2.6
-	c-1.3,0-2.7-0.2-4.3-0.5c-1.6-0.3-2.9-0.7-4-1.2v-7.2c1.3,0.9,2.8,1.7,4.3,2.2c1.5,0.5,2.9,0.8,4.2,0.8c1.6,0,2.9-0.2,3.6-0.7
-	c0.8-0.5,1.2-1.2,1.2-2.3c0-1-0.4-1.8-1.2-2.6c-0.8-0.7-2.4-1.5-4.6-2.4c-2.7-1.1-4.6-2.4-5.7-3.8s-1.7-3.2-1.7-5.4
-	c0-2.8,1.1-5.1,3.3-6.9c2.2-1.8,5.1-2.7,8.6-2.7c1.1,0,2.3,0.1,3.6,0.4s2.5,0.6,3.4,0.9V34c-1-0.6-2.1-1.2-3.4-1.7
-	c-1.3-0.5-2.6-0.7-3.8-0.7c-1.4,0-2.5,0.3-3.2,0.8C250.9,33.1,250.5,33.8,250.5,34.8z M266.9,42.6c0-5.1,1.5-9.2,4.3-12.2
-	c2.9-3,6.9-4.5,12-4.5c4.8,0,8.6,1.4,11.3,4.3s4.1,6.8,4.1,11.7c0,5-1.5,9-4.3,12c-2.9,3-6.8,4.5-11.8,4.5c-4.8,0-8.6-1.4-11.4-4.2
-	C268.4,51.3,266.9,47.4,266.9,42.6z M274.5,42.3c0,3.2,0.7,5.7,2.2,7.4s3.6,2.6,6.3,2.6c2.6,0,4.7-0.8,6.1-2.6
-	c1.4-1.7,2.1-4.2,2.1-7.6c0-3.3-0.7-5.8-2.1-7.6c-1.4-1.7-3.5-2.6-6-2.6c-2.7,0-4.7,0.9-6.2,2.7C275.3,36.5,274.5,39,274.5,42.3z
-	 M322.9,32.6h-10.9v25h-7.4v-25h-5.2v-6h5.2v-4.3c0-3.2,1.1-5.9,3.2-8s4.8-3.1,8.1-3.1c0.9,0,1.7,0.1,2.4,0.1s1.3,0.2,1.8,0.4v6.3
-	c-0.2-0.1-0.7-0.3-1.3-0.5c-0.6-0.2-1.3-0.3-2.1-0.3c-1.5,0-2.7,0.5-3.5,1.4c-0.8,0.9-1.2,2.4-1.2,4.2v3.7h10.9v-7l7.3-2.2v9.2h7.4
-	v6h-7.4v14.5c0,1.9,0.4,3.2,1,4c0.7,0.8,1.8,1.2,3.3,1.2c0.4,0,0.9-0.1,1.5-0.3c0.6-0.2,1.1-0.4,1.5-0.7v6c-0.5,0.3-1.2,0.5-2.3,0.7
-	c-1.1,0.2-2.1,0.3-3.2,0.3c-3.1,0-5.4-0.8-6.9-2.4c-1.5-1.6-2.3-4.1-2.3-7.4L322.9,32.6L322.9,32.6z"/>
-<g>
-	<rect class="st1" width="34.2" height="34.2"/>
-	<rect x="37.8" class="st2" width="34.2" height="34.2"/>
-	<rect y="37.8" class="st3" width="34.2" height="34.2"/>
-	<rect x="37.8" y="37.8" class="st4" width="34.2" height="34.2"/>
-</g>
-</svg>
--- a/docs/content/en/integration/kubernetes/introduction.md
+++ b/docs/content/en/integration/kubernetes/introduction.md
@ -14,7 +14,7 @@ aliases:
  - /i/k8s
 ---

-{{< figure src="/images/logos/kubernetes.png" alt="Kubernetes" width="100" style="padding-right: 10px" >}}
+{{< figure src="/images/logos/kubernetes.png" alt="Kubernetes" width="100" style="padding-right: 10px" ignoreStaticImages="false" >}}

 ## UNDER CONSTRUCTION

--- a/docs/content/en/reference/guides/branding.md
+++ b/docs/content/en/reference/guides/branding.md
@ -20,12 +20,12 @@ modifications that are in harmony with the following rules which are not intende
 only intended to preserve the Authelia branding identity:

 1. They do not unreasonably alter the quality of the branding:
-   - Image size changes should be done only when the size is appropriate for the intended display scenario.
-   - Compression should not be applied overly aggressively for the intended display scenario.
+  - Image size changes should be done only when the size is appropriate for the intended display scenario.
+  - Compression should not be applied overly aggressively for the intended display scenario.
 2. The changes do not unreasonably alter the design of the branding and should fit one or more of the following
   categories:
-   - Layout
-   - Format
+  - Layout
+  - Format

 Examples of changes which fit these categories include:

@ -52,7 +52,7 @@ The logo is just the Authelia circle logo without any text.

 #### Logo Example

-{{< figure src="/images/branding/logo.svg" link="/images/branding/logo.svg" target="_blank" alt="Authelia Logo" height="150" >}}
+{{< figure src="/images/branding/logo.svg" link="/images/branding/logo.svg" target="_blank" alt="Authelia Logo" width="150" ignoreStaticImages="false" >}}

 ### Title

@ -64,5 +64,5 @@ The title is the Authelia circle logo with the `authelia` branded text.

 #### Title Example

-{{< figure src="/images/branding/title.svg" link="/images/branding/title.svg" target="_blank" alt="Authelia Title" height="150" >}}
+{{< figure src="/images/branding/title.svg" link="/images/branding/title.svg" target="_blank" alt="Authelia Title" width="300" ignoreStaticImages="false" >}}

--- a/docs/data/languages.json
+++ b/docs/data/languages.json
@ -0,0 +1 @@
+{"defaultLocale":"en","defaultNamespace":"portal","namespaces":["portal"],"languages":[{"display":"German","locale":"de","namespaces":["portal"],"fallbacks":["en"]},{"display":"English","locale":"en","namespaces":["portal"],"fallbacks":["en"]},{"display":"Spanish","locale":"es","namespaces":["portal"],"fallbacks":["en"]},{"display":"French","locale":"fr","namespaces":["portal"],"fallbacks":["en"]},{"display":"Russian","locale":"ru","namespaces":["portal"],"fallbacks":["en"]},{"display":"Swedish","locale":"sv","namespaces":["portal"],"fallbacks":["en"]},{"display":"Swedish (Sweden)","locale":"sv-SE","namespaces":["portal"],"fallbacks":["sv","en"]},{"display":"Chinese (Taiwan)","locale":"zh-TW","namespaces":["portal"],"fallbacks":["en"]}]}
--- a/docs/i18n/en.toml
+++ b/docs/i18n/en.toml
@ -1,2 +0,0 @@
-[get-started]
-   other = "Get Started"
--- a/docs/i18n/en.yaml
+++ b/docs/i18n/en.yaml
@ -0,0 +1,19 @@
+---
+- id: get-started
+  translation: "Get Started"
+
+- id: on-this-page
+  translation: "On this page"
+
+- id: search-text
+  translation: "Search..."
+
+- id: 404-title
+  translation: "Page not found :("
+
+- id: 404-text
+  translation: "The page you are looking for doesn't exist or has been moved. If you followed a link to get to this page please report it if it was on this site, the official GitHub repository, or the logs on the latest version."
+
+- id: browse
+  translation: "Browse"
+...
--- a/docs/layouts/404.html
+++ b/docs/layouts/404.html
@ -2,10 +2,9 @@
 <div class="row justify-content-center">
  <div class="col-md-12 col-lg-10 col-xl-8">
    <article>
-      <h1 class="text-center">Page not found :(</h1>
-      <p class="text-center">The page you are looking for doesn't exist or has been moved.</p>
-      <p class="text-center">If you followed a link to get to this page please report it if it was on this site, the official GitHub repository, or the logs on the latest version.</p>
+      <h1 class="text-center">{{ i18n "404-title" }}</h1>
+      <p class="text-center">{{ i18n "404-text" }}</p>
    </article>
  </div>
 </div>
-{{ end }}
+{{ end }}
--- a/docs/layouts/_default/baseof.html
+++ b/docs/layouts/_default/baseof.html
@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ .Site.LanguageCode | default "en" }}">
+<html lang="{{ .Site.Params.languageTag | default "en-US" }}">
  {{ partial "head/head.html" . }}
  {{ if eq .Kind "home" -}}
    {{ .Scratch.Set "class" "home" -}}
@ -12,7 +12,7 @@
    {{ .Scratch.Set "class" .Type -}}
    {{ .Scratch.Add "class" " list" -}}
  {{ end -}}
-  <body class="{{ .Scratch.Get "class" }}">
+  <body class="{{ .Scratch.Get "class" }}"{{ if eq .Site.Params.options.scrollSpy true }} data-bs-spy="scroll" data-bs-target="#toc" data-bs-root-margin="0px 0px -90%" data-bs-smooth-scroll="true" tabindex="0"{{ end }}>
    {{ partial "header/header.html" . }}
    <div class="wrap container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }}" role="document">
      <div class="content">
@ -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>
--- a/docs/layouts/_default/list.html
+++ b/docs/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/docs/layouts/_default/terms.html
+++ b/docs/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/docs/layouts/blog/list.html
+++ b/docs/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 }}
--- a/docs/layouts/blog/single.html
+++ b/docs/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">
-    <article>
-      <div class="blog-header">
-        <h1>{{ .Title }}</h1>
-        {{ partial "main/blog-meta.html" . }}
-      </div>
-      <p class="lead">{{ .Params.lead | safeHTML }}</p>
-      {{ .Content }}
-    </article>
+  <div class="col-md-12 col-lg-10">
+    <div class="blog-header">
+      <h1>{{ .Title }}</h1>
+      {{ partial "main/blog-meta.html" . }}
+    </div>
+  </div>
+  <div class="col-md-13">
+    <div>
+      {{- .Scratch.Set "fillImage" "1270x715 Center" -}}
+      {{ partial "content/figure-blog.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>
-{{ end }}
+</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 }}
+
+
--- a/docs/layouts/contributing/single.html
+++ b/docs/layouts/contributing/single.html
@ -1,13 +1,13 @@
 {{ define "main" }}
 	<div class="row flex-xl-nowrap">
-		<div class="col-lg-5 col-xl-4 docs-sidebar d-none d-lg-block">
+		<div class="col-lg-5 col-xl-4 docs-sidebar{{ if ne .Site.Params.options.navbarSticky true }} docs-sidebar-top{{ end }} d-none d-lg-block">
 			<nav {{ if eq .Site.Params.menu.section.collapsibleSidebar false }}id="sidebar-default" {{ end }}class="docs-links" aria-label="Main navigation">
-        {{ partial "sidebar/docs-menu.html" . }}
+				{{ partial "sidebar/docs-menu.html" . }}
 			</nav>
 		</div>
 		{{ if ne .Params.toc false -}}
-		<nav class="docs-toc d-none d-xl-block col-xl-3" aria-label="Secondary navigation">
-      {{ partial "sidebar/docs-toc.html" . }}
+		<nav class="docs-toc{{ if ne .Site.Params.options.navbarSticky true }} docs-toc-top{{ end }} d-none d-xl-block col-xl-3" aria-label="Secondary navigation">
+			{{ partial "sidebar/docs-toc.html" . }}
 		</nav>
 		{{ end -}}
 		{{ if .Params.toc -}}
@ -28,7 +28,7 @@
 			<p class="lead">{{ .Params.lead | safeHTML }}</p>
 			{{ if ne .Params.toc false -}}
 			<nav class="d-xl-none" aria-label="Quaternary navigation">
-        {{ partial "sidebar/docs-toc.html" . }}
+				{{ partial "sidebar/docs-toc.html" . }}
 			</nav>
 			{{ end -}}
 			{{ .Content }}
@ -40,7 +40,7 @@
 					{{ partial "main/edit-page.html" . }}
 				{{ end -}}
 			</div>
-      {{ partial "main/docs-navigation.html" . }}
+			{{ partial "main/docs-navigation.html" . }}
 			<!--
 			{{ if not .Site.Params.options.collapsibleSidebar -}}
 				{{ partial "main/docs-navigation.html" . }}
--- a/docs/layouts/partials/content/card-image.html
+++ b/docs/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 }}">
--- a/docs/layouts/partials/content/figure-blog.html
+++ b/docs/layouts/partials/content/figure-blog.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 figure-blog">
+    <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 -}}
--- a/docs/layouts/partials/content/figure.html
+++ b/docs/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 -}}
--- a/docs/layouts/partials/content/image.html
+++ b/docs/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 -}}
--- a/docs/layouts/partials/footer/script-footer.html
+++ b/docs/layouts/partials/footer/script-footer.html
@ -65,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" -}}
--- a/docs/layouts/partials/head/custom-head.html
+++ b/docs/layouts/partials/head/custom-head.html
@ -0,0 +1 @@
+<!-- Custom head -->
--- a/docs/layouts/partials/head/favicons.html
+++ b/docs/layouts/partials/head/favicons.html
@ -1,4 +1,8 @@
 <meta name="theme-color" content="{{ $.Site.Params.themeColor }}">
+<link rel="icon" href="{{ "favicon.ico" | absURL }}" sizes="any">
+{{ if os.FileExists "static/favicon.svg" -}}
+  <link rel="icon" type="image/svg+xml" href="{{ "favicon.svg" | absURL }}">
+{{ end -}}
 <link rel="apple-touch-icon" sizes="180x180" href="{{ "apple-touch-icon.png" | absURL }}">
 <link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | absURL }}">
 <link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | absURL }}">
--- a/docs/layouts/partials/head/head.html
+++ b/docs/layouts/partials/head/head.html
@ -7,4 +7,5 @@
  {{ block "head/stylesheet" . }}{{ partial "head/stylesheet.html" . }}{{ end }}
  {{ block "head/seo" . }}{{ partial "head/seo.html" . }}{{ end }}
  {{ block "head/favicons" . }}{{ partial "head/favicons.html" . }}{{ end }}
-</head>
+  {{ block "head/custom-head" . }}{{ partial "head/custom-head.html" . }}{{ end }}
+</head>
--- a/docs/layouts/partials/header/header.html
+++ b/docs/layouts/partials/header/header.html
@ -2,38 +2,58 @@
  {{ partial "header/alert.html" . }}
 {{ end -}}

-{{ if eq .Site.Params.options.flexSearch false -}}
-<div class="sticky-lg-top">
+{{ if eq .Site.Params.options.navbarSticky true -}}
+<div class="sticky-top">
 {{ end -}}

 <div class="header-bar"></div>

-<header class="navbar navbar-expand-md navbar-light doks-navbar">
-  <nav class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }} flex-wrap flex-md-nowrap" aria-label="Main navigation">
-    <a class="navbar-brand p-0 me-auto" href="{{ "/" | relLangURL }}" aria-label="{{ .Site.Params.Title }}">
+<header class="navbar navbar-expand-lg navbar-light doks-navbar">
+  <nav class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }} flex-wrap flex-lg-nowrap" aria-label="Main navigation">
+
+    <a class="navbar-brand order-0" href="{{ "/" | relLangURL }}" aria-label="{{ .Site.Params.Title }}">
      {{ .Site.Params.Title }}
    </a>

-    <button class="btn btn-menu d-block d-md-none order-5" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDoks" aria-controls="offcanvasDoks" aria-label="Open main menu">
+    {{ if (in .Site.Params.sections.sectionNav .Section) -}}
+    <button class="btn btn-link order-0 ms-auto d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
+      <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-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+    </button>
+    <div class="offcanvas offcanvas-start d-lg-none" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
+      <div class="header-bar"></div>
+      <div class="offcanvas-header">
+        <h5 class="offcanvas-title" id="offcanvasExampleLabel">{{ i18n "browse" }} {{ .Section  }}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+      <div class="offcanvas-body">
+        <aside class="doks-sidebar mt-n3">
+          <nav id="doks-docs-nav" aria-label="Tertiary navigation">
+            {{ partial "sidebar/docs-menu.html" . }}
+          </nav>
+        </aside>
+      </div>
+    </div>
+    {{ end -}}
+
+
+    <button class="btn btn-menu order-2 d-block d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDoks" aria-controls="offcanvasDoks" aria-label="Open main menu">
      <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-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
    </button>
-
-    <div class="offcanvas offcanvas-end border-0 py-md-1" tabindex="-1" id="offcanvasDoks" data-bs-backdrop="true" aria-labelledby="offcanvasDoksLabel">
-      <div class="header-bar d-md-none"></div>
-      <div class="offcanvas-header d-md-none">
+    <div class="offcanvas offcanvas-end border-0 py-lg-1" tabindex="-1" id="offcanvasDoks" data-bs-backdrop="true" aria-labelledby="offcanvasDoksLabel">
+      <div class="header-bar d-lg-none"></div>
+      <div class="offcanvas-header d-lg-none">
        <h2 class="h5 offcanvas-title ps-2" id="offcanvasDoksLabel"><a class="text-dark" href="{{ "/" | relLangURL }}">{{ .Site.Params.Title }}</a></h2>
        <button type="button" class="btn-close text-reset me-2" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button>
      </div>
-      <div class="offcanvas-body px-4">
-        <h3 class="h6 text-uppercase mb-3 d-md-none">Main</h3>
-        <ul class="nav flex-column flex-md-row ms-md-n3">
+      <div class="offcanvas-body p-4 p-lg-0">
+        <ul class="nav flex-column flex-lg-row align-items-lg-center mt-2 mt-lg-0 ms-lg-2 me-lg-auto">
          {{- $current := . -}}
          {{- $section := $current.Section -}}
          {{ range .Site.Menus.main -}}
            {{- $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">
@ -56,101 +76,98 @@
            {{ end }}
          {{ end -}}
        </ul>
-        <hr class="text-black-50 my-4 d-md-none">
-        <h3 class="h6 text-uppercase mb-3 d-md-none">Socials</h3>
-        <ul class="nav flex-column flex-md-row ms-md-auto me-md-n5 pe-md-2">
+
+        {{- $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="{{ i18n "search-text" }}" aria-label="{{ i18n "search-text" }}" autocomplete="off">
+          <div id="suggestions" class="shadow bg-white rounded d-none"></div>
+        </form>
+        {{ end -}}
+
+        <hr class="text-black-50 my-4 d-lg-none">
+        <ul class="nav flex-column flex-lg-row">
          {{ range .Site.Menus.social -}}
            <li class="nav-item">
-              <a class="nav-link ps-0 py-1" href="{{ .URL | relURL }}">{{ .Pre | safeHTML }}<small class="ms-2 d-md-none">{{ .Name | safeHTML }}</small></a>
+              <a class="nav-link social-link" href="{{ .URL | relURL }}">{{ .Pre | safeHTML }}<small class="ms-2 d-lg-none">{{ .Name | safeHTML }}</small></a>
            </li>
          {{ end -}}
        </ul>
+
+        {{ if .Site.Params.options.darkMode -}}
+        <hr class="text-black-50 my-4 d-lg-none">
+        <button id="mode" class="btn btn-link" type="button" aria-label="Toggle user interface mode">
+          <span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
+          <span class="toggle-light"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span>
+        </button>
+        {{ end -}}
+
+        {{ if eq .Site.Params.options.multilingualMode true -}}
+        <hr class="text-black-50 my-4 d-lg-none">
+        <div class="dropdown">
+          <button class="btn btn-doks-light dropdown-toggle" id="doks-languages" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
+            {{ .Site.Params.languageName }}
+            <span class="dropdown-caret"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-lg-end me-lg-2 shadow rounded border-0" aria-labelledby="doks-languages">
+
+            <li><a class="dropdown-item current" aria-current="true" href="{{ .RelPermalink }}">{{ .Site.Language.LanguageName }}</a></li>
+
+            <li><hr class="dropdown-divider"></li>
+
+            {{ if .IsTranslated -}}
+              {{ range .Translations }}
+                <li><a class="dropdown-item" rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Language.LanguageName }}</a></li>
+              {{ end -}}
+            {{ else -}}
+              {{ range .Site.Languages -}}
+                {{ if ne $.Site.Language.Lang .Lang }}
+                  <li><a class="dropdown-item" rel="alternate" href="{{ .Lang | relLangURL }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .LanguageName }}</a></li>
+                {{ end -}}
+              {{ end -}}
+            {{ end -}}
+              <!--
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="/docs/contributing/how-to-contribute/">Help Translate</a></li>
+              -->
+          </ul>
+        </div>
+        {{ end -}}
+
+        {{ if eq .Site.Params.options.docsVersioning true -}}
+        <hr class="text-black-50 my-4 d-lg-none">
+        <div class="dropdown">
+          <button class="btn btn-doks-light dropdown-toggle" id="doks-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static" aria-label="Toggle version menu">
+            <span class="d-none">Doks</span> v{{ .Site.Params.docsVersion }}
+            <span class="dropdown-caret"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-lg-end me-lg-2 shadow rounded border-0" aria-labelledby="doks-versions">
+            <li><a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docsVersion }}/prologue/introduction/">Latest ({{ .Site.Params.docsVersion }}.x)</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" href="/docs/0.2/prologue/introduction/">v0.2.x</a></li>
+            <li><a class="dropdown-item" href="/docs/0.1/prologue/introduction/">v0.1.x</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
+          </ul>
+        </div>
+        {{ end -}}
      </div>
    </div>
-    {{ if .Site.Params.options.darkMode -}}
-    <button id="mode" class="btn btn-link order-md-1" type="button" aria-label="Toggle user interface mode">
-      <span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
-      <span class="toggle-light"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span>
-    </button>
-    {{ end -}}
-
-    {{ if eq .Site.Params.options.multilingualMode true -}}
-    <div class="dropdown order-md-2">
-      <button class="btn btn-doks-light dropdown-toggle" id="doks-languages" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
-        {{ .Site.Params.languageISO }}
-        <span class="dropdown-caret"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
-      </button>
-      <ul class="dropdown-menu dropdown-menu-end shadow rounded border-0" aria-labelledby="doks-languages">
-
-        <li><a class="dropdown-item current" aria-current="true" href="{{ .RelPermalink }}">{{ .Site.Language.LanguageName }}</a></li>
-
-        <li><hr class="dropdown-divider"></li>
-
-      {{ if .IsTranslated -}}
-        {{ range .Translations }}
-          <li><a class="dropdown-item" rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Language.LanguageName }}</a></li>
-        {{ end -}}
-      {{ else -}}
-        {{ range .Site.Languages -}}
-          {{ if ne $.Site.Language.Lang .Lang }}
-            <li><a class="dropdown-item" rel="alternate" href="{{ .Lang | relLangURL }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .LanguageName }}</a></li>
-          {{ end -}}
-        {{ end -}}
-      {{ end -}}
-        <!--
-        <li><hr class="dropdown-divider"></li>
-        <li><a class="dropdown-item" href="/docs/contributing/how-to-contribute/">Help Translate</a></li>
-        -->
-      </ul>
-    </div>
-    {{ end -}}
  </nav>
 </header>

-{{ if eq .Site.Params.options.flexSearch false }}
+{{ if eq .Site.Params.options.navbarSticky true }}
 </div>
 {{ end -}}

-{{- $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 }}
-<nav class="doks-subnavbar py-2 sticky-lg-top{{ if eq .Site.Params.options.flexSearch false }} d-lg-none{{ end }}" aria-label="Secondary navigation">
-  <div class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }} d-flex align-items-md-center">
-
-    <form class="doks-search position-relative flex-grow-1 me-auto">
-      <input id="search" class="form-control is-search" type="search" placeholder="Search..." aria-label="Search..." autocomplete="off">
-      <div id="suggestions" class="shadow bg-white rounded d-none"></div>
-    </form>
-
-    {{ if eq .Site.Params.options.docsVersioning true -}}
-    <div class="dropdown ms-3">
-      <button class="btn btn-doks-light dropdown-toggle" id="doks-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static" aria-label="Toggle version menu">
-        <span class="d-none d-lg-inline">Doks</span> v{{ .Site.Params.docsVersion }}
-      </button>
-      <ul class="dropdown-menu dropdown-menu-end shadow rounded border-0" aria-labelledby="doks-versions">
-        <li><a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docsVersion }}/prologue/introduction/">Latest ({{ .Site.Params.docsVersion }}.x)</a></li>
-        <li><hr class="dropdown-divider"></li>
-        <li><a class="dropdown-item" href="/docs/0.2/prologue/introduction/">v0.2.x</a></li>
-        <li><a class="dropdown-item" href="/docs/0.1/prologue/introduction/">v0.1.x</a></li>
-        <li><hr class="dropdown-divider"></li>
-        <li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
-      </ul>
-    </div>
-    {{ end -}}
-
-    <button class="btn doks-sidebar-toggle d-lg-none ms-3 order-3 collapsed{{ if eq .Site.Params.options.flexSearch false }} ms-auto{{ end }}" type="button" data-bs-toggle="collapse" data-bs-target="#doks-docs-nav" aria-controls="doks-docs-nav" aria-expanded="false" aria-label="Toggle documentation navigation">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="doks doks-expand" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Expand</title><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="doks doks-collapse" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Collapse</title><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>
-    </button>
-
-  </div>
-</nav>
-
+{{ if eq .Section "docs" -}}
 <div class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }}">
  <aside class="doks-sidebar">
    <nav id="doks-docs-nav" class="collapse d-lg-none" aria-label="Tertiary navigation">
@ -160,15 +177,6 @@
 </div>

 {{ else if ne .CurrentSection .FirstSection -}}
-<nav class="doks-subnavbar py-2 sticky-lg-top d-lg-none" aria-label="Secondary navigation">
-  <div class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }} d-flex align-items-md-center">
-    <span class="navbar-text ms-0">{{ .Section | humanize }}</span>
-    <button class="btn doks-sidebar-toggle d-lg-none ms-auto order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#doks-docs-nav" aria-controls="doks-docs-nav" aria-expanded="false" aria-label="Toggle documentation navigation">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="doks doks-expand" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Expand</title><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="doks doks-collapse" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Collapse</title><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>
-    </button>
-  </div>
-</nav>

 <div class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }}">
  <aside class="doks-sidebar">
--- a/docs/layouts/partials/main/blog-meta.html
+++ b/docs/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>
--- a/docs/layouts/partials/sidebar/docs-toc.html
+++ b/docs/layouts/partials/sidebar/docs-toc.html
@ -1,6 +1,26 @@
 {{ if and (ne .Params.toc false) (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") -}}
-  <div class="page-links">
-    <h3>On this page</h3>
-    {{ .TableOfContents }}
+<div class="d-xl-none">
+  <button class="btn btn-outline-primary btn-sm doks-toc-toggle collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#onThisPage" aria-controls="doks-docs-nav" aria-expanded="false" aria-label="Toggle On this page navigation">
+    <span>{{ i18n "on-this-page" }}</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="doks doks-expand" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Expand</title><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="doks doks-collapse" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Collapse</title><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>
+    </span>
+  </button>
+  <div class="collapse" id="onThisPage">
+    <div class="card card-body mt-3 py-1">
+      <div class="page-links">
+        {{ .TableOfContents }}
+      </div>
+    </div>
  </div>
+</div>
+<div class="page-links d-none d-xl-block">
+  <h3>{{ i18n "on-this-page" }}</h3>
+  {{ if eq .Site.Params.options.scrollSpy true -}}
+    {{ .TableOfContents | replaceRE "<nav id=\"TableOfContents\">" "<nav id=\"toc\">" | safeHTML }}
+  {{ else -}}
+    {{ .TableOfContents }}
+  {{ end -}}
+</div>
 {{ end -}}
--- a/docs/layouts/rss.xml
+++ b/docs/layouts/rss.xml
@ -4,7 +4,7 @@
    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
    <link>{{ .Permalink }}</link>
    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
-    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
+    <generator>Hugo -- gohugo.io</generator>{{ with .Site.Params.languageTag | default "en-US" }}
    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Params.copyRight }}
--- a/docs/netlify.toml
+++ b/docs/netlify.toml
@ -3,8 +3,8 @@
  functions = "functions"

 [build.environment]
-  NODE_VERSION = "16.15.0"
-  NPM_VERSION = "8.5.5"
+  NODE_VERSION = "16.16.0"
+  NPM_VERSION = "8.11.0"

 [context.production]
  command = "npm run build"
@ -30,7 +30,6 @@
    ignorePeriod = 0
    providers = [
      "google",
-      "bing",
      "yandex"
    ]

--- a/docs/package.json
+++ b/docs/package.json
@ -1,9 +1,9 @@
 {
  "name": "@hyas/doks",
  "description": "Doks theme",
-  "version": "0.4.2",
+  "version": "0.5.0",
  "engines": {
-    "node": ">=16.15.1"
+    "node": ">=16.16.0"
  },
  "browserslist": [
    "defaults"
@ -42,6 +42,7 @@
    "@babel/core": "7.18.6",
    "@babel/preset-env": "7.18.6",
    "@fullhuman/postcss-purgecss": "4.1.3",
+    "@hyas/images": "0.2.2",
    "auto-changelog": "2.4.0",
    "autoprefixer": "10.4.7",
    "bootstrap": "5.2.0-beta1",
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@ -5,6 +5,7 @@ specifiers:
  '@babel/core': 7.18.6
  '@babel/preset-env': 7.18.6
  '@fullhuman/postcss-purgecss': 4.1.3
+  '@hyas/images': 0.2.2
  auto-changelog: 2.4.0
  autoprefixer: 10.4.7
  bootstrap: 5.2.0-beta1
@ -33,6 +34,7 @@ devDependencies:
  '@babel/core': 7.18.6
  '@babel/preset-env': 7.18.6_@babel+core@7.18.6
  '@fullhuman/postcss-purgecss': 4.1.3_postcss@8.4.14
+  '@hyas/images': 0.2.2
  auto-changelog: 2.4.0
  autoprefixer: 10.4.7_postcss@8.4.14
  bootstrap: 5.2.0-beta1
@ -1294,6 +1296,10 @@ packages:
    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
    dev: true

+  /@hyas/images/0.2.2:
+    resolution: {integrity: sha512-m6sYlR+iNAQBhbt+AKekRsXPrKff+UpE1/XsGqNIi9Ptb8ZdRiv/bgY1ZCdKAf6hNop1OT1bbS5WkP9wo0wb+w==}
+    dev: true
+
  /@jridgewell/gen-mapping/0.1.1:
    resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
    engines: {node: '>=6.0.0'}
				`@ -0,0 +1 @@`
				{"defaultLocale":"en","defaultNamespace":"portal","namespaces":["portal"],"languages":[{"display":"German","locale":"de","namespaces":["portal"],"fallbacks":["en"]},{"display":"English","locale":"en","namespaces":["portal"],"fallbacks":["en"]},{"display":"Spanish","locale":"es","namespaces":["portal"],"fallbacks":["en"]},{"display":"French","locale":"fr","namespaces":["portal"],"fallbacks":["en"]},{"display":"Russian","locale":"ru","namespaces":["portal"],"fallbacks":["en"]},{"display":"Swedish","locale":"sv","namespaces":["portal"],"fallbacks":["en"]},{"display":"Swedish (Sweden)","locale":"sv-SE","namespaces":["portal"],"fallbacks":["sv","en"]},{"display":"Chinese (Taiwan)","locale":"zh-TW","namespaces":["portal"],"fallbacks":["en"]}]}