chore: clean up Markdoc starter to essentials
This commit is contained in:
bholmesdev
parent
8e3f4ca430
commit
a19c774a1f
16 changed files with 147 additions and 462 deletions
|
|
@ -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<NonNullable<Props['type']>, { 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;
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
---
|
||||
export interface Props {
|
||||
variant?: 'neutral' | 'accent';
|
||||
}
|
||||
const { variant = 'neutral' } = Astro.props as Props;
|
||||
---
|
||||
|
||||
<span class={`badge ${variant}`}><slot /></span>
|
||||
|
||||
<style>
|
||||
.badge {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
border: 1px solid;
|
||||
line-height: 1;
|
||||
padding: 0.25em 0.5em;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1ch;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.neutral {
|
||||
border-color: var(--theme-dim);
|
||||
color: var(--theme-text-light);
|
||||
background-color: var(--theme-dim-lighter);
|
||||
}
|
||||
|
||||
.accent {
|
||||
border-color: var(--theme-accent);
|
||||
color: var(--theme-text-accent);
|
||||
background-color: var(--theme-bg-accent);
|
||||
}
|
||||
</style>
|
||||
43
examples/with-markdoc/src/components/DocsContent.astro
Normal file
43
examples/with-markdoc/src/components/DocsContent.astro
Normal file
|
|
@ -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();
|
||||
---
|
||||
|
||||
<Content
|
||||
config={{
|
||||
// Accepts all Markdoc configuration options
|
||||
// See https://markdoc.dev/docs/config#full-example
|
||||
tags: {
|
||||
aside: {
|
||||
render: 'Aside',
|
||||
attributes: {
|
||||
type: { type: String },
|
||||
title: { type: String },
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
components={{
|
||||
// Pass a mapping from the component name
|
||||
// To an Astro or UI component import
|
||||
Aside,
|
||||
}}
|
||||
/>
|
||||
|
||||
<style is:global>
|
||||
table {
|
||||
margin-block: 2rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
table td {
|
||||
padding-block: 0.3rem;
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<marquee {...Astro.props}><slot /></marquee>
|
||||
|
||||
<style>
|
||||
marquee {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<p><slot /></p>
|
||||
|
||||
<style>
|
||||
p {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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);
|
||||
---
|
||||
|
||||
<span>
|
||||
<strong>Added in</strong>
|
||||
<code>{pkg}@{v}</code>
|
||||
{featureStatus === 'new' && <Badge variant="accent">New</Badge>}
|
||||
{featureStatus === 'beta' && <Badge variant="accent">Beta</Badge>}
|
||||
</span>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
title: Markdown
|
||||
---
|
||||
|
||||
## Just markdown
|
||||
|
||||
- working?
|
||||
- yes.
|
||||
|
|
@ -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!')
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
title: 'Example!'
|
||||
---
|
||||
|
||||
# With MDX {frontmatter.title}
|
||||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
39
examples/with-markdoc/src/content/docs/intro.mdoc
Normal file
39
examples/with-markdoc/src/content/docs/intro.mdoc
Normal file
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
{% /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/
|
||||
35
examples/with-markdoc/src/layouts/Layout.astro
Normal file
35
examples/with-markdoc/src/layouts/Layout.astro
Normal file
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -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');
|
||||
---
|
||||
|
||||
<!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>Docs</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
{
|
||||
docs.map(async (entry) => {
|
||||
const { Content } = await entry.render();
|
||||
return (
|
||||
<Content
|
||||
config={{
|
||||
tags: {
|
||||
aside: {
|
||||
render: 'Aside',
|
||||
attributes: {
|
||||
type: { type: String },
|
||||
title: { type: String },
|
||||
},
|
||||
},
|
||||
since: {
|
||||
render: 'Since',
|
||||
attributes: {
|
||||
v: { type: String },
|
||||
pkg: { type: String },
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
components={{ Aside, Since }}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</main>
|
||||
</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;
|
||||
}
|
||||
|
||||
/*Copied from docs.astro*/
|
||||
|
||||
:root {
|
||||
/*
|
||||
Variables with --color-base prefix define
|
||||
the hue, and saturation values to be used for
|
||||
hsla colors.
|
||||
|
||||
Example:
|
||||
--color-base-{color}: {hue}, {saturation};
|
||||
*/
|
||||
|
||||
--color-base-white: 0, 0%;
|
||||
--color-base-black: 240, 100%;
|
||||
--color-base-gray: 250, 14%;
|
||||
--color-base-blue: 212, 100%;
|
||||
--color-base-blue-dark: 212, 72%;
|
||||
--color-base-teal: 180, 80%;
|
||||
--color-base-green: 158, 79%;
|
||||
--color-base-orange: 22, 100%;
|
||||
--color-base-purple: 269, 79%;
|
||||
--color-base-red: 351, 100%;
|
||||
--color-base-yellow: 41, 100%;
|
||||
|
||||
/*
|
||||
Color palettes are made using --color-base
|
||||
variables, along with a lightness value to
|
||||
define different variants.
|
||||
*/
|
||||
|
||||
--color-gray-5: var(--color-base-gray), 5%;
|
||||
--color-gray-10: var(--color-base-gray), 10%;
|
||||
--color-gray-20: var(--color-base-gray), 20%;
|
||||
--color-gray-30: var(--color-base-gray), 30%;
|
||||
--color-gray-40: var(--color-base-gray), 40%;
|
||||
--color-gray-50: var(--color-base-gray), 50%;
|
||||
--color-gray-60: var(--color-base-gray), 60%;
|
||||
--color-gray-70: var(--color-base-gray), 70%;
|
||||
--color-gray-80: var(--color-base-gray), 80%;
|
||||
--color-gray-90: var(--color-base-gray), 90%;
|
||||
--color-gray-95: var(--color-base-gray), 95%;
|
||||
|
||||
--color-blue: var(--color-base-blue), 61%;
|
||||
--color-blue-dark: var(--color-base-blue-dark), 39%;
|
||||
--color-green: var(--color-base-green), 42%;
|
||||
--color-orange: var(--color-base-orange), 50%;
|
||||
--color-purple: var(--color-base-purple), 54%;
|
||||
--color-red: var(--color-base-red), 54%;
|
||||
--color-yellow: var(--color-base-yellow), 59%;
|
||||
|
||||
color-scheme: light;
|
||||
--theme-accent: hsla(var(--color-orange), 1);
|
||||
--theme-accent-secondary: hsl(324, 75%, 38%);
|
||||
--theme-dim: hsla(var(--color-gray-70), 1);
|
||||
--theme-dim-light: hsla(var(--color-gray-80), 1);
|
||||
--theme-dim-lighter: hsla(var(--color-gray-90), 1);
|
||||
--theme-accent-opacity: 0.1;
|
||||
--theme-divider: hsla(var(--color-purple), 0.1);
|
||||
--theme-shade-subtle: hsla(var(--color-purple), 0.3);
|
||||
--theme-text: hsla(var(--color-gray-10), 1);
|
||||
--theme-text-light: hsla(var(--color-gray-30), 1);
|
||||
--theme-text-lighter: hsla(var(--color-gray-40), 1);
|
||||
--theme-bg: hsl(273, 37%, 93%);
|
||||
--theme-bg-gradient-top: var(--theme-bg);
|
||||
--theme-bg-gradient-bottom: #fdfeff;
|
||||
--theme-bg-hover: hsla(var(--color-purple), 0.075);
|
||||
--theme-bg-offset: hsla(var(--color-purple), 0.1);
|
||||
--theme-bg-accent: hsla(var(--color-purple), var(--theme-accent-opacity));
|
||||
--theme-code-inline-bg: hsla(var(--color-purple), 0.1);
|
||||
--theme-code-inline-text: var(--theme-text);
|
||||
--theme-code-bg: hsla(257, 31%, 22%, 1);
|
||||
--theme-code-tabs: hsla(257, 38%, 32%, 1);
|
||||
--theme-code-text: hsla(var(--color-gray-95), 1);
|
||||
--theme-navbar-bg: var(--theme-bg);
|
||||
--theme-selection-color: hsla(var(--color-purple), 1);
|
||||
--theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity));
|
||||
--theme-code-selection-bg: hsla(var(--color-purple), 0.4);
|
||||
--theme-code-mark-bg: hsl(226, 50%, 33%);
|
||||
--theme-code-mark-border: hsl(224, 50%, 54%);
|
||||
--theme-code-ins-bg: hsl(122, 22%, 23%);
|
||||
--theme-code-ins-border: hsl(128, 42%, 38%);
|
||||
--theme-code-ins-text: hsl(128, 31%, 65%);
|
||||
--theme-code-del-bg: hsl(338, 40%, 26%);
|
||||
--theme-code-del-border: hsl(338, 46%, 53%);
|
||||
--theme-code-del-text: hsl(338, 36%, 70%);
|
||||
|
||||
--theme-bg-gradient: linear-gradient(
|
||||
180deg,
|
||||
var(--theme-bg-gradient-top),
|
||||
var(--theme-bg-gradient-top) calc(var(--theme-navbar-height) + var(--theme-mobile-toc-height)),
|
||||
var(--theme-bg-gradient-bottom)
|
||||
);
|
||||
|
||||
--theme-glow-highlight: transparent;
|
||||
--theme-glow-diffuse: hsla(var(--color-base-purple), 65%, 0.5);
|
||||
--theme-glow-blur: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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');
|
||||
---
|
||||
|
||||
<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>
|
||||
<h1>Astro</h1>
|
||||
<article>
|
||||
{
|
||||
entries.map(async (entry) => {
|
||||
const { Content } = await entry.render();
|
||||
if (entry.id.endsWith('mdoc')) {
|
||||
return (
|
||||
<Fragment>
|
||||
<h1>{entry.data.title}</h1>
|
||||
<Content
|
||||
components={{
|
||||
marquee: Marquee,
|
||||
p: RedP,
|
||||
pre: {
|
||||
component: Code,
|
||||
props({ attributes, getTreeNode }) {
|
||||
return {
|
||||
...attributes,
|
||||
lang: attributes.lang ?? attributes['data-language'],
|
||||
code: attributes.code ?? Markdoc.renderers.html(getTreeNode().children),
|
||||
};
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<hr />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<h1>{entry.data.title}</h1>
|
||||
<Content />
|
||||
<hr />
|
||||
</>
|
||||
);
|
||||
})
|
||||
}
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
<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 Markdoc configuration and component mapping. -->
|
||||
<!-- This allows you to share config wherever you render your Markdoc files. -->
|
||||
<DocsContent entry={intro} />
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style is:global>
|
||||
/*Copied from docs.astro*/
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue