Skip to content

Improve Markdown + Components usage#3410

Merged
natemoo-re merged 12 commits intomainfrom
fix/md-serializer
May 24, 2022
Merged

Improve Markdown + Components usage#3410
natemoo-re merged 12 commits intomainfrom
fix/md-serializer

Conversation

@natemoo-re
Copy link
Copy Markdown
Member

@natemoo-re natemoo-re commented May 19, 2022 •
edited
Loading

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
Copy link
Copy Markdown

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

🦋 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

@github-actions 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 natemoo-re changed the title Fix/md serializer Improve Markdown + Components usage May 19, 2022
This was linked to issues May 19, 2022
🐛 BUG: React children surrounded by empty <p> tags #3319
Closed
🐛 BUG: Component in Markdown not recognised #2474
Closed
🐛 BUG: HTML doesn't work in markdown #3220
Closed
🐛 BUG: Remark plugin transformer file.path returns undefined #3264
Closed
🐛 BUG: Redundant and incorrect script tag in compiled markdown pages with script in md source. #3254
Closed
@sarah11918 sarah11918 mentioned this pull request May 19, 2022
Closed
tony-sull
tony-sull reviewed May 20, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@tony-sull tony-sull left a comment

Choose a reason for hiding this comment

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

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

@tony-sull tony-sull self-requested a review May 20, 2022 19:29
bholmesdev
bholmesdev reviewed May 23, 2022
View reviewed changes
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}*/}`)
Copy link
Copy Markdown
Contributor

@bholmesdev bholmesdev May 23, 2022

Choose a reason for hiding this comment

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

Nice 👏

bholmesdev
bholmesdev approved these changes May 23, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@bholmesdev bholmesdev left a comment

Choose a reason for hiding this comment

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

REMARKABLE WORK!

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

aFuzzyBear commented May 24, 2022

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 natemoo-re force-pushed the fix/md-serializer branch from 058e176 to e2ef8e7 Compare May 24, 2022 16:40
@natemoo-re
Copy link
Copy Markdown
Member Author

natemoo-re commented May 24, 2022 •
edited
Loading

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!

@natemoo-re natemoo-re force-pushed the fix/md-serializer branch from c1e1a9a to 7c28277 Compare May 24, 2022 20:45
@natemoo-re natemoo-re force-pushed the fix/md-serializer branch from 7c28277 to 3285844 Compare May 24, 2022 20:46
@natemoo-re natemoo-re merged commit cfae976 into main May 24, 2022
@natemoo-re natemoo-re deleted the fix/md-serializer branch May 24, 2022 22:02
@github-actions github-actions bot mentioned this pull request May 24, 2022
Merged
@natemoo-re natemoo-re mentioned this pull request May 27, 2022
Closed
1 task
@hippotastic hippotastic mentioned this pull request May 31, 2022
Closed
1 task
@nokazn nokazn mentioned this pull request May 31, 2022
Closed
1 task
@hippotastic hippotastic mentioned this pull request Jun 3, 2022
Merged
@Tc-001 Tc-001 mentioned this pull request Jun 3, 2022
Closed
1 task
@bholmesdev bholmesdev mentioned this pull request Jun 16, 2022
Merged
SiriousHunter pushed a commit to SiriousHunter/astro that referenced this pull request Feb 3, 2023
@natemoo-re
Improve Markdown + Components usage (withastro#3410)
688a3cd 
* 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@matthewp matthewp matthewp approved these changes

@tony-sull tony-sull Awaiting requested review from tony-sull

+1 more reviewer

@bholmesdev bholmesdev bholmesdev approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

feat: markdown Related to Markdown (scope) pkg: astro Related to the core `astro` package (scope)

Projects

None yet

Milestone

No milestone

5 participants

@natemoo-re @aFuzzyBear @matthewp @tony-sull @bholmesdev