Skip to content

chore: gatsby v4 update#612

Merged
NickyMeuleman merged 43 commits intomasterfrom
gatsby-v4
Oct 18, 2022
Merged

chore: gatsby v4 update#612
NickyMeuleman merged 43 commits intomasterfrom
gatsby-v4

Conversation

@NickyMeuleman
Copy link
Owner

@NickyMeuleman NickyMeuleman commented Oct 12, 2022

  • update gatsby to v4
  • use gatsby head instead of react-helmet
  • update mdx
  • update theme-ui
  • update eslint

@NickyMeuleman
Copy link
Owner Author

@NickyMeuleman
Copy link
Owner Author

@NickyMeuleman
Copy link
Owner Author

@NickyMeuleman
Copy link
Owner Author

NickyMeuleman commented Oct 14, 2022

Codeblocks don't get any props apart from a classname with language-X and codestring with the raw code passed to them.
No props for highlighting lines, numbering lines, code titles, ...
As a result, the <CodeBlock> component does not work correctly.

The earliest part I can find where this data should flow that is doesn't is in components/mdx-components.tsx.

I copied the logic from @LekoArts https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-minimal-blog/src/components/mdx-components.tsx

When logging out preProps there, a React element gets logged with only children (the codestring), and a classname (in the form of language-X` in there.

This is on a block like this:
```js hl numberLines
const test = "potato"
```

const MdxComponents = {
Aside: (props: any) => <Aside {...props} />,
pre: (preProps: any) => {
console.log({ preProps });
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no codeblock props like hl, numberLines, title reach this part. Why?

@LekoArts
Copy link

I was also curious about this at first since it worked before. But this must have changed with MDX 2. Anyways, I looked at their guide https://mdxjs.com/guides/syntax-highlighting/#syntax-highlighting-with-the-meta-field and then adjusted it for my needs.

TS version: https://github.com/LekoArts/gatsby-themes/tree/main/packages/rehype-meta-as-attributes
JS version (easier to copy/paste): https://github.com/LekoArts/portfolio-v2/tree/main/packages/rehype-meta-as-attributes

Then put the plugin into the mdxOptions:

rehypePlugins: [rehypeMetaAsAttributes]

Afterwards the props will go through again. My code is adjusted from the MDX guide since I want to receive true when only the prop is given, not ''

new method because old remark-math and rehype-katex are not compatible anymore. probably because mdx v2 requires a newer remark. cannot use new versions of remark-math and rehype-katex because those are esm only and gatsby does not support that
@NickyMeuleman
Copy link
Owner Author

Gatsby head notes:

  • You can only define the Head export inside a page, not in a component.

    • results in: every SomethingPage component needs to export a Head that is then used in the templates called SomethingQuery.
  • Valid tags inside the Head function are: link, meta, style, title, base, script, and noscript.

style code directly instead since we already intercept pre tags
wooorm/xdm#3
the tableofcontents text field ignores what is inside the codefence
gatsbyjs/gatsby#36829
use hacky meaningless from string in the proxy directive
datocms/gatsby-source-datocms#188
locally ran yarn policies command and gitignored the resulting yarnrc
@NickyMeuleman NickyMeuleman changed the title gatsby v4 update chore: gatsby v4 update Oct 18, 2022
@NickyMeuleman NickyMeuleman merged commit 00e4fea into master Oct 18, 2022
@NickyMeuleman NickyMeuleman deleted the gatsby-v4 branch October 18, 2022 15:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants