feat: Improved table of contents (#1223)

* feat: New table of contents

* fix: Hide TOC in edit mode

* feat: Highlight follows scroll position

* scroll tracking

* UI

* fix: Unrelated css fix with long doc titles

* Improve responsiveness

* feat: Add keyboard shortcut access to TOC

* fix: Headings should reflect content correctly when viewing old document revision

* flow

* fix: Persist TOC choice between sessions

shared/components/Breadcrumb.js

@@ -81,7 +81,6 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
 });
 
 const Wrapper = styled(Flex)`
-  width: 33.3%;
   display: none;
 
   ${breakpoint('tablet')`	
@@ -101,7 +100,7 @@ const SmallSlash = styled(GoToIcon)`
   opacity: 0.25;
 `;
 
-const Slash = styled(GoToIcon)`
+export const Slash = styled(GoToIcon)`
   flex-shrink: 0;
   opacity: 0.25;
 `;

shared/styles/theme.js

@@ -53,6 +53,13 @@ export const base = {
   selected: colors.primary,
   buttonBackground: colors.primary,
   buttonText: colors.white,
+
+  breakpoints: {
+    mobile: 0, // targeting all devices
+    tablet: 737, // targeting devices that are larger than the iPhone 6 Plus (which is 736px in landscape mode)
+    desktop: 1025, // targeting devices that are larger than the iPad (which is 1024px in landscape mode)
+    desktopLarge: 1550,
+  },
 };
 
 export const light = {

shared/utils/getHeadingsForText.js

@@ -0,0 +1,27 @@
+// @flow
+import { filter } from 'lodash';
+import slugify from 'shared/utils/slugify';
+
+export default function getHeadingsForText(
+  text: string
+): { level: number, title: string, slug: string }[] {
+  const regex = /^(#{1,6})\s(.*)$/gm;
+
+  let match;
+  let output = [];
+  while ((match = regex.exec(text)) !== null) {
+    if (!match) continue;
+
+    const level = match[1].length;
+    const title = match[2];
+
+    let slug = slugify(title);
+    const existing = filter(output, { slug });
+    if (existing.length) {
+      slug = `${slug}-${existing.length}`;
+    }
+    output.push({ level, title, slug });
+  }
+
+  return output;
+}

shared/utils/slugify.js

@@ -0,0 +1,8 @@
+// @flow
+import slugify from 'slugify';
+
+// Slugify, escape, and remove periods from headings so that they are
+// compatible with url hashes AND dom selectors
+export default function safeSlugify(text: string) {
+  return `h-${escape(slugify(text, { lower: true }).replace('.', '-'))}`;
+}