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
twbs · Oct 29, 2022 · ce7de03 · ce7de03
1 parent 20d484a
commit ce7de03
Show file tree

Hide file tree

Showing 12 changed files with 357 additions and 232 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 }}