Adds Wiki Links and Back Links support (#109)

* feat: wikilinks * feat: back links * fix: file names with spaces * fix: slugify block quote links
mrmartineau · Apr 21, 2021 · 1fb9ed1 · 1fb9ed1
1 parent f23b42f
commit 1fb9ed1
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 2 deletions.
diff --git a/example/code-notes/wikilinks.md b/example/code-notes/wikilinks.md
@@ -0,0 +1,21 @@
+---
+title: Wiki Links
+emoji: ⛓
+tags:
+  - markdown
+created: 2021-04-02T11:04:49.000Z
+modified: 2021-04-02T11:55:48.000Z
+---
+
+## Link your notes
+
+Make connections between your notes by using `[[note-name]]`. This allows you to easily surf between your connected notes!
+
+## Back Links
+
+Links all the notes that references the current note
+
+### Check out other notes
+
+- [[markdown-features]]
+- [[note-frontmatter]]
diff --git a/gatsby-theme-code-notes/gatsby-config.js b/gatsby-theme-code-notes/gatsby-config.js
@@ -48,6 +48,7 @@ module.exports = (options) => {
       'gatsby-plugin-typescript',
       `gatsby-plugin-sharp`,
       `gatsby-transformer-sharp`,
+      `gatsby-plugin-catch-links`,
       {
         resolve: `gatsby-source-filesystem`,
         options: {
@@ -70,6 +71,13 @@ module.exports = (options) => {
                 wrapperStyle: `margin: 1.5rem 0;`,
               },
             },
+            {
+              resolve: 'gatsby-remark-double-brackets-link',
+              options: {
+                titleToURLPath: `${__dirname}/src/utils/resolve-url.js`,
+                stripBrackets: true,
+              },
+            },
           ],
           remarkPlugins: [
             remarkSlug,
@@ -126,6 +134,12 @@ module.exports = (options) => {
             }),
         },
       },
+      {
+        resolve: `gatsby-transformer-markdown-references`,
+        options: {
+          types: ['Mdx'],
+        },
+      },
     ].filter(Boolean),
   }
 }
diff --git a/gatsby-theme-code-notes/gatsby-node.js b/gatsby-theme-code-notes/gatsby-node.js
@@ -101,7 +101,7 @@ exports.createPages = async ({ graphql, actions }, options) => {
     const previous =
       index === notesData.length - 1 ? null : notesData[index + 1].node
     const next = index === 0 ? null : notesData[index - 1].node
-    const slug = note.node.fields.slug
+    const slug = slugify(note.node.fields.slug)
     createPage({
       path: slug,
       component: path.join(__dirname, './src/templates', 'Note.js'),

diff --git a/gatsby-theme-code-notes/package.json b/gatsby-theme-code-notes/package.json
@@ -48,6 +48,7 @@
     "color-hash": "^1.0.3",
     "copee": "^1.0.6",
     "gatsby-core-utils": "^1.3.23",
+    "gatsby-plugin-catch-links": "^3.2.0",
     "gatsby-plugin-local-search": "^2.0.0",
     "gatsby-plugin-mdx": "^1.2.46",
     "gatsby-plugin-meta-redirect": "^1.1.1",
@@ -57,8 +58,10 @@
     "gatsby-plugin-sharp": "^2.6.39",
     "gatsby-plugin-theme-ui": "0.4.0-rc.5",
     "gatsby-plugin-typescript": "^2.4.21",
+    "gatsby-remark-double-brackets-link": "^0.1.8",
     "gatsby-remark-images": "^3.3.33",
     "gatsby-source-filesystem": "^2.3.34",
+    "gatsby-transformer-markdown-references": "^0.1.5",
     "gatsby-transformer-sharp": "^2.5.17",
     "lodash": "^4.17.20",
     "mkdirp": "^1.0.3",

diff --git a/gatsby-theme-code-notes/src/components/BackLinks/BackLinks.tsx b/gatsby-theme-code-notes/src/components/BackLinks/BackLinks.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { Box, Link } from 'theme-ui'
+
+interface IProps {
+  references: {
+    frontmatter: {
+      title: string
+    }
+    slug: string
+  }[]
+}
+
+export const BackLinks: React.FC<IProps> = ({ references }) => (
+  <Box as="details" sx={{ my: 4, fontSize: 1 }}>
+    <Box as="summary" sx={{ textTransform: 'uppercase', fontSize: 0 }}>
+      Back Links ({references.length})
+    </Box>
+    <Box as="ul" sx={{ listStyleType: 'none', pl: 3 }}>
+      {references.map((ref) => {
+        return (
+          <li key={`${ref.slug}-item`}>
+            <Link href={`/${ref.slug.toLowerCase()}`}>
+              {ref.frontmatter.title}
+            </Link>
+          </li>
+        )
+      })}
+    </Box>
+  </Box>
+)
diff --git a/gatsby-theme-code-notes/src/components/BackLinks/index.ts b/gatsby-theme-code-notes/src/components/BackLinks/index.ts
@@ -0,0 +1 @@
+export { BackLinks } from './BackLinks'
diff --git a/gatsby-theme-code-notes/src/components/NoteList/NoteList.tsx b/gatsby-theme-code-notes/src/components/NoteList/NoteList.tsx
@@ -3,6 +3,7 @@ import { Flex } from 'theme-ui'
 import { NoteListItem } from '../NoteListItem'
 import { SortButton } from './SortButton'
 import { useSortableData } from './useSortableData'
+import slugify from '@alexcarpenter/slugify'
 
 interface NoteListProps {
   notes: any[]
@@ -47,7 +48,7 @@ export const NoteList: FunctionComponent<NoteListProps> = ({ notes }) => {
           modified,
           modifiedTimestamp,
         } = node.frontmatter
-        const { slug } = node.fields
+        const slug = `/${slugify(node.fields.slug)}`
         return (
           <NoteListItem
             title={title}

diff --git a/gatsby-theme-code-notes/src/components/NotePage/NotePage.tsx b/gatsby-theme-code-notes/src/components/NotePage/NotePage.tsx
@@ -7,6 +7,7 @@ import { useSiteMetadata } from '../../use-site-metadata'
 import { Contents } from '../Contents'
 import { Layout } from '../Layout'
 import { TagList } from '../TagList'
+import { BackLinks } from '../BackLinks'
 
 interface NotePageProps {
   data: {
@@ -19,6 +20,12 @@ interface NotePageProps {
         modified: string
         modifiedTimestamp: string
       }
+      references: {
+        frontmatter: {
+          title: string
+        }
+        slug: string
+      }[]
       body: any
       parent: {
         relativePath: string
@@ -167,6 +174,10 @@ export const NotePage: FunctionComponent<NotePageProps> = ({
           )}
         </Box>
 
+        {!!data.mdx.references.length && (
+          <BackLinks references={data.mdx.references} />
+        )}
+
         <Contents toc={tableOfContents} />
 
         <MDXRenderer>{body}</MDXRenderer>

diff --git a/gatsby-theme-code-notes/src/templates/Note.js b/gatsby-theme-code-notes/src/templates/Note.js
@@ -15,6 +15,14 @@ export const pageQuery = graphql`
         modified(formatString: "LL")
         modifiedTimestamp: modified
       }
+      references: inboundReferences {
+        ... on Mdx {
+          frontmatter {
+            title
+          }
+          slug
+        }
+      }
       fields {
         slug
       }

diff --git a/gatsby-theme-code-notes/src/utils/resolve-url.js b/gatsby-theme-code-notes/src/utils/resolve-url.js
@@ -0,0 +1,3 @@
+const slugify = require('@alexcarpenter/slugify')
+
+module.exports = (title) => slugify(`/${title}`)
diff --git a/yarn.lock b/yarn.lock
@@ -7836,6 +7836,14 @@ gatsby-page-utils@^0.5.0:
     lodash "^4.17.20"
     micromatch "^4.0.2"
 
+gatsby-plugin-catch-links@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-3.2.0.tgz#92e89a2a4fa9bc7d618fd62dede587f6437f2dff"
+  integrity sha512-mXAHWBTm6xaHfNKuyMte5PXxExHzXzpOdK6SiYoj0/uV+OHPIMiLf28ixvmgaxNVCb/k2hgEsnR1GtGb3+KC2w==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    escape-string-regexp "^1.0.5"
+
 gatsby-plugin-local-search@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-local-search/-/gatsby-plugin-local-search-2.0.0.tgz#05d0c2a6e1855fec6d3d0a19508c0f0e35c5514b"
@@ -8053,6 +8061,14 @@ gatsby-recipes@^0.5.0:
     xstate "^4.9.1"
     yoga-layout-prebuilt "^1.9.6"
 
+gatsby-remark-double-brackets-link@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-double-brackets-link/-/gatsby-remark-double-brackets-link-0.1.8.tgz#2244ea750d738abaa5cb030d87d80ea7650ece57"
+  integrity sha512-YlNOCQT0a0PwV2jiAFl+ZkqaNy4iV9IfmfAmHuQjMZhJD2Cbz62Gcy72M4VUDSQS2242HbIbDibnncDtgQEjOg==
+  dependencies:
+    slugify "^1.4.0"
+    unist-util-visit "^2.0.2"
+
 gatsby-remark-images@^3.3.33:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-3.7.0.tgz#31df6510b2f88e7e8a2b104080ba4243fe550cd6"
@@ -8109,6 +8125,11 @@ gatsby-telemetry@^1.6.0:
     node-fetch "^2.6.1"
     uuid "3.4.0"
 
+gatsby-transformer-markdown-references@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/gatsby-transformer-markdown-references/-/gatsby-transformer-markdown-references-0.1.5.tgz#4600a404f06f2e0aa528efea47ff2849734c6b6d"
+  integrity sha512-unflo9lH7wYvmuQtPA/Omdnr4sgRsmsAR0Ce+7xEwPcxqj0R0qYKJcyOdy4tg08Xc9Tgt7EJ6iILsxJX6YXpUg==
+
 gatsby-transformer-sharp@^2.5.17:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.8.0.tgz#531412b6b4e27d0ad5abc58cc6ee54f927f59f0f"
@@ -15118,6 +15139,11 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+slugify@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.5.0.tgz#5f3c8e2a84105b54eb51486db1b468a599b3c9b8"
+  integrity sha512-Q2UPZ2udzquy1ElHfOLILMBMqBEXkiD3wE75qtBvV+FsDdZZjUqPZ44vqLTejAVq+wLLHacOMcENnP8+ZbzmIA==
+
 slugify@^1.4.4:
   version "1.4.6"
   resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.4.6.tgz#ef288d920a47fb01c2be56b3487b6722f5e34ace"