Make breadcrumbs & wiki-breadcrumbs lists with ::after "/"; add to pages

ryan-p-randall · Jan 12, 2024 · 80cc36b · 80cc36b
1 parent c3ca8cf
commit 80cc36b
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 2 deletions.
diff --git a/_includes/breadcrumbs.html b/_includes/breadcrumbs.html
@@ -0,0 +1,40 @@
+{% case site.category_archive.type %}
+  {% when "liquid" %}
+    {% assign path_type = "#" %}
+  {% when "jekyll-archives" %}
+    {% assign path_type = nil %}
+{% endcase %}
+
+{% if page.collection != 'posts' %}
+  {% assign path_type = nil %}
+  {% assign crumb_path = '/' %}
+{% else %}
+  {% assign crumb_path = site.category_archive.path %}
+{% endif %}
+
+<nav class="breadcrumbs">
+  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
+    {% assign crumbs = page.url | split: '/' %}
+    {% assign i = 1 %}
+    {% for crumb in crumbs offset: 1 %}
+      {% if forloop.first %}
+        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+          <a href="{{ '/' | relative_url }}" itemprop="item"><span itemprop="name">{{ site.data.ui-text[site.locale].breadcrumb_home_label | default: "Home" }}</span></a>
+
+          <meta itemprop="position" content="{{ i }}" />
+        </li>
+        {% comment %}<span class="sep">{{ site.data.ui-text[site.locale].breadcrumb_separator | default: "/" }}</span>{% endcomment %}
+      {% endif %}
+      {% if forloop.last %}
+        <li class="current">{{ page.title }}</li>
+      {% else %}
+        {% assign i = i | plus: 1 %}
+        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+          <a href="{{ crumb | downcase | replace: '%20', '-' | prepend: path_type | prepend: crumb_path | relative_url }}" itemprop="item"><span itemprop="name">{{ crumb | replace: '-', ' ' | replace: '%20', ' ' | capitalize }}</span></a>
+          <meta itemprop="position" content="{{ i }}" />
+        </li>
+        {% comment %}<span class="sep">{{ site.data.ui-text[site.locale].breadcrumb_separator | default: "/" }}</span>{% endcomment %}
+      {% endif %}
+    {% endfor %}
+  </ol>
+</nav>
diff --git a/_includes/wikibreadcrumb.html b/_includes/wikibreadcrumb.html
@@ -1,4 +1,24 @@
-<div id="">
+<nav class="wiki-breadcrumbs">
+    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
+        {% assign crumbs = page.url | remove:'/index.html' | split: '/' %}
+        <li>
+            <a href="{{ '/' | relative_url }}">home</a> 
+        </li>
+        {% for crumb in crumbs offset: 1 %}
+        {% if forloop.last %}
+        <li>
+            {{ crumb | replace:'-',' ' | remove:'.html' }}
+        </li>
+        {% else %}
+        <li>
+            <a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' }}</a>
+        </li>
+            {% endif %}
+        {% endfor %}
+    </ol>
+</nav>
+
+<!-- <div id="">
  {% assign crumbs = page.url | remove:'/index.html' | split: '/' %}
         <a href="/">home</a> / 
         {% for crumb in crumbs offset: 1 %}
@@ -8,4 +28,4 @@
             <a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' }}</a> /
           {% endif %}
         {% endfor %}
-</div>
+</div>-->
diff --git a/_layouts/archive.html b/_layouts/archive.html
@@ -0,0 +1,22 @@
+---
+layout: default
+---
+
+{% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
+  {% include page__hero.html %}
+{% elsif page.header.video.id and page.header.video.provider %}
+  {% include page__hero_video.html %}
+{% endif %}
+
+{% include breadcrumbs.html %}
+
+<div id="main" role="main">
+  {% include sidebar.html %}
+
+  <div class="archive">
+    {% unless page.header.overlay_color or page.header.overlay_image %}
+      <h1 id="page-title" class="page__title">{{ page.title }}</h1>
+    {% endunless %}
+    {{ content }}
+  </div>
+</div>
diff --git a/_sass/minimal-mistakes/skins/_dark-citrus-sage.scss b/_sass/minimal-mistakes/skins/_dark-citrus-sage.scss
@@ -9,27 +9,31 @@
     src: url('../fonts/atkinson-hyperlegible-regular-102a.woff2');
     font-weight: 400;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
     font-family: "Atkinson-Hyperlegible";
     src: url('../fonts/atkinson-hyperlegible-bold-102a.woff2');
     font-weight: 700; /* bold */
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
     font-family: "Cartridge";
     src: url('../fonts/Cartridge-Regular.woff2');
     font-weight: 400; /* bold */
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
     font-family: "Cartridge";
     src: url('../fonts/Cartridge-Bold.woff2');
     font-weight: 700; /* bold */
     font-style: normal;
+    font-display: swap;
 }
 
 /* end of new font tests; also added $sans-serif-2 family in _variables.scss */

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -159,4 +159,33 @@ summary:focus {
 /*  outline-offset: .2rem; */
 /*  outline-color:#007053; */
   box-shadow: 0 0 0 .3rem #f0f0f0;
+}
+
+.breadcrumbs ol {
+    padding: 0;
+    list-style: none;
+    font-size: 1em;
+}
+
+.breadcrumbs li:not(:last-child)::after {
+    display: inline-block;
+    content: "/";
+}
+
+.wiki-breadcrumbs ol {
+    list-style: none;
+    padding: 0;
+}
+
+.wiki-breadcrumbs li {
+    display: inline-block;
+}
+
+.wiki-breadcrumbs li:not(:last-child)::after {
+    display: inline-block;
+    content: "/";
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 1em 0 0.5em;
 }