Initial working version with MDX remote

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": false
+}

.vscode/extensions.json

@@ -17,10 +17,10 @@
     // [[wiki-links]], backlinking etc
     "kortina.vscode-markdown-notes",
 
-    // Adds `show graph` command that displays graph of linked notes
-    "tchayen.markdown-links",
+    // Image-pasting for markdown
+    "mushan.vscode-paste-image",
 
-    // Understated grayscale theme (light and dark variants)
-    "philipbe.theme-gray-matter"
+    // Spell checking for text, markdown and latex
+    "ban.spellright",
   ]
 }

.vscode/settings.json

@@ -2,19 +2,29 @@
   "editor.minimap.enabled": false,
   "editor.wrappingIndent": "indent",
   "editor.overviewRulerBorder": false,
-  "editor.lineHeight": 24,
-  "workbench.colorTheme": "Gray Matter Light",
   "[markdown]": {
+    "editor.lineHeight": 24,
     "editor.quickSuggestions": true
   },
-  "git.enableSmartCommit": true,
-  "git.postCommitCommand": "sync",
+  "files.defaultLanguage": "markdown",
   "files.exclude": {
     "**/node_modules": true
   },
   "files.watcherExclude": {
     "**/node_modules": true
   },
+  "foam.edit.linkReferenceDefinitions": "withExtensions",
+  "foam.openDailyNote.directory": "_posts",
+  "foam.openDailyNote.fileExtension": "mdx",
+  "foam.openDailyNote.titleFormat": "fullDate",
+  "git.enableSmartCommit": true,
+  "git.postCommitCommand": "sync",
+  "markdown.preview.breaks": true,
+  "pasteImage.path": "${projectRoot}/public/images",
+  "pasteImage.showFilePathConfirmInputBox": true,
+  "spellright.notificationClass": "warning",
+  "vscodeMarkdownNotes.defaultFileExtension": "mdx",
   "vscodeMarkdownNotes.noteCompletionConvention": "noExtension",
-  "vscodeMarkdownNotes.slugifyMethod": "github-slugger"
+  "vscodeMarkdownNotes.slugifyMethod": "github-slugger",
+  "window.autoDetectColorScheme": true
 }

_posts/index.mdx

@@ -0,0 +1,34 @@
+# Foamy NextJS
+
+## Foam
+
+- [[readme]]
+- [[inbox]]
+- [[todo]]
+- For up-to-date tips, see [Foam Recipes](https://foambubble.github.io/foam/recipes)
+
+## NextJS
+
+- [Learn NextJS](https://nextjs.org/learn/basics/create-nextjs-app)
+- [NextJS Examples](https://github.com/vercel/next.js/tree/canary/examples)
+
+### Examples
+
+- [[syntax-highlighting]]
+- image in markdown [[excalidrawn]]
+  - [[next-image-component-example]]
+- [[note]] in subfolder using remark footnotes
+- [[jsx-component-in-mdx-example]]
+- [[local-test]]
+
+[//begin]: # 'Autogenerated link references for markdown compatibility'
+[readme]: readme 'Foam'
+[inbox]: inbox 'Inbox'
+[todo]: todo 'Todo'
+[syntax-highlighting]: notes/syntax-highlighting 'Syntax Highlighting'
+[excalidrawn]: excalidrawn 'Excalidrawn'
+[next-image-component-example]: next-image-component-example 'Next Image Component Example'
+[note]: notes/note 'Note'
+[jsx-component-in-mdx-example]: jsx-component-in-mdx-example 'JSX Component in Mdx Example'
+[local-test]: local-test 'Local MDX Example'
+[//end]: # 'Autogenerated link references'

pages/jsx-component-in-mdx-example.md → _posts/jsx-component-in-mdx-example.mdx

@@ -1,9 +1,6 @@
-import Button from '../components/button.js'
 
 # JSX Component in Mdx Example
 
 Look, a button! 👇
 
 <Button>👋 Hello</Button>
-
-

pages/readme.md → _posts/readme.mdx

@@ -34,11 +34,3 @@ We've created a few Bubbles (markdown documents) to get you started.
 They should work as expected in VS Code, and in rendered GitHub Pages.
 
 If GitHub preview (or general 100% support with all Markdown tools) is a requirement, for the time being you can use the standard `[description](page.md)` syntax.
-
-
-
-[//begin]: # "Autogenerated link references for markdown compatibility"
-[inbox]: inbox "Inbox"
-[foam-tips]: foam-tips "Foam tips"
-[todo]: todo "Todo"
-[//end]: # "Autogenerated link references"

components/AnchorTag.js

@@ -2,10 +2,15 @@ import Link from 'next/link'
 
 const AnchorTag = (props) => {
   const { href, title, target, children } = props
-  if (target) {
+  const shouldBeSimpleLink = target || href.startsWith('#')
+  if (shouldBeSimpleLink) {
     return <a {...props}>{children}</a>
   }
-  return <Link href={href}><a>{title || children}</a></Link>
+  return (
+    <Link href={href}>
+      <a>{title || children}</a>
+    </Link>
+  )
 }
 
-export default AnchorTag
+export default AnchorTag

components/MDXComponents.js

@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+import AnchorTag from '../components/AnchorTag'
+import CodeBlock from '../components/CodeBlock'
+import Image from '../components/Image'
+
+// prettier-ignore
+const MDXComponents = {
+    a: props => <AnchorTag {...props} />,
+    code: CodeBlock,
+    img: (props) => <div className="nextImageWrapper"><Image  {...props} /></div>,
+    Image: (props) => <div className="nextImageWrapper"><Image  {...props} /></div>,
+    Button: dynamic(() => import('../components/button')),
+}
+
+export default MDXComponents

lib/mdx.js

@@ -0,0 +1,74 @@
+import fs from 'fs'
+import matter from 'gray-matter'
+import renderToString from 'next-mdx-remote/render-to-string'
+import path from 'path'
+import MDXComponents from '../components/MDXComponents'
+import remarkPlugins from './remark'
+
+const root = process.cwd()
+const POSTS_DIR = '_posts'
+
+// POSTS_PATH is useful when you want to get the path to a specific file
+export const POSTS_PATH = path.join(root, POSTS_DIR)
+
+export const getAllFiles = function (dirPath, arrayOfFiles) {
+  let files = fs.readdirSync(dirPath)
+
+  arrayOfFiles = arrayOfFiles || []
+
+  files.forEach(function (file) {
+    if (fs.statSync(`${dirPath}/${file}`).isDirectory()) {
+      arrayOfFiles = getAllFiles(`${dirPath}/${file}`, arrayOfFiles)
+    } else {
+      arrayOfFiles.push(
+        path.join(dirPath, '/', file).replace(`${POSTS_PATH}/`, '')
+      )
+    }
+  })
+
+  return arrayOfFiles
+}
+
+// postFilePaths is the list of all mdx files inside the POSTS_PATH directory
+export const postFilePaths = getAllFiles(POSTS_PATH)
+  // Only include md(x) files
+  .filter((path) => /\.mdx?$/.test(path))
+
+export async function getFileBySlug(slug) {
+  const postFilePath = path.join(root, POSTS_DIR, `${slug}.mdx`)
+  const source = fs.readFileSync(postFilePath, 'utf8')
+
+  const { data, content } = matter(source)
+  const mdxSource = await renderToString(content, {
+    components: MDXComponents,
+    mdxOptions: {
+      remarkPlugins,
+    },
+    scope: data,
+  })
+
+  return {
+    mdxSource,
+    frontMatter: {
+      slug: slug || null,
+      ...data,
+    },
+  }
+}
+
+export async function getAllFilesFrontMatter() {
+  const files = fs.readdirSync(path.join(root, POSTS_DIR))
+
+  return files.reduce((allPosts, postSlug) => {
+    const source = fs.readFileSync(path.join(root, POSTS_DIR, postSlug), 'utf8')
+    const { data } = matter(source)
+
+    return [
+      {
+        ...data,
+        slug: postSlug.replace('.mdx', ''),
+      },
+      ...allPosts,
+    ]
+  }, [])
+}

lib/remark.js

@@ -0,0 +1,23 @@
+const remarkExternalLinks = require('remark-external-links')
+const remarkImages = require('remark-images')
+const remarkInlineLinks = require('remark-inline-links')
+const remarkFootnote = require('remark-numbered-footnote-labels')
+const remarkUnwrapImages = require('remark-unwrap-images')
+const remarkWikiLink = require('remark-wiki-link')
+
+const remarkPlugins = [
+  remarkImages,
+  remarkExternalLinks,
+  remarkFootnote,
+  remarkInlineLinks,
+  remarkUnwrapImages,
+  [
+    remarkWikiLink,
+    {
+      hrefTemplate: (permalink) => `${permalink}`,
+      pageResolver: (name) => [name.replace(/ /g, '-').toLowerCase()],
+    },
+  ],
+]
+
+module.exports = remarkPlugins

next.config.js

@@ -1,19 +1,12 @@
-const remarkImages = require('remark-images')
-const remarkExternalLinks = require('remark-external-links')
-const remarkFootnote = require('remark-numbered-footnote-labels')
-const remarkUnwrapImages = require('remark-unwrap-images')
+const remarkPlugins = require('./lib/remark')
 
 const withMDX = require('@next/mdx')({
   extension: /\.mdx?$/,
   options: {
-    remarkPlugins: [
-      remarkImages,
-      remarkExternalLinks,
-      remarkFootnote,
-      remarkUnwrapImages
-    ]
+    remarkPlugins,
   },
 })
+
 module.exports = withMDX({
   pageExtensions: ['js', 'jsx', 'mdx', 'md'],
 })

package.json

@@ -7,16 +7,20 @@
     "start": "next start"
   },
   "dependencies": {
-    "@mdx-js/loader": "^1.6.21",
-    "@next/mdx": "^10.0.1",
-    "next": "^10.0.1",
-    "prism-react-renderer": "^1.1.1",
+    "@mdx-js/loader": "1.6.22",
+    "@next/mdx": "10.0.9",
+    "gray-matter": "4.0.2",
+    "next": "^10.0.9",
+    "next-mdx-remote": "2.1.3",
+    "prism-react-renderer": "^1.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "remark-external-links": "^7.0.0",
+    "remark-external-links": "^8.0.0",
     "remark-images": "^2.0.0",
+    "remark-inline-links": "5.0.0",
     "remark-numbered-footnote-labels": "^1.1.0",
-    "remark-unwrap-images": "^2.0.0"
+    "remark-unwrap-images": "^2.0.0",
+    "remark-wiki-link": "1.0.2"
   },
   "devDependencies": {},
   "license": "ISC"