diff --git a/examples/with-markdoc/src/components/Aside.astro b/examples/with-markdoc/src/components/Aside.astro index a30e80f15..eca141bf8 100644 --- a/examples/with-markdoc/src/components/Aside.astro +++ b/examples/with-markdoc/src/components/Aside.astro @@ -4,10 +4,14 @@ export interface Props { title?: string; } -const t = { - 'aside.tip': 'Tip', +const labelByType = { + note: 'Note', + tip: 'Tip', + caution: 'Caution', + danger: 'Danger', }; -const { type = 'note', title = t[`aside.${type}`] } = Astro.props as Props; +const { type = 'note' } = Astro.props as Props; +const title = Astro.props.title ?? labelByType[type] ?? ''; // SVG icon paths based on GitHub Octicons const icons: Record, { viewBox: string; d: string }> = { @@ -49,6 +53,9 @@ const { viewBox, d } = icons[type]; 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)); @@ -57,19 +64,11 @@ const { viewBox, d } = icons[type]; border-inline-start: 4px solid var(--aside-accent-color); padding: 1rem; - background-color: hsla( - var(--aside-color-base), - var(--aside-color-lightness), - var(--theme-accent-opacity) - ); + 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; } - :global(.theme-dark) aside { - --aside-text-lightness: 85%; - } - .title { line-height: 1; margin-bottom: 0.5rem; @@ -92,15 +91,6 @@ const { viewBox, d } = icons[type]; color: var(--aside-text-accent-color); } - aside :global(p), - aside.content :global(ul) { - color: var(--theme-text); - } - - :global(.theme-dark) aside :global(code:not([class*='language'])) { - color: var(--theme-code-text); - } - aside :global(pre) { margin-left: 0; margin-right: 0; diff --git a/examples/with-markdoc/src/components/Badge.astro b/examples/with-markdoc/src/components/Badge.astro deleted file mode 100644 index fafdc98b9..000000000 --- a/examples/with-markdoc/src/components/Badge.astro +++ /dev/null @@ -1,34 +0,0 @@ ---- -export interface Props { - variant?: 'neutral' | 'accent'; -} -const { variant = 'neutral' } = Astro.props as Props; ---- - - - - diff --git a/examples/with-markdoc/src/components/DocsContent.astro b/examples/with-markdoc/src/components/DocsContent.astro new file mode 100644 index 000000000..642a62e9c --- /dev/null +++ b/examples/with-markdoc/src/components/DocsContent.astro @@ -0,0 +1,43 @@ +--- +import Aside from './Aside.astro'; +import type { CollectionEntry } from 'astro:content'; + +type Props = { + entry: CollectionEntry<'docs'>; +}; + +const { entry } = Astro.props; +const { Content } = await entry.render(); +--- + + + + diff --git a/examples/with-markdoc/src/components/Marquee.astro b/examples/with-markdoc/src/components/Marquee.astro deleted file mode 100644 index 3e35d1566..000000000 --- a/examples/with-markdoc/src/components/Marquee.astro +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/examples/with-markdoc/src/components/RedP.astro b/examples/with-markdoc/src/components/RedP.astro deleted file mode 100644 index 1b4252688..000000000 --- a/examples/with-markdoc/src/components/RedP.astro +++ /dev/null @@ -1,7 +0,0 @@ -

- - diff --git a/examples/with-markdoc/src/components/Since.astro b/examples/with-markdoc/src/components/Since.astro deleted file mode 100644 index 5ca924c68..000000000 --- a/examples/with-markdoc/src/components/Since.astro +++ /dev/null @@ -1,46 +0,0 @@ ---- -import Badge from './Badge.astro'; - -export interface Props { - pkg?: string; - v: string; -} - -const { v, pkg = 'astro' } = Astro.props as Props; - -/** - * Split a semantic version string like `0.23.3` into a tuple of `[major, minor, patch]`. - */ -const parseSemVer = (semver: string) => - semver.split('.').map((part) => parseInt(part.replace(/[^0-9]/g, ''), 10)); - -/** - * Decide a feature is β€œnew” if it was added in the latest minor version. - * For example, `@version 0.24.0` will be new as long as `astro@latest` is 0.24.x - */ -const getFeatureStatus = async (sinceVersion: string): Promise<'beta' | 'new' | 'current'> => { - const astroInfo = await fetch(`https://registry.npmjs.org/${pkg}/latest`).then((res) => - res.json() - ); - const latestAstroVersion = astroInfo.version; - const [sinceMajor, sinceMinor] = parseSemVer(sinceVersion); - const [latestMajor, latestMinor] = parseSemVer(latestAstroVersion); - if (sinceMajor > latestMajor) { - return 'beta'; - } - if (sinceMajor === latestMajor) { - if (sinceMinor > latestMinor) return 'beta'; - if (sinceMinor === latestMinor) return 'new'; - } - return 'current'; -}; - -const featureStatus = await getFeatureStatus(v); ---- - - - Added in - {pkg}@{v} - {featureStatus === 'new' && New} - {featureStatus === 'beta' && Beta} - diff --git a/examples/with-markdoc/src/content/blog/plain-md.md b/examples/with-markdoc/src/content/blog/plain-md.md deleted file mode 100644 index 4a75a9f4b..000000000 --- a/examples/with-markdoc/src/content/blog/plain-md.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Markdown ---- - -## Just markdown - -- working? -- yes. diff --git a/examples/with-markdoc/src/content/blog/test.mdoc b/examples/with-markdoc/src/content/blog/test.mdoc deleted file mode 100644 index 849e2f269..000000000 --- a/examples/with-markdoc/src/content/blog/test.mdoc +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Markdoc ---- - -# Markdoc h2 - -Look at this table! Built-in to Markdoc, neat. - -{% table %} -* Heading 1 -* Heading 2 ---- -* Row 1 Cell 1 -* Row 1 Cell 2 ---- -* Row 2 Cell 1 -* Row 2 cell 2 -{% /table %} - -{% if $shouldMarquee %} -{% mq direction="right" %} -Im a marquee! -{% /mq %} -{% /if %} - -{% link href=$href %}Link{% /link %} - -```js -const testing = true; -function further() { - console.log('still highlighted!') -} -``` - diff --git a/examples/with-markdoc/src/content/blog/with-mdx.mdx b/examples/with-markdoc/src/content/blog/with-mdx.mdx deleted file mode 100644 index d3c9d0169..000000000 --- a/examples/with-markdoc/src/content/blog/with-mdx.mdx +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: 'Example!' ---- - -# With MDX {frontmatter.title} diff --git a/examples/with-markdoc/src/content/config.ts b/examples/with-markdoc/src/content/config.ts index 26ce4c695..2eccab0a3 100644 --- a/examples/with-markdoc/src/content/config.ts +++ b/examples/with-markdoc/src/content/config.ts @@ -1,17 +1,9 @@ import { defineCollection, z } from 'astro:content'; -const blog = defineCollection({ - schema: z.object({ - title: z.string(), - }), -}); - const docs = defineCollection({ schema: z.object({ title: z.string(), - description: z.string(), - i18nReady: z.boolean(), }), }); -export const collections = { blog, docs }; +export const collections = { docs }; diff --git a/examples/with-markdoc/src/content/docs/content-collections.mdoc b/examples/with-markdoc/src/content/docs/content-collections.mdoc deleted file mode 100644 index d511f70e3..000000000 --- a/examples/with-markdoc/src/content/docs/content-collections.mdoc +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Content Collections -description: >- - Content collections help organize your Markdown and type-check your - frontmatter with schemas. -i18nReady: false ---- - -**Content collections** are the best way to work with Markdown and MDX in any Astro project. Content collections are a feature of Astro that help manage your content files in a project. Collections help to organize your content, validate your frontmatter, and provide automatic TypeScript type-safety for all of your content. - -## What are Content Collections? - -{% tabs client="load" /%} - -{% since v="2.0.0" /%} - -A **content collection** is any directory inside the reserved `src/content` project directory, such as `src/content/newsletter` and `src/content/blog`. Only content collections are allowed inside the `src/content` directory. This directory cannot be used for anything else. - -A **content entry** is any piece of content stored inside of your content collection directory. Content entries are stored as either Markdown (`.md`) or MDX (`.mdx`) files. You can use any filename you want, but we recommend using a consistent naming scheme (lower-case, dashes instead of spaces) to make it easier to find and organize your content. - -```sh -- src/content/ - - **newsletter/** the "newsletter" collection - - week-1.md a collection entry - - week-2.md a collection entry - - week-3.md a collection entry -``` - -Once you have a collection, you can start [querying your content](#querying-collections) using Astro's built-in content APIs. - -### The .astro Directory - -Astro stores important metadata for content collections in an `.astro` directory in your project. No action is needed on your part to maintain or update this directory. You are encouraged to ignore it entirely while working in your project. - -The `.astro` directory will be updated for you automatically anytime you run the [`astro dev`](/en/reference/cli-reference/#astro-dev), [`astro build`](/en/reference/cli-reference/#astro-build) commands. You can run [`astro sync`](/en/reference/cli-reference/#astro-sync) at any time to update the `.astro` directory manually. - -{% aside type="tip" %} -If you're using Git for version control, we recommend ignoring the `.astro` directory by adding `.astro` to your `.gitignore`. This tells Git to ignore this directory and any files inside of it. - -```bash -echo "\n.astro" >> .gitignore -``` -{% /aside %} diff --git a/examples/with-markdoc/src/content/docs/intro.mdoc b/examples/with-markdoc/src/content/docs/intro.mdoc new file mode 100644 index 000000000..1b7f27daa --- /dev/null +++ b/examples/with-markdoc/src/content/docs/intro.mdoc @@ -0,0 +1,39 @@ +--- +title: Welcome to Markdoc πŸ‘‹ +--- + +This simple starter showcases Markdoc with Content Collections. All Markdoc features are supported, including this nifty built-in `{% table %}` tag: + +{% table %} +* Feature +* Supported +--- +* `.mdoc` in Content Collections +* βœ… +--- +* Markdoc transform configuration +* βœ… +--- +* Astro components +* βœ… +{% /table %} + +{% aside title="Code Challenge" type="tip" %} + +Reveal the secret message below by adding `revealSecret: true` to your list of Markdoc variables. + +_Hint: Try [adding a `variables` object](https://markdoc.dev/docs/variables#global-variables) to the `config` property under `src/components/DocsContent.astro`._ + +{% if $revealSecret %} + +Maybe the real secret was the Rick Rolls we shared along the way. + +![Rick Astley dancing](https://media.tenor.com/x8v1oNUOmg4AAAAM/rickroll-roll.gif) + +{% /if %} + +{% /aside %} + +Check out [the `@astrojs/markdoc` integration][astro-markdoc] for complete documentation and usage examples. + +[astro-markdoc]: https://docs.astro.build/en/guides/integrations-guide/markdoc/ diff --git a/examples/with-markdoc/src/layouts/Layout.astro b/examples/with-markdoc/src/layouts/Layout.astro new file mode 100644 index 000000000..fa47dafce --- /dev/null +++ b/examples/with-markdoc/src/layouts/Layout.astro @@ -0,0 +1,35 @@ +--- +export interface Props { + title: string; +} + +const { title } = Astro.props; +--- + + + + + + + + + {title} + + + + + + diff --git a/examples/with-markdoc/src/markdoc.config.ts b/examples/with-markdoc/src/markdoc.config.ts deleted file mode 100644 index 2d6e3d6cb..000000000 --- a/examples/with-markdoc/src/markdoc.config.ts +++ /dev/null @@ -1,30 +0,0 @@ -export default { - transform: { - variables: { - shouldMarquee: true, - href: 'https://astro.build', - }, - tags: { - mq: { - render: 'marquee', - attributes: { - direction: { - type: String, - default: 'left', - matches: ['left', 'right', 'up', 'down'], - errorLevel: 'critical', - }, - }, - }, - link: { - render: 'a', - attributes: { - href: { - type: String, - required: true, - }, - }, - }, - }, - }, -}; diff --git a/examples/with-markdoc/src/pages/docs.astro b/examples/with-markdoc/src/pages/docs.astro deleted file mode 100644 index 9430e8a10..000000000 --- a/examples/with-markdoc/src/pages/docs.astro +++ /dev/null @@ -1,162 +0,0 @@ ---- -import { getCollection } from 'astro:content'; -import Aside from '../components/Aside.astro'; -import Since from '../components/Since.astro'; - -const docs = await getCollection('docs'); ---- - - - - - - - - Docs - - -
- { - docs.map(async (entry) => { - const { Content } = await entry.render(); - return ( - - ); - }) - } -
- - - - diff --git a/examples/with-markdoc/src/pages/index.astro b/examples/with-markdoc/src/pages/index.astro index 3a9ef6e83..1d4743ae5 100644 --- a/examples/with-markdoc/src/pages/index.astro +++ b/examples/with-markdoc/src/pages/index.astro @@ -1,60 +1,22 @@ --- -import { Markdoc } from '@astrojs/markdoc'; -import { Code } from 'astro/components'; -import Marquee from '../components/Marquee.astro'; -import { getCollection } from 'astro:content'; -import RedP from '../components/RedP.astro'; +import { getEntryBySlug } from 'astro:content'; +import DocsContent from '../components/DocsContent.astro'; +import Layout from '../layouts/Layout.astro'; -const entries = await getCollection('blog'); +const intro = await getEntryBySlug('docs', 'intro'); --- - - - - - - - Astro - - -

Astro

-
- { - entries.map(async (entry) => { - const { Content } = await entry.render(); - if (entry.id.endsWith('mdoc')) { - return ( - -

{entry.data.title}

- -
- - ); - } - return ( - <> -

{entry.data.title}

- -
- - ); - }) - } -
- - + +
+

{intro.data.title}

+ + + + + +
+ + +