Sidebar for Glossary works

documents/glossary.md

@@ -6,6 +6,8 @@ This glossary will help you understand exact meaning of LBRY and blockchain rela
 
 We encourage the submission of changes and additions to this glossary.
 
+<GlossaryToc/>
+
 ### Blob
 
 A Binary Large Object (BLOB) is a collection of binary data stored as a single entity in a database management system. When files are uploaded to the LBRY peer to peer network, they are broken down into 2MB encrypted blobs which are then shared to other peers.

package.json

@@ -34,6 +34,7 @@
     "markdown-it": "^8.4.2",
     "markdown-it-anchor": "^5.0.2",
     "markdown-it-sup": "^1.0.0",
+    "markdown-it-toc-and-anchor-with-slugid": "^1.1.4",
     "markdown-it-wikilinks": "^1.0.1",
     "nanohtml": "^1.2.4",
     "redis": "^2.8.0",

sass/partials/_egress.scss

@@ -1,15 +0,0 @@
-.egress {
-  bottom: 10rem; right: 1rem;
-
-  background-color: $white;
-  border: 1px solid $gray;
-  font-size: 1rem;
-  padding: 1rem;
-  position: fixed;
-  transition: opacity 0.2s;
-  z-index: 12;
-
-  &:hover {
-    opacity: 0.3;
-  }
-}

sass/partials/_glossary.scss

@@ -0,0 +1,10 @@
+.component--glossary-toc {
+  width: 150px; height: 80vh;
+  top: calc(10vh + 2rem); left: 2rem;
+
+  background-color: $white;
+  border: 1px solid $gray;
+  border-radius: 3px;
+  position: fixed;
+  z-index: 1;
+}

sass/style.scss

@@ -10,12 +10,12 @@
 
   "partials/animation",
   "partials/ecosystem",
-  // "partials/egress",
   "partials/email-subscribe",
   "partials/feature-links",
   "partials/flash",
   "partials/footer",
   "partials/github-feed",
+  "partials/glossary",
   "partials/navigation",
   "partials/mission-statement",
   "partials/modal",

views/partials/glossary-toc.js

@@ -0,0 +1,34 @@
+"use strict";
+
+
+
+//  E X P O R T
+
+module.exports = exports = (state, emit, markdown) => {
+  const headerRegex = /###.+/g;
+  const tocElements = markdown.match(headerRegex);
+  const collectionOfTocElements = [];
+
+  for (const item of tocElements) collectionOfTocElements.push(`<li><a href="${slugify(item)}" title="">${item.replace(/### /g, "")}</a></li>`);
+
+  return `
+    <ul class="component--glossary-toc">
+      ${collectionOfTocElements.join("")}
+    </ul>
+  `;
+};
+
+
+
+//  H E L P E R
+
+function slugify(stringToSlugify) {
+  return stringToSlugify
+    .toLowerCase()
+    .replace(/ \/ /g, "-")
+    .replace(/\s/g, "-")
+    .replace(/\(/g, "")
+    .replace(/\)/g, "")
+    .replace(/,/g, "")
+    .replace(/###-/g, "#");
+}