This repository has been archived by the owner on Oct 27, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
Initial working version with MDX remote #9
Open
zomars
wants to merge
10
commits into
yenly:main
Choose a base branch
from
zomars:main
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+1,556
−2,508
Open
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
c5ad86b
Initial working version with MDX remote
zomars 9877705
Some wikilink fixes
zomars 494e464
Updates foam settings from upstream template
zomars 92620da
Paste images on public folder
zomars b442f2b
Fixes button import
zomars 2dfbc6e
Reworks remote mdx
zomars 2eeaf77
Re-Adds local md support
zomars 523cf06
Updates dependencies
zomars d560a2e
Fixes local example Link
zomars 73c51d6
Fixes footnote links
zomars File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"singleQuote": true, | ||
"semi": false | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
3 changes: 0 additions & 3 deletions
3
pages/jsx-component-in-mdx-example.md → _posts/jsx-component-in-mdx-example.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,6 @@ | ||
import Button from '../components/button.js' | ||
|
||
# JSX Component in Mdx Example | ||
|
||
Look, a button! 👇 | ||
|
||
<Button>👋 Hello</Button> | ||
|
||
|
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
import fs from 'fs' | ||
import matter from 'gray-matter' | ||
import hydrate from 'next-mdx-remote/hydrate' | ||
import renderToString from 'next-mdx-remote/render-to-string' | ||
import dynamic from 'next/dynamic' | ||
import path from 'path' | ||
import remarkExternalLinks from 'remark-external-links' | ||
import remarkImages from 'remark-images' | ||
import remarkFootnote from 'remark-numbered-footnote-labels' | ||
import remarkUnwrapImages from 'remark-unwrap-images' | ||
import remarkWikiLink from 'remark-wiki-link' | ||
import remarkInlineLinks from 'remark-inline-links' | ||
import AnchorTag from '../components/AnchorTag' | ||
import CodeBlock from '../components/CodeBlock' | ||
import Image from '../components/Image' | ||
import { postFilePaths, POSTS_PATH } from '../utils/mdxUtils' | ||
|
||
// prettier-ignore | ||
const components = { | ||
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 function PostPage({ source, frontMatter }) { | ||
const content = hydrate(source, { components }) | ||
return content | ||
} | ||
|
||
export const getStaticProps = async ({ params }) => { | ||
let postPath = 'index' | ||
|
||
if (params && params.slug) { | ||
postPath = Array.isArray(params.slug) ? params.slug.join('/') : params.slug | ||
} | ||
|
||
const postFilePath = path.join(POSTS_PATH, `${postPath}.mdx`) | ||
const source = fs.readFileSync(postFilePath) | ||
|
||
const { content, data } = matter(source) | ||
|
||
const mdxSource = await renderToString(content, { | ||
components, | ||
mdxOptions: { | ||
remarkPlugins: [ | ||
remarkImages, | ||
remarkExternalLinks, | ||
remarkFootnote, | ||
remarkInlineLinks, | ||
remarkUnwrapImages, | ||
[ | ||
remarkWikiLink, | ||
{ | ||
hrefTemplate: (permalink) => `${permalink}`, | ||
pageResolver: (name) => [name.replace(/ /g, '-').toLowerCase()], | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Smart idea to use remark-wiki-link to remove the [] but kebab case links aren't the desired look. My AnchorTag component converts it to use the title of the note. Here you are converting the link back to the kebab case. Capitalize case like how Foam documentation displays is best. |
||
}, | ||
], | ||
], | ||
}, | ||
scope: data, | ||
}) | ||
|
||
return { | ||
props: { | ||
source: mdxSource, | ||
frontMatter: data, | ||
}, | ||
} | ||
} | ||
|
||
export const getStaticPaths = async () => { | ||
const paths = postFilePaths | ||
// Remove file extensions for page paths | ||
.map((path) => path.replace(/\.mdx?$/, '')) | ||
// Map the path into the static paths object required by Next.js | ||
.map((slug) => ({ params: { slug: slug.split('/') } })) | ||
|
||
return { | ||
paths, | ||
fallback: false, | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default, getStaticProps } from './[...slug]' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import fs from 'fs' | ||
import path from 'path' | ||
|
||
// POSTS_PATH is useful when you want to get the path to a specific file | ||
export const POSTS_PATH = path.join(process.cwd(), '_posts') | ||
|
||
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)) |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like here is where remarkWikiLink is not returning the full path. Line 56 outputs
/note
instead of/note/note.
A possible fix is to construct the correct href frompostFilePath.