0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00

Improve docs theme (#717)

* Revert "Revert "New getting started guide (#715)""

This reverts commit dc4ba25b01.

* style: update docs theme

* style: implement feedback

* feat: remove FOUC

* Update docs/src/pages/404.astro

Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>

* Fix 404 title prop

* chore: implement feedback

* fix: ul, ol styles

* fix: center logo on mobile

* fix: improve navbar header contrast

* fix: improve logo overlap

* fix: `.nav-link` radius

* fix: small mobile tweaks

* feat: improve nav styles

* feat: improve embed styles

* fix: feedback items

* fix: make header sticky on mobile

Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>
This commit is contained in:
Nate Moore 2021-07-19 19:36:09 -05:00 committed by GitHub
parent 7f57651686
commit 325e8cba2d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 445 additions and 742 deletions

View file

@ -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);
}

View file

@ -3,9 +3,14 @@
margin: 0;
}
/* Global focus outline reset */
*:focus:not(:focus-visible) {
outline: none;
}
:root {
--user-font-scale: 1rem - 16px;
--max-width: calc(100% - 2rem);
--max-width: calc(100% - 1rem);
}
@media (min-width: 50em) {
@ -20,12 +25,9 @@ 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.0rem
);
line-height: 1.625;
font-size: clamp(0.9rem, 0.7500rem + 0.3750vw + var(--user-font-scale), 1rem);
line-height: 1.5;
max-width: 100vw;
}
nav ul {
@ -37,11 +39,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;
font-weight: 400;
line-height: 1.3;
margin-bottom: 1rem;
font-weight: bold;
line-height: 1.25;
}
:is(h1, h2) {
@ -53,29 +59,41 @@ nav ul {
}
h1 {
font-size: 3.5rem;
font-weight: bold;
font-size: 1.75rem;
}
h2 {
font-size: 34px;
font-weight: bold;
font-size: 1.25rem;
}
h3 {
font-size: 22px;
font-weight: bold;
font-size: 1.125rem;
}
h4 {
font-size: 1rem;
font-weight: bold;
}
h5 {
font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
font-size: 0.8rem;
}
@media (min-width: 60em) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.25rem;
}
}
p,
.content ul {
color: var(--theme-text-light);
@ -90,11 +108,33 @@ a {
color: var(--theme-text-accent);
font-weight: 400;
text-underline-offset: 0.08em;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
article main :is(ul, ol) > * + * {
margin-top: 0.75rem;
}
article main li > :is(p, pre, blockquote):not(:first-child) {
margin-top: 1rem;
}
article main :is(ul, ol) {
padding-left: 1em;
}
article main ::marker {
font-weight: bold;
color: var(--theme-text-light);
}
article main iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
a > code:not([class*='language']) {
position: relative;
color: var(--theme-text-accent);
@ -144,6 +184,7 @@ code:not([class*='language']) {
padding: var(--padding-block) var(--padding-inline);
margin: calc(var(--padding-block) * -1) -0.125em;
border-radius: var(--border-radius);
box-shadow: 0 2px 1px 0 rgba(0,0,0,0.08);
}
pre > code:not([class*='language']) {
@ -154,24 +195,59 @@ pre > code:not([class*='language']) {
color: inherit;
}
table,
pre {
position: relative;
background-color: var(--theme-code-bg);
color: var(--theme-code-text);
--padding-block: 1rem;
--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.85em;
overflow-y: hidden;
overflow-x: auto;
}
table {
width: 100%;
padding: var(--padding-block) 0;
margin: 0;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: var(--theme-bg-hover);
}
th {
background: var(--color-black);
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
text-align: left;
}
pre {
background-color: var(--theme-code-bg);
color: var(--theme-code-text);
}
blockquote code:not([class*='language']) {
background-color: var(--theme-bg);
}
@media (min-width: 37.75em) {
pre {
--padding-inline: 1.25rem;
border-radius: 8px;
margin-left: 0;
margin-right: 0;
}
}
@ -193,6 +269,11 @@ img {
align-items: center;
}
header {
position: relative;
margin-bottom: 0.5rem;
}
header button {
background-color: var(--theme-bg);
}
@ -231,7 +312,7 @@ button {
gap: 0.25em;
padding: 0.33em 0.67em;
border-radius: 99em;
background-color: var(--theme-bg);
background-color: var(--color-gray-800);
}
#theme-toggle > label:focus-within {
@ -240,6 +321,7 @@ button {
}
#theme-toggle > label {
color: white;
position: relative;
display: flex;
align-items: center;
@ -276,13 +358,12 @@ input[name='theme-toggle'] {
.sidebar-nav {
width: 100%;
position: sticky;
min-height: calc(100vh - 3.5rem);
height: calc(100vh - 3.5rem);
top: 3.5rem;
top: 0;
}
.sidebar-nav-inner {
height: 100%;
padding: 2rem 0;
padding: 0;
padding-top: 2rem;
overflow: auto;
}
@ -302,7 +383,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);
@ -314,6 +396,10 @@ h2.heading {
.header-link:hover svg {
opacity: 0.8;
}
.header-link a {
display: inline-flex;
gap: 0.5em;
}
.header-link.depth-3 {
padding-left: 2rem;
@ -335,36 +421,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 +438,50 @@ h2.heading {
:target {
scroll-margin-top: 4rem;
}
.logo {
display: flex;
align-items: center;
gap: 0;
font-size: 1rem;
font-weight: 600;
margin: 0;
line-height: 1;
color: var(--color-white);
text-decoration: none;
transform: translateX(-8px) scale(0.8);
}
@media (min-width: 60em) {
.logo {
transform: translateX(-8px) scale(1);
}
}
.logo a {
padding: 0.5em 0.25em;
margin: -0.5em -0.5em;
}
.logo svg {
height: 40px;
width: auto;
display: block;
color: var(--theme-accent);
}
.logo a:hover,
.logo a:focus {
background: rgba(var(--theme-accent-rgb), 0.6);
}
.logo a:hover svg,
.logo a:focus svg {
color: var(--color-white);
}
.logo h1 {
font: inherit;
color: inherit;
margin: 0;
}

37
docs/public/nav.js Normal file
View 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');
}

View file

@ -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-orange);
--theme-text-accent: var(--color-orange);
--theme-accent-rgb: var(--color-orange-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-bg: var(--color-white);
--theme-bg-hover: var(--color-gray-50);
--theme-bg-offset: var(--color-gray-100);
@ -53,6 +52,11 @@
--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-gray-700);
--theme-navbar-height: 3.5rem;
--theme-sidebar-offset: var(--theme-navbar-height);
--theme-selection-color: var(--color-orange);
--theme-selection-bg: rgba(var(--color-orange-rgb), var(--theme-accent-opacity));
}
body {
@ -60,24 +64,33 @@ body {
color: var(--theme-text);
}
:root.scrolled {
--theme-sidebar-offset: 0;
}
:root.theme-dark {
color-scheme: dark;
--theme-accent-opacity: 0.3;
--theme-divider: var(--color-gray-900);
--theme-accent-opacity: 0.4;
--theme-accent: var(--color-orange);
--theme-text-accent: var(--color-orange);
--theme-accent-rgb: var(--color-orange-rgb);
--theme-divider: var(--color-gray-950);
--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-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);
--theme-navbar-bg: var(--color-gray-900);
--theme-selection-color: var(--color-white);
--theme-selection-bg: rgba(var(--color-purple-rgb), var(--theme-accent-opacity));
}
::selection {
color: var(--theme-text-accent);
background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
color: var(--theme-selection-color);
background-color: var(--theme-selection-bg);
}

View file

@ -1,12 +0,0 @@
(() => {
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');
}
})();

View file

@ -23,25 +23,34 @@ const {currentPage} = Astro.props;
<style>
nav {
position: sticky;
min-height: calc(100vh - 3.5rem);
height: calc(100vh - 3.5rem);
top: 3.5rem;
width: 100%;
margin-right: 1rem;
}
.nav-groups {
height: 100%;
padding: 2rem 0;
overflow: auto;
overflow-x: visible;
overflow-y: auto;
max-height: 100vh;
}
.nav-groups > li + li {
margin-top: 2rem;
}
.nav-groups > :first-child {
padding-top: 2rem;
}
.nav-groups > :last-child {
padding-bottom: 2rem;
margin-bottom: var(--theme-navbar-height);
}
.nav-group-title {
font-size: 1.0rem;
font-weight: 700;
padding: 0.1rem 2rem;
padding: 0.1rem 1rem;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
@ -49,7 +58,7 @@ const {currentPage} = Astro.props;
.nav-link a {
font-size: 1.0rem;
margin: 1px;
padding: 0.3rem 2rem;
padding: 0.3rem 1rem;
font: inherit;
color: inherit;
text-decoration: none;
@ -66,4 +75,25 @@ const {currentPage} = Astro.props;
font-weight: 600;
}
</style>
:global(:root.theme-dark) .nav-link.is-active a {
color: var(--color-white);
}
@media (min-width: 60em) {
.nav-link a {
border-radius: 999px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.nav-groups {
padding: 0;
}
}
@media (min-width: 86.25em) {
.nav-link a {
border-radius: 8px;
}
}
</style>

View file

@ -5,46 +5,72 @@ import ThemeToggle from '../components/ThemeToggle.tsx';
import DocSidebar from '../components/DocSidebar.tsx';
import MenuToggle from '../components/MenuToggle.tsx';
const { content } = Astro.props;
const { content = {}, centered = false } = 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/edit/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">
<title>{content.title}</title>
<!-- This is intentionally inlined to avoid FOUC -->
<script>
(() => {
const root = document.documentElement;
const theme = localStorage.getItem('theme');
if (
theme === 'dark' ||
(!theme) && window.matchMedia('(prefers-color-scheme: dark)').matches)
{
root.classList.add('theme-dark');
} else {
root.classList.remove('theme-dark');
}
})();
</script>
<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">
<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;
}
header {
position: sticky;
top: 0;
z-index: 10;
height: 56px;
height: var(--theme-navbar-height);
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;
overflow: hidden;
position: sticky;
top: 0;
}
.layout {
@ -54,34 +80,16 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/edit/main/docs/${curr
minmax(var(--gutter), 1fr)
minmax(0, var(--max-width))
minmax(var(--gutter), 1fr);
gap: 1em;
overflow-x: hidden;
}
.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;
z-index: -1;
margin: 0 auto;
}
.nav-wrapper {
@ -99,11 +107,9 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/edit/main/docs/${curr
}
.sidebar {
min-height: calc(100vh - 3.5rem);
height: calc(100vh - 3.5rem);
max-height: 100vh;
height: 100vh;
position: sticky;
top: 3.5rem;
top: 0;
padding: 0;
}
@ -121,7 +127,27 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/edit/main/docs/${curr
height: 100%;
}
.layout.centered #article main {
display: flex;
flex-direction: column;
margin: auto;
align-items: center;
justify-content: center;
font-size: 1.5rem;
gap: 0.5em;
text-align: center;
}
.layout.centered #article main :global(> *) {
margin: 0;
}
.layout.centered #article main h1 {
font-size: 5rem;
}
.content {
padding: 0;
max-width: 75ch;
width: 100%;
height: 100%;
@ -147,8 +173,20 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/edit/main/docs/${curr
}
:global(.mobile-sidebar-toggle) #sidebar-site {
display: block;
top: 0;
}
@media (min-width: 60em) {
header {
position: static;
}
.layout {
overflow: initial;
}
.logo {
width: auto;
margin: 0;
z-index: 0;
}
#sidebar-site {
display: flex;
}
@ -165,6 +203,7 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/edit/main/docs/${curr
grid-template-columns:
20rem
minmax(0, var(--max-width));
gap: 1em;
}
#article {
grid-column: 2;
@ -202,6 +241,9 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/edit/main/docs/${curr
display: flex;
grid-column: 3;
}
.nav-wrapper {
padding: 0;
}
}
</style>
@ -210,16 +252,32 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/edit/main/docs/${curr
<body>
<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 class="menu-toggle">
<MenuToggle client:idle/>
</div>
<div />
<div class="logo flex">
<a href="https://astro.build/">
<h1 class="sr-only">Astro</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="363" height="102" viewBox="0 0 363 102" fill="none">
<path fill="url(#paint0_linear)" 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="#FF5D01" 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="#fff" d="M126.554 69c13.115 0 21.047-3.14 25.68-9.654 0 2.904.157 5.651.55 8.163h7.774c-.706-4.082-.863-6.75-.863-14.128V43.334c0-10.831-8.403-16.56-24.424-16.56-15.47 0-25.522 5.964-26.779 14.598h8.246c1.256-5.808 7.774-8.87 18.533-8.87 10.602 0 16.885 3.69 16.885 9.969v.785l-24.502 1.413c-9.974.549-13.665 1.962-16.492 4.003-2.67 1.962-4.162 5.023-4.162 8.555C107 64.683 114.696 69 126.554 69zm2.513-5.573c-9.109 0-14.135-2.119-14.135-6.357 0-4.553 3.141-6.593 14.214-7.3l23.01-1.412v1.805c0 8.241-9.66 13.264-23.089 13.264zM196.086 69c16.256 0 22.775-5.337 22.775-13.108 0-6.436-4.006-9.732-14.215-10.596l-19.083-1.49c-5.183-.393-8.088-1.884-8.088-5.102 0-4.082 4.476-6.201 14.135-6.201 10.995 0 16.727 2.198 20.497 7.064l6.361-3.061c-3.927-6.122-12.644-9.733-26.151-9.733-13.9 0-22.224 4.631-22.224 12.244 0 6.829 4.947 10.125 14.292 10.91l18.926 1.492c6.204.47 8.089 1.726 8.089 4.944 0 4.631-4.79 6.829-14.293 6.829-11.544 0-18.847-3.14-22.381-8.87l-6.204 3.376C173.312 64.918 181.715 69 196.086 69zM234.929 34.151v18.916c0 7.77 2.67 15.54 17.198 15.54 3.691 0 8.167-.706 10.131-1.57V60.68c-2.749.628-6.047 1.1-9.267 1.1-6.832 0-10.523-2.67-10.523-9.42V34.151h19.633v-5.887h-19.633V15l-7.539 3.061v10.204h-12.33v5.886h12.33zM280.823 28.265h-6.911v39.244h7.461V52.83c0-5.65 1.099-10.439 4.24-13.735 2.749-3.061 6.283-4.788 12.487-4.788 2.12 0 3.455.157 5.262.471v-7.22c-1.65-.393-3.063-.472-5.184-.472-8.402 0-15.078 4.945-17.355 12.558v-11.38zM334.807 69C351.534 69 363 60.523 363 47.887c0-12.637-11.466-21.114-28.193-21.114-16.727 0-28.193 8.477-28.193 21.114C306.614 60.523 318.08 69 334.807 69zm0-6.2c-12.329 0-20.261-5.809-20.261-14.913 0-9.105 7.932-14.913 20.261-14.913 12.251 0 20.261 5.808 20.261 14.913 0 9.104-8.01 14.912-20.261 14.912z"/>
<defs>
<linearGradient id="paint0_linear" x1="57.99" x2="38.65" y1="2.161" y2="69.149" gradientUnits="userSpaceOnUse">
<stop stop-color="#fff"/>
<stop offset="1" stop-color="#F9FAFB"/>
</linearGradient>
</defs>
</svg>
</a>
<a href="https://docs.astro.build/">
<h1 class="sr-only">Docs</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="226" height="102" viewBox="0 0 226 102" fill="none">
<path fill="currentColor" d="M25.805 68c14.688 0 24.883-8.41 24.883-21.14 0-12.786-9.62-19.756-24.653-19.756H0V68h25.805zm-14.17-33.005H24.25c8.352 0 14.17 4.09 14.17 12.039 0 8.236-5.3 13.075-14.113 13.075H11.635V34.995zM82.673 69.382c16.704 0 27.418-8.582 27.418-21.83 0-13.248-10.771-21.83-27.418-21.83-16.589 0-27.418 8.582-27.418 21.83 0 13.19 10.83 21.83 27.418 21.83zm0-8.64c-9.1 0-15.149-5.299-15.149-13.19 0-7.891 6.048-13.19 15.15-13.19 9.1 0 15.205 5.299 15.205 13.19 0 7.891-6.105 13.19-15.206 13.19zM141.497 69.382c13.306 0 22.637-5.299 25.978-14.572l-11.866-2.535c-1.67 5.415-6.393 8.295-13.709 8.295-9.216 0-15.033-5.127-15.033-13.018 0-8.006 5.702-13.018 14.918-13.018 7.43 0 12.154 3.053 13.709 8.64l12.038-2.13c-2.707-9.562-12.268-15.322-25.574-15.322-16.128 0-27.302 9.043-27.302 22.003 0 13.133 10.425 21.657 26.841 21.657zM194.94 69.382c14.745 0 23.212-5.01 23.212-14.054 0-7.603-4.665-10.944-15.955-12.096l-11.289-1.094c-5.242-.576-6.97-1.556-6.97-4.09 0-2.765 3.456-4.262 9.792-4.262 7.834 0 13.709 2.476 16.762 6.508l7.315-6.163c-5.069-5.702-13.133-8.41-23.501-8.41-13.997 0-21.888 4.781-21.888 12.903 0 7.546 4.781 11.232 14.803 12.326l12.557 1.383c4.896.518 6.624 1.555 6.624 4.09 0 3.225-3.456 4.723-10.886 4.723-8.352 0-14.688-3.226-18.087-8.007l-8.294 5.818c4.205 6.451 13.709 10.425 25.805 10.425z"/>
</svg>
</a>
</div>
<div class="theme-toggle-wrapper">
<ThemeToggle client:idle />
@ -227,24 +285,26 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/edit/main/docs/${curr
</nav>
</header>
<main class="layout">
<main class={centered ? "layout centered" : "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>

View file

@ -1,240 +1,8 @@
---
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 content={{title: "404"}} centered>
<p>This page isn't in our solar system.</p>
<a href="/">Take me home.</a>
</Layout>

View file

@ -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 centered>
<h1>
<code style="white-space: nowrap;">npm init astro</code>
</h1>
</Layout>

View file

@ -391,4 +391,4 @@ body {
::-webkit-scrollbar-button {
display: none;
}
/* Scrollbar - End */
/* Scrollbar - End */

View file

@ -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" }
]
}