diff options
| -rw-r--r-- | .changeset/old-pigs-exist.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/vite-plugin-markdown/index.ts | 13 | ||||
| -rw-r--r-- | packages/astro/test/astro-markdown.test.js | 17 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/astro-markdown/astro.config.mjs | 3 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/astro-markdown/src/pages/vite-env-vars.md | 31 |
5 files changed, 65 insertions, 4 deletions
diff --git a/.changeset/old-pigs-exist.md b/.changeset/old-pigs-exist.md new file mode 100644 index 000000000..10a243218 --- /dev/null +++ b/.changeset/old-pigs-exist.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix using Vite env var names in Markdown diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts index 38b36d27a..6a8d59767 100644 --- a/packages/astro/src/vite-plugin-markdown/index.ts +++ b/packages/astro/src/vite-plugin-markdown/index.ts @@ -86,11 +86,11 @@ export default function markdown({ config }: AstroPluginOptions): Plugin { return { code: ` // Static - export const frontmatter = ${JSON.stringify(frontmatter)}; + export const frontmatter = ${escapeViteEnvReferences(JSON.stringify(frontmatter))}; export const file = ${JSON.stringify(fileId)}; export const url = ${JSON.stringify(fileUrl)}; export function rawContent() { - return ${JSON.stringify(rawContent)}; + return ${escapeViteEnvReferences(JSON.stringify(rawContent))}; } export async function compiledContent() { return load().then((m) => m.compiledContent()); @@ -192,7 +192,7 @@ ${tsResult}`; sourcefile: id, }); return { - code, + code: escapeViteEnvReferences(code), map: null, }; } @@ -201,3 +201,10 @@ ${tsResult}`; }, }; } + +// Converts the first dot in `import.meta.env.` to its Unicode escape sequence, +// which prevents Vite from replacing strings like `import.meta.env.SITE` +// in our JS representation of loaded Markdown files +function escapeViteEnvReferences(code: string) { + return code.replace(/import\.meta\.env\./g, 'import\\u002Emeta.env.'); +} diff --git a/packages/astro/test/astro-markdown.test.js b/packages/astro/test/astro-markdown.test.js index 181ca56e9..6a5ef5846 100644 --- a/packages/astro/test/astro-markdown.test.js +++ b/packages/astro/test/astro-markdown.test.js @@ -256,4 +256,21 @@ describe('Astro Markdown', () => { `<h2 id="with-components">With components</h2>\n<h3 id="non-hydrated">Non-hydrated</h3>\n<Hello name="Astro Naut" />\n<h3 id="hydrated">Hydrated</h3>\n<Counter client:load />\n<SvelteButton client:load />` ); }); + + it('Allows referencing Vite env var names in markdown (#3412)', async () => { + const html = await fixture.readFile('/vite-env-vars/index.html'); + const $ = cheerio.load(html); + + // test 1: referencing an existing var name + expect($('code').eq(0).text()).to.equal('import.meta.env.SITE'); + expect($('li').eq(0).text()).to.equal('import.meta.env.SITE'); + expect($('code').eq(2).text()).to.contain('site: import.meta.env.SITE'); + expect($('blockquote').text()).to.contain('import.meta.env.SITE'); + + // test 2: referencing a non-existing var name + expect($('code').eq(1).text()).to.equal('import.meta.env.TITLE'); + expect($('li').eq(1).text()).to.equal('import.meta.env.TITLE'); + expect($('code').eq(2).text()).to.contain('title: import.meta.env.TITLE'); + expect($('blockquote').text()).to.contain('import.meta.env.TITLE'); + }); }); diff --git a/packages/astro/test/fixtures/astro-markdown/astro.config.mjs b/packages/astro/test/fixtures/astro-markdown/astro.config.mjs index e1986197c..be33a26cc 100644 --- a/packages/astro/test/fixtures/astro-markdown/astro.config.mjs +++ b/packages/astro/test/fixtures/astro-markdown/astro.config.mjs @@ -4,5 +4,6 @@ import svelte from "@astrojs/svelte"; // https://astro.build/config export default defineConfig({ - integrations: [preact(), svelte()] + integrations: [preact(), svelte()], + site: 'https://astro.build/', }); diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/vite-env-vars.md b/packages/astro/test/fixtures/astro-markdown/src/pages/vite-env-vars.md new file mode 100644 index 000000000..78908cba3 --- /dev/null +++ b/packages/astro/test/fixtures/astro-markdown/src/pages/vite-env-vars.md @@ -0,0 +1,31 @@ +--- +title: Referencing Vite Env Vars like import.meta.env.SITE and import.meta.env.TITLE +layout: ../layouts/content.astro +--- + +## Referencing the full name of Vite env vars + +You can get the configured site URL with `import.meta.env.SITE`. + +The variable `import.meta.env.TITLE` is not configured. + +This should also work outside of code blocks: +- import.meta.env.SITE +- import.meta.env.TITLE + +## Usage in fenced code blocks with syntax highlighting + +```js +// src/pages/rss.xml.js +import rss from '@astrojs/rss'; + +export const get = () => rss({ + site: import.meta.env.SITE, + title: import.meta.env.TITLE, + items: import.meta.glob('./**/*.md'), +}); +``` + +## Usage in frontmatter + +> frontmatter.title: {frontmatter.title} |