mirror of
https://github.com/withastro/astro.git
synced 2024-12-30 22:03:56 -05:00
New getting started guide (#715)
* New getting started guide * style: small style tweaks * style: theme updates * chore: add redirect * style: theme tweaks * fix: clamp logo height * style: fix sidebar width Co-authored-by: Nate Moore <nate@skypack.dev>
This commit is contained in:
Fred K. Schott
GitHub
parent
6d06fce6d2
commit
2827f077ba
20 changed files with 409 additions and 747 deletions
|
|
@ -8,148 +8,91 @@
|
|||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.atrule {
|
||||
color: #c792ea;
|
||||
.token.plain-text,
|
||||
[class*="language-bash"] span.token,
|
||||
[class*="language-shell"] span.token {
|
||||
color: var(--color-gray-200);
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #ffcb6b;
|
||||
[class*="language-bash"] span.token,
|
||||
[class*="language-shell"] span.token {
|
||||
font-style: bold;
|
||||
}
|
||||
|
||||
.token.attr-value {
|
||||
color: #a5e844;
|
||||
}
|
||||
|
||||
.token.attribute {
|
||||
color: #a5e844;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.token.builtin {
|
||||
color: #ffcb6b;
|
||||
}
|
||||
|
||||
.token.cdata {
|
||||
color: #80cbc4;
|
||||
}
|
||||
|
||||
.token.char {
|
||||
color: #80cbc4;
|
||||
}
|
||||
|
||||
.token.class {
|
||||
color: #ffcb6b;
|
||||
}
|
||||
|
||||
.token.class-name {
|
||||
color: #f2ff00;
|
||||
}
|
||||
|
||||
.token.comment {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.constant {
|
||||
color: #c792ea;
|
||||
.token.prolog,
|
||||
.token.comment,
|
||||
[class*="language-bash"] span.token.comment,
|
||||
[class*="language-shell"] span.token.comment {
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.tag,
|
||||
.token.unit,
|
||||
.token.url,
|
||||
.token.variable,
|
||||
.token.entity,
|
||||
.token.deleted {
|
||||
color: #ff6666;
|
||||
color: #FA5E5B;
|
||||
}
|
||||
|
||||
.token.doctype {
|
||||
color: #999;
|
||||
.token.boolean,
|
||||
.token.constant,
|
||||
.token.doctype,
|
||||
.token.number,
|
||||
.token.regex,
|
||||
.token.builtin,
|
||||
.token.class,
|
||||
.token.hexcode,
|
||||
.token.class-name,
|
||||
.token.attr-name {
|
||||
color: var(--color-yellow);
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
color: #ff6666;
|
||||
.token.atrule,
|
||||
.token.attribute,
|
||||
.token.attr-value .token.punctuation,
|
||||
.token.attr-value,
|
||||
.token.pseudo-class,
|
||||
.token.pseudo-element,
|
||||
.token.string {
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.token.hexcode {
|
||||
color: #f2ff00;
|
||||
.token.symbol,
|
||||
.token.function,
|
||||
.token.id,
|
||||
.token.important
|
||||
{
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.id {
|
||||
color: #c792ea;
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.important {
|
||||
color: #c792ea;
|
||||
font-weight: bold;
|
||||
|
||||
.token.cdata,
|
||||
.token.char,
|
||||
.token.property {
|
||||
color: #23B1AF;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: #80cbc4;
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #fd9170;
|
||||
color: #FF657C;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.operator {
|
||||
color: #89ddff;
|
||||
}
|
||||
|
||||
.token.prolog {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.property {
|
||||
color: #80cbc4;
|
||||
}
|
||||
|
||||
.token.pseudo-class {
|
||||
color: #a5e844;
|
||||
}
|
||||
|
||||
.token.pseudo-element {
|
||||
color: #a5e844;
|
||||
color: var(--color-gray-300);
|
||||
}
|
||||
|
||||
.token.attr-value .token.attr-equals,
|
||||
.token.punctuation {
|
||||
color: #89ddff;
|
||||
}
|
||||
|
||||
.token.regex {
|
||||
color: #f2ff00;
|
||||
}
|
||||
|
||||
.token.selector {
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: #a5e844;
|
||||
}
|
||||
|
||||
.token.symbol {
|
||||
color: #c792ea;
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.token.unit {
|
||||
color: #fd9170;
|
||||
}
|
||||
|
||||
.token.url {
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.token.variable {
|
||||
color: #ff6666;
|
||||
color: var(--color-gray-200);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
:root {
|
||||
--user-font-scale: 1rem - 16px;
|
||||
--max-width: calc(100% - 2rem);
|
||||
--max-width: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
|
|
@ -20,12 +20,8 @@ body {
|
|||
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;
|
||||
font-size: clamp(0.9rem, 0.7500rem + 0.3750vw + var(--user-font-scale), 1rem);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
|
|
@ -37,11 +33,15 @@ nav ul {
|
|||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.content main > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
:is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-bottom: 1.38rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
:is(h1, h2) {
|
||||
|
|
@ -53,27 +53,26 @@ nav ul {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
font-size: 1.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p,
|
||||
|
|
@ -95,6 +94,20 @@ a {
|
|||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
article :is(ul, ol) > * + *,
|
||||
article li > * + * {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
article :is(ul, ol) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
article ::marker {
|
||||
font-weight: bold;
|
||||
color: var(--theme-text-light);
|
||||
}
|
||||
|
||||
a > code:not([class*='language']) {
|
||||
position: relative;
|
||||
color: var(--theme-text-accent);
|
||||
|
|
@ -162,16 +175,26 @@ pre {
|
|||
--padding-inline: 2rem;
|
||||
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);
|
||||
font-family: var(--font-mono);
|
||||
|
||||
line-height: 1.414;
|
||||
line-height: 1.5;
|
||||
font-size: 0.85rem;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre code {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@media (min-width: 37.75em) {
|
||||
pre {
|
||||
--padding-inline: 1.25rem;
|
||||
border-radius: 8px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -193,6 +216,30 @@ img {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
transition: transform 300ms 200ms cubic-bezier(0.23, 1, 0.320, 1);
|
||||
}
|
||||
|
||||
header::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0.5rem;
|
||||
background: var(--theme-navbar-bg);
|
||||
}
|
||||
|
||||
header.hidden {
|
||||
transform: translateY(calc(-100% - 1px));
|
||||
transition: transform 200ms 100ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
}
|
||||
header.hidden:is(:hover, :focus, :focus-within) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
header button {
|
||||
background-color: var(--theme-bg);
|
||||
}
|
||||
|
|
@ -258,7 +305,7 @@ button {
|
|||
}
|
||||
|
||||
#theme-toggle .checked {
|
||||
color: var(--theme-accent);
|
||||
color: var(--theme-navbar-bg);
|
||||
transform: scale(1.125);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -276,13 +323,13 @@ input[name='theme-toggle'] {
|
|||
.sidebar-nav {
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
min-height: calc(100vh - 3.5rem);
|
||||
height: calc(100vh - 3.5rem);
|
||||
top: 3.5rem;
|
||||
min-height: calc(100vh - var(--theme-navbar-height));
|
||||
height: calc(100vh - var(--theme-navbar-height));
|
||||
top: var(--theme-navbar-height);
|
||||
}
|
||||
.sidebar-nav-inner {
|
||||
height: 100%;
|
||||
padding: 2rem 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
@ -302,7 +349,8 @@ h2.heading {
|
|||
|
||||
.header-link:hover,
|
||||
.header-link:focus {
|
||||
border-left-color: var(--color-gray-300);
|
||||
border-left-color: var(--theme-accent);
|
||||
color: var(--theme-accent);
|
||||
}
|
||||
.header-link:focus-within {
|
||||
color: var(--theme-text-light);
|
||||
|
|
@ -335,36 +383,6 @@ h2.heading {
|
|||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--theme-divider);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--theme-text-lighter);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--theme-text-light);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
/* Scrollbar - End */
|
||||
|
||||
/* Screenreader Only Text */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
|
|
@ -382,3 +400,32 @@ h2.heading {
|
|||
:target {
|
||||
scroll-margin-top: 4rem;
|
||||
}
|
||||
|
||||
#site-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
color: var(--color-white);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#site-title svg {
|
||||
width: 118px;
|
||||
height: 48px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#site-title:hover,
|
||||
#site-title:focus {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#site-title h1 {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
37
docs/public/nav.js
Normal file
37
docs/public/nav.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
const nav = document.querySelector('body > header');
|
||||
|
||||
if (!window.matchMedia('(prefers-reduced-motion)').matches) {
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
}
|
||||
|
||||
let prev = -1;
|
||||
let prevDir = 0;
|
||||
let threshold = 32;
|
||||
|
||||
function onScroll() {
|
||||
const curr = window.scrollY;
|
||||
const dir = curr > prev ? 1 : -1;
|
||||
|
||||
if (curr < threshold) {
|
||||
show();
|
||||
document.documentElement.classList.add('initial');
|
||||
} else if (dir !== prevDir) {
|
||||
if (dir === 1) {
|
||||
hide();
|
||||
} else {
|
||||
show();
|
||||
}
|
||||
}
|
||||
|
||||
prev = curr;
|
||||
}
|
||||
|
||||
const hide = () => {
|
||||
nav.classList.add('hidden')
|
||||
document.documentElement.classList.add('scrolled');
|
||||
document.documentElement.classList.remove('initial');
|
||||
};
|
||||
const show = () => {
|
||||
nav.classList.remove('hidden');
|
||||
document.documentElement.classList.remove('scrolled');
|
||||
}
|
||||
|
|
@ -2,8 +2,7 @@
|
|||
--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
|
||||
sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
||||
--font-body: system-ui, var(--font-fallback);
|
||||
--font-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
--font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
|
||||
--color-white: #fff;
|
||||
--color-black: #000014;
|
||||
|
|
@ -37,14 +36,14 @@
|
|||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--theme-accent: var(--color-blue);
|
||||
--theme-accent-rgb: var(--color-blue-rgb);
|
||||
--theme-accent: var(--color-purple);
|
||||
--theme-accent-rgb: var(--color-purple-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-text-accent: var(--color-blue);
|
||||
--theme-text-accent: var(--color-purple);
|
||||
--theme-bg: var(--color-white);
|
||||
--theme-bg-hover: var(--color-gray-50);
|
||||
--theme-bg-offset: var(--color-gray-100);
|
||||
|
|
@ -53,6 +52,9 @@
|
|||
--theme-code-inline-text: var(--theme-text);
|
||||
--theme-code-bg: var(--color-gray-700);
|
||||
--theme-code-text: var(--color-gray-100);
|
||||
--theme-navbar-bg: var(--color-green);
|
||||
--theme-navbar-height: 3.5rem;
|
||||
--theme-sidebar-offset: var(--theme-navbar-height);
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -60,6 +62,10 @@ body {
|
|||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
:root.scrolled {
|
||||
--theme-sidebar-offset: 0;
|
||||
}
|
||||
|
||||
:root.theme-dark {
|
||||
color-scheme: dark;
|
||||
--theme-accent-opacity: 0.3;
|
||||
|
|
@ -67,17 +73,17 @@ body {
|
|||
--theme-text: var(--color-gray-200);
|
||||
--theme-text-light: var(--color-gray-300);
|
||||
--theme-text-lighter: var(--color-gray-600);
|
||||
--theme-text-accent: var(--color-white);
|
||||
--theme-text-accent: #A550FF;
|
||||
--theme-bg: var(--color-gray-800);
|
||||
--theme-bg-hover: var(--color-gray-600);
|
||||
--theme-bg-offset: var(--color-gray-950);
|
||||
--theme-code-inline-bg: var(--color-gray-600);
|
||||
--theme-code-inline-bg: var(--color-gray-900);
|
||||
--theme-code-inline-text: var(--color-white);
|
||||
--theme-code-bg: var(--color-gray-950);
|
||||
--theme-code-text: var(--color-white);
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--theme-text-accent);
|
||||
background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
|
||||
color: var(--color-green);
|
||||
background-color: rgba(var(--color-green-rgb), var(--theme-accent-opacity));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,13 +24,15 @@ const {currentPage} = Astro.props;
|
|||
<style>
|
||||
nav {
|
||||
position: sticky;
|
||||
min-height: calc(100vh - 3.5rem);
|
||||
height: calc(100vh - 3.5rem);
|
||||
top: 3.5rem;
|
||||
min-height: calc(100vh - var(--theme-navbar-height));
|
||||
height: calc(100vh - var(--theme-navbar-height));
|
||||
top: var(--theme-navbar-height);
|
||||
width: 100%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.nav-groups {
|
||||
height: 100%;
|
||||
padding: 2rem 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
@ -66,4 +68,4 @@ const {currentPage} = Astro.props;
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,22 +2,9 @@ import type { FunctionalComponent } from 'preact';
|
|||
import { h, Fragment } from 'preact';
|
||||
import { useState, useEffect } from 'preact/hooks';
|
||||
|
||||
const themes = ['system', 'light', 'dark'];
|
||||
const themes = ['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"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ export const sidebar = [
|
|||
text: 'Setup',
|
||||
link: '',
|
||||
children: [
|
||||
{ text: 'Getting Started', link: 'getting-started' },
|
||||
{ text: 'Installation', link: 'installation' },
|
||||
{ text: 'Quickstart', link: 'quick-start' },
|
||||
{ text: 'Examples', link: 'examples' },
|
||||
|
|
|
|||
|
|
@ -5,14 +5,18 @@ import ThemeToggle from '../components/ThemeToggle.tsx';
|
|||
import DocSidebar from '../components/DocSidebar.tsx';
|
||||
import MenuToggle from '../components/MenuToggle.tsx';
|
||||
|
||||
const { content } = Astro.props;
|
||||
const { content = {} } = Astro.props;
|
||||
const headers = content?.astro?.headers;
|
||||
const currentPage = Astro.request.url.pathname;
|
||||
const currentFile = currentPage === '/' ? 'src/pages/index.md' : `src/pages${currentPage.replace(/\/$/, "")}.md`;
|
||||
const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${currentFile}`;
|
||||
const currentPage = Astro.request?.url?.pathname;
|
||||
let currentFile;
|
||||
let githubEditUrl;
|
||||
if (currentPage) {
|
||||
currentFile = currentPage === '/' ? 'src/pages/index.md' : `src/pages${currentPage.replace(/\/$/, "")}.md`;
|
||||
githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${currentFile}`;
|
||||
}
|
||||
---
|
||||
|
||||
<html lang="{content.lang ?? 'en-us'}">
|
||||
<html lang="{content.lang ?? 'en-us'}" class="initial">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
|
|
@ -26,11 +30,15 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
|
|||
type="image/svg+xml"
|
||||
href="/favicon.svg">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 3.5rem 1fr;
|
||||
grid-template-rows: var(--theme-navbar-height) 1fr;
|
||||
--gutter: 0.5rem;
|
||||
--doc-padding: 2rem;
|
||||
}
|
||||
|
|
@ -41,10 +49,23 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
|
|||
z-index: 10;
|
||||
height: 56px;
|
||||
width: 100%;
|
||||
background-color: var(--theme-bg-offset);
|
||||
background-color: var(--theme-navbar-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
header .site-content-title {
|
||||
display: none;
|
||||
width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header .content-title {
|
||||
color: var(--color-white);
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.layout {
|
||||
|
|
@ -54,34 +75,17 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
|
|||
minmax(var(--gutter), 1fr)
|
||||
minmax(0, var(--max-width))
|
||||
minmax(var(--gutter), 1fr);
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.menu-and-logo {
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
#site-title {
|
||||
.logo {
|
||||
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;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
width: 100%;
|
||||
margin-left: -40px;
|
||||
transform: translateY(4px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
|
|
@ -99,12 +103,27 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
min-height: calc(100vh - 3.5rem);
|
||||
height: calc(100vh - 3.5rem);
|
||||
min-height: calc(100vh - var(--theme-navbar-height));
|
||||
height: calc(100vh - var(--theme-navbar-height));
|
||||
max-height: 100vh;
|
||||
position: sticky;
|
||||
top: 3.5rem;
|
||||
top: var(--doc-padding);
|
||||
margin-top: var(--theme-navbar-height);
|
||||
padding: 0;
|
||||
transition: transform 300ms 200ms cubic-bezier(0.23, 1, 0.320, 1);
|
||||
}
|
||||
|
||||
:global(:root.scrolled) .sidebar {
|
||||
transform: translateY(0);
|
||||
transition: transform 200ms 100ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
}
|
||||
|
||||
:global(:root) .sidebar {
|
||||
transform: translateY(var(--theme-navbar-height));
|
||||
}
|
||||
:global(:root.initial) .sidebar {
|
||||
transform: translateY(0);
|
||||
transition: transform 150ms linear;
|
||||
}
|
||||
|
||||
#sidebar-site {
|
||||
|
|
@ -122,6 +141,7 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
|
|||
}
|
||||
|
||||
.content {
|
||||
padding: 0;
|
||||
max-width: 75ch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -149,6 +169,11 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
|
|||
display: block;
|
||||
}
|
||||
@media (min-width: 60em) {
|
||||
.logo {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
#sidebar-site {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -165,6 +190,7 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
|
|||
grid-template-columns:
|
||||
20rem
|
||||
minmax(0, var(--max-width));
|
||||
gap: 1em;
|
||||
}
|
||||
#article {
|
||||
grid-column: 2;
|
||||
|
|
@ -182,6 +208,12 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
|
|||
}
|
||||
|
||||
@media (min-width: 82em) {
|
||||
header .site-content-title {
|
||||
display: block;
|
||||
}
|
||||
main .content-title {
|
||||
display: none;
|
||||
}
|
||||
.layout {
|
||||
grid-template-columns:
|
||||
20rem
|
||||
|
|
@ -202,6 +234,9 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
|
|||
display: flex;
|
||||
grid-column: 3;
|
||||
}
|
||||
.nav-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -210,16 +245,24 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
|
|||
<body>
|
||||
<header>
|
||||
<nav class="nav-wrapper">
|
||||
<div class="menu-and-logo flex">
|
||||
<div class="menu-toggle">
|
||||
<MenuToggle client:idle/>
|
||||
</div>
|
||||
<div class="menu-toggle">
|
||||
<MenuToggle client:idle/>
|
||||
</div>
|
||||
|
||||
<div class="logo flex">
|
||||
<a id="site-title" href="/">
|
||||
<h1>Astro Documentation</h1>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="270" height="102" viewBox="0 0 270 102" fill="none">
|
||||
<path fill="currentColor" fill-rule="evenodd" d="M55.07 14.216l16.81 54.865a72.6 72.6 0 00-20.765-6.984L39.808 24.135a1.475 1.475 0 00-2.827.005L25.81 62.078a72.598 72.598 0 00-20.859 6.995L21.847 14.2c.998-3.243 1.497-4.865 2.47-6.066a8 8 0 013.239-2.392c1.434-.576 3.13-.576 6.524-.576h8.751c3.398 0 5.097 0 6.532.577a8 8 0 013.241 2.397c.972 1.203 1.47 2.827 2.465 6.076z" clip-rule="evenodd"/>
|
||||
<path fill="currentColor" fill-rule="evenodd" d="M54.618 71.779c-2.863 2.432-8.578 4.091-15.161 4.091-8.08 0-14.852-2.499-16.649-5.86-.642 1.926-.786 4.13-.786 5.539 0 0-.423 6.915 4.418 11.725 0-2.498 2.037-4.522 4.551-4.522 4.309 0 4.304 3.734 4.3 6.764v.27c0 4.6 2.829 8.541 6.852 10.203a9.22 9.22 0 01-.938-4.064c0-4.386 2.592-6.02 5.604-7.917 2.396-1.51 5.06-3.188 6.894-6.554a12.297 12.297 0 001.502-5.905c0-1.314-.206-2.581-.587-3.77z" clip-rule="evenodd"/>
|
||||
<path fill="currentColor" d="M117.872 69.96c5.952 0 10.688-2.56 13.056-6.784V69h10.624V22.6H130.48v18.88c-2.496-3.584-6.592-5.44-12.096-5.44C108.592 36.04 102 42.824 102 53c0 10.112 6.464 16.96 15.872 16.96zm4.224-7.424c-5.312 0-8.64-3.712-8.64-9.664s3.136-9.472 8.448-9.472 8.768 3.328 8.768 8.704v1.92c0 5.12-3.456 8.512-8.576 8.512zM167.909 69.96c11.712 0 19.968-6.208 19.968-17.024 0-10.752-8.256-16.896-19.968-16.896-11.776 0-20.033 6.144-20.033 16.896 0 10.816 8.257 17.024 20.033 17.024zm0-7.36c-5.376 0-8.768-3.456-8.768-9.664s3.392-9.536 8.768-9.536c5.312 0 8.704 3.328 8.704 9.536s-3.392 9.664-8.704 9.664zM212.346 69.96c10.112 0 17.344-4.544 18.88-11.84l-10.944-1.984c-.896 3.84-3.648 5.952-8 5.952-5.312 0-8.64-3.52-8.64-9.344 0-5.568 3.264-8.896 8.576-8.896 4.288 0 7.104 2.048 8 5.824l11.008-1.792c-1.6-7.552-8.384-11.84-18.688-11.84-12.544 0-20.224 6.4-20.224 16.896 0 10.368 7.872 17.024 20.032 17.024zM253.125 69.96c11.136 0 16.832-4.16 16.832-10.88 0-5.568-3.2-8.64-10.944-9.664l-9.664-1.088c-2.752-.384-3.904-1.088-3.904-2.624 0-1.856 1.856-2.688 6.08-2.688 5.824 0 9.856 1.344 13.12 3.968l5.184-5.184c-3.584-3.712-9.792-5.76-17.472-5.76-10.816 0-16.832 3.84-16.832 10.304 0 5.632 3.712 8.768 11.392 9.792l8.704 1.024c3.456.448 4.48 1.088 4.48 2.752 0 1.92-1.92 2.944-6.4 2.944-6.656 0-11.136-1.792-14.144-5.12l-5.888 4.864c3.904 4.864 10.56 7.36 19.456 7.36z"/>
|
||||
</svg>
|
||||
<h1 class="sr-only">Astro Documentation</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div />
|
||||
<div class="site-content-title">
|
||||
{content?.title && <h1 class="content-title">{content?.title}</h1>}
|
||||
</div>
|
||||
|
||||
<div class="theme-toggle-wrapper">
|
||||
<ThemeToggle client:idle />
|
||||
|
|
@ -229,22 +272,24 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
|
|||
|
||||
<main class="layout">
|
||||
<aside class="sidebar" id="sidebar-site">
|
||||
<SiteSidebar currentPage={currentPage.slice(1)} />
|
||||
<SiteSidebar currentPage={currentPage?.slice(1) ?? ''} />
|
||||
</aside>
|
||||
<div id="article">
|
||||
<article class="content">
|
||||
<main>
|
||||
<h1 class="content-title" id="overview">{content.title}</h1>
|
||||
<h1 class="content-title" id="overview">{content?.title}</h1>
|
||||
<slot />
|
||||
</main>
|
||||
<ArticleFooter path={currentFile} />
|
||||
{currentPage && <ArticleFooter path={currentFile} />}
|
||||
</article>
|
||||
</div>
|
||||
<aside class="sidebar" id="sidebar-content">
|
||||
<DocSidebar client:idle headers={headers} editHref={githubEditUrl} />
|
||||
{currentPage && <DocSidebar client:idle headers={headers} editHref={githubEditUrl} />}
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<script type="module" src="/nav.js" />
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TEL60V1WM9"></script>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,240 +1,9 @@
|
|||
---
|
||||
import SiteSidebar from '../components/SiteSidebar.astro';
|
||||
import AstroLogo from '../components/AstroLogo.astro';
|
||||
import ThemeToggle from '../components/ThemeToggle.tsx';
|
||||
import MenuToggle from '../components/MenuToggle.tsx';
|
||||
import Layout from '../layouts/Main.astro';
|
||||
---
|
||||
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Astro Documentation</title>
|
||||
<link rel="stylesheet" href="/theme.css" />
|
||||
<link rel="stylesheet" href="/code.css" />
|
||||
<link rel="stylesheet" href="/index.css" />
|
||||
<script src="/theme.js" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
|
||||
<style>
|
||||
body {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 3.5rem 1fr;
|
||||
--gutter: 0.5rem;
|
||||
--doc-padding: 2rem;
|
||||
}
|
||||
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
height: 56px;
|
||||
width: 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;
|
||||
}
|
||||
|
||||
#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: 82em;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.layout :global(> *) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
min-height: calc(100vh - 3.5rem);
|
||||
height: calc(100vh - 3.5rem);
|
||||
max-height: 100vh;
|
||||
position: sticky;
|
||||
top: 3.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#sidebar-site {
|
||||
position: fixed;
|
||||
background-color: var(--theme-bg);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
||||
#article {
|
||||
padding: var(--doc-padding) var(--gutter);
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(data:font/woff;base64,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) format('woff');
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content > main {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
#sidebar-content {
|
||||
display: none;
|
||||
}
|
||||
.theme-toggle-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar-site {
|
||||
display: none;
|
||||
}
|
||||
:global(.mobile-sidebar-toggle) {
|
||||
overflow: hidden;
|
||||
}
|
||||
:global(.mobile-sidebar-toggle) #sidebar-site {
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 60em) {
|
||||
#sidebar-site {
|
||||
display: flex;
|
||||
}
|
||||
:global(.mobile-sidebar-toggle) {
|
||||
overflow: initial;
|
||||
}
|
||||
:global(.mobile-sidebar-toggle) #sidebar-site {
|
||||
display: flex;
|
||||
}
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
.layout {
|
||||
grid-template-columns:
|
||||
20rem
|
||||
minmax(0, 1fr);
|
||||
}
|
||||
#article {
|
||||
grid-column: 2;
|
||||
}
|
||||
#sidebar-site {
|
||||
position: sticky;
|
||||
}
|
||||
#sidebar-nav {
|
||||
display: flex;
|
||||
}
|
||||
.theme-toggle-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 82em) {
|
||||
.layout {
|
||||
grid-template-columns:
|
||||
20rem
|
||||
minmax(0, var(--max-width))
|
||||
18rem;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#sidebar-nav {
|
||||
grid-column: 1;
|
||||
}
|
||||
#article {
|
||||
grid-column: 2/4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="mobile-sidebar-hidden">
|
||||
<header>
|
||||
<nav class="nav-wrapper">
|
||||
<div class="menu-and-logo flex">
|
||||
<div class="menu-toggle">
|
||||
<MenuToggle client:idle/>
|
||||
</div>
|
||||
<a id="site-title" href="/">
|
||||
<h1>Astro Documentation</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div />
|
||||
|
||||
<div class="theme-toggle-wrapper">
|
||||
<ThemeToggle client:idle />
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="layout">
|
||||
<aside class="sidebar" id="sidebar-site">
|
||||
<SiteSidebar currentPage="" />
|
||||
</aside>
|
||||
<div id="article">
|
||||
<article class="content">
|
||||
<h1>404</h1>
|
||||
<p>This page isn't in our solar system.</p>
|
||||
<a href="/">Take me home.</a>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<Layout>
|
||||
<h1>404</h1>
|
||||
<p>This page isn't in our solar system.</p>
|
||||
<a href="/">Take me home.</a>
|
||||
</Layout>
|
||||
|
|
|
|||
60
docs/src/pages/getting-started.md
Normal file
60
docs/src/pages/getting-started.md
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
layout: ~/layouts/Main.astro
|
||||
title: Getting Started
|
||||
---
|
||||
|
||||
|
||||
Astro is modern static site builder. Learn what Astro is all about from [our homepage](https://astro.build/) or [our release post](https://astro.build/blog/introducing-astro). This page is an overview of the Astro documentation and all related resources.
|
||||
|
||||
## Try Astro
|
||||
|
||||
The easiest way to try Astro is to run `npm init astro` in a new directory on your machine. This CLI command will walk you through starting a new Astro project.
|
||||
|
||||
Read our [Installation Guide](/installation) for a full walk-through on getting set up with Astro.
|
||||
|
||||
### Online Playgrounds
|
||||
|
||||
If you're interested in playing around with Astro in the browser, you can use an online code playground. Try a Hello World template on [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3).
|
||||
|
||||
*Note: some features (ex: Fast Refresh) are currently limited on CodeSandbox.*
|
||||
|
||||
|
||||
## Learn Astro
|
||||
|
||||
People come to Astro from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you'll find this section helpful.
|
||||
|
||||
* If you prefer to **learn by doing**, start with our [examples library](https://github.com/snowpackjs/astro/tree/main/examples).
|
||||
* If you prefer to **learn concepts step by step**, start with our [basic concepts and guides](/core-concepts/project-structure).
|
||||
|
||||
Like any unfamiliar technology, Astro does have a learning curve. With practice and some patience, you *will* get the hang of it.
|
||||
|
||||
### Learn `.astro` Syntax
|
||||
|
||||
When you begin to learn Astro, you'll see many files using the `.astro` file extension. This is the **Astro component syntax**: a special HTML-like file format that Astro uses for templating. It was designed to feel familiar to anyone with HTML or JSX experience.
|
||||
|
||||
Our guide on [Astro components](/core-concepts/astro-components) walks you through the new syntax, and is best way to learn.
|
||||
|
||||
### API Reference
|
||||
|
||||
This documentation section is useful when you want to learn more details about a particular Astro API. For example, [Configuration Reference](/reference/configuration-reference) lists all possible configuration options available to you. [Built-in Components Reference](/reference/builtin-components) lists all available core components, like `<Markdown />` and `<Prism />`.
|
||||
|
||||
### Versioned Documentation
|
||||
|
||||
This documentation always reflects the latest stable version of Astro. Once we hit the v1.0 milestone, we will add the ability to view versioned documentation.
|
||||
|
||||
|
||||
## Staying Informed
|
||||
|
||||
The [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter account is the official source for the updates from the Astro team.
|
||||
|
||||
We also post release announcements to our [Discord community](https://astro.build/chat) in the #announcements channel.
|
||||
|
||||
Not every Astro release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md` file in the Astro repository](https://github.com/snowpackjs/astro/blob/main/packages/astro/CHANGELOG.md).
|
||||
|
||||
## Something Missing?
|
||||
|
||||
If something is missing in the documentation or if you found some part confusing, please [file an issue for the documentation](https://github.com/snowpackjs/astro/issues/new/choose) with your suggestions for improvement, or tweet at the [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter account. We love hearing from you!
|
||||
|
||||
## Credit
|
||||
|
||||
This getting started guide was originally based off of [React's](https://reactjs.org/) getting started guide.
|
||||
|
|
@ -3,8 +3,6 @@ layout: ~/layouts/Main.astro
|
|||
title: Deploy a Website
|
||||
---
|
||||
|
||||
> This page is based off of [Vite's](https://vitejs.dev/) well-documented [static deploy instructions](https://vitejs.dev/guide/static-deploy.html).
|
||||
|
||||
The following guides are based on some shared assumptions:
|
||||
|
||||
- You are using the default build output location (`dist/`). This location [can be changed using the `dist` configuration option](/reference/configuration-reference).
|
||||
|
|
@ -253,3 +251,7 @@ Install the extension in VS Code and navigate to your app root. Open the Static
|
|||
Follow the wizard started by the extension to give your app a name, choose a framework preset, and designate the app root (usually `/`) and built file location `/dist`. The wizard will run and will create a GitHub action in your repo in a `.github` folder.
|
||||
|
||||
The action will work to deploy your app (watch its progress in your repo's Actions tab) and, when successfully completed, you can view your app in the address provided in the extension's progress window by clicking the 'Browse Website' button that appears when the GitHub action has run.
|
||||
|
||||
## Credits
|
||||
|
||||
This guide was originally based off of [Vite's](https://vitejs.dev/) well-documented static deploy guide.
|
||||
|
|
@ -1,251 +1,9 @@
|
|||
---
|
||||
import SiteSidebar from '../components/SiteSidebar.astro';
|
||||
import AstroLogo from '../components/AstroLogo.astro';
|
||||
import ThemeToggle from '../components/ThemeToggle.tsx';
|
||||
import MenuToggle from '../components/MenuToggle.tsx';
|
||||
import Layout from '../layouts/Main.astro';
|
||||
---
|
||||
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Astro Documentation</title>
|
||||
<link rel="stylesheet" href="/theme.css" />
|
||||
<link rel="stylesheet" href="/code.css" />
|
||||
<link rel="stylesheet" href="/index.css" />
|
||||
<script src="/theme.js" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
|
||||
<style>
|
||||
body {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 3.5rem 1fr;
|
||||
--gutter: 0.5rem;
|
||||
--doc-padding: 2rem;
|
||||
}
|
||||
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
height: 56px;
|
||||
width: 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;
|
||||
}
|
||||
|
||||
#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: 82em;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.layout :global(> *) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
min-height: calc(100vh - 3.5rem);
|
||||
height: calc(100vh - 3.5rem);
|
||||
max-height: 100vh;
|
||||
position: sticky;
|
||||
top: 3.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#sidebar-site {
|
||||
position: fixed;
|
||||
background-color: var(--theme-bg);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
||||
#article {
|
||||
padding: var(--doc-padding) var(--gutter);
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(data:font/woff;base64,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) format('woff');
|
||||
}
|
||||
|
||||
.npm-init-snippet {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 1.6rem;
|
||||
background-color: var(--theme-code-inline-bg);
|
||||
color: var(--theme-text);
|
||||
border-radius: 6px;
|
||||
padding: 4px 14px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content > main {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
#sidebar-content {
|
||||
display: none;
|
||||
}
|
||||
.theme-toggle-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar-site {
|
||||
display: none;
|
||||
}
|
||||
:global(.mobile-sidebar-toggle) {
|
||||
overflow: hidden;
|
||||
}
|
||||
:global(.mobile-sidebar-toggle) #sidebar-site {
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 60em) {
|
||||
#sidebar-site {
|
||||
display: flex;
|
||||
}
|
||||
:global(.mobile-sidebar-toggle) {
|
||||
overflow: initial;
|
||||
}
|
||||
:global(.mobile-sidebar-toggle) #sidebar-site {
|
||||
display: flex;
|
||||
}
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
.layout {
|
||||
grid-template-columns:
|
||||
20rem
|
||||
minmax(0, 1fr);
|
||||
}
|
||||
#article {
|
||||
grid-column: 2;
|
||||
}
|
||||
#sidebar-site {
|
||||
position: sticky;
|
||||
}
|
||||
#sidebar-nav {
|
||||
display: flex;
|
||||
}
|
||||
.theme-toggle-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 82em) {
|
||||
.layout {
|
||||
grid-template-columns:
|
||||
20rem
|
||||
minmax(0, var(--max-width))
|
||||
18rem;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#sidebar-nav {
|
||||
grid-column: 1;
|
||||
}
|
||||
#article {
|
||||
grid-column: 2/4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="mobile-sidebar-hidden">
|
||||
<header>
|
||||
<nav class="nav-wrapper">
|
||||
<div class="menu-and-logo flex">
|
||||
<div class="menu-toggle">
|
||||
<MenuToggle client:idle/>
|
||||
</div>
|
||||
<a id="site-title" href="/">
|
||||
<h1>Astro Documentation</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div />
|
||||
|
||||
<div class="theme-toggle-wrapper">
|
||||
<ThemeToggle client:idle />
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="layout">
|
||||
<aside class="sidebar" id="sidebar-site">
|
||||
<SiteSidebar currentPage="" />
|
||||
</aside>
|
||||
<div id="article">
|
||||
<article class="content">
|
||||
<AstroLogo size={160} />
|
||||
<div class="npm-init-snippet">
|
||||
npm init astro
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<Layout>
|
||||
<h1>
|
||||
<code>npm init astro</code>
|
||||
</h1>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
layout: ~/layouts/Main.astro
|
||||
title: Data Sources / CMS
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
layout: ~/layouts/Main.astro
|
||||
title: Deploy Astro
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
layout: ~/layouts/Main.astro
|
||||
title: Developer Tools
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
layout: ~/layouts/Main.astro
|
||||
title: State Management
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
layout: ~/layouts/Main.astro
|
||||
title: Styles & CSS Libraries
|
||||
---
|
||||
22
examples/README.md
Normal file
22
examples/README.md
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
# Astro Examples Library
|
||||
|
||||
|
||||
The easiest way to check out one of these examples on your machine is by running this command in an empty directory:
|
||||
|
||||
```
|
||||
npm init astro --template [EXAMPLE_NAME]
|
||||
```
|
||||
|
||||
## Community Examples
|
||||
|
||||
Visit [awesome-astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples. You can use `npm init astro` to check out any community examples:
|
||||
|
||||
```
|
||||
npm init astro --template [GITHUB_USER]/[REPO_NAME]
|
||||
```
|
||||
|
||||
Paths to examples nested inside of a repo are also supported:
|
||||
|
||||
```
|
||||
npm init astro --template [GITHUB_USER]/[REPO_NAME]/path/to/example
|
||||
```
|
||||
|
|
@ -391,4 +391,4 @@ body {
|
|||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
/* Scrollbar - End */
|
||||
/* Scrollbar - End */
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
{
|
||||
"cleanUrls": true,
|
||||
"trailingSlash": false,
|
||||
"redirects": [{ "source": "/chat", "destination": "https://discord.gg/grF4GTXXYm" }]
|
||||
"redirects": [
|
||||
{ "source": "/chat", "destination": "https://discord.gg/grF4GTXXYm" },
|
||||
{ "source": "/", "destination": "/getting-started" }
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue