Redesign some docs

- Add sidebar of categories - Separate homepage by category - Add new baseof layout - Add new taxonomy and terms pages - Port footer from main docs
author: Mark Otto <markdotto@gmail.com> 2022-08-29 07:10:42 +0300
committer: Mark Otto <markdotto@gmail.com> 2022-10-30 00:10:14 +0300
commit: ce7de03b1988555d1fa7a474d9cfd1ef4c70682b (patch)
tree: 8596dae3289f085713074b8dd326e0019247668b
parent: 20d484a861218567abb9303544562373e23c0de7 (diff)
12 files changed, 357 insertions, 232 deletions
diff --git a/config.yml b/config.yml
index 35700221a..e166d5391 100644
--- a/config.yml
+++ b/config.yml
@@ -4,7 +4,7 @@ baseURL:                "https://icons.getbootstrap.com"
 enableInlineShortcodes: true
 enableRobotsTXT:        true
 metaDataFormat:         "yaml"
-disableKinds:           ["404", "taxonomy", "term", "RSS"]
+disableKinds:           ["404", "RSS"]
 
 publishDir:             "_site"
 
@@ -49,6 +49,14 @@ module:
     - source:           node_modules/bootstrap/dist/js/bootstrap.min.js
       target:           assets/js/bootstrap.min.js
 
+taxonomies:
+  category: categories
+  tag: tags
+
+permalinks:
+  categories:           "/:section/:slug"
+  tags:                 "/:section/:slug"
+
 params:
   description:          "Official open source SVG icon library for Bootstrap"
   social_image_path:    /assets/img/bootstrap-icons-social.png
diff --git a/docs/assets/scss/_footer.scss b/docs/assets/scss/_footer.scss
index 22d20c969..87cee6d2b 100644
--- a/docs/assets/scss/_footer.scss
+++ b/docs/assets/scss/_footer.scss
@@ -3,33 +3,14 @@
 //
 
 .bd-footer {
-  font-size: .875rem;
-  color: var(--bs-gray-600);
-
   a {
-    font-weight: 600;
-    color: var(--bs-gray-700);
+    color: $gray-700;
+    text-decoration: none;
 
     &:hover,
     &:focus {
-      color: var(--bs-primary);
-    }
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-}
-
-.bd-footer-links {
-  padding-left: 0;
-  margin-bottom: 1rem;
-
-  li {
-    display: inline-block;
-
-    + li {
-      margin-left: 1rem;
+      color: $link-color;
+      text-decoration: underline;
     }
   }
 }
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 8ab1ed50a..e5341b0d3 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -21,7 +21,7 @@
 // @import "bootstrap/accordion";
 @import "bootstrap/breadcrumb";
 // @import "bootstrap/pagination";
-// @import "bootstrap/badge";
+@import "bootstrap/badge";
 // @import "bootstrap/alert";
 // @import "bootstrap/progress";
 // @import "bootstrap/list-group";
@@ -219,3 +219,18 @@
   padding-bottom: 4.5rem !important;
 }
 // stylelint-enable declaration-no-important
+
+.bd-sidebar {
+  @include media-breakpoint-up(lg) {
+    position: sticky;
+    top: 5rem;
+    // Override collapse behaviors
+    // stylelint-disable-next-line declaration-no-important
+    // display: block !important;
+    height: subtract(100vh, 6rem);
+    // Prevent focus styles to be cut off:
+    // padding-left: .25rem;
+    // margin-left: -.25rem;
+    overflow-y: auto;
+  }
+}
diff --git a/docs/layouts/_default/baseof.html b/docs/layouts/_default/baseof.html
new file mode 100644
index 000000000..5a7df61bf
--- /dev/null
+++ b/docs/layouts/_default/baseof.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    {{ partial "head" . }}
+  </head>
+  <body id="icons-body">
+    {{ partialCached "skippy" . }}
+    {{ partialCached "navbar" . }}
+    {{ block "hero" . }}{{ end }}
+
+    <main class="container-xxl bd-gutter" id="content">
+      {{ block "main" . }}{{ end }}
+    </main>
+
+    {{- partialCached "footer" . }}
+    {{- partialCached "scripts" . }}
+  </body>
+</html>
diff --git a/docs/layouts/_default/font.html b/docs/layouts/_default/font.html
index e525458d7..010d5ff45 100644
--- a/docs/layouts/_default/font.html
+++ b/docs/layouts/_default/font.html
@@ -1,25 +1,9 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    {{ partial "head" . }}
-  </head>
-  <body id="icons-body" class="text-center">
-    {{ partialCached "skippy" . }}
-    {{ partialCached "navbar" . }}
-
-    <main class="container-xxl bd-gutter" id="content">
-      <nav aria-label="breadcrumb">
-        <ol class="breadcrumb my-4 p-0">
-          <li class="breadcrumb-item"><a href="/">Icons</a></li>
-          <li class="breadcrumb-item active" aria-current="page">Font</li>
-        </ol>
-      </nav>
-      {{ partialCached "icons" . "fonts" }}
-
-      {{ .Content }}
-    </main>
-
-    {{- partialCached "footer" . }}
-    {{- partialCached "scripts" . "fonts" }}
-  </body>
-</html>
+{{ define "main" }}
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb my-4 p-0">
+      <li class="breadcrumb-item"><a href="/">Icons</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Font</li>
+    </ol>
+  </nav>
+  {{ partialCached "icons" . "fonts" }}
+{{ end }}
diff --git a/docs/layouts/_default/home.html b/docs/layouts/_default/home.html
index 7c458cd7e..b7ae1ed30 100644
--- a/docs/layouts/_default/home.html
+++ b/docs/layouts/_default/home.html
@@ -1,19 +1,34 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    {{ partial "head" . }}
-  </head>
-  <body id="icons-body">
-    {{ partialCached "skippy" . }}
-    {{ partialCached "navbar" . }}
-    {{ partialCached "home/hero" . }}
+{{ define "hero" }}
+  {{ partialCached "home/hero" . }}
+{{ end }}
 
-    <main class="container-xxl bd-gutter" id="content">
+{{ define "main" }}
+  <div class="row g-5">
+    <div class="small" style="width: 20%;">
+      <div class="bd-sidebar">
+        <h4>Categories</h4>
+        <ul class="nav nav-pills flex-column" style="--bs-nav-link-padding-y: .375rem;
+                                                     --bs-nav-link-padding-x: .75rem;
+                                                     --bs-nav-link-color: var(--bs-gray-600);
+                                                     --bs-nav-pills-link-active-color: var(--bs-gray-900);
+                                                     --bs-nav-pills-link-active-bg: var(--bs-gray-100);">
+          <li class="nav-item">
+            <a class="nav-link active" href="">All</a>
+          </li>
+        {{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
+          {{ if eq "categories" $taxonomyname }}
+            {{ range $key, $value := $taxonomy }}
+              <li class="nav-item">
+                <a class="nav-link" href="#{{ $key }}">{{ $key | humanize }}</a>
+              </li>
+            {{ end }}
+          {{ end }}
+        {{ end }}
+        </ul>
+      </div>
+    </div>
+    <div class="col">
       {{ partialCached "icons" . "home" }}
-      {{ .Content }}
-    </main>
-
-    {{- partialCached "footer" . }}
-    {{- partialCached "scripts" . "home" }}
-  </body>
-</html>
+    </div>
+  </div>
+{{ end }}
diff --git a/docs/layouts/_default/taxonomy.html b/docs/layouts/_default/taxonomy.html
new file mode 100644
index 000000000..273aa4a88
--- /dev/null
+++ b/docs/layouts/_default/taxonomy.html
@@ -0,0 +1,18 @@
+{{ define "main" }}
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb my-4 p-0">
+      <li class="breadcrumb-item"><a href="/">Icons</a></li>
+      <li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
+    </ol>
+  </nav>
+
+  <h1 class="h2">All {{ .Type }}</h1>
+  <ul style="column-count: 4;">
+    {{ range .Data.Pages }}
+      <li>
+        <a href="{{ .Permalink }}">{{ .Title }}</a>
+      </li>
+    {{ end }}
+  </ul>
+{{ end }}
+
diff --git a/docs/layouts/_default/term.html b/docs/layouts/_default/term.html
new file mode 100644
index 000000000..f63041491
--- /dev/null
+++ b/docs/layouts/_default/term.html
@@ -0,0 +1,25 @@
+{{ define "main" }}
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb my-4 p-0">
+      <li class="breadcrumb-item"><a href="/">Icons</a></li>
+      <li class="breadcrumb-item"><a href="/{{ .Type }}/">{{ .Type | humanize }}</a></li>
+      <li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
+    </ol>
+  </nav>
+  <div class="my-5">
+    <div class="d-flex mb-4">
+      <h1 id="icons" class="mb-0 h2">
+        {{ .Title | humanize }} icons
+      </h1>
+      <form class="subnav-search d-flex flex-nowrap ms-auto">
+        <label for="search" class="visually-hidden">Search for icons</label>
+        <input class="form-control search mb-0" id="search" type="search" placeholder="Start typing to filter..." autocomplete="off">
+      </form>
+    </div>
+    <ul class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 list-unstyled list">
+      {{ range .Data.Pages -}}
+        {{ partial "icon" . }}
+      {{- end }}
+    </ul>
+  </div>
+{{ end }}
diff --git a/docs/layouts/icons/single.html b/docs/layouts/icons/single.html
index 05ad5ae72..c95e1cc2d 100644
--- a/docs/layouts/icons/single.html
+++ b/docs/layouts/icons/single.html
@@ -1,152 +1,148 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    {{ partial "head" . }}
-  </head>
-  <body id="icons-body">
-    {{ partialCached "skippy" . }}
-    {{ partialCached "navbar" . }}
+{{ define "main" }}
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb my-4 p-0">
+      <li class="breadcrumb-item"><a href="/">Icons</a></li>
+      <li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
+    </ol>
+  </nav>
 
-    <main class="container icon-examples" id="content">
-      <nav aria-label="breadcrumb">
-        <ol class="breadcrumb my-4 p-0">
-          <li class="breadcrumb-item"><a href="/">Icons</a></li>
-          <li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
-        </ol>
-      </nav>
+  <div class="row align-items-md-center">
+    <div class="col-md-6 col-lg-8">
+      <h1>{{ .Title }}</h1>
 
-      <div class="row align-items-md-center">
-        <div class="col-md-6 col-lg-8">
-          <h1>{{ .Title }}</h1>
+      {{ if or .Params.tags .Params.categories -}}
+      <ul class="list-unstyled mb-3 mb-md-0">
+        <li>
+          <strong>Category:</strong>
+          {{ range .Params.categories }}
+            <a href="/categories/{{ . | urlize}}">{{ . }}</a>
+          {{ end }}
+        </li>
+        <li>
+          <strong>Tags:</strong>
+          {{ range .Params.tags }}
+            <a href="/tags/{{ . | urlize}}">{{ . }}</a>
+          {{ end }}
+        </li>
+      </ul>
+      {{- end }}
+    </div>
+    <div class="col-md-6 col-lg-4">
+      {{ partialCached "ads" . }}
+    </div>
+  </div>
 
-          {{ if or .Params.tags .Params.categories -}}
-          <ul class="list-unstyled mb-3 mb-md-0">
-            {{ with .Params.tags }}<li><strong>Tags:</strong> {{ delimit . ", " }}</li>{{ end }}
-            {{ with .Params.categories }}<li><strong>Category:</strong> {{ delimit . ", " }}</li>{{ end }}
-          </ul>
-          {{- end }}
-        </div>
-        <div class="col-md-6 col-lg-4">
-          {{ partialCached "ads" . }}
-        </div>
-      </div>
+  <hr class="my-4">
 
-      <hr class="my-4">
+  {{- $localSvgPath := printf "/icons/%s.svg" .File.TranslationBaseName -}}
+  {{- $svgPath := path.Join "/assets/" $localSvgPath -}}
+  {{- $svgHtml := readFile $localSvgPath | chomp | safeHTML -}}
 
-      {{- $localSvgPath := printf "/icons/%s.svg" .File.TranslationBaseName -}}
-      {{- $svgPath := path.Join "/assets/" $localSvgPath -}}
-      {{- $svgHtml := readFile $localSvgPath | chomp | safeHTML -}}
+  <div class="row gx-lg-5">
+    <div class="col-lg-8 mb-4">
+      <div class="icon-demo mb-4 border rounded-3 d-flex align-items-center justify-content-center p-3 py-6" style="font-size: 10em" role="img" aria-label="{{ .Title }} - large preview">
+        {{ $svgHtml }}
+      </div>
 
-      <div class="row gx-lg-5">
-        <div class="col-lg-8 mb-4">
-          <div class="icon-demo mb-4 border rounded-3 d-flex align-items-center justify-content-center p-3 py-6" style="font-size: 10em" role="img" aria-label="{{ .Title }} - large preview">
+      <h2>Examples</h2>
+      <div class="p-3 p-md-4 border rounded-3 icon-demo-examples">
+        <div class="fs-2 mb-3">
+          {{ $svgHtml }}
+          Heading
+        </div>
+        <div class="fs-4 mb-3">
+          {{ $svgHtml }}
+          Smaller heading
+        </div>
+        <p>
+          Inline text {{ $svgHtml }}
+        </p>
+        <p>
+          <a href="#" class="text-decoration-none">
+            Example link text
             {{ $svgHtml }}
-          </div>
-
-          <h2>Examples</h2>
-          <div class="p-3 p-md-4 border rounded-3 icon-demo-examples">
-            <div class="fs-2 mb-3">
+          </a>
+        </p>
+        <p>
+          <button type="button" class="btn btn-primary">
+            {{ $svgHtml }}
+            Button
+          </button>
+          <button type="button" class="btn btn-success">
+            {{ $svgHtml }}
+            Button
+          </button>
+          <button type="button" class="btn btn-outline-danger">
+            {{ $svgHtml }}
+            Button
+          </button>
+        </p>
+        <div class="mb-3">
+          <button type="button" class="btn btn-secondary">
+            {{ $svgHtml }}
+          </button>
+          <div class="btn-group">
+            <button type="button" class="btn btn-outline-secondary">
               {{ $svgHtml }}
-              Heading
-            </div>
-            <div class="fs-4 mb-3">
+              <span class="visually-hidden">Button</span>
+            </button>
+            <button type="button" class="btn btn-outline-secondary">
               {{ $svgHtml }}
-              Smaller heading
-            </div>
-            <p>
-              Inline text {{ $svgHtml }}
-            </p>
-            <p>
-              <a href="#" class="text-decoration-none">
-                Example link text
-                {{ $svgHtml }}
-              </a>
-            </p>
-            <p>
-              <button type="button" class="btn btn-primary">
-                {{ $svgHtml }}
-                Button
-              </button>
-              <button type="button" class="btn btn-success">
-                {{ $svgHtml }}
-                Button
-              </button>
-              <button type="button" class="btn btn-outline-danger">
-                {{ $svgHtml }}
-                Button
-              </button>
-            </p>
-            <div class="mb-3">
-              <button type="button" class="btn btn-secondary">
-                {{ $svgHtml }}
-              </button>
-              <div class="btn-group">
-                <button type="button" class="btn btn-outline-secondary">
-                  {{ $svgHtml }}
-                  <span class="visually-hidden">Button</span>
-                </button>
-                <button type="button" class="btn btn-outline-secondary">
-                  {{ $svgHtml }}
-                  <span class="visually-hidden">Button</span>
-                </button>
-                <button type="button" class="btn btn-outline-secondary">
-                  {{ $svgHtml }}
-                  <span class="visually-hidden">Button</span>
-                </button>
-              </div>
-            </div>
-            <div class="input-group w-50">
-              <span class="input-group-text" id="basic-addon1">
-                {{ $svgHtml }}
-              </span>
-              <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="basic-addon1">
-            </div>
+              <span class="visually-hidden">Button</span>
+            </button>
+            <button type="button" class="btn btn-outline-secondary">
+              {{ $svgHtml }}
+              <span class="visually-hidden">Button</span>
+            </button>
           </div>
         </div>
-        <div class="col-lg-4 mb-4">
-          <h2 class="fs-3">Download</h2>
-          <p>Download the SVG to use or edit.</p>
-          <a href="{{ $svgPath }}" class="btn btn-bd-primary mb-4" download>Download SVG</a>
-
-          <h2 class="fs-3">Icon font</h2>
-          <p>Using the web font? Copy, paste, and go.</p>
+        <div class="input-group w-50">
+          <span class="input-group-text" id="basic-addon1">
+            {{ $svgHtml }}
+          </span>
+          <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="basic-addon1">
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-4 mb-4">
+      <h2 class="fs-3">Download</h2>
+      <p>Download the SVG to use or edit.</p>
+      <a href="{{ $svgPath }}" class="btn btn-bd-primary mb-4" download>Download SVG</a>
 
-          <div class="mb-4">
-            {{ $iconFontSnippet := printf `<i class="bi bi-%s"></i>` .File.TranslationBaseName -}}
-            {{- highlight $iconFontSnippet "html" "" }}
-          </div>
+      <h2 class="fs-3">Icon font</h2>
+      <p>Using the web font? Copy, paste, and go.</p>
 
-          <h2 class="fs-3">Code point</h2>
-          <div class="mb-4">
-            {{ $codepoints := getJSON "font/bootstrap-icons.json" -}}
-            {{ $hexCodepoint :=  printf "%X" (int (index $codepoints .File.TranslationBaseName)) }}
-            <ul class="list-unstyled">
-              <li>
-                Unicode: <code>U+{{- $hexCodepoint}}</code>
-              </li>
-              <li>
-                CSS: <code>\{{- $hexCodepoint}}</code>
-              </li>
-              <li>
-                JS: <code>\u{{- $hexCodepoint}}</code>
-              </li>
-              <li>
-                HTML: <code>&amp;#x{{- $hexCodepoint}};</code>
-              </li>
-            </ul>
-          </div>
+      <div class="mb-4">
+        {{ $iconFontSnippet := printf `<i class="bi bi-%s"></i>` .File.TranslationBaseName -}}
+        {{- highlight $iconFontSnippet "html" "" }}
+      </div>
 
-          <h2 class="fs-3">Copy HTML</h2>
-          <p>Paste the SVG right into your project's code.</p>
+      <h2 class="fs-3">Code point</h2>
+      <div class="mb-4">
+        {{ $codepoints := getJSON "font/bootstrap-icons.json" -}}
+        {{ $hexCodepoint :=  printf "%X" (int (index $codepoints .File.TranslationBaseName)) }}
+        <ul class="list-unstyled">
+          <li>
+            Unicode: <code>U+{{- $hexCodepoint}}</code>
+          </li>
+          <li>
+            CSS: <code>\{{- $hexCodepoint}}</code>
+          </li>
+          <li>
+            JS: <code>\u{{- $hexCodepoint}}</code>
+          </li>
+          <li>
+            HTML: <code>&amp;#x{{- $hexCodepoint}};</code>
+          </li>
+        </ul>
+      </div>
 
-          <div id="copy-error-callout" class="alert alert-info d-none" role="alert"></div>
+      <h2 class="fs-3">Copy HTML</h2>
+      <p>Paste the SVG right into your project's code.</p>
 
-          {{ highlight $svgHtml "html" "" }}
-        </div>
-      </div>
-    </main>
+      <div id="copy-error-callout" class="alert alert-info d-none" role="alert"></div>
 
-    {{- partialCached "footer" . }}
-    {{- partialCached "scripts" . "default" }}
-  </body>
-</html>
+      {{ highlight $svgHtml "html" "" }}
+    </div>
+  </div>
+{{ end }}
diff --git a/docs/layouts/partials/footer.html b/docs/layouts/partials/footer.html
index fdad6d856..5c0b85678 100644
--- a/docs/layouts/partials/footer.html
+++ b/docs/layouts/partials/footer.html
@@ -1,10 +1,59 @@
-<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-left">
-  <div class="container">
-    <ul class="bd-footer-links">
-      <li><a href="{{ .Site.Params.github_org }}">GitHub</a></li>
-      <li><a href="https://twitter.com/{{ .Site.Params.twitter }}">Twitter</a></li>
-      <li><a href="{{ .Site.Params.main }}/docs/{{ .Site.Params.docs_version }}/about/overview/">About</a></li>
-    </ul>
-    <p>Currently <a href="{{ .Site.Params.repo }}/releases/tag/v{{ .Site.Params.version }}">v{{ .Site.Params.version }}</a>. Icons and documentation licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE.md" target="_blank" rel="license noopener">MIT</a>.</p>
+<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
+  <div class="container-xxl bd-gutter py-4 py-md-5 px-4 px-md-3">
+    <div class="row">
+      <div class="col-lg-3 mb-3">
+        <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
+          {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }}
+          <span class="fs-5">Bootstrap</span>
+        </a>
+        <ul class="list-unstyled small text-muted">
+          <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</li>
+          <li class="mb-2">Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE.md" target="_blank" rel="license noopener">MIT</a>.</li>
+          <li class="mb-2">Currently v{{ .Site.Params.version }}.</li>
+        </ul>
+      </div>
+      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
+        <h5>Links</h5>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="/">Home</a></li>
+          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/">Docs</a></li>
+          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.icons }}">Icons</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.themes }}">Themes</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.blog }}">Blog</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.swag }}">Swag Store</a></li>
+        </ul>
+      </div>
+      <div class="col-6 col-lg-2 mb-3">
+        <h5>Guides</h5>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/">Getting started</a></li>
+          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/examples/starter-template/">Starter template</a></li>
+          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack/">Webpack</a></li>
+          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel/">Parcel</a></li>
+          <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite/">Vite</a></li>
+        </ul>
+      </div>
+      <div class="col-6 col-lg-2 mb-3">
+        <h5>Projects</h5>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap">Bootstrap 5</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/icons">Icons</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/rfs">RFS</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap-npm-starter">npm starter</a></li>
+        </ul>
+      </div>
+      <div class="col-6 col-lg-2 mb-3">
+        <h5>Community</h5>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/issues">Issues</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/discussions">Discussions</a></li>
+          <li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.opencollective }}">Open Collective</a></li>
+          <li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </footer>
diff --git a/docs/layouts/partials/icon.html b/docs/layouts/partials/icon.html
new file mode 100644
index 000000000..0a0837ba9
--- /dev/null
+++ b/docs/layouts/partials/icon.html
@@ -0,0 +1,17 @@
+{{- $filename := .File.TranslationBaseName -}}
+{{- with .Site.GetPage .File.Path }}
+  <li class="col mb-4"{{ with .Params.tags }} data-tags="{{ delimit . " " }}"{{ end }}{{ with .Params.categories }} data-categories="{{ delimit . " " | lower }}"{{ end }}>
+    <a class="d-block text-dark text-decoration-none" href="{{ .RelPermalink }}">
+      <div class="p-3 py-4 mb-2 bg-light text-center rounded">
+        {{ if $.IsHome -}}
+        <svg class="bi" width="1em" height="1em" fill="currentColor">
+          <use xlink:href="bootstrap-icons.svg#{{ $filename }}"/>
+        </svg>
+        {{- else -}}
+        <i class="bi bi-{{ $filename }}"></i>
+        {{- end }}
+      </div>
+      <div class="name text-muted text-decoration-none text-center pt-1">{{ $filename }}</div>
+    </a>
+  </li>
+{{- end }}
diff --git a/docs/layouts/partials/icons.html b/docs/layouts/partials/icons.html
index 438d00433..b64693d22 100644
--- a/docs/layouts/partials/icons.html
+++ b/docs/layouts/partials/icons.html
@@ -1,30 +1,29 @@
 <div class="my-5">
-  <div class="d-flex mb-4">
-    <h2 id="icons" class="mb-0">Icons</h2>
+  <div class="d-flex align-items-center mb-4">
+    <h2 id="icons" class="mb-0 h1">Icons</h2>
     <form class="subnav-search d-flex flex-nowrap ms-auto">
       <label for="search" class="visually-hidden">Search for icons</label>
       <input class="form-control search mb-0" id="search" type="search" placeholder="Start typing to filter..." autocomplete="off">
     </form>
   </div>
-  <ul class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 list-unstyled list">
-    {{ range (where .Site.RegularPages "Type" "icons") -}}
-      {{- $filename := .File.TranslationBaseName -}}
-      {{- with .Site.GetPage .File.Path }}
-      <li class="col mb-4"{{ with .Params.tags }} data-tags="{{ delimit . " " }}"{{ end }}{{ with .Params.categories }} data-categories="{{ delimit . " " | lower }}"{{ end }}>
-        <a class="d-block text-dark text-decoration-none" href="{{ .RelPermalink }}">
-          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
-            {{ if $.IsHome -}}
-            <svg class="bi" width="1em" height="1em" fill="currentColor">
-              <use xlink:href="bootstrap-icons.svg#{{ $filename }}"/>
-            </svg>
-            {{- else -}}
-            <i class="bi bi-{{ $filename }}"></i>
-            {{- end }}
-          </div>
-          <div class="name text-muted text-decoration-none text-center pt-1">{{ $filename }}</div>
-        </a>
-      </li>
-      {{- end }}
-    {{- end }}
+  <ul class="list-unstyled list">
+    {{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
+      {{ if eq "categories" $taxonomyname }}
+        {{ range $key, $value := $taxonomy }}
+          <li class="my-5" id="{{ $key }}">
+            <h3 class="d-flex align-items-center gap-3 pb-3 mb-4 border-bottom">
+              {{ $key | humanize }}
+              <small class="badge fs-6 text-muted bg-light rounded-pill">{{ .Count }}</small>
+            </h3>
+            <ul class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 list-unstyled">
+              {{ range $value.Pages }}
+                {{ partial "icon" . }}
+              {{ end }}
+            </ul>
+          </li>
+        {{ end }}
+      {{ end }}
+    {{ end }}
   </ul>
 </div>
+
author	Mark Otto <markdotto@gmail.com>	2022-08-29 07:10:42 +0300
committer	Mark Otto <markdotto@gmail.com>	2022-10-30 00:10:14 +0300
commit	ce7de03b1988555d1fa7a474d9cfd1ef4c70682b (patch)
tree	8596dae3289f085713074b8dd326e0019247668b
parent	20d484a861218567abb9303544562373e23c0de7 (diff)