Style the toc and add a front matter property to use it on long pages

barnardos · Jun 23, 2022 · 7e77f21 · 7e77f21
1 parent d555750
commit 7e77f21
Show file tree

Hide file tree

Showing 12 changed files with 181 additions and 125 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -73,7 +73,10 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(eleventyNavigationPlugin);
 
   // Table of contents filter
-  eleventyConfig.addPlugin(pluginTOC);
+  eleventyConfig.addPlugin(pluginTOC, {
+    wrapper: 'div',
+    wrapperClass: ''
+  });
 
 };
 

diff --git a/_includes/components/css.njk b/_includes/components/css.njk
@@ -20,6 +20,9 @@
         {% include "css/components/cards-grid.css" %}
         {% include "css/components/card.css" %}
       {% endif %}
+      {% if longPage == true %}
+        {% include "css/components/toc.css" %}
+      {% endif %}
     {% endset %}
     <!-- feed it through our cssmin filter to minify -->
     <style>

diff --git a/_includes/main-aside.njk b/_includes/main-aside.njk
@@ -24,8 +24,12 @@
 
       <main>
 
-        <h2>On this page</h2>
-        {{ content | toc | safe }}
+        {% if longPage and content | toc %}
+          <nav class="toc">
+            <h2>On this page</h2>
+            {{ content | toc | safe }}
+          </nav>
+        {% endif %}
 
         {{ content | safe }}
 

diff --git a/_site/standards/creating-content/content-principles/index.html b/_site/standards/creating-content/content-principles/index.html
diff --git a/_site/standards/creating-content/index.html b/_site/standards/creating-content/index.html
@@ -67,7 +67,6 @@ <h1 class="hero hero--standards"><span class="layout">Creating content</span></h
 
       <main>
 
-        <h2>On this page</h2>
 
 
         <p>These guidelines are for everyone who works for and with Barnardo’s to help bring the brand and what we stand for to life.</p>

diff --git a/_site/standards/creating-content/writing-guidelines/index.html b/_site/standards/creating-content/writing-guidelines/index.html
diff --git a/_site/standards/web-accessibility/index.html b/_site/standards/web-accessibility/index.html
@@ -67,7 +67,6 @@ <h1 class="hero hero--standards"><span class="layout">Web accessibility</span></
 
       <main>
 
-        <h2>On this page</h2>
 
 
         <p>It is a legal and moral obligation to make web content and functionality available to people with disabilities. This includes but is not limited to:</p>
@@ -89,13 +88,13 @@ <h2>On this page</h2>
 <p>Automated accessibility tools can pick up some problems, but manual testing is required to meet many success criteria. For example an automated tool cannot check if alternative text is descriptive and relevant.</p>
 <p>Product owners must never allow the use of accessibility overlays. The people who use Barnardo's products deserve better, and any product that carries the Barnardo's name must provide better.</p>
 <p>We recommend <a href="https://tetralogical.com/">TetraLogical</a> for accessibility testing and reporting if the relevant expertise is not present in the team building your product.</p>
-<h2>Reading list</h2>
+<h2 id="reading-list" tabindex="-1">Reading list</h2>
 <ul>
 <li><a href="https://www.w3.org/TR/html-aria/">https://www.w3.org/TR/html-aria/</a></li>
 <li><a href="https://www.w3.org/TR/using-aria/">https://www.w3.org/TR/using-aria/</a></li>
 <li><a href="https://stevefaulkner.github.io/HTML5accessibility/">https://stevefaulkner.github.io/HTML5accessibility/</a></li>
 </ul>
-<h2>Suggested feeds</h2>
+<h2 id="suggested-feeds" tabindex="-1">Suggested feeds</h2>
 <ul>
 <li><a href="https://tink.uk/">https://tink.uk/</a></li>
 <li><a href="https://www.scottohara.me/">https://www.scottohara.me/</a></li>

diff --git a/_site/standards/web-performance/index.html b/_site/standards/web-performance/index.html
diff --git a/css/components/toc.css b/css/components/toc.css
@@ -0,0 +1,29 @@
+.toc {
+  background: var(--grey-light);
+  border: 1px solid var(--grey-medium);
+  padding: 16px;
+}
+
+.toc h2 {
+  font-size: var(--step-1);
+  margin-block-end: 1rem;
+}
+
+.toc ol {
+  counter-reset: item;
+}
+
+.toc li {
+  margin-block-end: 0;
+  padding-inline-start: 16px;
+}
+
+.toc li::before {
+  content: counters(item, ".") " ";
+  counter-increment: item;
+}
+
+.toc a {
+  display: inline-block;
+  padding-block: 10px;
+}
diff --git a/standards/creating-content/content-principles.md b/standards/creating-content/content-principles.md
@@ -11,7 +11,7 @@ themeModifier: standards
 eleventyNavigation:
   key: Content principles
   parent: Creating content
-toc: true
+longPage: true
 ---
 
 

diff --git a/standards/creating-content/writing-guidelines.md b/standards/creating-content/writing-guidelines.md
@@ -11,7 +11,7 @@ themeModifier: standards
 eleventyNavigation:
   key: Writing guidelines
   parent: Creating content
-toc: true
+longPage: true
 ---
 
 ## Introduction – how to use this guide

diff --git a/standards/performance.md b/standards/performance.md
@@ -11,6 +11,7 @@ themeModifier: standards
 eleventyNavigation:
   key: Front end performance
   parent: Standards
+longPage: true
 ---
 
 ## Why fast and light websites matter