From 1fb9ed131f59a8bd1bc4b95337cf6213be70bd31 Mon Sep 17 00:00:00 2001 From: Dev Daksan Date: Wed, 21 Apr 2021 11:31:30 +0530 Subject: [PATCH] Adds Wiki Links and Back Links support (#109) * feat: wikilinks * feat: back links * fix: file names with spaces * fix: slugify block quote links --- example/code-notes/wikilinks.md | 21 +++++++++++++ gatsby-theme-code-notes/gatsby-config.js | 14 +++++++++ gatsby-theme-code-notes/gatsby-node.js | 2 +- gatsby-theme-code-notes/package.json | 3 ++ .../src/components/BackLinks/BackLinks.tsx | 30 +++++++++++++++++++ .../src/components/BackLinks/index.ts | 1 + .../src/components/NoteList/NoteList.tsx | 3 +- .../src/components/NotePage/NotePage.tsx | 11 +++++++ gatsby-theme-code-notes/src/templates/Note.js | 8 +++++ .../src/utils/resolve-url.js | 3 ++ yarn.lock | 26 ++++++++++++++++ 11 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 example/code-notes/wikilinks.md create mode 100644 gatsby-theme-code-notes/src/components/BackLinks/BackLinks.tsx create mode 100644 gatsby-theme-code-notes/src/components/BackLinks/index.ts create mode 100644 gatsby-theme-code-notes/src/utils/resolve-url.js diff --git a/example/code-notes/wikilinks.md b/example/code-notes/wikilinks.md new file mode 100644 index 0000000..ab77bb0 --- /dev/null +++ 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 index 151edd8..a3b1230 100644 --- 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 index 8decd10..65ff4f6 100644 --- 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 index 1dc8db2..1964ea9 100644 --- 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 new file mode 100644 index 0000000..56cec14 --- /dev/null +++ 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 = ({ references }) => ( + + + Back Links ({references.length}) + + + {references.map((ref) => { + return ( +
  • + + {ref.frontmatter.title} + +
    • + ) + })} +     +     +) diff --git a/gatsby-theme-code-notes/src/components/BackLinks/index.ts b/gatsby-theme-code-notes/src/components/BackLinks/index.ts new file mode 100644 index 0000000..0acbae0 --- /dev/null +++ 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 index c1d6569..455b771 100644 --- 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 = ({ notes }) => { modified, modifiedTimestamp, } = node.frontmatter - const { slug } = node.fields + const slug = `/${slugify(node.fields.slug)}` return ( = ({ )} + {!!data.mdx.references.length && ( + + )} + {body} diff --git a/gatsby-theme-code-notes/src/templates/Note.js b/gatsby-theme-code-notes/src/templates/Note.js index caf358b..5131cd6 100644 --- 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 new file mode 100644 index 0000000..91d85eb --- /dev/null +++ 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 index ebd972f..f60ceb4 100644 --- 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"