mirror of
https://github.com/withastro/astro.git
synced 2025-04-07 23:41:43 -05:00
wip: add docs example
This commit is contained in:
Nate Moore
parent
d8a78298f3
commit
f329001af0
18 changed files with 1031 additions and 0 deletions
2
examples/doc/.vscode/settings.json
vendored
Normal file
2
examples/doc/.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
{
|
||||
}
|
||||
5
examples/doc/astro.config.mjs
Normal file
5
examples/doc/astro.config.mjs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export default {
|
||||
extensions: {
|
||||
'.tsx': 'preact'
|
||||
}
|
||||
};
|
||||
17
examples/doc/package.json
Normal file
17
examples/doc/package.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "@example/doc",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"astro-dev": "nodemon --delay 0.5 -w ../../packages/astro/dist -x '../../packages/astro/astro.mjs dev'"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^0.10.0",
|
||||
"nodemon": "^2.0.7"
|
||||
},
|
||||
"snowpack": {
|
||||
"workspaceRoot": "../.."
|
||||
}
|
||||
}
|
||||
11
examples/doc/public/favicon.svg
Normal file
11
examples/doc/public/favicon.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
#flame { fill: #FF5D01; }
|
||||
#a { fill: #000014; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#a { fill: #fff; }
|
||||
}
|
||||
</style>
|
||||
<path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
|
||||
<path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
|
||||
</svg>
|
||||
|
After 
(image error) Size: 1.2 KiB |
274
examples/doc/public/index.css
Normal file
274
examples/doc/public/index.css
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
@import './theme';
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--user-font-scale: 1rem - 16px;
|
||||
--max-width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
:root {
|
||||
--max-width: 48em;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content main > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
:is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-bottom: 1.38rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
:is(h1, h2) {
|
||||
max-width: 40ch;
|
||||
}
|
||||
|
||||
:is(h2, h3):not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.488rem, 1.9240rem + 1.4100vw, 3.052rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(2.074rem, 1.7070rem + 0.9175vw, 2.441rem);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.728rem, 1.5030rem + 0.5625vw, 1.953rem);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: clamp(1.44rem, 1.3170rem + 0.3075vw, 1.563rem);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: clamp(1.2rem, 1.1500rem + 0.1250vw, 1.25rem);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--theme-text-light);
|
||||
}
|
||||
|
||||
small, .text_small {
|
||||
font-size: 0.833rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--theme-accent);
|
||||
font-weight: 400;
|
||||
text-underline-offset: 0.08em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a > code:not([class*="language"]) {
|
||||
position: relative;
|
||||
color: var(--theme-accent);
|
||||
background: transparent;
|
||||
text-underline-offset: var(--padding-block);
|
||||
}
|
||||
|
||||
a > code:not([class*="language"])::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
background: var(--theme-accent);
|
||||
opacity: var(--theme-accent-opacity);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 0.25em;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Supporting Content */
|
||||
|
||||
code:not([class*="language"]) {
|
||||
--border-radius: 3px;
|
||||
--padding-block: 0.2rem;
|
||||
--padding-inline: 0.33rem;
|
||||
|
||||
font-family: var(--font-mono);
|
||||
font-size: .85em;
|
||||
color: inherit;
|
||||
background-color: var(--theme-code-inline-bg);
|
||||
padding: var(--padding-block) var(--padding-inline);
|
||||
margin: calc(var(--padding-block) * -1) -0.125em;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
pre > code:not([class*="language"]) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
pre {
|
||||
position: relative;
|
||||
background-color: var(--theme-code-bg);
|
||||
color: var(--theme-code-text);
|
||||
--padding-block: 1rem;
|
||||
--padding-inline: 1.25rem;
|
||||
padding: var(--padding-block) var(--padding-inline);
|
||||
padding-right: calc(var(--padding-inline) * 2);
|
||||
margin-left: calc(var(--padding-inline) * -1);
|
||||
margin-right: calc(var(--padding-inline) * -1);
|
||||
line-height: 1.414;
|
||||
overflow-x: auto;
|
||||
max-width: 100vw;
|
||||
}
|
||||
pre::before,
|
||||
pre::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: var(--padding-inline);
|
||||
background: red;
|
||||
}
|
||||
pre::before {
|
||||
left: 0;
|
||||
}
|
||||
pre::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 37.75em) {
|
||||
pre {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 2rem 0;
|
||||
padding: 0.5em 1rem;
|
||||
border-left: 3px solid rgba(0, 0, 0, 0.35);
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 0 0.25rem 0.25rem 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header button {
|
||||
background-color: var(--theme-bg);
|
||||
}
|
||||
header button:hover,
|
||||
header button:focus {
|
||||
background: var(--theme-text);
|
||||
color: var(--theme-bg);
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
gap: 0.25em;
|
||||
padding: 0.33em 0.67em;
|
||||
border: 0;
|
||||
background: var(--theme-bg);
|
||||
display: flex;
|
||||
font-size: 1rem;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
border-radius: 99em;
|
||||
background-color: var(--theme-bg);
|
||||
}
|
||||
button:hover {
|
||||
|
||||
}
|
||||
|
||||
#theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
padding: 0.33em 0.67em;
|
||||
margin-left: -0.67em;
|
||||
margin-right: -0.67em;
|
||||
border-radius: 99em;
|
||||
background-color: var(--theme-bg);
|
||||
}
|
||||
#theme-toggle:focus-within {
|
||||
outline: 2px solid transparent;
|
||||
box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
|
||||
}
|
||||
|
||||
#theme-toggle > label {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
opacity: 0.5;
|
||||
transition: transform 120ms ease-out, opacity 120ms ease-out;
|
||||
}
|
||||
|
||||
#theme-toggle > label:hover,
|
||||
#theme-toggle > label:focus {
|
||||
transform: scale(1.125);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#theme-toggle .checked {
|
||||
color: var(--theme-accent);
|
||||
transform: scale(1.125);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input[name="theme-toggle"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
72
examples/doc/public/theme.css
Normal file
72
examples/doc/public/theme.css
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
:root {
|
||||
--font-body: system-ui;
|
||||
--font-mono: source-code-pro,Menlo,Monaco,Consolas,'Courier New',monospace;
|
||||
|
||||
--color-white: #FFF;
|
||||
--color-black: #000014;
|
||||
|
||||
--color-gray-50: #F9FAFB;
|
||||
--color-gray-100: #F3F4F6;
|
||||
--color-gray-200: #E5E7EB;
|
||||
--color-gray-300: #D1D5DB;
|
||||
--color-gray-400: #9CA3AF;
|
||||
--color-gray-500: #6B7280;
|
||||
--color-gray-600: #4B5563;
|
||||
--color-gray-700: #374151;
|
||||
--color-gray-800: #1F2937;
|
||||
--color-gray-900: #111827;
|
||||
|
||||
--color-blue: #3894FF;
|
||||
--color-blue-rgb: 56,148,255;
|
||||
--color-green: #17C083;
|
||||
--color-green-rgb: 23,192,131;
|
||||
--color-orange: #FF5D01;
|
||||
--color-orange-rgb: 255,93,1;
|
||||
--color-purple: #882DE7;
|
||||
--color-purple-rgb: 136,45,231;
|
||||
--color-red: #FF1639;
|
||||
--color-red-rgb: 255,22,57;
|
||||
--color-yellow: #FFBE2D;
|
||||
--color-yellow-rgb: 255,190,45;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--theme-accent: var(--color-blue);
|
||||
--theme-accent-rgb: var(--color-blue-rgb);
|
||||
--theme-accent-opacity: 0.1;
|
||||
--theme-divider: var(--color-gray-100);
|
||||
--theme-text: var(--color-gray-800);
|
||||
--theme-text-light: var(--color-gray-600);
|
||||
--theme-text-lighter: var(--color-gray-400);
|
||||
--theme-bg: var(--color-white);
|
||||
--theme-bg-offset: var(--color-gray-100);
|
||||
--theme-bg-accent: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
|
||||
--theme-code-inline-bg: var(--color-gray-100);
|
||||
--theme-code-text: var(--color-gray-100);
|
||||
--theme-code-bg: var(--color-gray-700);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--theme-bg);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
:root.theme-dark {
|
||||
color-scheme: dark;
|
||||
--theme-accent-opacity: 0.3;
|
||||
--theme-divider: var(--color-gray-900);
|
||||
--theme-text: var(--color-gray-200);
|
||||
--theme-text-light: var(--color-gray-400);
|
||||
--theme-text-lighter: var(--color-gray-600);
|
||||
--theme-bg: var(--color-black);
|
||||
--theme-bg-offset: var(--color-gray-900);
|
||||
--theme-code-inline-bg: var(--color-gray-800);
|
||||
--theme-code-text: var(--color-gray-200);
|
||||
--theme-code-bg: var(--color-gray-900);
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--theme-accent);
|
||||
background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
|
||||
}
|
||||
8
examples/doc/public/theme.js
Normal file
8
examples/doc/public/theme.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
(() => {
|
||||
const root = document.documentElement;
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
root.classList.add('theme-dark')
|
||||
} else {
|
||||
root.classList.remove('theme-dark')
|
||||
}
|
||||
})()
|
||||
15
examples/doc/src/components/ArticleFooter.astro
Normal file
15
examples/doc/src/components/ArticleFooter.astro
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
import AvatarList from './AvatarList.astro';
|
||||
---
|
||||
|
||||
<footer>
|
||||
<AvatarList />
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
margin-top: 4rem;
|
||||
padding: 2rem 0;
|
||||
border-top: 3px solid var(--theme-divider);
|
||||
}
|
||||
</style>
|
||||
72
examples/doc/src/components/AvatarList.astro
Normal file
72
examples/doc/src/components/AvatarList.astro
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<ul class="avatar-list">
|
||||
<li><a href="#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="#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="#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>
|
||||
10
examples/doc/src/components/CodeBlock.tsx
Normal file
10
examples/doc/src/components/CodeBlock.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import type { FunctionalComponent } from 'preact';
|
||||
import { h, Fragment } from 'preact';
|
||||
|
||||
const CodeBlock: FunctionalComponent = ({ children }) => {
|
||||
return <div className="code-block">
|
||||
{children}
|
||||
</div>
|
||||
}
|
||||
|
||||
export default CodeBlock;
|
||||
13
examples/doc/src/components/DocSidebar.astro
Normal file
13
examples/doc/src/components/DocSidebar.astro
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
import EditOnGithub from './EditOnGithub.astro';
|
||||
---
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li>Contents</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><EditOnGithub /></li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
16
examples/doc/src/components/EditOnGithub.astro
Normal file
16
examples/doc/src/components/EditOnGithub.astro
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
export let href: string;
|
||||
---
|
||||
|
||||
<a 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>
|
||||
|
||||
<style>
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
49
examples/doc/src/components/Note.astro
Normal file
49
examples/doc/src/components/Note.astro
Normal file
|
|
@ -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>
|
||||
21
examples/doc/src/components/SiteSidebar.astro
Normal file
21
examples/doc/src/components/SiteSidebar.astro
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
import { sidebar } from '../config.ts';
|
||||
---
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
{sidebar.map(category => ([
|
||||
<li>
|
||||
<h3>{category.text}</h3>
|
||||
</li>,
|
||||
<li>
|
||||
<ul>
|
||||
{category.children.map(child => (
|
||||
<li><a href={child.link}>{child.text}</a></li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
]
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
65
examples/doc/src/components/ThemeToggle.tsx
Normal file
65
examples/doc/src/components/ThemeToggle.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
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;
|
||||
27
examples/doc/src/config.ts
Normal file
27
examples/doc/src/config.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
export const sidebar = [
|
||||
{
|
||||
text: 'Introduction',
|
||||
children: [
|
||||
{ text: 'What is Astro?', link: '/' },
|
||||
{ text: 'Getting Started', link: '/guide/getting-started' },
|
||||
{ text: 'Configuration', link: '/guide/configuration' },
|
||||
{ text: 'Asset Handling', link: '/guide/assets' },
|
||||
{ text: 'Markdown Extensions', link: '/guide/markdown' },
|
||||
{ text: 'Using Vue in Markdown', link: '/guide/using-vue' },
|
||||
{ text: 'Deploying', link: '/guide/deploy' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Advanced',
|
||||
children: [
|
||||
{ text: 'Frontmatter', link: '/guide/frontmatter' },
|
||||
{ text: 'Global Computed', link: '/guide/global-computed' },
|
||||
{ text: 'Global Component', link: '/guide/global-component' },
|
||||
{ text: 'Customization', link: '/guide/customization' },
|
||||
{
|
||||
text: 'Differences from Vuepress',
|
||||
link: '/guide/differences-from-vuepress'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
217
examples/doc/src/layouts/Main.astro
Normal file
217
examples/doc/src/layouts/Main.astro
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
---
|
||||
import ArticleFooter from '../components/ArticleFooter.astro';
|
||||
import SiteSidebar from '../components/SiteSidebar.astro';
|
||||
import DocSidebar from '../components/DocSidebar.astro';
|
||||
import ThemeToggle from '../components/ThemeToggle.tsx';
|
||||
|
||||
export let content;
|
||||
---
|
||||
|
||||
<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: fit-content;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 64ch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#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)) 12rem 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 />
|
||||
</aside>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
137
examples/doc/src/pages/index.astro
Normal file
137
examples/doc/src/pages/index.astro
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
---
|
||||
import Markdown from 'astro/components/Markdown.astro';
|
||||
import Prism from 'astro/components/Prism.astro';
|
||||
|
||||
import Layout from '../layouts/Main.astro';
|
||||
import Note from '../components/Note.astro';
|
||||
import CodeBlock from '../components/CodeBlock.tsx';
|
||||
---
|
||||
|
||||
<Layout content={{ title: 'Algolia' }}>
|
||||
<Markdown>
|
||||
# ✍️ Markdown
|
||||
|
||||
Astro comes with out-of-the-box Markdown support powered by the expansive [**remark**](https://github.com/remarkjs/remark) ecosystem.
|
||||
|
||||
## Remark Plugins
|
||||
|
||||
**This is the first draft of Markdown support!** While we plan to support user-provided `remark` plugins soon, our hope is that you won't need `remark` plugins at all!
|
||||
|
||||
In addition to [custom components inside the `<Markdown>` component](#markdown-component), Astro comes with [GitHub-flavored Markdown](https://github.github.com/gfm/) support, [Footnotes](https://github.com/remarkjs/remark-footnotes) syntax, [Smartypants](https://github.com/silvenon/remark-smartypants), and syntax highlighting via [Prism](https://prismjs.com/) pre-enabled. These features are likely to be configurable in the future.
|
||||
|
||||
### Markdown Pages
|
||||
|
||||
Astro treats any `.md` files inside of the `/src/pages` directory as pages. These pages are processed as plain Markdown files and do not support components. If you're looking to embed rich components in your Markdown, take a look at the [Markdown Component](#markdown-component) section.
|
||||
|
||||
#### `layout`
|
||||
|
||||
The only special Frontmatter key is `layout`, which defines the relative path to a `.astro` component which should wrap your Markdown content.
|
||||
|
||||
`src/pages/index.md`
|
||||
|
||||
```md
|
||||
---
|
||||
layout: ../layouts/main.astro
|
||||
---
|
||||
|
||||
# Hello world!
|
||||
```
|
||||
|
||||
Layout files are normal `.astro` components. Any Frontmatter defined in your `.md` page will be exposed to the Layout component as the `content` prop. `content` also has an `astro` key which holds special metadata about your file, like the complete Markdown `source` and a `headings` object.
|
||||
|
||||
The rendered Markdown content is placed into the default `<slot />` element.
|
||||
|
||||
`src/layouts/main.astro`
|
||||
|
||||
<!-- <Prism> -->
|
||||
```jsx
|
||||
---
|
||||
export let content;
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>{content.title}</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<slot/>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
<!-- </Prism> -->
|
||||
|
||||
### Markdown Component
|
||||
|
||||
Similar to tools like [MDX](https://mdxjs.com/) or [MDsveX](https://github.com/pngwn/MDsveX), Astro makes it straightforward to embed rich, interactive components inside of your Markdown content. The `<Markdown>` component is statically rendered, so it does not add any runtime overhead.
|
||||
|
||||
Astro exposes a special `Markdown` component for `.astro` files which enables markdown syntax for its children **recursively**. Within the `Markdown` component you may also use plain HTML or any other type of component that is supported by Astro.
|
||||
|
||||
````jsx
|
||||
---
|
||||
// For now, this import _must_ be named "Markdown" and _must not_ be wrapped with a custom component
|
||||
// We're working on easing these restrictions!
|
||||
import Markdown from 'astro/components/Markdown.astro';
|
||||
import Layout from '../layouts/main.astro';
|
||||
import MyFancyCodePreview from '../components/MyFancyCodePreview.tsx';
|
||||
|
||||
const expressions = 'Lorem ipsum';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Markdown>
|
||||
# Hello world!
|
||||
|
||||
**Everything** supported in a `.md` file is also supported here!
|
||||
|
||||
There is _zero_ runtime overhead.
|
||||
|
||||
In addition, Astro supports:
|
||||
- Astro {expressions}
|
||||
- Automatic indentation normalization
|
||||
- Automatic escaping of expressions inside code blocks
|
||||
|
||||
```jsx
|
||||
// This content is not transformed!
|
||||
const object = { someOtherValue };
|
||||
```
|
||||
|
||||
- Rich component support like any `.astro` file!
|
||||
- Recursive Markdown support (Component children are also processed as Markdown)
|
||||
|
||||
<MyFancyCodePreview:visible>
|
||||
```jsx
|
||||
const object = { someOtherValue };
|
||||
```
|
||||
</MyFancyCodePreview:visible>
|
||||
</Markdown>
|
||||
</Layout>
|
||||
````
|
||||
|
||||
### Remote Markdown
|
||||
|
||||
If you have Markdown in a remote source, you may pass it directly to the Markdown component. For example, the example below fetches the README from Snowpack's GitHub repository and renders it as HTML.
|
||||
|
||||
```jsx
|
||||
---
|
||||
import Markdown from 'astro/components/Markdown.astro';
|
||||
|
||||
const content = await fetch('https://raw.githubusercontent.com/snowpackjs/snowpack/main/README.md').then(res => res.text());
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Markdown>{content}</Markdown>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
### Security FAQs
|
||||
|
||||
**Aren't there security concerns to rendering remote markdown directly to HTML?**
|
||||
|
||||
Yes! Just like with regular HTML, improper use the `<Markdown>` component can open you up to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. If you are rendering untrusted content, be sure to _santize your content **before** rendering it_.
|
||||
|
||||
**Why not use a prop like React's `dangerouslySetInnerHTML={{ __html: content }}`?**
|
||||
|
||||
Rendering a string of HTML (or Markdown) is an extremely common use case when rendering a static site and you probably don't need the extra hoops to jump through. Rendering untrusted content is always dangerous! Be sure to _santize your content **before** rendering it_.
|
||||
</Markdown>
|
||||
</Layout>
|
||||
Loading…
Add table
Reference in a new issue