diff options
Diffstat (limited to 'packages/integrations/markdoc/test/fixtures')
128 files changed, 1648 insertions, 0 deletions
diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/content-collections/astro.config.mjs new file mode 100644 index 000000000..1bd8ba93f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/package.json b/packages/integrations/markdoc/test/fixtures/content-collections/package.json new file mode 100644 index 000000000..370b87957 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-content-collections", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-1.mdoc b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-1.mdoc new file mode 100644 index 000000000..06c900963 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-1.mdoc @@ -0,0 +1,7 @@ +--- +title: Post 1 +--- + +## Post 1 + +This is the contents of post 1. diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-2.mdoc b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-2.mdoc new file mode 100644 index 000000000..cf4dc162f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-2.mdoc @@ -0,0 +1,7 @@ +--- +title: Post 2 +--- + +## Post 2 + +This is the contents of post 2. diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-3.mdoc b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-3.mdoc new file mode 100644 index 000000000..6c601eb65 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/blog/post-3.mdoc @@ -0,0 +1,7 @@ +--- +title: Post 3 +--- + +## Post 3 + +This is the contents of post 3. diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/config.ts new file mode 100644 index 000000000..3b411201a --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/content/config.ts @@ -0,0 +1,12 @@ +import { defineCollection, z } from 'astro:content'; + +const blog = defineCollection({ + schema: z.object({ + title: z.string(), + }).transform(data => ({ + ...data, + schemaWorks: true, + })) +}); + +export const collections = { blog }; diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/collection.json.js b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/collection.json.js new file mode 100644 index 000000000..cb3c84652 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/collection.json.js @@ -0,0 +1,8 @@ +import { getCollection } from 'astro:content'; +import { stringify } from 'devalue'; +import { stripAllRenderFn } from '../../utils.js'; + +export async function GET() { + const posts = await getCollection('blog'); + return new Response(stringify(stripAllRenderFn(posts))); +} diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/entry.json.js b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/entry.json.js new file mode 100644 index 000000000..53dd17013 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/src/pages/entry.json.js @@ -0,0 +1,8 @@ +import { getEntryBySlug } from 'astro:content'; +import { stringify } from 'devalue'; +import { stripRenderFn } from '../../utils.js'; + +export async function GET() { + const post = await getEntryBySlug('blog', 'post-1'); + return new Response(stringify(stripRenderFn(post))); +} diff --git a/packages/integrations/markdoc/test/fixtures/content-collections/utils.js b/packages/integrations/markdoc/test/fixtures/content-collections/utils.js new file mode 100644 index 000000000..3a6244327 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/content-collections/utils.js @@ -0,0 +1,8 @@ +export function stripRenderFn(entryWithRender) { + const { render, ...entry } = entryWithRender; + return entry; +} + +export function stripAllRenderFn(collection = []) { + return collection.map(stripRenderFn); +} diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/headings-custom/astro.config.mjs new file mode 100644 index 000000000..1bd8ba93f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings-custom/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/markdoc.config.mjs b/packages/integrations/markdoc/test/fixtures/headings-custom/markdoc.config.mjs new file mode 100644 index 000000000..cbd03d728 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings-custom/markdoc.config.mjs @@ -0,0 +1,10 @@ +import { component, defineMarkdocConfig, nodes } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({ + nodes: { + heading: { + ...nodes.heading, + render: component('./src/components/Heading.astro'), + } + } +}); diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/package.json b/packages/integrations/markdoc/test/fixtures/headings-custom/package.json new file mode 100644 index 000000000..67a974912 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings-custom/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/headings-custom", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/src/components/Heading.astro b/packages/integrations/markdoc/test/fixtures/headings-custom/src/components/Heading.astro new file mode 100644 index 000000000..ec6fa8305 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings-custom/src/components/Heading.astro @@ -0,0 +1,14 @@ +--- +type Props = { + level: number; + id: string; +}; + +const { level, id }: Props = Astro.props; + +const Tag = `h${level}`; +--- + +<Tag data-custom-heading {id}> + <slot /> +</Tag> diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/config.ts new file mode 100644 index 000000000..a142ace11 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const docs = defineCollection({}); + +export const collections = { + docs, +}; diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/docs/headings-stale-cache-check.mdoc b/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/docs/headings-stale-cache-check.mdoc new file mode 100644 index 000000000..75cd52884 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/docs/headings-stale-cache-check.mdoc @@ -0,0 +1,13 @@ +Our heading ID generator can have a stale cache for duplicates. Let's check for those! + +# Level 1 heading + +## Level **2 heading** + +### Level _3 heading_ + +#### Level [4 heading](/with-a-link) + +##### Level 5 heading with override {% #id-override %} + +###### Level 6 heading diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/docs/headings.mdoc b/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/docs/headings.mdoc new file mode 100644 index 000000000..3eb66580a --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings-custom/src/content/docs/headings.mdoc @@ -0,0 +1,11 @@ +# Level 1 heading + +## Level **2 heading** + +### Level _3 heading_ + +#### Level [4 heading](/with-a-link) + +##### Level 5 heading with override {% #id-override %} + +###### Level 6 heading diff --git a/packages/integrations/markdoc/test/fixtures/headings-custom/src/pages/[slug].astro b/packages/integrations/markdoc/test/fixtures/headings-custom/src/pages/[slug].astro new file mode 100644 index 000000000..90b021e95 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings-custom/src/pages/[slug].astro @@ -0,0 +1,34 @@ +--- +import { CollectionEntry, getCollection } from "astro:content"; + +export async function getStaticPaths() { + const docs = await getCollection('docs'); + return docs.map(doc => ({ params: { slug: doc.slug }, props: doc })); +} + +type Props = CollectionEntry<'docs'>; + +const { Content, headings } = await Astro.props.render(); +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Content</title> +</head> +<body> + <nav data-toc> + <ul> + {headings.map(heading => ( + <li> + <a href={`#${heading.slug}`} data-depth={heading.depth}>{heading.text}</a> + </li> + ))} + </ul> + </nav> + <Content /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/headings/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/headings/astro.config.mjs new file mode 100644 index 000000000..1bd8ba93f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/headings/markdoc.config.mjs b/packages/integrations/markdoc/test/fixtures/headings/markdoc.config.mjs new file mode 100644 index 000000000..a5863ec12 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings/markdoc.config.mjs @@ -0,0 +1,3 @@ +import { defineMarkdocConfig } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({}); diff --git a/packages/integrations/markdoc/test/fixtures/headings/package.json b/packages/integrations/markdoc/test/fixtures/headings/package.json new file mode 100644 index 000000000..1daaae400 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/headings", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/headings/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/headings/src/content/config.ts new file mode 100644 index 000000000..a142ace11 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const docs = defineCollection({}); + +export const collections = { + docs, +}; diff --git a/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings-stale-cache-check.mdoc b/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings-stale-cache-check.mdoc new file mode 100644 index 000000000..75cd52884 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings-stale-cache-check.mdoc @@ -0,0 +1,13 @@ +Our heading ID generator can have a stale cache for duplicates. Let's check for those! + +# Level 1 heading + +## Level **2 heading** + +### Level _3 heading_ + +#### Level [4 heading](/with-a-link) + +##### Level 5 heading with override {% #id-override %} + +###### Level 6 heading diff --git a/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings-with-special-characters.mdoc b/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings-with-special-characters.mdoc new file mode 100644 index 000000000..2d1801014 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings-with-special-characters.mdoc @@ -0,0 +1,3 @@ +## `<Picture />` + +### « Sacrebleu ! » diff --git a/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings.mdoc b/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings.mdoc new file mode 100644 index 000000000..3eb66580a --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings/src/content/docs/headings.mdoc @@ -0,0 +1,11 @@ +# Level 1 heading + +## Level **2 heading** + +### Level _3 heading_ + +#### Level [4 heading](/with-a-link) + +##### Level 5 heading with override {% #id-override %} + +###### Level 6 heading diff --git a/packages/integrations/markdoc/test/fixtures/headings/src/pages/[slug].astro b/packages/integrations/markdoc/test/fixtures/headings/src/pages/[slug].astro new file mode 100644 index 000000000..90b021e95 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/headings/src/pages/[slug].astro @@ -0,0 +1,34 @@ +--- +import { CollectionEntry, getCollection } from "astro:content"; + +export async function getStaticPaths() { + const docs = await getCollection('docs'); + return docs.map(doc => ({ params: { slug: doc.slug }, props: doc })); +} + +type Props = CollectionEntry<'docs'>; + +const { Content, headings } = await Astro.props.render(); +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Content</title> +</head> +<body> + <nav data-toc> + <ul> + {headings.map(heading => ( + <li> + <a href={`#${heading.slug}`} data-depth={heading.depth}>{heading.text}</a> + </li> + ))} + </ul> + </nav> + <Content /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/image-assets/astro.config.mjs new file mode 100644 index 000000000..6be0918b8 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/image-assets/astro.config.mjs @@ -0,0 +1,11 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; +import { testImageService } from '../../../../../astro/test/test-image-service.js'; + +// https://astro.build/config +export default defineConfig({ + image: { + service: testImageService(), + }, + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/markdoc.config.mjs b/packages/integrations/markdoc/test/fixtures/image-assets/markdoc.config.mjs new file mode 100644 index 000000000..04fe75244 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/image-assets/markdoc.config.mjs @@ -0,0 +1,10 @@ +import { component, defineMarkdocConfig, nodes } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({ + tags: { + image: { + attributes: nodes.image.attributes, + render: component('./src/components/Image.astro'), + }, + }, +}); diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/package.json b/packages/integrations/markdoc/test/fixtures/image-assets/package.json new file mode 100644 index 000000000..30df52c2f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/image-assets/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/image-assets", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/assets/alias/cityscape.jpg b/packages/integrations/markdoc/test/fixtures/image-assets/src/assets/alias/cityscape.jpg Binary files differnew file mode 100644 index 000000000..3fe6e5b64 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/assets/alias/cityscape.jpg diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/assets/relative/oar.jpg b/packages/integrations/markdoc/test/fixtures/image-assets/src/assets/relative/oar.jpg Binary files differnew file mode 100644 index 000000000..a63298b38 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/assets/relative/oar.jpg diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/components/Image.astro b/packages/integrations/markdoc/test/fixtures/image-assets/src/components/Image.astro new file mode 100644 index 000000000..e572c04d7 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/components/Image.astro @@ -0,0 +1,22 @@ +--- +import { Image } from 'astro:assets'; +// src/components/MyImage.astro +import type { ImageMetadata } from 'astro'; +type Props = { + src: string | ImageMetadata; + alt: string; +}; +const { src, alt } = Astro.props; +--- +{ + typeof src === 'string' ? ( + <img class="custom-styles" src={src} alt={alt} /> + ) : ( + <Image class="custom-styles" {src} {alt} /> + ) +} +<style> + .custom-styles { + border: 1px solid red; + } +</style> diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/image-assets/src/content/config.ts new file mode 100644 index 000000000..a142ace11 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const docs = defineCollection({}); + +export const collections = { + docs, +}; diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/content/docs/intro.mdoc b/packages/integrations/markdoc/test/fixtures/image-assets/src/content/docs/intro.mdoc new file mode 100644 index 000000000..f5ba3950f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/content/docs/intro.mdoc @@ -0,0 +1,9 @@ +# Image assets + + {% #public %} + + {% #relative %} + + {% #alias %} + +{% image src="../../assets/relative/oar.jpg" alt="oar" /%} {% #component %} diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/image-assets/src/pages/index.astro new file mode 100644 index 000000000..51810b4a8 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/pages/index.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from 'astro:content'; + +const intro = await getEntryBySlug('docs', 'intro'); +const { Content } = await intro.render(); +--- + +<html lang="en"> + <head> + <meta charset="utf-8" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <meta name="viewport" content="width=device-width" /> + <meta name="generator" content={Astro.generator} /> + <title>Astro</title> + </head> + <body> + <Content /> + </body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/src/public/favicon.svg b/packages/integrations/markdoc/test/fixtures/image-assets/src/public/favicon.svg new file mode 100644 index 000000000..f157bd1c5 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/image-assets/src/public/favicon.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128"> + <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" /> + <style> + path { fill: #000; } + @media (prefers-color-scheme: dark) { + path { fill: #FFF; } + } + </style> +</svg> diff --git a/packages/integrations/markdoc/test/fixtures/image-assets/tsconfig.json b/packages/integrations/markdoc/test/fixtures/image-assets/tsconfig.json new file mode 100644 index 000000000..c193287fc --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/image-assets/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "astro/tsconfigs/base", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "~/assets/*": ["src/assets/*"] + }, + }, + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] +} diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/propagated-assets/astro.config.mjs new file mode 100644 index 000000000..1bd8ba93f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/markdoc.config.mjs b/packages/integrations/markdoc/test/fixtures/propagated-assets/markdoc.config.mjs new file mode 100644 index 000000000..cd63c33be --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/markdoc.config.mjs @@ -0,0 +1,16 @@ +import { component, defineMarkdocConfig } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({ + tags: { + aside: { + render: component('./src/components/Aside.astro'), + attributes: { + type: { type: String }, + title: { type: String }, + } + }, + logHello: { + render: component('./src/components/LogHello.astro'), + } + }, +}) diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/package.json b/packages/integrations/markdoc/test/fixtures/propagated-assets/package.json new file mode 100644 index 000000000..3b51e158d --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-propagated-assets", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/src/components/Aside.astro b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/components/Aside.astro new file mode 100644 index 000000000..be15e8c0a --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/components/Aside.astro @@ -0,0 +1,116 @@ +--- +// Inspired by the `Aside` component from docs.astro.build +// https://github.com/withastro/starlight/blob/main/packages/starlight/integrations/asides.ts + +interface Props { + type?: 'note' | 'tip' | 'caution' | 'danger'; + title?: string; +} + +const labelByType = { + note: 'Note', + tip: 'Tip', + caution: 'Caution', + danger: 'Danger', +}; +const { type = 'note' } = Astro.props as Props; +const title = Astro.props.title ?? labelByType[type] ?? ''; + +// SVG icon paths based on GitHub Octicons +const icons: Record<NonNullable<Props['type']>, { viewBox: string; d: string }> = { + note: { + viewBox: '0 0 18 18', + d: 'M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z', + }, + tip: { + viewBox: '0 0 18 18', + d: 'M14 0a8.8 8.8 0 0 0-6 2.6l-.5.4-.9 1H3.3a1.8 1.8 0 0 0-1.5.8L.1 7.6a.8.8 0 0 0 .4 1.1l3.1 1 .2.1 2.4 2.4.1.2 1 3a.8.8 0 0 0 1 .5l2.9-1.7a1.8 1.8 0 0 0 .8-1.5V9.5l1-1 .4-.4A8.8 8.8 0 0 0 16 2v-.1A1.8 1.8 0 0 0 14.2 0h-.1zm-3.5 10.6-.3.2L8 12.3l.5 1.8 2-1.2a.3.3 0 0 0 .1-.2v-2zM3.7 8.1l1.5-2.3.2-.3h-2a.3.3 0 0 0-.3.1l-1.2 2 1.8.5zm5.2-4.5a7.3 7.3 0 0 1 5.2-2.1h.1a.3.3 0 0 1 .3.3v.1a7.3 7.3 0 0 1-2.1 5.2l-.5.4a15.2 15.2 0 0 1-2.5 2L7.1 11 5 9l1.5-2.3a15.3 15.3 0 0 1 2-2.5l.4-.5zM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-8.4 9.6a1.5 1.5 0 1 0-2.2-2.2 7 7 0 0 0-1.1 3 .2.2 0 0 0 .3.3c.6 0 2.2-.4 3-1.1z', + }, + caution: { + viewBox: '-1 1 18 18', + d: 'M8.9 1.5C8.7 1.2 8.4 1 8 1s-.7.2-.9.5l-7 12a1 1 0 0 0 0 1c.2.3.6.5 1 .5H15c.4 0 .7-.2.9-.5a1 1 0 0 0 0-1l-7-12zM9 13H7v-2h2v2zm0-3H7V6h2v4z', + }, + danger: { + viewBox: '0 1 14 17', + d: 'M5 .3c.9 2.2.5 3.4-.5 4.3C3.5 5.6 2 6.5 1 8c-1.5 2-1.7 6.5 3.5 7.7-2.2-1.2-2.6-4.5-.3-6.6-.6 2 .6 3.3 2 2.8 1.4-.4 2.3.6 2.2 1.7 0 .8-.3 1.4-1 1.8A5.6 5.6 0 0 0 12 10c0-2.9-2.5-3.3-1.3-5.7-1.5.2-2 1.2-1.8 2.8 0 1-1 1.8-2 1.3-.6-.4-.6-1.2 0-1.8C8.2 5.3 8.7 2.5 5 .3z', + }, +}; +const { viewBox, d } = icons[type]; +--- + +<aside class={`content ${type}`} aria-label={title}> + <p class="title" aria-hidden="true"> + <span class="icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} width={16} height={16}> + <path fill-rule="evenodd" d={d}></path> + </svg> + </span> + {title} + </p> + <section> + <slot /> + </section> +</aside> + +<style> + aside { + --color-base-purple: 269, 79%; + --color-base-teal: 180, 80%; + --color-base-red: 351, 100%; + --color-base-yellow: 41, 100%; + + --aside-color-base: var(--color-base-purple); + --aside-color-lightness: 54%; + --aside-accent-color: hsl(var(--aside-color-base), var(--aside-color-lightness)); + --aside-text-lightness: 20%; + --aside-text-accent-color: hsl(var(--aside-color-base), var(--aside-text-lightness)); + + border-inline-start: 4px solid var(--aside-accent-color); + padding: 1rem; + background-color: hsla(var(--aside-color-base), var(--aside-color-lightness), 0.1); + /* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */ + outline: 1px solid transparent; + } + + .title { + line-height: 1; + margin-bottom: 0.5rem; + font-size: 0.9rem; + letter-spacing: 0.05em; + font-weight: bold; + text-transform: uppercase; + color: var(--aside-text-accent-color); + } + + .icon svg { + width: 1.5em; + height: 1.5em; + vertical-align: middle; + fill: currentcolor; + } + + aside :global(a), + aside :global(a > code:not([class*='language'])) { + color: var(--aside-text-accent-color); + } + + aside :global(pre) { + margin-left: 0; + margin-right: 0; + } + + .tip { + --aside-color-lightness: 42%; + --aside-color-base: var(--color-base-teal); + } + + .caution { + --aside-color-lightness: 59%; + --aside-color-base: var(--color-base-yellow); + } + + .danger { + --aside-color-lightness: 54%; + --aside-color-base: var(--color-base-red); + } +</style> diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/src/components/LogHello.astro b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/components/LogHello.astro new file mode 100644 index 000000000..6d994378b --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/components/LogHello.astro @@ -0,0 +1,5 @@ +<p>I'm gonna log hello</p> + +<script> + console.log('hello'); +</script> diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/src/content/blog/scripts.mdoc b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/content/blog/scripts.mdoc new file mode 100644 index 000000000..808cffaca --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/content/blog/scripts.mdoc @@ -0,0 +1,5 @@ +--- +title: Scripts +--- + +{% logHello /%} diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/src/content/blog/styles.mdoc b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/content/blog/styles.mdoc new file mode 100644 index 000000000..20960e4cf --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/content/blog/styles.mdoc @@ -0,0 +1,9 @@ +--- +title: Styles +--- + +{% aside type="tip" %} + +## Example + +{% /aside %} diff --git a/packages/integrations/markdoc/test/fixtures/propagated-assets/src/pages/[slug].astro b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/pages/[slug].astro new file mode 100644 index 000000000..baee15375 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/propagated-assets/src/pages/[slug].astro @@ -0,0 +1,26 @@ +--- +import { getCollection } from 'astro:content'; + +export async function getStaticPaths() { + const posts = await getCollection('blog'); + return posts.map((post) => ({ + params: { slug: post.slug }, + props: post, + })); +} + +const { Content } = await Astro.props.render(); +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>{Astro.props.data.title}</title> +</head> +<body> + <Content /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render with-space/astro.config.mjs new file mode 100644 index 000000000..1bd8ba93f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render with-space/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/package.json b/packages/integrations/markdoc/test/fixtures/render with-space/package.json new file mode 100644 index 000000000..daae65443 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render with-space/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-render-with-space", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/src/content/blog/simple.mdoc b/packages/integrations/markdoc/test/fixtures/render with-space/src/content/blog/simple.mdoc new file mode 100644 index 000000000..2dbe492fe --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render with-space/src/content/blog/simple.mdoc @@ -0,0 +1,7 @@ +--- +title: Simple post with root folder containing a space +--- + +## Simple post with root folder containing a space + +This is a simple Markdoc post with root folder containing a space. diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render with-space/src/content/config.ts new file mode 100644 index 000000000..629486e48 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render with-space/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const blog = defineCollection({}); + +export const collections = { + blog, +}; diff --git a/packages/integrations/markdoc/test/fixtures/render with-space/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render with-space/src/pages/index.astro new file mode 100644 index 000000000..940eef154 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render with-space/src/pages/index.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from "astro:content"; + +const post = await getEntryBySlug('blog', 'simple'); +const { Content } = await post.render(); +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Content</title> +</head> +<body> + <Content /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/render-html/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-html/astro.config.mjs new file mode 100644 index 000000000..0872080fe --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc({ allowHTML: true })], +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-html/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-html/markdoc.config.ts new file mode 100644 index 000000000..bbc529f5a --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/markdoc.config.ts @@ -0,0 +1,19 @@ +import { component, defineMarkdocConfig } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({ + tags: { + aside: { + render: component('./src/components/Aside.astro'), + attributes: { + type: { type: String }, + title: { type: String }, + }, + }, + mark: { + render: component('./src/components/Mark.astro'), + attributes: { + color: { type: String }, + }, + }, + }, +}) diff --git a/packages/integrations/markdoc/test/fixtures/render-html/package.json b/packages/integrations/markdoc/test/fixtures/render-html/package.json new file mode 100644 index 000000000..4a0c67bfe --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-render-html", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/components/Aside.astro b/packages/integrations/markdoc/test/fixtures/render-html/src/components/Aside.astro new file mode 100644 index 000000000..ed7077dbd --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/components/Aside.astro @@ -0,0 +1,116 @@ +--- +// Inspired by the `Aside` component from docs.astro.build +// https://github.com/withastro/starlight/blob/main/packages/starlight/integrations/asides.ts + +export interface Props { + type?: 'note' | 'tip' | 'caution' | 'danger'; + title?: string; +} + +const labelByType = { + note: 'Note', + tip: 'Tip', + caution: 'Caution', + danger: 'Danger', +}; +const { type = 'note' } = Astro.props as Props; +const title = Astro.props.title ?? labelByType[type] ?? ''; + +// SVG icon paths based on GitHub Octicons +const icons: Record<NonNullable<Props['type']>, { viewBox: string; d: string }> = { + note: { + viewBox: '0 0 18 18', + d: 'M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z', + }, + tip: { + viewBox: '0 0 18 18', + d: 'M14 0a8.8 8.8 0 0 0-6 2.6l-.5.4-.9 1H3.3a1.8 1.8 0 0 0-1.5.8L.1 7.6a.8.8 0 0 0 .4 1.1l3.1 1 .2.1 2.4 2.4.1.2 1 3a.8.8 0 0 0 1 .5l2.9-1.7a1.8 1.8 0 0 0 .8-1.5V9.5l1-1 .4-.4A8.8 8.8 0 0 0 16 2v-.1A1.8 1.8 0 0 0 14.2 0h-.1zm-3.5 10.6-.3.2L8 12.3l.5 1.8 2-1.2a.3.3 0 0 0 .1-.2v-2zM3.7 8.1l1.5-2.3.2-.3h-2a.3.3 0 0 0-.3.1l-1.2 2 1.8.5zm5.2-4.5a7.3 7.3 0 0 1 5.2-2.1h.1a.3.3 0 0 1 .3.3v.1a7.3 7.3 0 0 1-2.1 5.2l-.5.4a15.2 15.2 0 0 1-2.5 2L7.1 11 5 9l1.5-2.3a15.3 15.3 0 0 1 2-2.5l.4-.5zM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-8.4 9.6a1.5 1.5 0 1 0-2.2-2.2 7 7 0 0 0-1.1 3 .2.2 0 0 0 .3.3c.6 0 2.2-.4 3-1.1z', + }, + caution: { + viewBox: '-1 1 18 18', + d: 'M8.9 1.5C8.7 1.2 8.4 1 8 1s-.7.2-.9.5l-7 12a1 1 0 0 0 0 1c.2.3.6.5 1 .5H15c.4 0 .7-.2.9-.5a1 1 0 0 0 0-1l-7-12zM9 13H7v-2h2v2zm0-3H7V6h2v4z', + }, + danger: { + viewBox: '0 1 14 17', + d: 'M5 .3c.9 2.2.5 3.4-.5 4.3C3.5 5.6 2 6.5 1 8c-1.5 2-1.7 6.5 3.5 7.7-2.2-1.2-2.6-4.5-.3-6.6-.6 2 .6 3.3 2 2.8 1.4-.4 2.3.6 2.2 1.7 0 .8-.3 1.4-1 1.8A5.6 5.6 0 0 0 12 10c0-2.9-2.5-3.3-1.3-5.7-1.5.2-2 1.2-1.8 2.8 0 1-1 1.8-2 1.3-.6-.4-.6-1.2 0-1.8C8.2 5.3 8.7 2.5 5 .3z', + }, +}; +const { viewBox, d } = icons[type]; +--- + +<aside class={`content ${type}`} aria-label={title}> + <p class="title" aria-hidden="true"> + <span class="icon"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} width={16} height={16}> + <path fill-rule="evenodd" d={d}></path> + </svg> + </span> + {title} + </p> + <section> + <slot /> + </section> +</aside> + +<style> + aside { + --color-base-purple: 269, 79%; + --color-base-teal: 180, 80%; + --color-base-red: 351, 100%; + --color-base-yellow: 41, 100%; + + --aside-color-base: var(--color-base-purple); + --aside-color-lightness: 54%; + --aside-accent-color: hsl(var(--aside-color-base), var(--aside-color-lightness)); + --aside-text-lightness: 20%; + --aside-text-accent-color: hsl(var(--aside-color-base), var(--aside-text-lightness)); + + border-inline-start: 4px solid var(--aside-accent-color); + padding: 1rem; + background-color: hsla(var(--aside-color-base), var(--aside-color-lightness), 0.1); + /* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */ + outline: 1px solid transparent; + } + + .title { + line-height: 1; + margin-bottom: 0.5rem; + font-size: 0.9rem; + letter-spacing: 0.05em; + font-weight: bold; + text-transform: uppercase; + color: var(--aside-text-accent-color); + } + + .icon svg { + width: 1.5em; + height: 1.5em; + vertical-align: middle; + fill: currentcolor; + } + + aside :global(a), + aside :global(a > code:not([class*='language'])) { + color: var(--aside-text-accent-color); + } + + aside :global(pre) { + margin-left: 0; + margin-right: 0; + } + + .tip { + --aside-color-lightness: 42%; + --aside-color-base: var(--color-base-teal); + } + + .caution { + --aside-color-lightness: 59%; + --aside-color-base: var(--color-base-yellow); + } + + .danger { + --aside-color-lightness: 54%; + --aside-color-base: var(--color-base-red); + } +</style> diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/components/Mark.astro b/packages/integrations/markdoc/test/fixtures/render-html/src/components/Mark.astro new file mode 100644 index 000000000..7d0b6c9fb --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/components/Mark.astro @@ -0,0 +1,11 @@ +--- + +export interface Props { + color?: 'hotpink' | 'blue'; +} + +const { color } = Astro.props; + +--- + +<span style={`color: ${color}`} class="mark"><slot /></span> diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/_partial.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/_partial.mdoc new file mode 100644 index 000000000..f8774e911 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/_partial.mdoc @@ -0,0 +1,5 @@ +## HTML in a partial + +<ul> + <li id="partial">List item</li> +</ul> diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/components.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/components.mdoc new file mode 100644 index 000000000..55890ce09 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/components.mdoc @@ -0,0 +1,47 @@ +--- +title: Welcome to Markdoc 👋 +--- + +This is a {% mark color="hotpink" %}inline mark{% /mark %} in regular Markdown markup. + +<p id="p1">This is a {% mark color="hotpink" %}inline mark{% /mark %} under some HTML</p> + +<div id="div1"> + <p id="div1-p1">This is a {% mark color="hotpink" %}inline mark{% /mark %} under some HTML</p> + <p id="div1-p2">This is a <span id="div1-p2-span1">{% mark color="hotpink" %}inline mark{% /mark %}</span> under some HTML</p> +</div> + +{% aside title="Aside One" type="tip" %} + +I'm a Markdown paragraph inside an top-level aside tag + +## I'm an H2 via Markdown markup + +<h2 id="h-two">I'm an H2 via HTML markup</h2> + +**Markdown bold** vs <strong>HTML bold</strong> + +RENDERED + +{% if $revealSecret %} +NOT RENDERED +{% /if %} + +{% if $revealSecret %}NOT RENDERED{% /if %} + +{% /aside %} + +<section id="section1"> + <div id="div1"> +{% aside title="Nested un-indented Aside" type="tip" %} +regular Markdown markup +<p id="p4">nested {% mark color="hotpink" %}inline mark{% /mark %} content</p> +{% /aside %} + </div> + <div id="div2"> + {% aside title="Nested indented Aside 💀" type="tip" %} + regular Markdown markup + <p id="p5">nested {% mark color="hotpink" %}inline<span id="inception-span"> mark</span>{% /mark %} content</p> + {% /aside %} + </div> +</section> diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/nested-html.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/nested-html.mdoc new file mode 100644 index 000000000..161d128bf --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/nested-html.mdoc @@ -0,0 +1,18 @@ +--- +title: Simple post +--- +<p id="p1">before <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> after</p> +<p id="p2"> + before + <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> + after +</p> +<div id="div-l1"> + <div id="div-l2-1"> + <p id="p3">before <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> after</p> + </div> + <div id="div-l2-2"> + <p id="p4">before <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> after</p> + <p id="p5">before <span class="inner-class" id="inner1" style="color: hotpink;">inner</span> after</p> + </div> +</div>
\ No newline at end of file diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/randomly-cased-html-attributes.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/randomly-cased-html-attributes.mdoc new file mode 100644 index 000000000..18c62bd59 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/randomly-cased-html-attributes.mdoc @@ -0,0 +1,20 @@ +--- +title: Simple post +--- + +<table> + <thead> + <tr> + <th>one</th> + <th>two</th> + <th>three</th> + </tr> + </thead> + <tbody> + <tr><td id="td1" rowspan="2" colspan="3">three wide and two tall</td></tr> + <tr><td id="td2" ROWSPAN="2" COLSPAN="3">three wide and two tall</td></tr> + <tr><td id="td3" rowSpan="2" colSpan="3">three wide and two tall</td></tr> + <tr><td id="td4" RowSpan="2" ColSpan="3">three wide and two tall</td></tr> + </tr> + </tbody> +</table> diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc new file mode 100644 index 000000000..30b9b7f8f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/simple.mdoc @@ -0,0 +1,15 @@ +--- +title: Simple post +--- + +## Simple <span class="inside-h2" style="color: fuscia">post</span> header + +This is a simple Markdoc <span class="post-class" style="color: hotpink;">post</span>. + +<p>This is a paragraph!</p> + +<p>This is a <span class="inside-p">span</span> inside a paragraph!</p> + +<video + src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExejZnbmN6ODlxOWk2djVmcnFkMjIwbmFnZGFtZ2J4aG52dzVvbjJlaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/H1vJZzQAiILUUq0FUL/giphy.mp4" + autoplay muted></video>
\ No newline at end of file diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/with-partial.mdoc b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/with-partial.mdoc new file mode 100644 index 000000000..c42d3cd70 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/blog/with-partial.mdoc @@ -0,0 +1,5 @@ +--- +title: With Partial +--- + +{% partial file="./_partial.mdoc" /%} diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-html/src/content/config.ts new file mode 100644 index 000000000..629486e48 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const blog = defineCollection({}); + +export const collections = { + blog, +}; diff --git a/packages/integrations/markdoc/test/fixtures/render-html/src/pages/[slug].astro b/packages/integrations/markdoc/test/fixtures/render-html/src/pages/[slug].astro new file mode 100644 index 000000000..bea51d3b5 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-html/src/pages/[slug].astro @@ -0,0 +1,29 @@ +--- +import { getCollection, getEntryBySlug } from "astro:content"; + +const { slug } = Astro.params; + +const post = await getEntryBySlug('blog', slug); +const { Content } = await post.render(); + +export async function getStaticPaths() { + const blogEntries = await getCollection('blog'); + return blogEntries.map(entry => ({ + params: { slug: entry.slug }, props: { entry }, + })); +} + +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Content</title> +</head> +<body> + <Content /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/render-null/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-null/astro.config.mjs new file mode 100644 index 000000000..1bd8ba93f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-null/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-null/markdoc.config.mjs b/packages/integrations/markdoc/test/fixtures/render-null/markdoc.config.mjs new file mode 100644 index 000000000..5db65fddd --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-null/markdoc.config.mjs @@ -0,0 +1,15 @@ +import { defineMarkdocConfig, nodes, component } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({ + nodes: { + document: { + ...nodes.document, + render: null, + }, + }, + tags: { + 'div-wrapper': { + render: component('./src/components/DivWrapper.astro'), + }, + }, +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-null/package.json b/packages/integrations/markdoc/test/fixtures/render-null/package.json new file mode 100644 index 000000000..e9529b693 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-null/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-render-null", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render-null/src/components/DivWrapper.astro b/packages/integrations/markdoc/test/fixtures/render-null/src/components/DivWrapper.astro new file mode 100644 index 000000000..942a11945 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-null/src/components/DivWrapper.astro @@ -0,0 +1 @@ +<div class="div-wrapper"><slot /></div> diff --git a/packages/integrations/markdoc/test/fixtures/render-null/src/content/blog/render-null.mdoc b/packages/integrations/markdoc/test/fixtures/render-null/src/content/blog/render-null.mdoc new file mode 100644 index 000000000..f85ebebd1 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-null/src/content/blog/render-null.mdoc @@ -0,0 +1,13 @@ +--- +title: Post with render null +--- + +## Post with render null + +This should render the contents inside a fragment! + +{% div-wrapper %} + +I'm inside a div wrapper + +{% /div-wrapper %} diff --git a/packages/integrations/markdoc/test/fixtures/render-null/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-null/src/content/config.ts new file mode 100644 index 000000000..629486e48 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-null/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const blog = defineCollection({}); + +export const collections = { + blog, +}; diff --git a/packages/integrations/markdoc/test/fixtures/render-null/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-null/src/pages/index.astro new file mode 100644 index 000000000..ed8417c5b --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-null/src/pages/index.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from "astro:content"; + +const post = await getEntryBySlug('blog', 'render-null'); +const { Content } = await post.render(); +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Content</title> +</head> +<body> + <Content /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-partials/astro.config.mjs new file mode 100644 index 000000000..1bd8ba93f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-partials/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-partials/markdoc.config.ts new file mode 100644 index 000000000..c9762aed5 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-partials/markdoc.config.ts @@ -0,0 +1,7 @@ +import { Markdoc, defineMarkdocConfig } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({ + partials: { + configured: Markdoc.parse('# Configured partial {% #configured %}'), + }, +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/package.json b/packages/integrations/markdoc/test/fixtures/render-partials/package.json new file mode 100644 index 000000000..021e1c2d9 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-partials/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-render-partials", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/src/content/blog/_partial.mdoc b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/blog/_partial.mdoc new file mode 100644 index 000000000..4ace9a9d3 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/blog/_partial.mdoc @@ -0,0 +1,3 @@ +## Partial {% #top %} + +{% partial file="../nested/_partial.mdoc" /%} diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/src/content/blog/with-partials.mdoc b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/blog/with-partials.mdoc new file mode 100644 index 000000000..2d9a87110 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/blog/with-partials.mdoc @@ -0,0 +1,7 @@ +--- +title: Post with partials +--- + +{% partial file="_partial.mdoc" /%} + +{% partial file="configured" /%} diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/config.ts new file mode 100644 index 000000000..629486e48 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const blog = defineCollection({}); + +export const collections = { + blog, +}; diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/src/content/nested/_partial.mdoc b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/nested/_partial.mdoc new file mode 100644 index 000000000..4193609bf --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-partials/src/content/nested/_partial.mdoc @@ -0,0 +1 @@ +## Nested partial {% #nested %} diff --git a/packages/integrations/markdoc/test/fixtures/render-partials/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-partials/src/pages/index.astro new file mode 100644 index 000000000..e9549f314 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-partials/src/pages/index.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from 'astro:content'; + +const post = await getEntryBySlug('blog', 'with-partials'); +const { Content } = await post.render(); +--- + +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Content</title> + </head> + <body> + <Content /> + </body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/render-simple/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-simple/astro.config.mjs new file mode 100644 index 000000000..1bd8ba93f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-simple/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-simple/package.json b/packages/integrations/markdoc/test/fixtures/render-simple/package.json new file mode 100644 index 000000000..9354cdc58 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-simple/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-render-simple", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render-simple/src/content/blog/simple.mdoc b/packages/integrations/markdoc/test/fixtures/render-simple/src/content/blog/simple.mdoc new file mode 100644 index 000000000..557f7b8e5 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-simple/src/content/blog/simple.mdoc @@ -0,0 +1,7 @@ +--- +title: Simple post +--- + +## Simple post + +This is a simple Markdoc post. diff --git a/packages/integrations/markdoc/test/fixtures/render-simple/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-simple/src/content/config.ts new file mode 100644 index 000000000..629486e48 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-simple/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const blog = defineCollection({}); + +export const collections = { + blog, +}; diff --git a/packages/integrations/markdoc/test/fixtures/render-simple/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-simple/src/pages/index.astro new file mode 100644 index 000000000..940eef154 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-simple/src/pages/index.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from "astro:content"; + +const post = await getEntryBySlug('blog', 'simple'); +const { Content } = await post.render(); +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Content</title> +</head> +<body> + <Content /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-typographer/astro.config.mjs new file mode 100644 index 000000000..408e036c7 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-typographer/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc({ typographer: true })], +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/package.json b/packages/integrations/markdoc/test/fixtures/render-typographer/package.json new file mode 100644 index 000000000..02fd6788f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-typographer/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-render-typographer", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/src/content/blog/typographer.mdoc b/packages/integrations/markdoc/test/fixtures/render-typographer/src/content/blog/typographer.mdoc new file mode 100644 index 000000000..2180e7a47 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-typographer/src/content/blog/typographer.mdoc @@ -0,0 +1,7 @@ +--- +title: Typographer +--- + +## Typographer's post + +This is a post to test the "typographer" option. diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-typographer/src/content/config.ts new file mode 100644 index 000000000..629486e48 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-typographer/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const blog = defineCollection({}); + +export const collections = { + blog, +}; diff --git a/packages/integrations/markdoc/test/fixtures/render-typographer/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-typographer/src/pages/index.astro new file mode 100644 index 000000000..88fc531fa --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-typographer/src/pages/index.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from "astro:content"; + +const post = await getEntryBySlug('blog', 'typographer'); +const { Content } = await post.render(); +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Content</title> +</head> +<body> + <Content /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-with-components/astro.config.mjs new file mode 100644 index 000000000..3023497aa --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/astro.config.mjs @@ -0,0 +1,8 @@ +import markdoc from '@astrojs/markdoc'; +import preact from '@astrojs/preact'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc(), preact()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-with-components/markdoc.config.ts new file mode 100644 index 000000000..6093ec593 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/markdoc.config.ts @@ -0,0 +1,32 @@ +import { Markdoc, component, defineMarkdocConfig } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({ + nodes: { + fence: { + render: component('./src/components/Code.astro'), + attributes: { + language: { type: String }, + content: { type: String }, + }, + }, + }, + tags: { + 'marquee-element': { + render: component('./src/components/CustomMarquee.astro'), + attributes: { + direction: { + type: String, + default: 'left', + matches: ['left', 'right', 'up', 'down'], + errorLevel: 'critical', + }, + }, + }, + counter: { + render: component('./src/components/CounterWrapper.astro'), + }, + 'deeply-nested': { + render: component('./src/components/DeeplyNested.astro'), + }, + }, +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/package.json b/packages/integrations/markdoc/test/fixtures/render-with-components/package.json new file mode 100644 index 000000000..c8cadbc37 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/package.json @@ -0,0 +1,11 @@ +{ + "name": "@test/markdoc-render-with-components", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "@astrojs/preact": "workspace:*", + "astro": "workspace:*", + "preact": "^10.26.5" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/Code.astro b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/Code.astro new file mode 100644 index 000000000..18bf1399f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/Code.astro @@ -0,0 +1,12 @@ +--- +import { Code } from 'astro/components'; + +type Props = { + content: string; + language: string; +} + +const { content, language } = Astro.props as Props; +--- + +<Code lang={language} code={content} /> diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/Counter.tsx b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/Counter.tsx new file mode 100644 index 000000000..f1e239718 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/Counter.tsx @@ -0,0 +1,10 @@ +import { useState } from 'preact/hooks'; + +export default function Counter() { + const [count, setCount] = useState(1); + return ( + <button id="counter" onClick={() => setCount(count + 1)}> + {count} + </button> + ); +} diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/CounterWrapper.astro b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/CounterWrapper.astro new file mode 100644 index 000000000..e45ac6438 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/CounterWrapper.astro @@ -0,0 +1,5 @@ +--- +import Counter from './Counter'; +--- + +<Counter client:load /> diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/CustomMarquee.astro b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/CustomMarquee.astro new file mode 100644 index 000000000..3108b9973 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/CustomMarquee.astro @@ -0,0 +1 @@ +<marquee data-custom-marquee {...Astro.props}><slot /></marquee> diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/DeeplyNested.astro b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/DeeplyNested.astro new file mode 100644 index 000000000..eb23f675a --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/components/DeeplyNested.astro @@ -0,0 +1,5 @@ +--- + +--- + +<p id="deeply-nested">Deeply nested partial</p> diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/_nested.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/_nested.mdoc new file mode 100644 index 000000000..68f529280 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/_nested.mdoc @@ -0,0 +1,3 @@ +Render components from a deeply nested partial: + +{% deeply-nested /%} diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/_counter.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/_counter.mdoc new file mode 100644 index 000000000..4a015695c --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/_counter.mdoc @@ -0,0 +1,7 @@ +# Hello from a partial! + +Render a component from a partial: + +{% counter /%} + +{% partial file="../_nested.mdoc" /%} diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/with-components.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/with-components.mdoc new file mode 100644 index 000000000..0d1ec835c --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/blog/with-components.mdoc @@ -0,0 +1,28 @@ +--- +title: Post with components +--- + +## Post with components + +This uses a custom marquee component with a shortcode: + +{% marquee-element direction="right" %} +I'm a marquee too! +{% /marquee-element %} + +{% partial file="_counter.mdoc" /%} + +And a code component for code blocks: + +```js +const isRenderedWithShiki = true; +``` + +{% if equals("true", "true") %} +Inside truthy + +```js +const isRenderedWithShikiInside = true; +``` + +{% /if %} diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/config.ts new file mode 100644 index 000000000..629486e48 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const blog = defineCollection({}); + +export const collections = { + blog, +}; diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-with-components/src/pages/index.astro new file mode 100644 index 000000000..52239acce --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/src/pages/index.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from "astro:content"; + +const post = await getEntryBySlug('blog', 'with-components'); +const { Content } = await post.render(); +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Content</title> +</head> +<body> + <Content /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/render-with-components/tsconfig.json b/packages/integrations/markdoc/test/fixtures/render-with-components/tsconfig.json new file mode 100644 index 000000000..f993eddf6 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-components/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "astro/tsconfigs/base", + "compilerOptions": { + "jsx": "react-jsx", + "jsxImportSource": "preact" + }, + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] +}
\ No newline at end of file diff --git a/packages/integrations/markdoc/test/fixtures/render-with-config/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-with-config/astro.config.mjs new file mode 100644 index 000000000..1bd8ba93f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-config/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-with-config/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-with-config/markdoc.config.ts new file mode 100644 index 000000000..c43ee93a3 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-config/markdoc.config.ts @@ -0,0 +1,15 @@ +import { defineMarkdocConfig } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({ + variables: { + countries: ['ES', 'JP'], + }, + functions: { + includes: { + transform(parameters) { + const [array, value] = Object.values(parameters); + return Array.isArray(array) ? array.includes(value) : false; + }, + }, + }, +}) diff --git a/packages/integrations/markdoc/test/fixtures/render-with-config/package.json b/packages/integrations/markdoc/test/fixtures/render-with-config/package.json new file mode 100644 index 000000000..d4751388c --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-config/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-render-with-config", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render-with-config/src/content/blog/with-config.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-config/src/content/blog/with-config.mdoc new file mode 100644 index 000000000..5376404ea --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-config/src/content/blog/with-config.mdoc @@ -0,0 +1,13 @@ +--- +title: Post with config +--- + +## Post with config + +{% if includes($countries, "EN") %} Hello {% /if %} +{% if includes($countries, "ES") %} Hola {% /if %} +{% if includes($countries, "JP") %} Konnichiwa {% /if %} + +## Runtime variables + +{% $runtimeVariable %} {% #runtime-variable %} diff --git a/packages/integrations/markdoc/test/fixtures/render-with-config/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-with-config/src/content/config.ts new file mode 100644 index 000000000..629486e48 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-config/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const blog = defineCollection({}); + +export const collections = { + blog, +}; diff --git a/packages/integrations/markdoc/test/fixtures/render-with-config/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-with-config/src/pages/index.astro new file mode 100644 index 000000000..616d5ec0a --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-config/src/pages/index.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from "astro:content"; + +const post = await getEntryBySlug('blog', 'with-config'); +const { Content } = await post.render(); +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Content</title> +</head> +<body> + <Content runtimeVariable="working!" /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/astro.config.mjs new file mode 100644 index 000000000..1bd8ba93f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc()], +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/markdoc.config.ts new file mode 100644 index 000000000..8daba3746 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/markdoc.config.ts @@ -0,0 +1,31 @@ +import { component, defineMarkdocConfig } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({ + extends: [preset()], +}); + +function preset() { + return { + nodes: { + fence: { + render: component('./src/components/Code.astro'), + attributes: { + language: { type: String }, + content: { type: String }, + }, + }, + }, + tags: { + 'marquee-element': { + render: component('./src/components/CustomMarquee.astro'), + attributes: { + direction: { + type: String, + default: 'left', + matches: ['left', 'right', 'up', 'down'], + }, + }, + }, + }, + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/package.json b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/package.json new file mode 100644 index 000000000..962a2b8a7 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-render-with-extends-components", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/components/Code.astro b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/components/Code.astro new file mode 100644 index 000000000..18bf1399f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/components/Code.astro @@ -0,0 +1,12 @@ +--- +import { Code } from 'astro/components'; + +type Props = { + content: string; + language: string; +} + +const { content, language } = Astro.props as Props; +--- + +<Code lang={language} code={content} /> diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/components/CustomMarquee.astro b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/components/CustomMarquee.astro new file mode 100644 index 000000000..3108b9973 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/components/CustomMarquee.astro @@ -0,0 +1 @@ +<marquee data-custom-marquee {...Astro.props}><slot /></marquee> diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/content/blog/with-components.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/content/blog/with-components.mdoc new file mode 100644 index 000000000..8ff944b06 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/content/blog/with-components.mdoc @@ -0,0 +1,26 @@ +--- +title: Post with components +--- + +## Post with components + +This uses a custom marquee component with a shortcode: + +{% marquee-element direction="right" %} +I'm a marquee too! +{% /marquee-element %} + +And a code component for code blocks: + +```js +const isRenderedWithShiki = true; +``` + +{% if equals("true", "true") %} +Inside truthy + +```js +const isRenderedWithShikiInside = true; +``` + +{% /if %} diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/content/config.ts new file mode 100644 index 000000000..629486e48 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const blog = defineCollection({}); + +export const collections = { + blog, +}; diff --git a/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/pages/index.astro new file mode 100644 index 000000000..52239acce --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-extends-components/src/pages/index.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from "astro:content"; + +const post = await getEntryBySlug('blog', 'with-components'); +const { Content } = await post.render(); +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Content</title> +</head> +<body> + <Content /> +</body> +</html> diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/astro.config.mjs b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/astro.config.mjs new file mode 100644 index 000000000..e690d7757 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// https://astro.build/config +export default defineConfig({ + integrations: [markdoc({ ignoreIndentation: true })], +}); diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/markdoc.config.ts b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/markdoc.config.ts new file mode 100644 index 000000000..2016327a8 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/markdoc.config.ts @@ -0,0 +1,26 @@ +import { component, defineMarkdocConfig } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({ + nodes: { + fence: { + render: component('./src/components/Code.astro'), + attributes: { + language: { type: String }, + content: { type: String }, + }, + }, + }, + tags: { + 'marquee-element': { + render: component('./src/components/CustomMarquee.astro'), + attributes: { + direction: { + type: String, + default: 'left', + matches: ['left', 'right', 'up', 'down'], + errorLevel: 'critical', + }, + }, + }, + }, +}) diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/package.json b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/package.json new file mode 100644 index 000000000..3c1d0a7b5 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/markdoc-render-with-indented-components", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/markdoc": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/components/Code.astro b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/components/Code.astro new file mode 100644 index 000000000..18bf1399f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/components/Code.astro @@ -0,0 +1,12 @@ +--- +import { Code } from 'astro/components'; + +type Props = { + content: string; + language: string; +} + +const { content, language } = Astro.props as Props; +--- + +<Code lang={language} code={content} /> diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/components/CustomMarquee.astro b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/components/CustomMarquee.astro new file mode 100644 index 000000000..3108b9973 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/components/CustomMarquee.astro @@ -0,0 +1 @@ +<marquee data-custom-marquee {...Astro.props}><slot /></marquee> diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/content/blog/with-indented-components.mdoc b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/content/blog/with-indented-components.mdoc new file mode 100644 index 000000000..a52b35fc4 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/content/blog/with-indented-components.mdoc @@ -0,0 +1,24 @@ +--- +title: Post with indented components +--- + +## Post with indented components + +This uses a custom marquee component with a shortcode: + +{% marquee-element direction="right" %} + I'm a marquee too! + + {% marquee-element direction="right" %} + I'm an indented marquee! + + ### I am an h3! + {% /marquee-element %} + + And a nested code block: + + ```js + const isRenderedWithShiki = true; + ``` +{% /marquee-element %} + diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/content/config.ts b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/content/config.ts new file mode 100644 index 000000000..629486e48 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/content/config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; + +const blog = defineCollection({}); + +export const collections = { + blog, +}; diff --git a/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/pages/index.astro b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/pages/index.astro new file mode 100644 index 000000000..0ae7ed4c9 --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/render-with-indented-components/src/pages/index.astro @@ -0,0 +1,19 @@ +--- +import { getEntryBySlug } from "astro:content"; + +const post = await getEntryBySlug('blog', 'with-indented-components'); +const { Content } = await post.render(); +--- + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Content</title> +</head> +<body> + <Content /> +</body> +</html> 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..1bd8ba93f --- /dev/null +++ b/packages/integrations/markdoc/test/fixtures/variables/astro.config.mjs @@ -0,0 +1,7 @@ +import markdoc from '@astrojs/markdoc'; +import { defineConfig } from 'astro/config'; + +// 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(); +--- + +<html lang="en"> + <head> + <meta charset="utf-8" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <meta name="viewport" content="width=device-width" /> + <meta name="generator" content={Astro.generator} /> + <title>Astro</title> + </head> + <body> + <Content {entry} /> + </body> +</html> |
