add toc to entries

- use and configure toc in .eleventy.js - style toc in entries - remove permalinks from headings in markdown-it config - remove markdown-it heading anchor styles
Upstatement · Feb 5, 2021 · 91f14bd · 91f14bd
1 parent 164a632
commit 91f14bd
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 45 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -3,6 +3,7 @@ const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const pluginNavigation = require('@11ty/eleventy-navigation');
 const markdownIt = require('markdown-it');
 const markdownItAnchor = require('markdown-it-anchor');
+const pluginTOC = require('eleventy-plugin-nesting-toc');
 const { getSlugMap, getSortedCollection, indexItems } = require('./src/_11ty/collections');
 const { htmlDateString, readableDate, split } = require('./src/_11ty/filters');
 
@@ -13,16 +14,17 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(pluginSyntaxHighlight);
   eleventyConfig.addPlugin(pluginNavigation);
 
+  eleventyConfig.addPlugin(pluginTOC, {
+    wrapperClass: 'entry__toc',
+  });
+
   /* Markdown Overrides */
   let markdownLibrary = markdownIt({
     html: true,
     breaks: true,
     linkify: true,
-  }).use(markdownItAnchor, {
-    permalink: true,
-    permalinkClass: 'direct-link',
-    permalinkSymbol: '#',
-  });
+    typographer: true,
+  }).use(markdownItAnchor);
   eleventyConfig.setLibrary('md', markdownLibrary);
 
   eleventyConfig.setDataDeepMerge(true);

diff --git a/src/_includes/layouts/entry/_styles.scss b/src/_includes/layouts/entry/_styles.scss
@@ -8,8 +8,127 @@
   }
 }
 
-.entry__content {
+.entry__toc--wrapper {
+  @include layer(2);
+  bottom: $sp7;
+  display: none;
+  flex-direction: column;
+  font-size: $fs-4;
+  justify-content: center;
+  left: 0;
+  padding-left: var(--gutter-half);
+  position: fixed;
+  top: 0;
+
+  @include mq($md) {
+    display: flex;
+    max-width: calc((100% - var(--content-max-width)) / 2);
+  }
+}
+
+.entry__toc {
+  line-height: 1;
+  position: relative;
+
+  @media (min-width: $md) and (max-width: $xl) {
+    min-width: 10em;
+
+    &::before {
+      @include layer(-1);
+      background-color: var(--bg-color);
+      border-right: 1px solid var(--bg-color-inverted);
+      content: '';
+      height: calc(100vh - #{$sp7});
+      left: 0;
+      opacity: 0.9;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      transition: width 100ms ease;
+      width: $sp2;
+    }
+
+    &:hover,
+    &:focus-within {
+      &:before {
+        width: calc(100% + var(--gutter-half));
+      }
+    }
+  }
+}
+
+li {
+  .entry__toc & {
+    margin: $sp-3 0;
+
+    > * {
+      padding-left: 0.6em;
+    }
+
+    ol {
+      li {
+        a::before {
+          content: '••';
+        }
+
+        ol {
+          li {
+            a::before {
+              content: '•••';
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+a {
+  .entry__toc:hover & {
+    color: var(--secondary-text-color);
+
+    &::before {
+      color: var(--secondary-text-color);
+    }
+  }
+}
+
+a {
+  .entry__toc & {
+    color: rgba(0, 0, 0, 0);
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: color ease 150ms;
+    white-space: nowrap;
+    width: 100%;
+
+    &::before {
+      color: var(--text-color);
+      content: '•';
+      display: inline-block;
+      left: 0;
+      letter-spacing: 0.05em;
+      position: absolute;
+      transform: translateY(-1px);
+    }
+
+    @include on-focus {
+      color: $blue;
+
+      &::before {
+        color: $blue;
+      }
+    }
+  }
+}
+
+.entry__content,
+.entry__footer {
   @include content-column;
+}
+
+.entry__content {
   padding-top: $sp6;
 
   @include mq($lg) {

diff --git a/src/_includes/layouts/entry/index.njk b/src/_includes/layouts/entry/index.njk
@@ -11,18 +11,27 @@ templateClass: entry
 {% endmacro %}
 
 {% if content %}
-  <section class="entry__content md" id="js-entry-content">
-    <h1>{{ wrapWords(title) }}</h1>
-    {{ content | safe }}
-    {% if nextEntryTitle %}
-      <hr>
-      <p>
-        Next:
-        <a href="{{ '/entries/' ~ nextEntryTitle | slug }}" class="next-entry-link">{{ nextEntryTitle }}</a>
-      </p>
-    {% endif %}
-  </section>
-  <div class="dingbat__wrapper">
-    <span id="js-random-dingbat" class="dingbat__text"></span>
-  </div>
+  <aside class="entry__toc--wrapper">
+    {{ content | toc | safe }}
+  </aside>
+  <article>
+    <section class="entry__content md" id="js-entry-content">
+      <h1>{{ wrapWords(title) }}</h1>
+      {{ content | safe }}
+    </section>
+    <footer class="entry__footer">
+      {% if nextEntryTitle %}
+        <section class="md">
+          <hr>
+          <p>
+            Next:
+            <a href="{{ '/entries/' ~ nextEntryTitle | slug }}" class="next-entry-link">{{ nextEntryTitle }}</a>
+          </p>
+        </section>
+      {% endif %}
+      <div class="dingbat__wrapper">
+        <span id="js-random-dingbat" class="dingbat__text"></span>
+      </div>
+    </footer>
+  </article>
 {% endif %}
diff --git a/src/assets/styles/base/_markdown.scss b/src/assets/styles/base/_markdown.scss
@@ -147,31 +147,6 @@
     background-color: #902f2f;
   }
 
-  /* Direct Links / Markdown Headers */
-  a.direct-link {
-    margin-left: 0.1em;
-    font-family: inherit;
-    color: transparent;
-
-    &:visited {
-      color: transparent;
-    }
-
-    &:focus,
-    &:focus:visited {
-      color: var(--secondary-text-color);
-    }
-  }
-
-  :hover > a.direct-link,
-  :hover > a.direct-link:visited {
-    color: var(--secondary-text-color);
-
-    &:hover {
-      color: $blue;
-    }
-  }
-
   img[alt~='small'] {
     width: 300px;
   }