HoverBaum

HoverBaum

JavaScript enthusiast and developer for fun 🎉

Member Since 8 years ago

@netlight,

Experience Points
33
follower
Lessons Completed
17
follow
Lessons Completed
525
stars
Best Reply Awards
86
repos

291 contributions in the last year

Pinned
⚡ MeiliDu, beatuiful reading theme for Hexo.
⚡ Illustrating how to wrap a single page application in docker.
⚡ Markdown editor with clarity +1, as a desktop application.
⚡ A curated list of public domain image resources.
Activity
May
13
5 days ago
push

HoverBaum push HoverBaum/the-sword

HoverBaum
HoverBaum

✨ start overview with mermaid.

HoverBaum
HoverBaum

✨ can turn mermaid into image.

HoverBaum
HoverBaum

✨ generate basic overview from story json.

HoverBaum
HoverBaum

✨ update story to include more forrest routes.

HoverBaum
HoverBaum

🚧 move to utilizing JSON content.

HoverBaum
HoverBaum

🚧 using temrinaotr keys for transitions.

HoverBaum
HoverBaum

✨ ts overview generation.

HoverBaum
HoverBaum
HoverBaum
HoverBaum

🧵 improved thread detection

HoverBaum
HoverBaum

Merge pull request #1 from HoverBaum/story-overview

Story overview

commit sha: 89e606050513a2c579cad76664338caa8ccfc420

push time in 4 days ago
May
12
6 days ago
push

HoverBaum push HoverBaum/the-sword

HoverBaum
HoverBaum

🚧 using temrinaotr keys for transitions.

HoverBaum
HoverBaum

✨ ts overview generation.

commit sha: f0d729988a4714e49ae4f9b4cdfe0807e85765a4

push time in 5 days ago
May
8
1 week ago
push

HoverBaum push HoverBaum/the-sword

HoverBaum
HoverBaum

🚧 move to utilizing JSON content.

commit sha: d48f6230ac53232607fef003c8884f79b2e007a0

push time in 1 week ago
push

HoverBaum push HoverBaum/the-sword

HoverBaum
HoverBaum

✨ update story to include more forrest routes.

commit sha: 0a8759ffebc47ec5251345c50f78174946a2a54c

push time in 1 week ago
May
7
1 week ago
Activity icon
created branch

HoverBaum in HoverBaum/the-sword create branch story-overview

createdAt 1 week ago
started
started time in 1 week ago
May
6
1 week ago
push

HoverBaum push HoverBaum/the-sword

HoverBaum
HoverBaum

👩‍🎤 introduce neoanalytics.

commit sha: d89f8286e6095bbb9767face372cce2621f4ba20

push time in 1 week ago
May
5
1 week ago
push

HoverBaum push HoverBaum/the-sword

HoverBaum
HoverBaum

✨ sounds on making a choice not on selection.

HoverBaum
HoverBaum

✨ Adjust sound assets some.

commit sha: 35cc1023ccc83c74f825664c54491d17a1791564

push time in 1 week ago
May
4
2 weeks ago
push

HoverBaum push HoverBaum/wallbaum.dev

HoverBaum
HoverBaum

✨ don't swap fonts to prevent flicker.

commit sha: 5f1c0f1df6b26358cb30c7eac058eda12722f525

push time in 1 week ago
started
started time in 1 week ago
May
2
2 weeks ago
May
1
2 weeks ago
Apr
30
2 weeks ago
started
started time in 2 weeks ago
Apr
29
2 weeks ago
Activity icon
issue

HoverBaum issue contentlayerdev/contentlayer

HoverBaum
HoverBaum

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 .tsxfiles, 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?
Apr
27
3 weeks ago
started
started time in 2 weeks ago
Apr
26
3 weeks ago
Apr
22
3 weeks ago
Activity icon
issue

HoverBaum issue comment contentlayerdev/website

HoverBaum
HoverBaum

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
HoverBaum

Glad you like it.

And good amendments!

Apr
21
3 weeks ago
started
started time in 3 weeks ago
pull request

HoverBaum pull request contentlayerdev/website

HoverBaum
HoverBaum

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.

push

HoverBaum push HoverBaum/website

HoverBaum
HoverBaum

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.

commit sha: ed32bc91d30e8764cbc5bbe04277151ffaaea948

push time in 3 weeks ago
push

HoverBaum push HoverBaum/website

HoverBaum
HoverBaum

Add hint about MDX parsing.

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.

commit sha: a45e3ee5366c69936040bf1274fc662a1f666df4

push time in 3 weeks ago
Activity icon
fork

HoverBaum forked contentlayerdev/website

⚡ Contentlayer Website
HoverBaum Updated
fork time in 3 weeks ago
Activity icon
issue

HoverBaum issue comment contentlayerdev/contentlayer

HoverBaum
HoverBaum

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)
HoverBaum
HoverBaum

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 👍

Previous