Skip to content

Commit 98db68d

Browse files
derekjohnsonderekjohnson
committed
Add breadcrumb
1 parent d21bf0a commit 98db68d

File tree

19 files changed

+187
-14
lines changed

19 files changed

+187
-14
lines changed

Diff for: ‎.eleventy.js

+4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const { DateTime } = require("luxon");
33
const gitlog = require("gitlog").default;
44
let markdownIt = require("markdown-it");
55
const markdownItAttrs = require('markdown-it-attrs');
6+
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
67

78
const markdownItOptions = {
89
html: true,
@@ -64,6 +65,9 @@ module.exports = function(eleventyConfig) {
6465
// Markdown-it
6566
eleventyConfig.setLibrary('md', markdownLib)
6667

68+
// Eleventy Navigation plugin for breadcrumb
69+
eleventyConfig.addPlugin(eleventyNavigationPlugin);
70+
6771
};
6872

6973

Diff for: ‎_includes/components/breadcrumb.njk

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="layout">
2+
{% set crumbs = collections.all | eleventyNavigationBreadcrumb(eleventyNavigation.key, { includeSelf: true }) %}
3+
<ol class="breadcrumb">
4+
{% for crumb in crumbs %}
5+
<li>
6+
<a class="crumb" href="{{ crumb.url | url }}">{{ crumb.title }}</a>
7+
</li>
8+
{% endfor %}
9+
</ol>
10+
</div>
11+

Diff for: ‎_includes/layout.njk

+2
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@
3838
<main>
3939
<h1 class="hero {% if themeModifier %}hero--{{ themeModifier }}{% endif %}"><span class="layout">{{ pageTitle }}</span></h1>
4040

41+
{% include 'components/breadcrumb.njk' %}
42+
4143
<div class="layout">
4244

4345
{{ content | safe }}

Diff for: ‎_site/content/index.html

+18-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<!-- feed it through our cssmin filter to minify -->
1010
<style>
11-
@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}
11+
@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}
1212
</style>
1313
<link rel="icon" href="/favicon.ico" sizes="any">
1414
<link rel="icon" href="/icon.svg" type="image/svg+xml">
@@ -40,6 +40,23 @@
4040
<main>
4141
<h1 class="hero hero--content"><span class="layout">Our content platform</span></h1>
4242

43+
<div class="layout">
44+
45+
<ol class="breadcrumb">
46+
47+
<li>
48+
<a class="crumb" href="/">Home</a>
49+
</li>
50+
51+
<li>
52+
<a class="crumb" href="/content/">Content</a>
53+
</li>
54+
55+
</ol>
56+
</div>
57+
58+
59+
4360
<div class="layout">
4461

4562

Diff for: ‎_site/fundraising/index.html

+18-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<!-- feed it through our cssmin filter to minify -->
1010
<style>
11-
@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}
11+
@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}
1212
</style>
1313
<link rel="icon" href="/favicon.ico" sizes="any">
1414
<link rel="icon" href="/icon.svg" type="image/svg+xml">
@@ -40,6 +40,23 @@
4040
<main>
4141
<h1 class="hero hero--fundraising"><span class="layout">Our fundraising platform</span></h1>
4242

43+
<div class="layout">
44+
45+
<ol class="breadcrumb">
46+
47+
<li>
48+
<a class="crumb" href="/">Home</a>
49+
</li>
50+
51+
<li>
52+
<a class="crumb" href="/fundraising/">Fundraising</a>
53+
</li>
54+
55+
</ol>
56+
</div>
57+
58+
59+
4360
<div class="layout">
4461

4562

0 commit comments

Comments
 (0)