From bef3a75dbc48d584daff9f7f3d5a8937b0356170 Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Tue, 30 May 2023 16:18:20 -0400 Subject: Markdoc - remove `$entry` variable (#7244) * refactor: remove entry prop from `getRenderModule()` * refactor: remove `$entry` from markdoc * test: update entry-prop -> variables test * refactor: unify `getEntryConfigByExt` * chore: clean up shared content / data get logic * docs: update `$entry` recommendation * chore: rename entry-prop -> variables * chore: changeset * chore: missed a spot --- packages/integrations/markdoc/README.md | 31 ++++++------ packages/integrations/markdoc/src/index.ts | 15 ++++-- packages/integrations/markdoc/src/runtime.ts | 8 +-- .../integrations/markdoc/test/entry-prop.test.js | 58 ---------------------- .../test/fixtures/entry-prop/astro.config.mjs | 7 --- .../markdoc/test/fixtures/entry-prop/package.json | 9 ---- .../entry-prop/src/content/blog/entry.mdoc | 9 ---- .../test/fixtures/entry-prop/src/content/config.ts | 9 ---- .../test/fixtures/entry-prop/src/pages/index.astro | 19 ------- .../test/fixtures/variables/astro.config.mjs | 7 +++ .../markdoc/test/fixtures/variables/package.json | 9 ++++ .../fixtures/variables/src/content/blog/entry.mdoc | 9 ++++ .../test/fixtures/variables/src/content/config.ts | 9 ++++ .../test/fixtures/variables/src/pages/index.astro | 19 +++++++ .../integrations/markdoc/test/variables.test.js | 58 ++++++++++++++++++++++ 15 files changed, 140 insertions(+), 136 deletions(-) delete mode 100644 packages/integrations/markdoc/test/entry-prop.test.js delete mode 100644 packages/integrations/markdoc/test/fixtures/entry-prop/astro.config.mjs delete mode 100644 packages/integrations/markdoc/test/fixtures/entry-prop/package.json delete mode 100644 packages/integrations/markdoc/test/fixtures/entry-prop/src/content/blog/entry.mdoc delete mode 100644 packages/integrations/markdoc/test/fixtures/entry-prop/src/content/config.ts delete mode 100644 packages/integrations/markdoc/test/fixtures/entry-prop/src/pages/index.astro create mode 100644 packages/integrations/markdoc/test/fixtures/variables/astro.config.mjs create mode 100644 packages/integrations/markdoc/test/fixtures/variables/package.json create mode 100644 packages/integrations/markdoc/test/fixtures/variables/src/content/blog/entry.mdoc create mode 100644 packages/integrations/markdoc/test/fixtures/variables/src/content/config.ts create mode 100644 packages/integrations/markdoc/test/fixtures/variables/src/pages/index.astro create mode 100644 packages/integrations/markdoc/test/variables.test.js (limited to 'packages/integrations') diff --git a/packages/integrations/markdoc/README.md b/packages/integrations/markdoc/README.md index 011f042ee..da5aeb46a 100644 --- a/packages/integrations/markdoc/README.md +++ b/packages/integrations/markdoc/README.md @@ -290,20 +290,6 @@ export default defineMarkdocConfig({ }) ``` -### Access frontmatter and content collection information from your templates - -You can access content collection information from your Markdoc templates using the `$entry` variable. This includes the entry `slug`, `collection` name, and frontmatter `data` parsed by your content collection schema (if any). This example renders the `title` frontmatter property as a heading: - -```md ---- -title: Welcome to Markdoc 👋 ---- - -# {% $entry.data.title %} -``` - -The `$entry` object matches [the `CollectionEntry` type](https://docs.astro.build/en/reference/api-reference/#collection-entry-type), excluding the `.render()` property. - ### Markdoc config The `markdoc.config.mjs|ts` file accepts [all Markdoc configuration options](https://markdoc.dev/docs/config), including [tags](https://markdoc.dev/docs/tags) and [functions](https://markdoc.dev/docs/functions). @@ -379,6 +365,23 @@ export default defineMarkdocConfig({ }) ``` +### Access frontmatter from your Markdoc content + +To access frontmatter, you can pass the entry `data` property [as a variable](#pass-markdoc-variables) where you render your content: + +```astro +--- +import { getEntry } from 'astro:content'; + +const entry = await getEntry('docs', 'why-markdoc'); +const { Content } = await entry.render(); +--- + + +``` + +This can now be accessed as `$frontmatter` in your Markdoc. + ## Examples * The [Astro Markdoc starter template](https://github.com/withastro/astro/tree/latest/examples/with-markdoc) shows how to use Markdoc files in your Astro project. diff --git a/packages/integrations/markdoc/src/index.ts b/packages/integrations/markdoc/src/index.ts index 0486a44b5..ef50768fe 100644 --- a/packages/integrations/markdoc/src/index.ts +++ b/packages/integrations/markdoc/src/index.ts @@ -11,6 +11,7 @@ import { bold, red, yellow } from 'kleur/colors'; import type * as rollup from 'rollup'; import { loadMarkdocConfig, type MarkdocConfigResult } from './load-config.js'; import { setupConfig } from './runtime.js'; +import path from 'node:path'; type SetupHookParams = HookParameters<'astro:config:setup'> & { // `contentEntryType` is not a public API @@ -61,10 +62,13 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration addContentEntryType({ extensions: ['.mdoc'], getEntryInfo, - async getRenderModule({ entry, viteId }) { + async getRenderModule({ contents, fileUrl, viteId }) { + const entry = getEntryInfo({ contents, fileUrl }); const ast = Markdoc.parse(entry.body); const pluginContext = this; - const markdocConfig = await setupConfig(userMarkdocConfig, entry); + const markdocConfig = await setupConfig(userMarkdocConfig); + + const filePath = fileURLToPath(fileUrl); const validationErrors = Markdoc.validate(ast, markdocConfig).filter((e) => { return ( @@ -77,10 +81,11 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration }); if (validationErrors.length) { // Heuristic: take number of newlines for `rawData` and add 2 for the `---` fences - const frontmatterBlockOffset = entry._internal.rawData.split('\n').length + 2; + const frontmatterBlockOffset = entry.rawData.split('\n').length + 2; + const rootRelativePath = path.relative(fileURLToPath(astroConfig.root), filePath); throw new MarkdocError({ message: [ - `**${String(entry.collection)} → ${String(entry.id)}** contains invalid content:`, + `**${String(rootRelativePath)}** contains invalid content:`, ...validationErrors.map((e) => `- ${e.error.message}`), ].join('\n'), location: { @@ -96,7 +101,7 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration await emitOptimizedImages(ast.children, { astroConfig, pluginContext, - filePath: entry._internal.filePath, + filePath, }); } diff --git a/packages/integrations/markdoc/src/runtime.ts b/packages/integrations/markdoc/src/runtime.ts index 5bf7e4412..a1861c68c 100644 --- a/packages/integrations/markdoc/src/runtime.ts +++ b/packages/integrations/markdoc/src/runtime.ts @@ -13,13 +13,9 @@ export { default as Markdoc } from '@markdoc/markdoc'; * TODO: virtual module to merge configs per-build instead of per-file? */ export async function setupConfig( - userConfig: AstroMarkdocConfig, - entry: ContentEntryModule + userConfig: AstroMarkdocConfig ): Promise> { - let defaultConfig: AstroMarkdocConfig = { - ...setupHeadingConfig(), - variables: { entry }, - }; + let defaultConfig: AstroMarkdocConfig = setupHeadingConfig(); if (userConfig.extends) { for (let extension of userConfig.extends) { diff --git a/packages/integrations/markdoc/test/entry-prop.test.js b/packages/integrations/markdoc/test/entry-prop.test.js deleted file mode 100644 index b47ccf739..000000000 --- a/packages/integrations/markdoc/test/entry-prop.test.js +++ /dev/null @@ -1,58 +0,0 @@ -import { parseHTML } from 'linkedom'; -import { expect } from 'chai'; -import { loadFixture } from '../../../astro/test/test-utils.js'; -import markdoc from '../dist/index.js'; - -const root = new URL('./fixtures/entry-prop/', import.meta.url); - -describe('Markdoc - Entry prop', () => { - let baseFixture; - - before(async () => { - baseFixture = await loadFixture({ - root, - integrations: [markdoc()], - }); - }); - - describe('dev', () => { - let devServer; - - before(async () => { - devServer = await baseFixture.startDevServer(); - }); - - after(async () => { - await devServer.stop(); - }); - - it('has expected entry properties', async () => { - const res = await baseFixture.fetch('/'); - const html = await res.text(); - const { document } = parseHTML(html); - expect(document.querySelector('h1')?.textContent).to.equal('Processed by schema: Test entry'); - expect(document.getElementById('id')?.textContent?.trim()).to.equal('id: entry.mdoc'); - expect(document.getElementById('slug')?.textContent?.trim()).to.equal('slug: entry'); - expect(document.getElementById('collection')?.textContent?.trim()).to.equal( - 'collection: blog' - ); - }); - }); - - describe('build', () => { - before(async () => { - await baseFixture.build(); - }); - - it('has expected entry properties', async () => { - const html = await baseFixture.readFile('/index.html'); - const { document } = parseHTML(html); - expect(document.querySelector('h1')?.textContent).to.equal('Processed by schema: Test entry'); - expect(document.getElementById('id')?.textContent?.trim()).to.equal('id: entry.mdoc'); - expect(document.getElementById('slug')?.textContent?.trim()).to.equal('slug: entry'); - expect(document.getElementById('collection')?.textContent?.trim()).to.equal( - 'collection: blog' - ); - }); - }); -}); diff --git a/packages/integrations/markdoc/test/fixtures/entry-prop/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/entry-prop/astro.config.mjs deleted file mode 100644 index 29d846359..000000000 --- a/packages/integrations/markdoc/test/fixtures/entry-prop/astro.config.mjs +++ /dev/null @@ -1,7 +0,0 @@ -import { defineConfig } from 'astro/config'; -import markdoc from '@astrojs/markdoc'; - -// https://astro.build/config -export default defineConfig({ - integrations: [markdoc()], -}); diff --git a/packages/integrations/markdoc/test/fixtures/entry-prop/package.json b/packages/integrations/markdoc/test/fixtures/entry-prop/package.json deleted file mode 100644 index 149f6c35a..000000000 --- a/packages/integrations/markdoc/test/fixtures/entry-prop/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "name": "@test/markdoc-entry-prop", - "version": "0.0.0", - "private": true, - "dependencies": { - "@astrojs/markdoc": "workspace:*", - "astro": "workspace:*" - } -} diff --git a/packages/integrations/markdoc/test/fixtures/entry-prop/src/content/blog/entry.mdoc b/packages/integrations/markdoc/test/fixtures/entry-prop/src/content/blog/entry.mdoc deleted file mode 100644 index 151d5a81d..000000000 --- a/packages/integrations/markdoc/test/fixtures/entry-prop/src/content/blog/entry.mdoc +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Test entry ---- - -# {% $entry.data.title %} - -- id: {% $entry.id %} {% #id %} -- slug: {% $entry.slug %} {% #slug %} -- collection: {% $entry.collection %} {% #collection %} diff --git a/packages/integrations/markdoc/test/fixtures/entry-prop/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/entry-prop/src/content/config.ts deleted file mode 100644 index ff473d4af..000000000 --- a/packages/integrations/markdoc/test/fixtures/entry-prop/src/content/config.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { defineCollection, z } from 'astro:content'; - -const blog = defineCollection({ - schema: z.object({ - title: z.string().transform(v => 'Processed by schema: ' + v), - }), -}); - -export const collections = { blog } diff --git a/packages/integrations/markdoc/test/fixtures/entry-prop/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/entry-prop/src/pages/index.astro deleted file mode 100644 index d14187651..000000000 --- a/packages/integrations/markdoc/test/fixtures/entry-prop/src/pages/index.astro +++ /dev/null @@ -1,19 +0,0 @@ ---- -import { getEntryBySlug } from 'astro:content'; - -const entry = await getEntryBySlug('blog', 'entry'); -const { Content } = await entry.render(); ---- - - - - - - - - Astro - - - - - diff --git a/packages/integrations/markdoc/test/fixtures/variables/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/variables/astro.config.mjs new file mode 100644 index 000000000..29d846359 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/variables/astro.config.mjs @@ -0,0 +1,7 @@ +import { defineConfig } from 'astro/config'; +import markdoc from '@astrojs/markdoc'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/variables/package.json b/packages/integrations/markdoc/test/fixtures/variables/package.json new file mode 100644 index 000000000..0ac7a3c82 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/variables/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-variables", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/variables/src/content/blog/entry.mdoc b/packages/integrations/markdoc/test/fixtures/variables/src/content/blog/entry.mdoc new file mode 100644 index 000000000..151d5a81d --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/variables/src/content/blog/entry.mdoc @@ -0,0 +1,9 @@ +--- +title: Test entry +--- + +# {% $entry.data.title %} + +- id: {% $entry.id %} {% #id %} +- slug: {% $entry.slug %} {% #slug %} +- collection: {% $entry.collection %} {% #collection %} diff --git a/packages/integrations/markdoc/test/fixtures/variables/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/variables/src/content/config.ts new file mode 100644 index 000000000..ff473d4af --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/variables/src/content/config.ts @@ -0,0 +1,9 @@ +import { defineCollection, z } from 'astro:content'; + +const blog = defineCollection({ + schema: z.object({ + title: z.string().transform(v => 'Processed by schema: ' + v), + }), +}); + +export const collections = { blog } diff --git a/packages/integrations/markdoc/test/fixtures/variables/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/variables/src/pages/index.astro new file mode 100644 index 000000000..a2766faf0 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/variables/src/pages/index.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from 'astro:content'; + +const entry = await getEntryBySlug('blog', 'entry'); +const { Content } = await entry.render(); +--- + + + + + + + + Astro + + + + + diff --git a/packages/integrations/markdoc/test/variables.test.js b/packages/integrations/markdoc/test/variables.test.js new file mode 100644 index 000000000..90d5fe276 --- /dev/null +++ b/packages/integrations/markdoc/test/variables.test.js @@ -0,0 +1,58 @@ +import { parseHTML } from 'linkedom'; +import { expect } from 'chai'; +import { loadFixture } from '../../../astro/test/test-utils.js'; +import markdoc from '../dist/index.js'; + +const root = new URL('./fixtures/variables/', import.meta.url); + +describe('Markdoc - Variables', () => { + let baseFixture; + + before(async () => { + baseFixture = await loadFixture({ + root, + integrations: [markdoc()], + }); + }); + + describe('dev', () => { + let devServer; + + before(async () => { + devServer = await baseFixture.startDevServer(); + }); + + after(async () => { + await devServer.stop(); + }); + + it('has expected entry properties', async () => { + const res = await baseFixture.fetch('/'); + const html = await res.text(); + const { document } = parseHTML(html); + expect(document.querySelector('h1')?.textContent).to.equal('Processed by schema: Test entry'); + expect(document.getElementById('id')?.textContent?.trim()).to.equal('id: entry.mdoc'); + expect(document.getElementById('slug')?.textContent?.trim()).to.equal('slug: entry'); + expect(document.getElementById('collection')?.textContent?.trim()).to.equal( + 'collection: blog' + ); + }); + }); + + describe('build', () => { + before(async () => { + await baseFixture.build(); + }); + + it('has expected entry properties', async () => { + const html = await baseFixture.readFile('/index.html'); + const { document } = parseHTML(html); + expect(document.querySelector('h1')?.textContent).to.equal('Processed by schema: Test entry'); + expect(document.getElementById('id')?.textContent?.trim()).to.equal('id: entry.mdoc'); + expect(document.getElementById('slug')?.textContent?.trim()).to.equal('slug: entry'); + expect(document.getElementById('collection')?.textContent?.trim()).to.equal( + 'collection: blog' + ); + }); + }); +}); -- cgit v1.2.3