summaryrefslogtreecommitdiff
path: root/examples/docs/src
diff options
context:
space:
mode:
Diffstat (limited to 'examples/docs/src')
-rw-r--r--examples/docs/src/components/ArticleFooter.astro15
-rw-r--r--examples/docs/src/components/AvatarList.astro74
-rw-r--r--examples/docs/src/components/DocSidebar.tsx61
-rw-r--r--examples/docs/src/components/EditOnGithub.tsx26
-rw-r--r--examples/docs/src/components/Note.astro49
-rw-r--r--examples/docs/src/components/SiteSidebar.astro20
-rw-r--r--examples/docs/src/components/ThemeToggle.tsx71
-rw-r--r--examples/docs/src/config.ts9
-rw-r--r--examples/docs/src/layouts/Main.astro228
-rw-r--r--examples/docs/src/pages/example.md35
-rw-r--r--examples/docs/src/pages/index.astro14
11 files changed, 602 insertions, 0 deletions
diff --git a/examples/docs/src/components/ArticleFooter.astro b/examples/docs/src/components/ArticleFooter.astro
new file mode 100644
index 000000000..8078e2cc3
--- /dev/null
+++ b/examples/docs/src/components/ArticleFooter.astro
@@ -0,0 +1,15 @@
+---
+import AvatarList from './AvatarList.astro';
+---
+
+<footer>
+ <AvatarList />
+</footer>
+
+<style>
+footer {
+ margin-top: auto;
+ padding: 2rem 0;
+ border-top: 3px solid var(--theme-divider);
+}
+</style>
diff --git a/examples/docs/src/components/AvatarList.astro b/examples/docs/src/components/AvatarList.astro
new file mode 100644
index 000000000..aafcb371b
--- /dev/null
+++ b/examples/docs/src/components/AvatarList.astro
@@ -0,0 +1,74 @@
+<!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
+
+<ul class="avatar-list">
+ <li><a href="https://smolcss.dev/#smol-avatar-list"><img alt="Avatar 1" width="64" height="64" src='https://avataaars.io/?avatarStyle=Transparent&topType=LongHairBun&accessoriesType=Blank&hairColor=Auburn&facialHairType=BeardMedium&facialHairColor=Auburn&clotheType=ShirtCrewNeck&clotheColor=Blue01&eyeType=Side&eyebrowType=RaisedExcitedNatural&mouthType=Serious&skinColor=Tanned' /></a></li>
+ <li><a href="https://smolcss.dev/#smol-avatar-list"><img alt="Avatar 2" width="64" height="64" src='https://avataaars.io/?avatarStyle=Transparent&topType=LongHairDreads&accessoriesType=Blank&hairColor=Brown&facialHairType=Blank&clotheType=ShirtScoopNeck&clotheColor=PastelGreen&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Smile&skinColor=Tanned' /></a></li>
+ <li><a href="https://smolcss.dev/#smol-avatar-list"><img alt="Avatar 3" width="64" height="64" src='https://avataaars.io/?avatarStyle=Transparent&topType=LongHairCurly&hairColor=BrownDark&facialHairType=Blank&clotheType=GraphicShirt&clotheColor=Pink&graphicType=Diamond&eyeType=Side&eyebrowType=Default&mouthType=Default&skinColor=Brown'/></a></li>
+</ul>
+
+<style>
+.avatar-list {
+ --avatar-size: 2.5rem;
+ --avatar-count: 3;
+
+ display: grid;
+ list-style: none;
+ /* Default to displaying most of the avatar to
+ enable easier access on touch devices, ensuring
+ the WCAG touch target size is met or exceeded */
+ grid-template-columns: repeat(
+ var(--avatar-count),
+ max(44px, calc(var(--avatar-size) / 1.15))
+ );
+ /* `padding` matches added visual dimensions of
+ the `box-shadow` to help create a more accurate
+ computed component size */
+ padding: 0.08em;
+ font-size: var(--avatar-size);
+}
+
+@media (any-hover: hover) and (any-pointer: fine) {
+ .avatar-list {
+ /* We create 1 extra cell to enable the computed
+ width to match the final visual width */
+ grid-template-columns: repeat(
+ calc(var(--avatar-count) + 1),
+ calc(var(--avatar-size) / 1.75)
+ );
+ }
+}
+
+.avatar-list li {
+ width: var(--avatar-size);
+ height: var(--avatar-size);
+}
+
+.avatar-list li:hover ~ li a,
+.avatar-list li:focus-within ~ li a {
+ transform: translateX(33%);
+}
+
+.avatar-list img,
+.avatar-list a {
+ display: block;
+ border-radius: 50%;
+}
+
+.avatar-list a {
+ transition: transform 180ms ease-in-out;
+}
+
+.avatar-list img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ background-color: #fff;
+ box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
+}
+
+.avatar-list a:focus {
+ outline: 2px solid transparent;
+ /* Double-layer trick to work for dark and light backgrounds */
+ box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
+}
+</style>
diff --git a/examples/docs/src/components/DocSidebar.tsx b/examples/docs/src/components/DocSidebar.tsx
new file mode 100644
index 000000000..076d460cc
--- /dev/null
+++ b/examples/docs/src/components/DocSidebar.tsx
@@ -0,0 +1,61 @@
+import type { FunctionalComponent } from 'preact';
+import { h } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import EditOnGithub from './EditOnGithub';
+
+const DocSidebar: FunctionalComponent<{ headers: any[]; editHref: string }> = ({ headers = [], editHref }) => {
+ const itemOffsets = useRef([]);
+ const [activeId, setActiveId] = useState<string>(undefined);
+
+ useEffect(() => {
+ const getItemOffsets = () => {
+ const titles = document.querySelectorAll('article :is(h2, h3, h4)');
+ itemOffsets.current = Array.from(titles).map((title) => ({
+ id: title.id,
+ topOffset: title.getBoundingClientRect().top + window.scrollY,
+ }));
+ };
+
+ const onScroll = () => {
+ const itemIndex = itemOffsets.current.findIndex((item) => item.topOffset > window.scrollY + window.innerHeight / 3);
+ if (itemIndex === 0) {
+ setActiveId(undefined);
+ } else if (itemIndex === -1) {
+ setActiveId(itemOffsets.current[itemOffsets.current.length - 1].id);
+ } else {
+ setActiveId(itemOffsets.current[itemIndex - 1].id);
+ }
+ };
+
+ getItemOffsets();
+ window.addEventListener('resize', getItemOffsets);
+ window.addEventListener('scroll', onScroll);
+
+ return () => {
+ window.removeEventListener('resize', getItemOffsets);
+ window.removeEventListener('scroll', onScroll);
+ };
+ }, []);
+
+ return (
+ <nav>
+ <div>
+ <h4>Contents</h4>
+ <ul>
+ {headers
+ .filter(({ depth }) => depth > 1 && depth < 5)
+ .map((header) => (
+ <li class={`header-link depth-${header.depth} ${activeId === header.slug ? 'active' : ''}`.trim()}>
+ <a href={`#${header.slug}`}>{header.text}</a>
+ </li>
+ ))}
+ </ul>
+ </div>
+ <div>
+ <EditOnGithub href={editHref} />
+ </div>
+ </nav>
+ );
+};
+
+export default DocSidebar;
diff --git a/examples/docs/src/components/EditOnGithub.tsx b/examples/docs/src/components/EditOnGithub.tsx
new file mode 100644
index 000000000..f7478934f
--- /dev/null
+++ b/examples/docs/src/components/EditOnGithub.tsx
@@ -0,0 +1,26 @@
+import type { FunctionalComponent } from 'preact';
+import { h } from 'preact';
+
+const EditOnGithub: FunctionalComponent<{ href: string }> = ({ href }) => {
+ return (
+ <a class="edit-on-github" href={href}>
+ <svg
+ preserveAspectRatio="xMidYMid meet"
+ height="1em"
+ width="1em"
+ fill="currentColor"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 438.549 438.549"
+ stroke="none"
+ class="icon-7f6730be--text-3f89f380"
+ >
+ <g>
+ <path d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 0 1-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path>
+ </g>
+ </svg>
+ <span>Edit on GitHub</span>
+ </a>
+ );
+};
+
+export default EditOnGithub;
diff --git a/examples/docs/src/components/Note.astro b/examples/docs/src/components/Note.astro
new file mode 100644
index 000000000..46940ddf8
--- /dev/null
+++ b/examples/docs/src/components/Note.astro
@@ -0,0 +1,49 @@
+---
+export let type = "tip";
+export let title;
+---
+
+<aside class={`note type-${type}`}>
+ {title && <label>{title}</label>}
+ <slot />
+</aside>
+
+<style>
+ .note {
+ --padding-block: 1rem;
+ --padding-inline: 1.25rem;
+
+ display: flex;
+ flex-direction: column;
+
+ padding: var(--padding-block) var(--padding-inline);
+ margin-left: calc(var(--padding-inline) * -1);
+ margin-right: calc(var(--padding-inline) * -1);
+
+ background: var(--theme-bg-offset);
+ border-left: calc(var(--padding-inline) / 2) solid var(--color);
+ border-radius: 0;
+ }
+
+ .note label {
+ font-weight: 500;
+ color: var(--color);
+ }
+
+ /* .note :global(a) {
+ color: var(--color);
+ } */
+
+ .note.type-tip {
+ --color: var(--color-green);
+ --color-rgb: var(--color-green-rgb);
+ }
+ .note.type-warning {
+ --color: var(--color-yellow);
+ --color-rgb: var(--color-yellow-rgb);
+ }
+ .note.type-error {
+ --color: var(--color-red);
+ --color-rgb: var(--color-red-rgb);
+ }
+</style>
diff --git a/examples/docs/src/components/SiteSidebar.astro b/examples/docs/src/components/SiteSidebar.astro
new file mode 100644
index 000000000..7279d9aea
--- /dev/null
+++ b/examples/docs/src/components/SiteSidebar.astro
@@ -0,0 +1,20 @@
+---
+import { sidebar } from '../config.ts';
+---
+
+<nav>
+ <ul class="nav-groups">
+ {sidebar.map(category => (
+ <li>
+ <div class="nav-group">
+ <h4 class="nav-group-title">{category.text}</h4>
+ <ul>
+ {category.children.map(child => (
+ <li class="nav-link"><a href={child.link}>{child.text}</a></li>
+ ))}
+ </ul>
+ </div>
+ </li>
+ ))}
+ </ul>
+</nav>
diff --git a/examples/docs/src/components/ThemeToggle.tsx b/examples/docs/src/components/ThemeToggle.tsx
new file mode 100644
index 000000000..5a5061c15
--- /dev/null
+++ b/examples/docs/src/components/ThemeToggle.tsx
@@ -0,0 +1,71 @@
+import type { FunctionalComponent } from 'preact';
+import { h, Fragment } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+
+const themes = ['system', 'light', 'dark'];
+
+const icons = [
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+ <path
+ fill-rule="evenodd"
+ d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z"
+ clip-rule="evenodd"
+ />
+ </svg>,
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+ <path
+ fillRule="evenodd"
+ d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+ clipRule="evenodd"
+ />
+ </svg>,
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+ <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+ </svg>,
+];
+
+const ThemeToggle: FunctionalComponent = () => {
+ const [theme, setTheme] = useState(themes[0]);
+
+ useEffect(() => {
+ const user = localStorage.getItem('theme');
+ if (!user) return;
+ setTheme(user);
+ }, []);
+
+ useEffect(() => {
+ const root = document.documentElement;
+ if (theme === 'system') {
+ localStorage.removeItem('theme');
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ root.classList.add('theme-dark');
+ } else {
+ root.classList.remove('theme-dark');
+ }
+ } else {
+ localStorage.setItem('theme', theme);
+ if (theme === 'light') {
+ root.classList.remove('theme-dark');
+ } else {
+ root.classList.add('theme-dark');
+ }
+ }
+ }, [theme]);
+
+ return (
+ <div id="theme-toggle">
+ {themes.map((t, i) => {
+ const icon = icons[i];
+ const checked = t === theme;
+ return (
+ <label className={checked ? 'checked' : ''}>
+ {icon}
+ <input type="radio" name="theme-toggle" checked={checked} value={t} title={`Use ${t} theme`} aria-label={`Use ${t} theme`} onChange={() => setTheme(t)} />
+ </label>
+ );
+ })}
+ </div>
+ );
+};
+
+export default ThemeToggle;
diff --git a/examples/docs/src/config.ts b/examples/docs/src/config.ts
new file mode 100644
index 000000000..6b6ce3fdc
--- /dev/null
+++ b/examples/docs/src/config.ts
@@ -0,0 +1,9 @@
+export const sidebar = [
+ {
+ text: 'Introduction',
+ children: [
+ { text: 'Welcome', link: '/' },
+ { text: 'Example', link: '/example' },
+ ],
+ },
+];
diff --git a/examples/docs/src/layouts/Main.astro b/examples/docs/src/layouts/Main.astro
new file mode 100644
index 000000000..b741098ef
--- /dev/null
+++ b/examples/docs/src/layouts/Main.astro
@@ -0,0 +1,228 @@
+---
+import ArticleFooter from '../components/ArticleFooter.astro';
+import SiteSidebar from '../components/SiteSidebar.astro';
+import ThemeToggle from '../components/ThemeToggle.tsx';
+import DocSidebar from '../components/DocSidebar.tsx';
+
+export let content;
+const headers = content?.astro?.headers;
+let editHref = Astro?.request?.url?.pathname?.slice(1) ?? '';
+if (editHref === '') editHref = `index`;
+editHref = `https://github.com/snowpackjs/astro/tree/main/examples/doc/src/pages/${editHref}.md`
+---
+
+<html>
+ <head>
+ <title>{content.title}</title>
+
+ <link rel="stylesheet" href="/index.css" />
+ <script src="/theme.js" />
+
+ <style>
+ body {
+ width: 100%;
+ display: grid;
+ grid-template-rows: 3.5rem 1fr;
+ --gutter: 0.5rem;
+ --doc-padding: 2rem;
+ }
+
+ header {
+ width: 100%;
+ height: 100%;
+ background-color: var(--theme-bg-offset);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .layout {
+ display: grid;
+ grid-auto-flow: column;
+ grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
+ gap: 1em;
+ }
+
+ .menu-and-logo {
+ gap: 1em;
+ }
+
+ nav.layout {
+ justify-content: center;
+ width: 100%;
+ }
+
+ nav.layout :global(> :nth-child(1)) {
+ grid-column: 2;
+ }
+
+ #site-title {
+ display: flex;
+ align-items: center;
+ gap: 0.25em;
+ font-size: 1.5rem;
+ font-weight: 700;
+ margin: 0;
+ line-height: 1;
+ color: var(--theme-text);
+ text-decoration: none;
+ }
+
+ #site-title:hover,
+ #site-title:focus {
+ color: var(--theme-text-light);
+ }
+
+ #site-title h1 {
+ font: inherit;
+ color: inherit;
+ margin: 0;
+ }
+
+ .nav-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ max-width: 64ch;
+ margin: 0 auto;
+ }
+
+ .layout :global(> *) {
+ width: 100%;
+ height: 100%;
+ }
+
+ .sidebar {
+ max-height: 100vh;
+ position: sticky;
+ top: 0;
+ padding: var(--doc-padding) 0;
+ }
+
+ #sidebar-nav {
+ display: none;
+ max-height: 100vh;
+ padding: var(--doc-padding) 0;
+ }
+
+ #article {
+ padding: var(--doc-padding) var(--gutter);
+ grid-column: 2;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height: 100%;
+ }
+
+ .content {
+ max-width: 64ch;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .content > main {
+ margin-bottom: 4rem;
+ }
+
+ #sidebar-content {
+ display: none;
+ }
+
+ @media (min-width: 64em) {
+ .menu-and-logo button {
+ display: none;
+ }
+ .layout {
+ grid-template-columns: 20rem minmax(0, 1fr);
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+ #article {
+ grid-column: 2;
+ }
+ #sidebar-nav {
+ display: flex;
+ }
+ #sidebar-content {
+ /* display: flex; */
+ grid-column: 3;
+ }
+
+ .nav-wrapper {
+ display: contents;
+ }
+ }
+
+ @media (min-width: 88em) {
+ .layout {
+ grid-template-columns: minmax(var(--gutter), 1fr) 20rem minmax(0, var(--max-width)) 16rem minmax(var(--gutter), 1fr);
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ #sidebar-nav,
+ .nav-wrapper :global(:nth-child(1)) {
+ grid-column: 2;
+ }
+ #article,
+ .nav-wrapper :global(:nth-child(2)) {
+ grid-column: 3;
+ }
+ #sidebar-content,
+ .nav-wrapper :global(:nth-child(3)) {
+ display: flex;
+ grid-column: 4;
+ }
+ }
+
+ </style>
+ </head>
+
+ <body>
+ <header>
+ <nav class="layout">
+ <div class="nav-wrapper">
+ <div class="menu-and-logo flex">
+ <button id="menu-toggle">
+ <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+ </svg>
+ </button>
+ <a id="site-title" href="/">
+ <svg width="1em" height="1em" viewBox="0 0 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M320 170C320 170 296.88 171.746 267.428 188.75C237.975 205.754 205.754 237.975 188.75 267.428C171.746 296.88 170 320 170 320C170 320 168.254 296.88 151.25 267.428C134.246 237.975 102.025 205.754 72.5721 188.75C43.1197 171.746 20 170 20 170C20 170 43.1197 168.254 72.5721 151.25C102.025 134.246 134.246 102.025 151.25 72.5721C168.254 43.1197 170 20 170 20C170 20 171.746 43.1197 188.75 72.5721C205.754 102.025 237.975 134.246 267.428 151.25C296.88 168.254 320 170 320 170Z" fill="currentColor"/>
+ </svg>
+ <h1>Astroid</h1>
+ </a>
+ </div>
+
+ <div />
+
+ <div>
+ <ThemeToggle:idle />
+ </div>
+ </div>
+ </nav>
+ </header>
+
+ <main class="layout">
+ <aside class="sidebar" id="sidebar-nav">
+ <SiteSidebar />
+ </aside>
+ <div id="article">
+ <article class="content">
+ <main>
+ <slot />
+ </main>
+ <ArticleFooter />
+ </article>
+ </div>
+ <aside class="sidebar" id="sidebar-content">
+ <DocSidebar:idle headers={headers} editHref={editHref} />
+ </aside>
+ </main>
+ </body>
+</html>
diff --git a/examples/docs/src/pages/example.md b/examples/docs/src/pages/example.md
new file mode 100644
index 000000000..0966595d8
--- /dev/null
+++ b/examples/docs/src/pages/example.md
@@ -0,0 +1,35 @@
+---
+layout: ../layouts/Main.astro
+---
+
+# Markdown example
+
+This is a fully-featured page, written in Markdown!
+
+## Section A
+
+Lorem ipsum dolor sit amet, **consectetur adipiscing elit**. Sed ut tortor _suscipit_, posuere ante id, vulputate urna. Pellentesque molestie aliquam dui sagittis aliquet. Sed sed felis convallis, lacinia lorem sit amet, fermentum ex. Etiam hendrerit mauris at elementum egestas. Vivamus id gravida ante. Praesent consectetur fermentum turpis, quis blandit tortor feugiat in. Aliquam erat volutpat. In elementum purus et tristique ornare. Suspendisse sollicitudin dignissim est a ultrices. Pellentesque sed ipsum finibus, condimentum metus eget, sagittis elit. Sed id lorem justo. Vivamus in sem ac mi molestie ornare.
+
+## Section B
+
+Nam quam dolor, pellentesque sed odio euismod, feugiat tempus tellus. Quisque arcu velit, ultricies in faucibus sed, ultrices ac enim. Nunc eget dictum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex nisi, egestas mollis ultricies ut, laoreet suscipit libero. Nam condimentum molestie turpis. Sed vestibulum sagittis congue. Maecenas tristique enim et tincidunt tempor. Curabitur ac scelerisque nulla, in malesuada libero. Praesent eu tempus odio. Pellentesque aliquam ullamcorper quam at gravida. Sed non fringilla mauris. Aenean sit amet ultrices erat. Vestibulum congue venenatis tortor, nec suscipit tortor. Aenean pellentesque mauris eget tortor tincidunt pharetra.
+
+## Section C
+
+```markdown
+---
+layout: ../layouts/Main.astro
+---
+
+# Markdown example
+
+This is a fully-featured page, written in Markdown!
+
+## Section A
+
+Lorem ipsum dolor sit amet, **consectetur adipiscing elit**. Sed ut tortor _suscipit_, posuere ante id, vulputate urna. Pellentesque molestie aliquam dui sagittis aliquet. Sed sed felis convallis, lacinia lorem sit amet, fermentum ex. Etiam hendrerit mauris at elementum egestas. Vivamus id gravida ante. Praesent consectetur fermentum turpis, quis blandit tortor feugiat in. Aliquam erat volutpat. In elementum purus et tristique ornare. Suspendisse sollicitudin dignissim est a ultrices. Pellentesque sed ipsum finibus, condimentum metus eget, sagittis elit. Sed id lorem justo. Vivamus in sem ac mi molestie ornare.
+
+## Section B
+
+Nam quam dolor, pellentesque sed odio euismod, feugiat tempus tellus. Quisque arcu velit, ultricies in faucibus sed, ultrices ac enim. Nunc eget dictum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex nisi, egestas mollis ultricies ut, laoreet suscipit libero. Nam condimentum molestie turpis. Sed vestibulum sagittis congue. Maecenas tristique enim et tincidunt tempor. Curabitur ac scelerisque nulla, in malesuada libero. Praesent eu tempus odio. Pellentesque aliquam ullamcorper quam at gravida. Sed non fringilla mauris. Aenean sit amet ultrices erat. Vestibulum congue venenatis tortor, nec suscipit tortor. Aenean pellentesque mauris eget tortor tincidunt pharetra.
+```
diff --git a/examples/docs/src/pages/index.astro b/examples/docs/src/pages/index.astro
new file mode 100644
index 000000000..75ca0da4f
--- /dev/null
+++ b/examples/docs/src/pages/index.astro
@@ -0,0 +1,14 @@
+---
+import { Markdown } from 'astro/components';
+import Layout from '../layouts/Main.astro';
+---
+
+<Layout content={{ title: 'Hello world!' }}>
+ <Markdown>
+ # Hello world!
+
+ This is a starter template, have fun building your next documentation site with [Astro](https://astro.build).
+
+ It offers the right mix of simple-to-use [Markdown pages](/example) and rich, interactive components embedded in `.astro` files using `<Markdown>`.
+ </Markdown>
+</Layout>
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-09 10:03:10 +0000