diff options
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/with-markdoc/.gitignore | 21 | ||||
| -rw-r--r-- | examples/with-markdoc/.vscode/extensions.json | 4 | ||||
| -rw-r--r-- | examples/with-markdoc/.vscode/launch.json | 11 | ||||
| -rw-r--r-- | examples/with-markdoc/README.md | 59 | ||||
| -rw-r--r-- | examples/with-markdoc/astro.config.mjs | 19 | ||||
| -rw-r--r-- | examples/with-markdoc/package.json | 17 | ||||
| -rw-r--r-- | examples/with-markdoc/public/favicon.svg | 13 | ||||
| -rw-r--r-- | examples/with-markdoc/sandbox.config.json | 11 | ||||
| -rw-r--r-- | examples/with-markdoc/src/components/Aside.astro | 116 | ||||
| -rw-r--r-- | examples/with-markdoc/src/components/DocsContent.astro | 32 | ||||
| -rw-r--r-- | examples/with-markdoc/src/content/config.ts | 9 | ||||
| -rw-r--r-- | examples/with-markdoc/src/content/docs/intro.mdoc | 39 | ||||
| -rw-r--r-- | examples/with-markdoc/src/env.d.ts | 2 | ||||
| -rw-r--r-- | examples/with-markdoc/src/layouts/Layout.astro | 35 | ||||
| -rw-r--r-- | examples/with-markdoc/src/pages/index.astro | 18 | ||||
| -rw-r--r-- | examples/with-markdoc/tsconfig.json | 6 |
16 files changed, 412 insertions, 0 deletions
diff --git a/examples/with-markdoc/.gitignore b/examples/with-markdoc/.gitignore new file mode 100644 index 000000000..6240da8b1 --- /dev/null +++ b/examples/with-markdoc/.gitignore @@ -0,0 +1,21 @@ +# build output +dist/ +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/with-markdoc/.vscode/extensions.json b/examples/with-markdoc/.vscode/extensions.json new file mode 100644 index 000000000..22a15055d --- /dev/null +++ b/examples/with-markdoc/.vscode/extensions.json @@ -0,0 +1,4 @@ +{ + "recommendations": ["astro-build.astro-vscode"], + "unwantedRecommendations": [] +} diff --git a/examples/with-markdoc/.vscode/launch.json b/examples/with-markdoc/.vscode/launch.json new file mode 100644 index 000000000..d64220976 --- /dev/null +++ b/examples/with-markdoc/.vscode/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "command": "./node_modules/.bin/astro dev", + "name": "Development server", + "request": "launch", + "type": "node-terminal" + } + ] +} diff --git a/examples/with-markdoc/README.md b/examples/with-markdoc/README.md new file mode 100644 index 000000000..62f7cbfc8 --- /dev/null +++ b/examples/with-markdoc/README.md @@ -0,0 +1,59 @@ +# Astro Example: Markdoc (experimental) + +This starter showcases the experimental Markdoc integration. + +``` +npm create astro@latest -- --template with-markdoc +``` + +[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-markdoc) +[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/with-markdoc) + +> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun! + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +``` +/ +├── public/ +├── src/ +│ └── content/ + └── docs/ +│ └── intro.mdoc +| └── config.ts +│ └── components/ +| ├── Aside.astro +│ └── DocsContent.astro +│ └── layouts/ +│ └── Layout.astro +│ └── pages/ +│ └── index.astro +| └── env.d.ts +├── astro.config.mjs +├── README.md +├── package.json +└── tsconfig.json +``` + +Markdoc (`.mdoc`) files can be used in content collections to author your Markdown content alongside Astro and server-rendered UI framework components (React, Vue, Svelte, and more). See `src/content/docs/` for an example file. + +You can also apply Astro components and server-rendered UI components (React, Vue, Svelte, etc) to your Markdoc files. See `src/content/DocsContent.astro` for an example. + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +| :--------------------- | :----------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:3000` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | +| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | +| `npm run astro --help` | Get help using the Astro CLI | + +## 👀 Want to learn more? + +Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). diff --git a/examples/with-markdoc/astro.config.mjs b/examples/with-markdoc/astro.config.mjs new file mode 100644 index 000000000..d88ed2098 --- /dev/null +++ b/examples/with-markdoc/astro.config.mjs @@ -0,0 +1,19 @@ +import { defineConfig } from 'astro/config'; +import markdoc from '@astrojs/markdoc'; + +// https://astro.build/config +export default defineConfig({ + integrations: [ + markdoc({ + tags: { + aside: { + render: 'Aside', + attributes: { + type: { type: String }, + title: { type: String }, + }, + }, + }, + }), + ], +}); diff --git a/examples/with-markdoc/package.json b/examples/with-markdoc/package.json new file mode 100644 index 000000000..694ad40ad --- /dev/null +++ b/examples/with-markdoc/package.json @@ -0,0 +1,17 @@ +{ + "name": "@example/with-markdoc", + "type": "module", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@astrojs/markdoc": "^0.0.0", + "astro": "^2.0.6" + } +} diff --git a/examples/with-markdoc/public/favicon.svg b/examples/with-markdoc/public/favicon.svg new file mode 100644 index 000000000..0f3906297 --- /dev/null +++ b/examples/with-markdoc/public/favicon.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36"> + <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/> + <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/> + <defs> + <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse"> + <stop stop-color="#000"/> + <stop offset="1" stop-color="#000" stop-opacity="0"/> + </linearGradient> + </defs> + <style> + @media (prefers-color-scheme:dark){:root{filter:invert(100%)}} + </style> +</svg> diff --git a/examples/with-markdoc/sandbox.config.json b/examples/with-markdoc/sandbox.config.json new file mode 100644 index 000000000..9178af77d --- /dev/null +++ b/examples/with-markdoc/sandbox.config.json @@ -0,0 +1,11 @@ +{ + "infiniteLoopProtection": true, + "hardReloadOnChange": false, + "view": "browser", + "template": "node", + "container": { + "port": 3000, + "startScript": "start", + "node": "14" + } +} diff --git a/examples/with-markdoc/src/components/Aside.astro b/examples/with-markdoc/src/components/Aside.astro new file mode 100644 index 000000000..5d92a0993 --- /dev/null +++ b/examples/with-markdoc/src/components/Aside.astro @@ -0,0 +1,116 @@ +--- +// Inspired by the `Aside` component from docs.astro.build +// https://github.com/withastro/docs/blob/main/src/components/Aside.astro + +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/examples/with-markdoc/src/components/DocsContent.astro b/examples/with-markdoc/src/components/DocsContent.astro new file mode 100644 index 000000000..162c1fc6d --- /dev/null +++ b/examples/with-markdoc/src/components/DocsContent.astro @@ -0,0 +1,32 @@ +--- +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(); +--- + +<Content + components={{ + // Pass a mapping from the component name + // To an Astro or UI component import + // See your `astro.config.mjs` for + // for the Markdoc tag mapping + Aside, + }} +/> + +<style is:global> + table { + margin-block: 2rem; + margin-inline: auto; + } + table td { + padding-block: 0.3rem; + padding-inline: 0.5rem; + } +</style> diff --git a/examples/with-markdoc/src/content/config.ts b/examples/with-markdoc/src/content/config.ts new file mode 100644 index 000000000..2eccab0a3 --- /dev/null +++ b/examples/with-markdoc/src/content/config.ts @@ -0,0 +1,9 @@ +import { defineCollection, z } from 'astro:content'; + +const docs = defineCollection({ + schema: z.object({ + title: z.string(), + }), +}); + +export const collections = { docs }; 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..da987d9ec --- /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 your Markdoc config. Check the `astro.config.mjs`._ + +{% if $revealSecret %} + +Maybe the real secret was the Rick Rolls we shared along the way. + + + +{% /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/env.d.ts b/examples/with-markdoc/src/env.d.ts new file mode 100644 index 000000000..acef35f17 --- /dev/null +++ b/examples/with-markdoc/src/env.d.ts @@ -0,0 +1,2 @@ +/// <reference path="../.astro/types.d.ts" /> +/// <reference types="astro/client" /> 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; +--- + +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <meta name="generator" content={Astro.generator} /> + <title>{title}</title> + </head> + <body> + <slot /> + </body> +</html> +<style is:global> + html { + font-family: system-ui, sans-serif; + background-color: #f6f6f6; + } + code { + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace; + } + main { + margin: auto; + max-width: 60ch; + } +</style> diff --git a/examples/with-markdoc/src/pages/index.astro b/examples/with-markdoc/src/pages/index.astro new file mode 100644 index 000000000..01412cce1 --- /dev/null +++ b/examples/with-markdoc/src/pages/index.astro @@ -0,0 +1,18 @@ +--- +import { getEntryBySlug } from 'astro:content'; +import DocsContent from '../components/DocsContent.astro'; +import Layout from '../layouts/Layout.astro'; + +const intro = await getEntryBySlug('docs', 'intro'); +--- + +<Layout title={intro.data.title}> + <main> + <h1>{intro.data.title}</h1> + <!-- `DocsContent` is a thin wrapper around --> + <!-- the `Content` component provided by Content Collections, --> + <!-- with added configuration for components. --> + <!-- This allows you to share global components wherever you render your Markdoc. --> + <DocsContent entry={intro} /> + </main> +</Layout> diff --git a/examples/with-markdoc/tsconfig.json b/examples/with-markdoc/tsconfig.json new file mode 100644 index 000000000..e51e06270 --- /dev/null +++ b/examples/with-markdoc/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "astro/tsconfigs/base", + "compilerOptions": { + "strictNullChecks": true + } +} |
