✨ can turn mermaid into image.
Pinned
Activity
HoverBaum push HoverBaum/the-sword
commit sha: 89e606050513a2c579cad76664338caa8ccfc420
push time in 4 days agoHoverBaum push HoverBaum/the-sword
commit sha: 423c5c6d0f39dea582d2f8c8c3235a54b6cf791e
push time in 4 days agoHoverBaum push HoverBaum/the-sword
commit sha: 7a030fc9f7bdeed48261c2935917e95ce2895f24
push time in 4 days agoHoverBaum push HoverBaum/the-sword
commit sha: f0d729988a4714e49ae4f9b4cdfe0807e85765a4
push time in 5 days agoHoverBaum push HoverBaum/the-sword
commit sha: d48f6230ac53232607fef003c8884f79b2e007a0
push time in 1 week agoHoverBaum push HoverBaum/the-sword
commit sha: 0a8759ffebc47ec5251345c50f78174946a2a54c
push time in 1 week agoHoverBaum push HoverBaum/the-sword
commit sha: d89f8286e6095bbb9767face372cce2621f4ba20
push time in 1 week agoHoverBaum push HoverBaum/the-sword
commit sha: 35cc1023ccc83c74f825664c54491d17a1791564
push time in 1 week agoHoverBaum push HoverBaum/wallbaum.dev
commit sha: 5f1c0f1df6b26358cb30c7eac058eda12722f525
push time in 1 week agoHoverBaum push HoverBaum/wallbaum.dev
commit sha: 5e9c229957c6e1aaa8616cc7c90b6baf27962086
push time in 1 week agoHoverBaum issue contentlayerdev/contentlayer
Support plaintext contentType
I am trying to use .tsx files as input for a documentType. My use case is to turn them into JSON objects representing the associated components' properties via react-docgen-typescript.
The plan would be to have a computedField that uses react-docgen-typescript to parse the raw file content into a JSON object representing the properties.
But, Contentlayer doesn't support .tsx
files, yet.
I tried this with the following config, assuming contentType: 'data'
would just load the content of the files but was taught on Discord that it is only for frontmatter.
export const ComponentProp = defineDocumentType(() => ({
name: 'ComponentProp',
filePathPattern: `lib-src/**/*.tsx`,
contentType: 'data',
}));
Proposed solution
Add a contentType: 'plain'
that just loads the entire file and leaves processing up to the user.
This contentType would solve my use-case but even better, enable users of Contentlayer to use it for their use-cases which we are not yet aware of or that are needed by only a small minority.
Implications
Default contentType
Currently, Contentlayer treats files as markdown by default. Assuming we add a 'plain'
type I would suggest changing this behavior to read files as plaintext by default. That, however, could be a breaking change!
I am not 100% sure how Contentlayer currently treats files but use-cases of people who currently parse non *.md
files as markdown would be broken.
Plain text defaults Going with the above Contentlayer would start to treat all file extensions it doesn't know as plaintext. This implies that Contentlayer assumes to be used on text files only. It would lead to errors when handling binary file types, such as jpg or mp3.
There should be documentation and logging around this fact. The question here is whether Contentlayer could confirm that a file it is processing is a text file or not?
Alternative implementation
A backward-compatible way of introducing plaintext file types would be to add a contentType: 'plain'
as an additional, optional feature to use.
However, I could see people getting confused by having a plaintext interpretation available but this not being the treatment that Contentlayer default to.
Ont he other hand, Contentlayer is a system for handling content and might find it's audience largely in people processing markdown files which would justify leaving the default interpretation as markdown.
Open questions
- Is defaulting to plain text a good idea?
- Can we determine a file to be a text file?
- Should we potentially switch to requiring conentType to be set explicitly?
HoverBaum issue comment contentlayerdev/website
Update 300-next-contentlayer.mdx
Add a link to the documentation about parsing MDX files to help first-time users launch into contentlayer with less friction.
Took me some time to figure this out on my first use today and I thought it would be nice to ease that for future users.
Glad you like it.
And good amendments!
HoverBaum pull request contentlayerdev/website
Update 300-next-contentlayer.mdx
Add a link to the documentation about parsing MDX files to help first-time users launch into contentlayer with less friction.
Took me some time to figure this out on my first use today and I thought it would be nice to ease that for future users.
HoverBaum push HoverBaum/website
commit sha: ed32bc91d30e8764cbc5bbe04277151ffaaea948
push time in 3 weeks agoHoverBaum push HoverBaum/website
commit sha: a45e3ee5366c69936040bf1274fc662a1f666df4
push time in 3 weeks agoHoverBaum issue comment contentlayerdev/contentlayer
error - SyntaxError: Unexpected token '<'
The .mdx.json file generated includes "body": { "raw": " ", "html": " "}
.
The expected object to be generated is "body": { "raw": " ", "code": " "}
, according to the example.
contentlayer.config.ts
export const Blog = defineDocumentType(() => ({
name: 'Blog',
filePathPattern: 'blog/*.mdx',
bodyType: 'mdx',
fields: {
title: { type: 'string', required: true},
publishedAt: { type: 'string', required: true },
},
computedFields,
}))
export default makeSource({
contentDirPath: 'data',
documentTypes: [Blog],
mdx: {
remarkPlugins: [],
rehypePlugins: [rehypePrism],
},
})
Passing the generated .mdx.json file to useMDXComponent(source.body.html)
spits out the following error:
SyntaxError: Unexpected token '<'
at new Function (<anonymous>)
at getMDXComponent (file:///home/skagur/skagur.dev/node_modules/next-contentlayer/src/hooks/useMDXComponent.ts:18:14)
at file:///home/skagur/skagur.dev/node_modules/next-contentlayer/src/hooks/useMDXComponent.ts:23:30
at Object.useMemo (/home/skagur/skagur.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:4961:19)
at Object.useMemo (/home/skagur/skagur.dev/node_modules/react/cjs/react.development.js:1645:21)
at useMDXComponent (file:///home/skagur/skagur.dev/node_modules/next-contentlayer/src/hooks/useMDXComponent.ts:23:16)
at Post (webpack-internal:///./src/pages/blog/[...slug].js:29:96)
at renderWithHooks (/home/skagur/skagur.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5448:16)
at renderIndeterminateComponent (/home/skagur/skagur.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5521:15)
at renderElement (/home/skagur/skagur.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5736:7)
Just wanna drop a line that this was super helpful!
I was following a project that used an older version of contentlayer and was confused about how setting bodyType: 'mdx',
didn't get me the .code
property.
But super easily found this issue that helped me solve it 👍
✨ start overview with mermaid.