From 405e2361803ea287710a77cf22c317bedc5b2d07 Mon Sep 17 00:00:00 2001
From: Robyn Thiessen-Bock <robyn.thiessenbock@gmail.com>
Date: Tue, 5 Oct 2021 22:12:18 -0400
Subject: [PATCH] Add table of contents

- Add table of contents to inform, learn, and plan pages (ohi+/conduct)
- Document front-matter properties in the README (including the new toc property)
- Remove unused ".section" style
- Rename "default-section" class to "section"
- Add option to remove cards from any list page by setting `cards: false` in the front-matter

Relates to: #106, #67, #30, #28
---
 README.md                               |   7 +-
 assets/js/main.js                       |  10 +-
 assets/js/toc.js                        | 330 ++++++++++++++++++++++++
 assets/scss/_common.scss                |  14 +-
 assets/scss/partials/layout/layout.scss |  12 +-
 assets/scss/partials/toc.scss           | 254 ++++++++++++++++++
 assets/scss/style.scss                  |   1 +
 config/_default/markup.yaml             |   6 +-
 content/ohi+/conduct/inform.md          |   1 +
 content/ohi+/conduct/learn.md           |   3 +-
 content/ohi+/conduct/plan.md            |   1 +
 layouts/_default/list.html              |  12 +-
 layouts/_default/single.html            |  25 +-
 layouts/goals/list.html                 |   2 +-
 layouts/news/list.html                  |   2 +-
 layouts/ohi-assessment/list.html        |   2 +-
 layouts/ohi-assessment/single.html      |   2 +-
 layouts/ohi-conduct/list.html           |   7 -
 layouts/partials/toc.html               |  56 ++++
 19 files changed, 710 insertions(+), 37 deletions(-)
 create mode 100644 assets/js/toc.js
 create mode 100644 assets/scss/partials/toc.scss
 delete mode 100644 layouts/ohi-conduct/list.html
 create mode 100644 layouts/partials/toc.html

diff --git a/README.md b/README.md
index de1d31e33..88262fbae 100644
--- a/README.md
+++ b/README.md
@@ -21,9 +21,10 @@ add-ons called "shortcodes". Content markdown files also use metadata at the sta
 
 Front-matter is located at the top of each markdown file, between two `---` separators, in `yaml` format. The properties common to all pages are:
 
-- title
-- name
-- bg_image
+- `title`: The full title of the page to show in the page header.
+- `name`: The short name of the page to use in menus, etc. May be the same as title.
+- `bg_image`: The image to use in the page's header
+- `toc`: Set to `true` to add a table of contents to the page. The page will use a 2-col layout instead of a 3-col layout. This only works for single pages (pages that aren't named `index.md` or `_index.md`)
 
 ## Shortcodes
 
diff --git a/assets/js/main.js b/assets/js/main.js
index dc8a5455c..bcc134e2d 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -8,8 +8,10 @@ import params from '@params'
 
 // Functions for the main navigation menu.
 import nav from './partials/nav/nav.js'
-
+// Data visualizations
 import dataviz from './data-viz/dataviz.js'
+// Table of contents
+import toc from './toc.js';
 
 // What to do when the DOM has loaded
 async function callback() {
@@ -17,7 +19,11 @@ async function callback() {
   // Enable the navigation functions
   nav.init();
 
-  dataviz.init(); 
+  // Render any data visualizations that are on the page
+  dataviz.init();
+  
+  // Set up the table of contents functions, if there is a TOC.
+  toc.init();
 
 };
 
diff --git a/assets/js/toc.js b/assets/js/toc.js
new file mode 100644
index 000000000..1f23b2a61
--- /dev/null
+++ b/assets/js/toc.js
@@ -0,0 +1,330 @@
+// parameters imported from the baseof.html template which builds the JS
+import * as params from '@params'
+
+/**
+ * CSS Selector strings to select HTML elements that make up the TOC
+ * @typedef {Object} TOCSelectors
+ * @property {string} mainContainer The entire block (including TOC & content)
+ * @property {string} toc The table of contents
+ * @property {string} content The contents that the TOC refers to (i.e. the text with ids)
+ * @property {string} tocContainer The element that doesn't get affixed but that contains
+ * the TOC
+ * @property {string} list The <ul> or <ol> elements that makes up the TOC (relative to
+ * the selectors.toc selector)
+ * @property {string} button The buttons used to open/close the TOC on small screens
+ * (relative to the selectors.toc selector)
+ * @property {string} items The <li> elements within the TOC. <li> must contain an <a>.
+ * (relative to the selectors.toc selector)
+ * @property {string} nav The nav element that surrounds the TOC (relative to the
+ * selectors.toc selector)
+ */
+
+/**
+ * Creates an interactive table of contents if the right HTML elements exist in the page.
+ * @param {Object} options - Configurable options for the TOC.
+ * @property {TOCSelectors} selectors - CSS Selector strings to select HTML elements that
+ * make up the TOC
+ * @property {Object} classes - Classes to add/remove to elements depending on their state
+ * @property {number} breakpoint - Screen width at which to switch from mobile style rules
+ * to desktop styles.
+ *
+ */
+function init({
+  selectors = {
+    mainContainer: ".toc",
+    toc: ".toc__toc",
+    content: ".toc__content",
+    tocContainer: ".toc__toc-container",
+    list: "ul, ol",
+    button: ".toc__button",
+    items: "li",
+    nav: "nav"
+  },
+  classes = {
+    affixedMobile: "toc__toc--affixed-mobile",
+    affixedDesktop: "toc__toc--affixed-desktop",
+    active: "active"
+  },
+  breakpoint = params.breakpoint,
+} = {}) {
+
+  const elements = selectElements();
+  const tocExists = elements.button !== null &&
+    elements.button !== undefined &&
+    elements.list !== null &&
+    elements.list !== undefined
+
+  // Only continue if the the necessary TOC elements exist in the page
+  if (!tocExists) {
+    return
+  }
+
+  // Set a minimum height for the nav container to keep it from glitching on mobile
+  setTimeout(function () {
+    elements.tocContainer.style.minHeight = (elements.toc.offsetHeight + 2) + "px";
+  }, 500);
+  // Start the list as hidden (for mobile)
+  elements.list.setAttribute("aria-hidden", "false"); // TODO?
+  // Add a link to identify the toc links
+  setListeners();
+
+  /**  
+   * throttle - Limits the number of times that a function can be called within a time
+   * period. From: https://www.afasterweb.com/2017/09/26/performance-basics-throttling/
+   *
+   * @param  {function} fn The function to throttle  
+   * @param  {number}   wait    Minimum milliseconds to wait before allowing the callback
+   * function to be called again 
+   * @return {function} Returns the callback function wrapped in the throttle function 
+   */
+  function throttle(fn, wait) {
+    var time = Date.now();
+    return function () {
+      if ((time + wait - Date.now()) < 0) {
+        fn();
+        time = Date.now();
+      }
+    }
+  }
+
+  /**    
+   * selectElements - Select all of the elements that this script will manipulate.
+   */
+  function selectElements() {
+
+    const elements = {}
+    // Select the TOC items
+    elements.el = document.querySelector(selectors.mainContainer);
+    elements.toc = document.querySelector(selectors.toc);
+    elements.content = document.querySelector(selectors.content);
+
+    if (elements.el) {
+      elements.tocContainer = elements.el.querySelector(selectors.tocContainer);
+    }
+
+    if (elements.toc) {
+
+      elements.list = elements.toc.querySelector(selectors.list);
+      elements.button = elements.toc.querySelector(selectors.button);
+      elements.nav = elements.toc.querySelector(selectors.nav);
+
+      elements.items = [];
+
+      elements.toc.querySelectorAll(selectors.items).forEach(function (item, index) {
+
+        var link = item.querySelector("a");
+        // Don't count items without links
+        if (link) {
+          const href = link.getAttribute("href");
+          const targetSelector = href.substring(href.lastIndexOf("#") + 1);
+          const id = "item__" + targetSelector;
+          const lastChild = item.querySelector("ol li:last-child, ul li:last-child");
+
+          item.setAttribute("id", id);
+
+          elements.items[index] = {
+            index: index,
+            el: item,
+            href: href,
+            id: id,
+            targetIdSelector: targetSelector,
+            hrefDestEl: document.getElementById(targetSelector),
+            lastChild: lastChild
+          }
+        }
+      })
+    }
+    return elements
+  }
+
+  /**    
+   * setListeners - set the event listeners that will trigger scrollspy behaviour, opening
+   * and closing the TOC, etc.  
+   */
+  function setListeners () {
+
+    // Scroll and resize events
+    window.removeEventListener("scroll", throttle(classChangeEvents, 20), false);
+    window.addEventListener("scroll", throttle(classChangeEvents, 20), false);
+    window.removeEventListener("resize", throttle(classChangeEvents, 20), false);
+    window.addEventListener("resize", throttle(classChangeEvents, 20), false);
+
+    // If on mobile, and menu is affixed, then close menu on item click
+    elements.items.forEach(item => {
+      item.el.addEventListener('click', function () {
+        var winWidth = window.innerWidth || document.documentElement.clientWidth;
+        if (
+          (winWidth < breakpoint) &&
+          elements.toc.classList.contains(classes.affixedMobile)
+        ) {
+          toggleTOC(true);
+        }
+      });
+    });
+
+    // Show/hide the TOC when the button is clicked (on mobile)
+    elements.button.addEventListener("click", function () {
+      if (tocExists) {
+        var open = JSON.parse(elements.button.getAttribute("aria-expanded"));
+        toggleTOC(open);
+      }
+    });
+  }
+
+  /**    
+   * Event handler for scroll and & window resize. Updates the TOC.
+   */
+  function classChangeEvents() {
+
+    // Check if menu is changing from not affixed to affixed on mobile
+    var isAffixedBefore = elements.toc.classList.contains(classes.affixedMobile);
+
+    // Affix TOC on scroll MOBILE
+    elementFromTop(
+      elemTrigger = [elements.el],
+      targetElSelector = selectors.toc,
+      classToAdd = classes.affixedMobile,
+      distanceFromTop = -(elements.toc.offsetHeight - 100),
+      unit = 'pixels',
+      offset = (elements.toc.offsetHeight - 100)
+    );
+
+    // If menu changed from not affixed to affixed on mobile, minimize TOC
+    var isAffixedAfter = elements.toc.classList.contains(classes.affixedMobile);
+    if (!isAffixedBefore && isAffixedAfter) {
+      toggleTOC(true);
+    }
+
+    // Affix TOC on scroll (affix soooner if on DESKTOP)
+    elementFromTop(
+      elemTrigger = [elements.el],
+      targetElSelector = selectors.toc,
+      classToAdd = classes.affixedDesktop,
+      distanceFromTop = 0,
+      unit = 'pixels',
+      offset = elements.toc.offsetHeight
+    );
+
+    // Scrollspy - activate menu link when corresponding section comes into view.
+    elements.items.forEach(function (item, index) {
+      // Get the position of the next element to calculate the offset
+      var nextItem = elements.items[index + 1];
+      var offset;
+
+      // Keep parent active when child elements are active
+      if (item.lastChild && item.lastChild != null) {
+        var lastChildObj = elements.items.find(function (searchItem) {
+          // Sometimes there are empty items!
+          if (searchItem) {
+            return searchItem.id == item.lastChild.id
+          }
+        }),
+        nextItem = elements.items[lastChildObj.index + 1];
+      }
+      // Otherwise, keep active until the next item becomes active
+      if (nextItem) {
+        offset = (nextItem.hrefDestEl.getBoundingClientRect().top - item.hrefDestEl.getBoundingClientRect().top) - item.hrefDestEl.offsetHeight;
+        // Otherwise, stay active until the end of the entire block
+      } else {
+        offset = (elements.el.getBoundingClientRect().bottom - item.hrefDestEl.getBoundingClientRect().top);
+      }
+
+      elementFromTop(
+        elemTrigger = [item.hrefDestEl],
+        targetElSelector = "#" + item.id,
+        classToAdd = classes.active,
+        distanceFromTop = 159,
+        unit = 'pixels',
+        offset = ((offset - 160) * (-1))
+      );
+
+    });
+
+    // If on desktop, make sure that all of TOC is shown. Also make sure it's shown when
+    // it's not affixed on Mobile
+    var winWidth = window.innerWidth || document.documentElement.clientWidth;
+    if (winWidth >= breakpoint || (!elements.toc.classList.contains(classes.affixedMobile))) {
+      toggleTOC(false);
+    }
+
+  }
+
+  /**
+   * toggleTOC - Sets or unsets the aria-expanded and aria-hidden attributes on the
+   * TOCmenu and tocMenu button.
+   * @param {boolean} open - indicates whether the menu should be closed (true) or open
+   * (false).
+   */
+   function toggleTOC (open) {
+
+    try {
+      if (tocExists) {
+        elements.button.setAttribute("aria-expanded", !open);
+        elements.list.setAttribute("aria-hidden", open);
+      }
+    } catch (e) {
+      console.log("Error toggling the TOC");
+      console.log(e);
+    }
+  };
+
+  /**  
+   * elementFromTop - Adds or removes a class to an element based on its position in the
+   * view window.
+   *
+   * @param  {HTMLElement} elemTrigger     The HTML element which will trigger
+   * adding/removing a class when in view.  
+   * @param  {string} targetElSelector        The class used to identify the target
+   * element(s)
+   * @param  {string} classToAdd           The class to add or remove to the target
+   * element(s)
+   * @param  {number} distanceFromTop      How far past the top of the view port should
+   * the top of element be before the class is added? (in pixels or % of element height)
+   * @param  {string} unit                 ('percent' or 'pixels')
+   * @param  {number} offset               If set to 0, the class will be removed once the
+   * users scrolls past the bottom of the element. If a + number, the class will be
+   * removed sooner. If a - number, the class will be removed later.  
+   */
+  function elementFromTop(elemTrigger, targetElSelector, classToAdd, distanceFromTop, unit, offset) {
+
+    var winY = window.innerHeight || document.documentElement.clientHeight,
+      elTriggerLength = elemTrigger.length,
+      elTargetLength, distTop, distPercent, distPixels, distUnit, elTarget, i, j;
+
+    for (i = 0; i < elTriggerLength; ++i) {
+
+      elTarget = document.querySelectorAll(targetElSelector);
+      elTargetLength = elTarget.length;
+      distTop = elemTrigger[i].getBoundingClientRect().top;
+      distBottom = elemTrigger[i].getBoundingClientRect().bottom;
+      distPercent = Math.round((distTop / winY) * 100);
+      distPixels = Math.round(distTop);
+      distUnit = unit == 'percent' ? distPercent : distPixels;
+
+      if (!offset) {
+        var offset = 0;
+      }
+      // If trigger in view, then
+      if (distUnit <= distanceFromTop && (distBottom - offset) >= 0) {
+        // For each of the targets
+        for (j = 0; j < elTargetLength; ++j) {
+          // If the doesn't already contain the active class
+          if (!elTarget[j].classList.contains(classToAdd)) {
+            // Add it
+            elTarget[j].classList.add(classToAdd);
+          }
+        }
+        // If not in view
+      } else {
+        // Then remove the classes
+        elemTrigger[i].classList.remove(classToAdd);
+        for (j = 0; j < elTargetLength; ++j) {
+          elTarget[j].classList.remove(classToAdd);
+        }
+      }
+    }
+  }
+
+}
+
+export default { init }
\ No newline at end of file
diff --git a/assets/scss/_common.scss b/assets/scss/_common.scss
index 3262d711f..3221fce81 100755
--- a/assets/scss/_common.scss
+++ b/assets/scss/_common.scss
@@ -53,18 +53,8 @@ a h4{
   }
 }
 
-.section {
-  padding-top: 90px;
-  padding-bottom: 90px;
-
-  &-sm {
-    padding-top: 40px;
-    padding-bottom: 40px;
-  }
-
-  &-title {
-    margin-bottom: 30px;
-  }
+.section-title {
+  margin-bottom: 30px;
 }
 
 .bg-cover {
diff --git a/assets/scss/partials/layout/layout.scss b/assets/scss/partials/layout/layout.scss
index 4768978c9..6690cbdca 100644
--- a/assets/scss/partials/layout/layout.scss
+++ b/assets/scss/partials/layout/layout.scss
@@ -1,6 +1,16 @@
-.default-section{
+.section{
+
+  // The default section has a 3-col layout
   display: grid;
   grid-template-columns: 12% auto 16%;
   gap: 3rem;
   padding: 2rem;
+
+  // A section that has a TOC uses a 2-col layout rather than 3
+  &--has-toc{
+    grid-template-columns: auto auto;
+    width: 100%;
+    max-width: $max-content-width;
+    margin: auto;
+  }
 }
\ No newline at end of file
diff --git a/assets/scss/partials/toc.scss b/assets/scss/partials/toc.scss
new file mode 100644
index 000000000..c315cf078
--- /dev/null
+++ b/assets/scss/partials/toc.scss
@@ -0,0 +1,254 @@
+.toc {
+  // ==========================================================================
+  //    Variables
+  // ==========================================================================
+
+  // Allow the block's base class to be used at all scopes within the block.
+  // (bn = block name), use as: #{$bn}.
+  $bn: &;
+
+  $TOCwidth: 250px;
+  $itemHeight: auto;
+
+  @mixin toc-item-spacing {
+    padding: 0.4rem 1rem 0.4rem 0.4rem;
+    margin: 0 0 0.4rem;
+  }
+
+  // ==========================================================================
+  //    Styles
+  // ==========================================================================
+
+  // Note that this block applies styles directly to HTML tags instead of to
+  // classes as recommended by the BEM approach. This is because the TOC HTML
+  // used to build the block is automatically generated by Hugo from markdown,
+  // and as such, doesn't have any classes applied.
+
+  @include desktop {
+    display: grid;
+    grid-template-columns: minmax($TOCwidth, 0.4fr) auto;
+    gap: 1rem;
+  }
+
+  // Very large screens, allow the TOC to stretch to the side
+  @media only screen and (min-width: ($max-content-width + (2 * $TOCwidth) + 20)) {
+    margin-left: -$TOCwidth;
+  }
+
+  &__toc-container {
+    margin: 0 0.5rem 2rem 0;
+  }
+
+  // Includes the TOC title, list & button
+  &__toc {
+    @include desktop {
+      width: $TOCwidth;
+      margin-top: 4rem;
+    }
+
+    &--affixed-mobile {
+      z-index: 3;
+      position: fixed;
+      top: 0;
+      left: 0;
+      background-color: $body-color;
+      width: 100%;
+      display: grid;
+      grid-template-columns: auto 70px;
+      padding: 0;
+      box-shadow: -22px 1px 11px rgba(0, 0, 0, 0.15);
+      // when the button is visible
+      #{$bn}__button {
+        display: block;
+        visibility: visible;
+        text-align: center;
+        color: $text-color-dark;
+        height: auto;
+        padding: 0.4rem 0.4rem 1rem;
+        max-height: 4rem;
+        height: 2.5rem;
+      }
+      // undo properties for desktop
+      @include desktop {
+        position: relative;
+        background-color: unset;
+        width: $TOCwidth;
+        display: block;
+        left: auto;
+        padding-top: 0;
+        box-shadow: none;
+
+        #{$bn}__button {
+          display: none;
+          visibility: hidden;
+        }
+      }
+    }
+
+    &--affixed-desktop {
+      @include desktop {
+        position: fixed;
+        top: 0;
+        z-index: 3;
+        width: $TOCwidth;
+      }
+    }
+
+    // The TOC list
+    ol,
+    ul {
+      margin: 0;
+      padding-inline-start: 0;
+      margin-block-end: 0;
+      text-decoration: none;
+
+      // the active item on mobile when menu is closed
+      &[aria-hidden="true"] li.active {
+        margin-bottom: 0;
+      }
+      // all items when menu is open
+      &[aria-hidden="false"] li {
+        @include toc-item-spacing;
+        opacity: 1;
+        visibility: visible;
+        height: $itemHeight;
+      }
+    }
+
+    a {
+      height: 100%;
+      text-decoration: none;
+      font-weight: 600;
+      font-size: 0.9rem;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      color: $text-color-dark;
+
+      a:visited,
+      a:hover,
+      a:active {
+        color: $text-color-dark;
+      }
+    }
+
+    li {
+      display: block;
+      opacity: 0;
+      visibility: hidden;
+      transition: height 0.18s 0s ease-in-out, opacity 0.1s 0.17s ease-in-out, margin 0.18s 0s ease-in-out;
+      height: 0;
+      overflow: hidden;
+      margin: 0;
+      padding: 0;
+
+      // Sub-lists generally (& when parent is not active, invisible)
+      ol,
+      ul {
+        transition: max-height 0.18s 0s ease-in-out, opacity 0.1s 0.17s ease-in-out, margin 0.18s 0s ease-in-out;
+        height: auto;
+        margin: 0;
+        max-height: 0;
+        overflow: hidden;
+        opacity: 0;
+
+        // Sub-list items
+        li {
+          // Active sub-list items
+          &.active {
+            background-color: transparent;
+            border-left: none;
+            box-shadow: none;
+            a,
+            a:visited,
+            a:hover,
+            a:active {
+              color: $light-teal;
+            }
+          }
+
+          a,
+          a:visited,
+          a:hover,
+          a:active {
+            color: $text-color;
+          }
+        }
+        // Last item of sub-lists
+        li:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      &.active {
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
+        border-radius: $border-radius;
+        filter: brightness(1.04);
+        background-color: $body-color;
+        border-left: 4px solid $light-teal;
+        margin-left: -4px;
+        opacity: 1;
+        visibility: visible;
+        height: $itemHeight;
+        @include toc-item-spacing;
+
+        a,
+        a:visited,
+        a:hover,
+        a:active {
+          color: $text-color-dark;
+        }
+
+        // sub-lists when parent is active (visible)
+        ol,
+        ul {
+          max-height: 500px;
+          margin-top: 1rem;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &__button {
+    // start as hidden
+    display: none;
+    visibility: hidden;
+    // removes default browser styles for button elements
+    border: none;
+    margin: 0;
+    text-decoration: none;
+    background: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
+  }
+
+  &__button-icon {
+    stroke: $text-color-dark;
+    > svg {
+      width: 24px;
+      height: 24px;
+      stroke-width: 1.5;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  }
+
+  &__content {
+    margin-left: 1.5rem;
+    > p {
+      min-width: 100%;
+      width: 0;
+    }
+  }
+}
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index bea463e67..407b874f3 100755
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -10,6 +10,7 @@
 @import 'partials/layout/right-col.scss';
 @import 'partials/layout/layout.scss';
 @import 'partials/footer.scss';
+@import 'partials/toc.scss';
 @import 'partials/cards.scss';
 @import 'partials/socials.scss';
 @import 'partials/logo.scss';
diff --git a/config/_default/markup.yaml b/config/_default/markup.yaml
index 8da5c03f7..03e8a0b37 100644
--- a/config/_default/markup.yaml
+++ b/config/_default/markup.yaml
@@ -1,3 +1,7 @@
 goldmark:
   renderer:
-    unsafe: true
\ No newline at end of file
+    unsafe: true
+tableOfContents:
+  endLevel: 2
+  ordered: true
+  startLevel: 1
\ No newline at end of file
diff --git a/content/ohi+/conduct/inform.md b/content/ohi+/conduct/inform.md
index bfae6c10f..9aaf9bd90 100644
--- a/content/ohi+/conduct/inform.md
+++ b/content/ohi+/conduct/inform.md
@@ -2,6 +2,7 @@
 title: "Inform"
 name: "Inform"
 bg_image: "/images/banners/fish-school.jpg"
+toc: true
 ---
 
 Congratulations! You have successfully Conducted your indepenent OHI+ assessment, and you are in the last phase of OHI+, Inform. In this phase, you will focus on communciating the results of your assessmnent to a wide range of audience, from academics to policy makers.
diff --git a/content/ohi+/conduct/learn.md b/content/ohi+/conduct/learn.md
index e888cd60d..b1cd2d44f 100644
--- a/content/ohi+/conduct/learn.md
+++ b/content/ohi+/conduct/learn.md
@@ -2,6 +2,7 @@
 title: "Learn"
 name: "Learn"
 bg_image: "/images/banners/fish-school.jpg"
+toc: true
 ---
 
 Welcome to the Ocean Health Index (OHI)! OHI is the first assessment framework that combines and compares all dimensions of the ocean - ecological, social, economic, and physical - to measure how sustainably people are using ocean and coastal resources.
@@ -74,7 +75,7 @@ The Ocean Health Index Toolbox Manual
 
 In addition, you will have access to the OHI+ online community via our Forum
 
-# Global Assessments and Your OHI+ Assessment
+# 2 Global Assessments and Your OHI+ Assessment
 
 > By conducting a OHI+ study, you will be developing an Independent Ocean Health Index at a spatial scale of your choice. Most OHI+ assessments take place at subnational scales (states, provinces, municipalities) and then are aggregated at a national scale. However, you can implement the OHI methodology at any scale from global, to transboundary regions, to subnational areas.
 
diff --git a/content/ohi+/conduct/plan.md b/content/ohi+/conduct/plan.md
index c30fa7d3a..5bac22a28 100644
--- a/content/ohi+/conduct/plan.md
+++ b/content/ohi+/conduct/plan.md
@@ -2,6 +2,7 @@
 title: "Plan"
 name: "Plan"
 bg_image: "/images/banners/fish-school.jpg"
+toc: true
 ---
 You have successfully _Learned_ about OHI, and you can start <b>Planning</b> your own assessment. This section will help you understand the financial requirements, human resources, and data requirements of conducting an assessment, as well as how to engage stakeholders and assessmble a technical team, in order to Conduct an OHI assessment in the next phase.
 
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index ba47d8469..0ad4c3627 100755
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,8 +1,16 @@
 {{ define "main" }}
-  <section class="default-section">
+
+  {{- $page := . -}}
+  {{- $hasCards := ne $page.Params.cards false -}}
+
+  <section class="section">
     {{- partial "layout/left-col.html" . -}}
     {{- partial "layout/center-col.html" . -}}
     {{- partial "layout/right-col.html" . -}}
   </section>
-  {{- partial "cards.html" . -}}
+
+  {{- if $hasCards -}}
+    {{- partial "cards.html" . -}}
+  {{- end -}}
+
 {{end}}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 40913afd2..5b551e086 100755
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,7 +1,24 @@
 {{ define "main" }}
-  <section class="default-section">
-  {{- partial "layout/left-col.html" . -}}
-  {{- partial "layout/center-col.html" . -}}
-  {{- partial "layout/right-col.html" . -}}
+
+  {{- $page := . -}}
+  {{- $hasTOC := $page.Params.toc -}}
+
+  {{- $pageClass := "section" -}}
+  {{- if $hasTOC -}}
+    {{- $pageClass = printf "%s %s--has-toc" $pageClass $pageClass -}}
+  {{- end -}}
+  
+  <section class="{{ $pageClass }}">
+
+    {{- if .Params.toc -}}
+      {{- $tocBlock := dict "toc_html" $page.TableOfContents "content" $page.Content -}}
+      {{- partial "toc" (dict "Page" $page "Block" $tocBlock ) -}}
+    {{- else -}}
+      {{- partial "layout/left-col.html" . -}}
+      {{- partial "layout/center-col.html" . -}}
+      {{- partial "layout/right-col.html" . -}}
+    {{- end -}}
+
   </section>
+
 {{end}}
diff --git a/layouts/goals/list.html b/layouts/goals/list.html
index c8e954bcc..bb1a31339 100644
--- a/layouts/goals/list.html
+++ b/layouts/goals/list.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <section class="default-section">
+  <section class="section">
 
   {{- partial "layout/left-col.html" . -}}
   {{- partial "layout/center-col.html" . -}}
diff --git a/layouts/news/list.html b/layouts/news/list.html
index 763c32175..c519f354c 100644
--- a/layouts/news/list.html
+++ b/layouts/news/list.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <section class="default-section">
+  <section class="section">
   {{- partial "layout/left-col.html" . -}}
   {{- partial "layout/center-col.html" . -}}
   {{- partial "layout/right-col.html" . -}}
diff --git a/layouts/ohi-assessment/list.html b/layouts/ohi-assessment/list.html
index 3c756c923..4bd23aa81 100644
--- a/layouts/ohi-assessment/list.html
+++ b/layouts/ohi-assessment/list.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 {{ $rows := getJSON "/content/data/assessments.json" }}
 
-  <section class="default-section">
+  <section class="section">
   {{- partial "layout/left-col.html" . -}}
   <div class="column-center">
     <img src="/images/misc/ohi-plus-icon.svg" class="ohi-plus-assessment-icon"> Indicates an OHI+ assessment
diff --git a/layouts/ohi-assessment/single.html b/layouts/ohi-assessment/single.html
index f5c6ad43e..a7ee8d169 100644
--- a/layouts/ohi-assessment/single.html
+++ b/layouts/ohi-assessment/single.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 {{ $rows := getJSON "/content/data/assessments.json" }}
 
-  <section class="default-section">
+  <section class="section">
   {{- partial "layout/left-col.html" . -}}
   <div class="column-center">
     <div class="ohi-assessments">
diff --git a/layouts/ohi-conduct/list.html b/layouts/ohi-conduct/list.html
deleted file mode 100644
index 763c32175..000000000
--- a/layouts/ohi-conduct/list.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{{ define "main" }}
-  <section class="default-section">
-  {{- partial "layout/left-col.html" . -}}
-  {{- partial "layout/center-col.html" . -}}
-  {{- partial "layout/right-col.html" . -}}
-  </section>
-{{end}}
\ No newline at end of file
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
new file mode 100644
index 000000000..f5026c810
--- /dev/null
+++ b/layouts/partials/toc.html
@@ -0,0 +1,56 @@
+<!-- In order to pass on page parameters from within loops -->
+{{- $page := .Page -}}
+<!-- bn = block name -->
+{{- $bn := "toc" -}}
+<!-- classes to add to outer element -->
+{{- $classes := $bn -}}
+
+<!-- The TOC HTML, which should comprise a <nav> containing a <ul> or <ol> -->
+<!-- Each <li> within the list should link to the ID using an anchor tag. -->
+<!-- EG <li><a href="#here">Item name</a></li> -->
+<!-- This structure is the same as the one created by Hugo -->
+{{- $tocHTML := .Block.toc_html | default "" -}}
+
+<!-- The content block dict, must include a .template variable -->
+{{- $content := .Block.content | default "" -}}
+
+<!-- The title provided to the block -->
+<!-- {{- $title := .Block.title | default "" -}} -->
+
+<div class="{{- $classes -}}">
+
+  <aside class="{{- $bn -}}__toc-container">
+
+    <div class="{{- $bn -}}__toc">
+
+      {{- if $tocHTML -}}
+
+        {{- $tocHTML | safeHTML -}}
+
+        <button class="{{ $bn }}__button" id="toc-toggle" aria-label="Show table of contents" aria-expanded="true" aria-controls="member-nodes-toc">
+          <span class="{{ $bn }}__button-icon">
+            <svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
+              <line x1="8" y1="6" x2="21" y2="6"></line>
+              <line x1="8" y1="12" x2="21" y2="12"></line>
+              <line x1="8" y1="18" x2="21" y2="18"></line>
+              <line x1="3" y1="6" x2="3.01" y2="6"></line>
+              <line x1="3" y1="12" x2="3.01" y2="12"></line>
+              <line x1="3" y1="18" x2="3.01" y2="18"></line>
+            </svg>
+          </span>
+        </button>
+
+      {{- end -}}
+
+    </div>
+  </aside>
+
+  {{- with $content -}}
+    <div class="{{- $bn -}}__content">
+
+      {{- . | safeHTML -}}
+
+    </div>
+  {{- end -}}
+
+</div>
\ No newline at end of file