Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: import local plugins into markdown #2534

Merged
merged 9 commits into from
Feb 4, 2022
Merged

fix: import local plugins into markdown #2534

merged 9 commits into from
Feb 4, 2022

Conversation

JuanM04
Copy link
Contributor

@JuanM04 JuanM04 commented Feb 3, 2022

Changes

Fixes #2097

Importing local plugins into markdown has been tedious, because you need to use weird syntax:

// examples/with-markdown-plugins/astro.config.mjs

// @ts-check
export default /** @type {import('astro').AstroUserConfig} */ ({
  // Enable Custom Markdown options, plugins, etc.
  markdownOptions: {
    render: [
      astroRemark,
      {
        remarkPlugins: ['remark-code-titles'],
        rehypePlugins: [
          ['rehype-autolink-headings', { behavior: 'prepend' }],
          ['rehype-toc', { headings: ['h2', 'h3'] }],
          [new URL('./add-classes.mjs', import.meta.url).pathname, { 'h1,h2,h3': 'title' }],
          'rehype-slug',
        ],
      },
    ],
  },
});

Also, the example in the documentation doesn't work: #2097

So, I replaced the input to expect a function instead of the result of an import:

// examples/with-markdown-plugins/astro.config.mjs
+ import addClasses from "./add-clasees.mjs"

// @ts-check
export default /** @type {import('astro').AstroUserConfig} */ ({
  // Enable Custom Markdown options, plugins, etc.
  markdownOptions: {
    render: [
      astroRemark,
      {
        remarkPlugins: ['remark-code-titles'],
        rehypePlugins: [
          ['rehype-autolink-headings', { behavior: 'prepend' }],
          ['rehype-toc', { headings: ['h2', 'h3'] }],
-         [new URL('./add-classes.mjs', import.meta.url).pathname, { 'h1,h2,h3': 'title' }],
+         [addClasses, { 'h1,h2,h3': 'title' }],
          'rehype-slug',
        ],
      },
    ],
  },
});

This way you can pass any function that is a unified plugin no matter where you get it. Plus, this isn't breaking because, well, import didn't work 😅

Testing

yarn test:match "plugins"

Docs

Adding a Markdown plugin

@changeset-bot
Copy link

changeset-bot bot commented Feb 3, 2022

🦋 Changeset detected

Latest commit: 12e2aee

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

This PR includes changesets to release 1 package
Name Type
@astrojs/markdown-remark Patch

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) docs pkg: example Related to an example package (scope) feat: markdown Related to Markdown (scope) labels Feb 3, 2022
@netlify
Copy link

netlify bot commented Feb 3, 2022

✔️ Deploy Preview for astro-docs-2 ready!

🔨 Explore the source changes: 9c1ec9a

🔍 Inspect the deploy log: https://app.netlify.com/sites/astro-docs-2/deploys/61fc66d8c7850500080af77c

😎 Browse the preview: https://deploy-preview-2534--astro-docs-2.netlify.app

@netlify
Copy link

netlify bot commented Feb 3, 2022

✔️ Deploy Preview for astro-docs-2 ready!

🔨 Explore the source changes: a593809

🔍 Inspect the deploy log: https://app.netlify.com/sites/astro-docs-2/deploys/61fc6ae2746f600008dd5a00

😎 Browse the preview: https://deploy-preview-2534--astro-docs-2.netlify.app

@@ -2,6 +2,7 @@ import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
import markdownRemark from '@astrojs/markdown-remark';
import addClasses from '../../../examples/with-markdown-plugins/add-classes.mjs';
Copy link
Contributor

@matthewp matthewp Feb 4, 2022

Choose a reason for hiding this comment

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

Could you possibly copy this module into the test fixture? Would be nice to not couple the tests with the examples.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done! I also added hast-util-select as a dev dependency to ensure it's installed for the tests

@matthewp matthewp merged commit cfeaa94 into withastro:main Feb 4, 2022
@github-actions github-actions bot mentioned this pull request Feb 4, 2022
@JuanM04 JuanM04 deleted the import-local-plugin branch February 4, 2022 18:57
@github-actions github-actions bot mentioned this pull request Feb 18, 2022
SiriousHunter pushed a commit to SiriousHunter/astro that referenced this pull request Feb 3, 2023
* Replaced "UnifiedPluginImport" for a function

* Updated tests

* Updated docs

* Updated examples

* Added changeset

* Fixed tests

* Removed unused "UnifiedPluginImport"

* Duplicated add-classes.mjs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: markdown Related to Markdown (scope) pkg: astro Related to the core `astro` package (scope) pkg: example Related to an example package (scope)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🐛 BUG: support local markdown plugins (remark & rehype)
2 participants