Add breadcrumb

.eleventy.js

@@ -3,6 +3,7 @@ const { DateTime } = require("luxon");
 const gitlog = require("gitlog").default;
 let markdownIt = require("markdown-it");
 const markdownItAttrs = require('markdown-it-attrs');
+const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 
 const markdownItOptions = {
   html: true,
@@ -64,6 +65,9 @@ module.exports = function(eleventyConfig) {
   // Markdown-it
   eleventyConfig.setLibrary('md', markdownLib)
 
+  // Eleventy Navigation plugin for breadcrumb
+  eleventyConfig.addPlugin(eleventyNavigationPlugin);
+
 };
 
 

_includes/components/breadcrumb.njk

@@ -0,0 +1,11 @@
+<div class="layout">
+  {% set crumbs = collections.all | eleventyNavigationBreadcrumb(eleventyNavigation.key, { includeSelf: true }) %}
+  <ol class="breadcrumb">
+    {% for crumb in crumbs %}
+      <li>
+        <a class="crumb" href="{{ crumb.url | url }}">{{ crumb.title }}</a>
+      </li>
+    {% endfor %}
+  </ol>
+</div>
+

_includes/layout.njk

@@ -38,6 +38,8 @@
     <main>
       <h1 class="hero {% if themeModifier %}hero--{{ themeModifier }}{% endif %}"><span class="layout">{{ pageTitle }}</span></h1>
 
+      {% include 'components/breadcrumb.njk' %}
+
       <div class="layout">
 
         {{ content | safe }}

_site/content/index.html

@@ -8,7 +8,7 @@
 
     <!-- feed it through our cssmin filter to minify -->
     <style>
-      @font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-light-webfont.woff2") format("woff2"),url("/fonts/proximanova-light-webfont.woff") format("woff");font-weight:300;font-style:normal}@font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-bold-webfont.woff2") format("woff2"),url("/fonts/proximanova-bold-webfont.woff") format("woff");font-weight:700;font-style:normal}:root{--grey-base:0 0%;--grey-dark:hsl(var(--grey-base) 11%);--grey-medium:hsl(var(--grey-base) 82%);--grey-medium-light:hsl(var(--grey-base) 91%);--grey-light:hsl(var(--grey-base) 96%);--yellow-base:39.1 100%;--yellow-medium:hsl(var(--yellow-base) 64%);--blue-base:185.7 100%;--blue-medium:hsl(var(--blue-base) 28%);--focus-outline:hsl(27.9, 100%, 45.5%);--purple-base:306.2 54.9%;--purple-medium:hsl(var(--purple-base) 27.8%);--orange-base:27.9 100%;--orange-medium:hsl(var(--orange-base) 37.5%);--pink-base:327.1 100%;--pink-medium:hsl(var(--pink-base) 40%);--step--2:clamp(0.79rem, calc(0.79rem + 0.01vw), 0.80rem);--step--1:clamp(0.89rem, calc(0.89rem + 0.13vw), 1.00rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.29vw), 1.25rem);--step-1:clamp(1.13rem, calc(1.13rem + 0.50vw), 1.56rem);--step-2:clamp(1.27rem, calc(1.27rem + 0.79vw), 1.95rem);--step-3:clamp(1.42rem, calc(1.42rem + 1.16vw), 2.44rem);--step-4:clamp(1.60rem, calc(1.60rem + 1.66vw), 3.05rem);--step-5:clamp(1.80rem, calc(1.80rem + 2.30vw), 3.82rem)}html{block-size:100%}body{block-size:100%;color:var(--grey-dark);display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;font-size:var(--step-0);line-height:1.5;margin:0}header{box-shadow:inset 0 -1px 0 0 #e8e8e8;padding:26px 0}a:hover{text-decoration:none}img,svg{max-inline-size:100%}main>*{margin-block-end:2rem}h1,h2,h3{font-family:proxima-nova,Helvetica,Arial,sans-serif;line-height:1.2;margin:0 0 2rem}h1{font-size:var(--step-5)}h2{font-size:var(--step-4)}h3{font-size:var(--step-3);margin-block-end:1rem}ol,ul{list-style:none;padding:0}li,p{margin:0 0 2rem;max-inline-size:65ch}aside{background-color:var(--grey-light);margin-block-end:2rem;max-inline-size:65ch;padding:16px}summary{inline-size:max-content}footer{background-color:var(--grey-light);border-block-start:4px solid var(--grey-medium-light);margin-block-start:auto;padding:32px 16px}small{font-size:var(--step--1)}:focus{outline:3px solid var(--focus-outline)}:focus:not(:focus-visible){outline:0}:focus-visible{outline:3px solid var(--focus-outline)}.layout{display:block;margin-inline:auto;max-inline-size:87.5rem;inline-size:95vw}.logo{block-size:3.875rem;display:block;inline-size:8.4375rem;max-inline-size:100%}.logo-img{block-size:100%;inline-size:100%}.hero{background:var(--yellow-medium);padding:3rem 0}.hero--standards{background:var(--blue-medium)}.hero--content{background:var(--orange-medium)}.hero--services{background:var(--purple-medium)}.hero--fundraising{background:var(--pink-medium)}[class*=hero--]{color:#fff}.cards-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fill,minmax(30ch,1fr))}.card{border:1px solid var(--grey-medium);border-radius:4px}.card-title{font-size:var(--step-3);padding:20px}.card-title--standards{background:var(--blue-medium)}.card-title--services{background:var(--purple-medium)}.card-title--content{background:var(--orange-medium)}.card-title--fundraising{background:var(--pink-medium)}.card-title a{color:#fff}.card-summary{margin:0;padding:0 20px 20px}
+      @font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-light-webfont.woff2") format("woff2"),url("/fonts/proximanova-light-webfont.woff") format("woff");font-weight:300;font-style:normal}@font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-bold-webfont.woff2") format("woff2"),url("/fonts/proximanova-bold-webfont.woff") format("woff");font-weight:700;font-style:normal}:root{--grey-base:0 0%;--grey-dark:hsl(var(--grey-base) 11%);--grey-medium:hsl(var(--grey-base) 82%);--grey-medium-light:hsl(var(--grey-base) 91%);--grey-light:hsl(var(--grey-base) 96%);--yellow-base:39.1 100%;--yellow-medium:hsl(var(--yellow-base) 64%);--blue-base:185.7 100%;--blue-medium:hsl(var(--blue-base) 28%);--focus-outline:hsl(27.9, 100%, 45.5%);--purple-base:306.2 54.9%;--purple-medium:hsl(var(--purple-base) 27.8%);--orange-base:27.9 100%;--orange-medium:hsl(var(--orange-base) 37.5%);--pink-base:327.1 100%;--pink-medium:hsl(var(--pink-base) 40%);--step--2:clamp(0.79rem, calc(0.79rem + 0.01vw), 0.80rem);--step--1:clamp(0.89rem, calc(0.89rem + 0.13vw), 1.00rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.29vw), 1.25rem);--step-1:clamp(1.13rem, calc(1.13rem + 0.50vw), 1.56rem);--step-2:clamp(1.27rem, calc(1.27rem + 0.79vw), 1.95rem);--step-3:clamp(1.42rem, calc(1.42rem + 1.16vw), 2.44rem);--step-4:clamp(1.60rem, calc(1.60rem + 1.66vw), 3.05rem);--step-5:clamp(1.80rem, calc(1.80rem + 2.30vw), 3.82rem)}html{block-size:100%}body{block-size:100%;color:var(--grey-dark);display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;font-size:var(--step-0);line-height:1.5;margin:0}header{box-shadow:inset 0 -1px 0 0 #e8e8e8;padding:26px 0}a:hover{text-decoration:none}img,svg{max-inline-size:100%}main>*{margin-block-end:2rem}h1,h2,h3{font-family:proxima-nova,Helvetica,Arial,sans-serif;line-height:1.2;margin:0 0 2rem}h1{font-size:var(--step-5)}h2{font-size:var(--step-4)}h3{font-size:var(--step-3);margin-block-end:1rem}ol,ul{list-style:none;margin:0;padding:0}li,p{margin:0 0 2rem;max-inline-size:65ch}aside{background-color:var(--grey-light);margin-block-end:2rem;max-inline-size:65ch;padding:16px}summary{inline-size:max-content}footer{background-color:var(--grey-light);border-block-start:4px solid var(--grey-medium-light);margin-block-start:auto;padding:32px 16px}small{font-size:var(--step--1)}:focus{outline:3px solid var(--focus-outline)}:focus:not(:focus-visible){outline:0}:focus-visible{outline:3px solid var(--focus-outline)}.layout{display:block;margin-inline:auto;max-inline-size:87.5rem;inline-size:95vw}.logo{block-size:3.875rem;display:block;inline-size:8.4375rem;max-inline-size:100%}.logo-img{block-size:100%;inline-size:100%}.hero{background:var(--yellow-medium);padding:3rem 0}.hero--standards{background:var(--blue-medium)}.hero--content{background:var(--orange-medium)}.hero--services{background:var(--purple-medium)}.hero--fundraising{background:var(--pink-medium)}[class*=hero--]{color:#fff}.breadcrumb{display:flex;gap:1rem}.breadcrumb li:not(:last-child)::after{color:var(--grey-medium);content:"›";margin-inline-start:1rem}.cards-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fill,minmax(30ch,1fr))}.card{border:1px solid var(--grey-medium);border-radius:4px}.card-title{font-size:var(--step-3);padding:20px}.card-title--standards{background:var(--blue-medium)}.card-title--services{background:var(--purple-medium)}.card-title--content{background:var(--orange-medium)}.card-title--fundraising{background:var(--pink-medium)}.card-title a{color:#fff}.card-summary{margin:0;padding:0 20px 20px}
     </style>
     <link rel="icon" href="/favicon.ico" sizes="any">
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
@@ -40,6 +40,23 @@
     <main>
       <h1 class="hero hero--content"><span class="layout">Our content platform</span></h1>
 
+      <div class="layout">
+
+  <ol class="breadcrumb">
+
+      <li>
+        <a class="crumb" href="/">Home</a>
+      </li>
+
+      <li>
+        <a class="crumb" href="/content/">Content</a>
+      </li>
+
+  </ol>
+</div>
+
+
+
       <div class="layout">
 
 

_site/fundraising/index.html

@@ -8,7 +8,7 @@
 
     <!-- feed it through our cssmin filter to minify -->
     <style>
-      @font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-light-webfont.woff2") format("woff2"),url("/fonts/proximanova-light-webfont.woff") format("woff");font-weight:300;font-style:normal}@font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-bold-webfont.woff2") format("woff2"),url("/fonts/proximanova-bold-webfont.woff") format("woff");font-weight:700;font-style:normal}:root{--grey-base:0 0%;--grey-dark:hsl(var(--grey-base) 11%);--grey-medium:hsl(var(--grey-base) 82%);--grey-medium-light:hsl(var(--grey-base) 91%);--grey-light:hsl(var(--grey-base) 96%);--yellow-base:39.1 100%;--yellow-medium:hsl(var(--yellow-base) 64%);--blue-base:185.7 100%;--blue-medium:hsl(var(--blue-base) 28%);--focus-outline:hsl(27.9, 100%, 45.5%);--purple-base:306.2 54.9%;--purple-medium:hsl(var(--purple-base) 27.8%);--orange-base:27.9 100%;--orange-medium:hsl(var(--orange-base) 37.5%);--pink-base:327.1 100%;--pink-medium:hsl(var(--pink-base) 40%);--step--2:clamp(0.79rem, calc(0.79rem + 0.01vw), 0.80rem);--step--1:clamp(0.89rem, calc(0.89rem + 0.13vw), 1.00rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.29vw), 1.25rem);--step-1:clamp(1.13rem, calc(1.13rem + 0.50vw), 1.56rem);--step-2:clamp(1.27rem, calc(1.27rem + 0.79vw), 1.95rem);--step-3:clamp(1.42rem, calc(1.42rem + 1.16vw), 2.44rem);--step-4:clamp(1.60rem, calc(1.60rem + 1.66vw), 3.05rem);--step-5:clamp(1.80rem, calc(1.80rem + 2.30vw), 3.82rem)}html{block-size:100%}body{block-size:100%;color:var(--grey-dark);display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;font-size:var(--step-0);line-height:1.5;margin:0}header{box-shadow:inset 0 -1px 0 0 #e8e8e8;padding:26px 0}a:hover{text-decoration:none}img,svg{max-inline-size:100%}main>*{margin-block-end:2rem}h1,h2,h3{font-family:proxima-nova,Helvetica,Arial,sans-serif;line-height:1.2;margin:0 0 2rem}h1{font-size:var(--step-5)}h2{font-size:var(--step-4)}h3{font-size:var(--step-3);margin-block-end:1rem}ol,ul{list-style:none;padding:0}li,p{margin:0 0 2rem;max-inline-size:65ch}aside{background-color:var(--grey-light);margin-block-end:2rem;max-inline-size:65ch;padding:16px}summary{inline-size:max-content}footer{background-color:var(--grey-light);border-block-start:4px solid var(--grey-medium-light);margin-block-start:auto;padding:32px 16px}small{font-size:var(--step--1)}:focus{outline:3px solid var(--focus-outline)}:focus:not(:focus-visible){outline:0}:focus-visible{outline:3px solid var(--focus-outline)}.layout{display:block;margin-inline:auto;max-inline-size:87.5rem;inline-size:95vw}.logo{block-size:3.875rem;display:block;inline-size:8.4375rem;max-inline-size:100%}.logo-img{block-size:100%;inline-size:100%}.hero{background:var(--yellow-medium);padding:3rem 0}.hero--standards{background:var(--blue-medium)}.hero--content{background:var(--orange-medium)}.hero--services{background:var(--purple-medium)}.hero--fundraising{background:var(--pink-medium)}[class*=hero--]{color:#fff}.cards-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fill,minmax(30ch,1fr))}.card{border:1px solid var(--grey-medium);border-radius:4px}.card-title{font-size:var(--step-3);padding:20px}.card-title--standards{background:var(--blue-medium)}.card-title--services{background:var(--purple-medium)}.card-title--content{background:var(--orange-medium)}.card-title--fundraising{background:var(--pink-medium)}.card-title a{color:#fff}.card-summary{margin:0;padding:0 20px 20px}
+      @font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-light-webfont.woff2") format("woff2"),url("/fonts/proximanova-light-webfont.woff") format("woff");font-weight:300;font-style:normal}@font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-bold-webfont.woff2") format("woff2"),url("/fonts/proximanova-bold-webfont.woff") format("woff");font-weight:700;font-style:normal}:root{--grey-base:0 0%;--grey-dark:hsl(var(--grey-base) 11%);--grey-medium:hsl(var(--grey-base) 82%);--grey-medium-light:hsl(var(--grey-base) 91%);--grey-light:hsl(var(--grey-base) 96%);--yellow-base:39.1 100%;--yellow-medium:hsl(var(--yellow-base) 64%);--blue-base:185.7 100%;--blue-medium:hsl(var(--blue-base) 28%);--focus-outline:hsl(27.9, 100%, 45.5%);--purple-base:306.2 54.9%;--purple-medium:hsl(var(--purple-base) 27.8%);--orange-base:27.9 100%;--orange-medium:hsl(var(--orange-base) 37.5%);--pink-base:327.1 100%;--pink-medium:hsl(var(--pink-base) 40%);--step--2:clamp(0.79rem, calc(0.79rem + 0.01vw), 0.80rem);--step--1:clamp(0.89rem, calc(0.89rem + 0.13vw), 1.00rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.29vw), 1.25rem);--step-1:clamp(1.13rem, calc(1.13rem + 0.50vw), 1.56rem);--step-2:clamp(1.27rem, calc(1.27rem + 0.79vw), 1.95rem);--step-3:clamp(1.42rem, calc(1.42rem + 1.16vw), 2.44rem);--step-4:clamp(1.60rem, calc(1.60rem + 1.66vw), 3.05rem);--step-5:clamp(1.80rem, calc(1.80rem + 2.30vw), 3.82rem)}html{block-size:100%}body{block-size:100%;color:var(--grey-dark);display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;font-size:var(--step-0);line-height:1.5;margin:0}header{box-shadow:inset 0 -1px 0 0 #e8e8e8;padding:26px 0}a:hover{text-decoration:none}img,svg{max-inline-size:100%}main>*{margin-block-end:2rem}h1,h2,h3{font-family:proxima-nova,Helvetica,Arial,sans-serif;line-height:1.2;margin:0 0 2rem}h1{font-size:var(--step-5)}h2{font-size:var(--step-4)}h3{font-size:var(--step-3);margin-block-end:1rem}ol,ul{list-style:none;margin:0;padding:0}li,p{margin:0 0 2rem;max-inline-size:65ch}aside{background-color:var(--grey-light);margin-block-end:2rem;max-inline-size:65ch;padding:16px}summary{inline-size:max-content}footer{background-color:var(--grey-light);border-block-start:4px solid var(--grey-medium-light);margin-block-start:auto;padding:32px 16px}small{font-size:var(--step--1)}:focus{outline:3px solid var(--focus-outline)}:focus:not(:focus-visible){outline:0}:focus-visible{outline:3px solid var(--focus-outline)}.layout{display:block;margin-inline:auto;max-inline-size:87.5rem;inline-size:95vw}.logo{block-size:3.875rem;display:block;inline-size:8.4375rem;max-inline-size:100%}.logo-img{block-size:100%;inline-size:100%}.hero{background:var(--yellow-medium);padding:3rem 0}.hero--standards{background:var(--blue-medium)}.hero--content{background:var(--orange-medium)}.hero--services{background:var(--purple-medium)}.hero--fundraising{background:var(--pink-medium)}[class*=hero--]{color:#fff}.breadcrumb{display:flex;gap:1rem}.breadcrumb li:not(:last-child)::after{color:var(--grey-medium);content:"›";margin-inline-start:1rem}.cards-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fill,minmax(30ch,1fr))}.card{border:1px solid var(--grey-medium);border-radius:4px}.card-title{font-size:var(--step-3);padding:20px}.card-title--standards{background:var(--blue-medium)}.card-title--services{background:var(--purple-medium)}.card-title--content{background:var(--orange-medium)}.card-title--fundraising{background:var(--pink-medium)}.card-title a{color:#fff}.card-summary{margin:0;padding:0 20px 20px}
     </style>
     <link rel="icon" href="/favicon.ico" sizes="any">
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
@@ -40,6 +40,23 @@
     <main>
       <h1 class="hero hero--fundraising"><span class="layout">Our fundraising platform</span></h1>
 
+      <div class="layout">
+
+  <ol class="breadcrumb">
+
+      <li>
+        <a class="crumb" href="/">Home</a>
+      </li>
+
+      <li>
+        <a class="crumb" href="/fundraising/">Fundraising</a>
+      </li>
+
+  </ol>
+</div>
+
+
+
       <div class="layout">