Improve Markdown + Components usage #3410

natemoo-re · 2022-05-19T20:25:43Z

Changes

Significantly improved component + JSX expression handling in @astrojs/markdown-remark
- Borrows heavily from MDX and remark-mdx, but doesn't use all of the features (namely inline esm imports)
- Only caveat to callout—shorthand attributes are not currently supported. Otherwise this a MASSIVE improvement for our components-in-markdown story.
Adds support for header slugs which contain JSX expressions
Closes 🐛 BUG: Components with array-like prop fail to render in Markdown #2399, all components inside of Markdown now have correct prop serialization
Removes need for extra newlines inside of Component before switching back to Markdown
Removes wrapping <p> tags around Components

Testing

Adds test suite to @astrojs/markdown-remark
Updates a JSX expression test in astro to reflect new and improved output

Docs

TODO

changeset-bot · 2022-05-19T20:25:46Z

🦋 Changeset detected

Latest commit: 3285844

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
astro	Patch
@astrojs/markdown-remark	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

tony-sull

I'm not as familiar with some of the custom MD parsing logic updated here, but the test coverage looks good to me!

Marking this review as a comment rather than Approve in case anyone that's worked on the MD logic recently wants to chime in

packages/astro/src/vite-plugin-markdown/index.ts

packages/markdown/remark/src/index.ts

bholmesdev · 2022-05-23T18:29:51Z

packages/astro/src/vite-plugin-markdown/index.ts

+				let { data: frontmatter, content: markdownContent } = matter(source);
+
+				// Turn HTML comments into JS comments
+				markdownContent = markdownContent.replace(/<\s*!--([^-->]*)(.*?)-->/gs, (whole) => `{/*${whole}*/}`)


bholmesdev

REMARKABLE WORK!

aFuzzyBear · 2022-05-24T10:27:45Z

I have one question. Would this allow for components in markdown files that are placed elsewhere outside of the src/pages/ to work as well. So for those projects that have a top-level docs folder in there monorepo setup, with components being relative to the markdown file, would they be able to now benefit from having components in markdown or are they still plain markdown files?

Otherwise this looks amazing, great work dude 💚💚💚
(Kinda have this thing where markdown shouldnt be in the UI )

natemoo-re · 2022-05-24T16:42:12Z

I have one question. Would this allow for components in markdown files that are placed elsewhere outside of the src/pages/ to work as well? @aFuzzyBear

These changes don't touch our routing logic, just the markdown processing itself. Please open an issue detailing your use case so we can track this separately!

…down pages

…ding space

* feat: use internal MDX tooling for markdown + components * fix: improve MD + component tests * chore: add changeset * fix: make tsc happy * fix(withastro#3319): add regression test for component children * fix(markdown): support HTML comments in markdown * fix(withastro#2474): ensure namespaced components are properly handled in markdown pages * fix(withastro#3220): ensure html in markdown pages does not have extra surrounding space * fix(withastro#3264): ensure that remark files pass in file information * fix(withastro#3254): enable experimentalStaticExtraction for `.md` pages * fix: revert parsing change * fix: remove `markdown.mode` option

github-actions bot added pkg: astro Related to the core `astro` package (scope) feat: markdown Related to Markdown (scope) labels May 19, 2022

natemoo-re changed the title ~~Fix/md serializer~~ Improve Markdown + Components usage May 19, 2022

sarah11918 mentioned this pull request May 19, 2022

Remove wrapping <p> tags around <ImportMetaEnv /> component withastro/docs#612

Closed

tony-sull reviewed May 20, 2022

View reviewed changes

packages/astro/src/vite-plugin-markdown/index.ts Show resolved Hide resolved

packages/markdown/remark/src/index.ts Outdated Show resolved Hide resolved

tony-sull self-requested a review May 20, 2022 19:29

matthewp approved these changes May 23, 2022

View reviewed changes

bholmesdev reviewed May 23, 2022

View reviewed changes

bholmesdev approved these changes May 23, 2022

View reviewed changes

natemoo-re force-pushed the fix/md-serializer branch from 550db92 to 294a668 Compare May 23, 2022 19:23

natemoo-re force-pushed the fix/md-serializer branch from 058e176 to e2ef8e7 Compare May 24, 2022 16:40

natemoo-re force-pushed the fix/md-serializer branch from c1e1a9a to 7c28277 Compare May 24, 2022 20:45

Nate Moore added 10 commits May 24, 2022 15:45

feat: use internal MDX tooling for markdown + components

68a1ef5

fix: improve MD + component tests

9f8600f

chore: add changeset

9977f7a

fix: make tsc happy

74faed1

fix(#3319): add regression test for component children

0eb2d38

fix(markdown): support HTML comments in markdown

c14ed38

fix(#2474): ensure namespaced components are properly handled in mark…

51d7dd5

…down pages

fix(#3220): ensure html in markdown pages does not have extra surroun…

81e07c7

…ding space

fix(#3264): ensure that remark files pass in file information

1d0c4c9

fix(#3254): enable experimentalStaticExtraction for .md pages

0f52f8f

Nate Moore added 2 commits May 24, 2022 15:46

fix: revert parsing change

9ca1448

fix: remove markdown.mode option

3285844

natemoo-re force-pushed the fix/md-serializer branch from 7c28277 to 3285844 Compare May 24, 2022 20:46

natemoo-re merged commit cfae976 into main May 24, 2022

natemoo-re deleted the fix/md-serializer branch May 24, 2022 22:02

github-actions bot mentioned this pull request May 24, 2022

[ci] release #3435

Merged

natemoo-re mentioned this pull request May 27, 2022

🐛 BUG: Expected a closing tag when markdown renders HTML elements that do not need closing tags #3458

Closed

1 task

hippotastic mentioned this pull request May 31, 2022

🐛 BUG: Markdown parser strips HTML tags & contents in code blocks and components #3474

Closed

1 task

nokazn mentioned this pull request May 31, 2022

🐛 BUG: JSX-like expressions in code blocks are rendered incorrectly in headings #3491

Closed

1 task

hippotastic mentioned this pull request Jun 3, 2022

Fix: Allow self-closing tags in Markdown again #3516

Merged

Tc-001 mentioned this pull request Jun 3, 2022

🐛 BUG: Alpinejs bind shorthands (ex. :width="<expression>") in markdown error dev and build #3517

Closed

1 task

bholmesdev mentioned this pull request Jun 16, 2022

Fix: Netlify edge deployment when using markdown #3612

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve Markdown + Components usage #3410

Improve Markdown + Components usage #3410

natemoo-re commented May 19, 2022 •

edited

Loading

changeset-bot bot commented May 19, 2022 •

edited

Loading

tony-sull left a comment

bholmesdev May 23, 2022

bholmesdev left a comment

aFuzzyBear commented May 24, 2022

natemoo-re commented May 24, 2022 •

edited

Loading

Improve Markdown + Components usage #3410

Improve Markdown + Components usage #3410

Conversation

natemoo-re commented May 19, 2022 • edited Loading

Changes

Testing

Docs

changeset-bot bot commented May 19, 2022 • edited Loading

🦋 Changeset detected

tony-sull left a comment

Choose a reason for hiding this comment

bholmesdev May 23, 2022

Choose a reason for hiding this comment

bholmesdev left a comment

Choose a reason for hiding this comment

aFuzzyBear commented May 24, 2022

natemoo-re commented May 24, 2022 • edited Loading

natemoo-re commented May 19, 2022 •

edited

Loading

changeset-bot bot commented May 19, 2022 •

edited

Loading

natemoo-re commented May 24, 2022 •

edited

Loading