diff options
author | 2021-07-30 22:39:15 -0700 | |
---|---|---|
committer | 2021-07-30 22:39:15 -0700 | |
commit | 7c744961494ca80f82b3ad66c98ff0a1c0496db7 (patch) | |
tree | 6f0ed586edd85076b2660b3b00c0fbb91f470449 | |
parent | d0b8485ddfd8dca1376ea0d417ce37282d092cd9 (diff) | |
download | astro-7c744961494ca80f82b3ad66c98ff0a1c0496db7.tar.gz astro-7c744961494ca80f82b3ad66c98ff0a1c0496db7.tar.zst astro-7c744961494ca80f82b3ad66c98ff0a1c0496db7.zip |
Docs site cleanup (#948)
* add language selector
* docs site cleanup
* review feedback
* code review comments
57 files changed, 739 insertions, 730 deletions
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index b3e06ce66..fe4142447 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -2,5 +2,9 @@ export default { buildOptions: { site: 'https://docs.astro.build/', }, - renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react'], + renderers: [ + // Our main renderer for frontend components + '@astrojs/renderer-preact', + // Needed for Algolia search component + '@astrojs/renderer-react'], }; diff --git a/docs/public/index.css b/docs/public/index.css index 5f382e7d0..abd3b5e98 100644 --- a/docs/public/index.css +++ b/docs/public/index.css @@ -183,14 +183,15 @@ strong { } /* Supporting Content */ +code { + font-family: var(--font-mono); + font-size: 0.85em; +} code:not([class*='language']) { --border-radius: 3px; --padding-block: 0.2rem; - --padding-inline: 0.33rem; - - font-family: var(--font-mono); - font-size: 0.85em; + --padding-inline: 0.4rem; color: var(--theme-code-inline-text); background-color: var(--theme-code-inline-bg); padding: var(--padding-block) var(--padding-inline); @@ -207,6 +208,10 @@ pre > code:not([class*='language']) { color: inherit; } +pre > code { + font-size: 1em; +} + table, pre { position: relative; @@ -299,56 +304,6 @@ button { background-color: var(--theme-bg); } -#theme-toggle { - display: inline-flex; - align-items: center; - gap: 0.25em; - padding: 0.33em 0.67em; - border-radius: 99em; - background-color: var(--theme-code-inline-bg); -} - -#theme-toggle > label: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 { - color: var(--theme-code-inline-text); - position: relative; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.5; -} - -#theme-toggle .checked { - color: var(--theme-accent); - opacity: 1; -} - -input[name='theme-toggle'] { - position: absolute; - opacity: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; -} - -.sidebar-nav { - width: 100%; - position: sticky; - top: 0; -} -.sidebar-nav-inner { - height: 100%; - padding: 0; - padding-top: var(--doc-padding); - overflow: auto; -} - h2.heading { font-size: 1rem; font-weight: 700; @@ -397,13 +352,6 @@ h2.heading { text-decoration: none; } -.edit-on-github { - text-decoration: none; - font: inherit; - color: inherit; - font-size: 1rem; -} - /* Screenreader Only Text */ .sr-only { position: absolute; @@ -429,24 +377,6 @@ h2.heading { white-space: normal; } -.skiplink, -.skiplink:focus, -.skiplink:focus-visible { - position: absolute; - padding: 0.25em; - font-size: larger; - top: 0.5rem; - left: 0.5rem; - z-index: 9; - display: block; - background-color: var(--theme-bg); - color: var(--theme-text-accent); - border-radius: 0.25em; - outline: var(--theme-text-accent) solid 1px; - outline-offset: 0; -} -/* Screenreader Only Text - End */ - :target { scroll-margin: calc(var(--theme-sidebar-offset, 5rem) + 2rem) 0 2rem; } diff --git a/docs/reference/api-reference.md b/docs/reference/api-reference.md index 9b0d82c9f..08580bcf1 100644 --- a/docs/reference/api-reference.md +++ b/docs/reference/api-reference.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: API Reference --- diff --git a/docs/src/components/DocSidebar/DocSidebar.tsx b/docs/src/components/DocSidebar/DocSidebar.tsx deleted file mode 100644 index ebf3dbf0d..000000000 --- a/docs/src/components/DocSidebar/DocSidebar.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; -import More from './More'; -import TableOfContents from './TableOfContents'; - -export const DocSidebar: FunctionalComponent<{ - headers: any[]; - editHref: string; -}> = ({ headers = [], editHref }) => { - return ( - <nav class="sidebar-nav" aria-labelledby="sidebar-content"> - <div class="sidebar-nav-inner"> - <TableOfContents headers={headers} /> - <More editHref={editHref} /> - </div> - </nav> - ); -}; - -export default DocSidebar; -export { default as More } from './More'; -export { default as TableOfContents } from './TableOfContents'; diff --git a/docs/src/components/DocSidebar/EditOnGithub.tsx b/docs/src/components/DocSidebar/EditOnGithub.tsx deleted file mode 100644 index e6e757f5f..000000000 --- a/docs/src/components/DocSidebar/EditOnGithub.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; - -const EditOnGithub: FunctionalComponent<{ href: string }> = ({ href }) => { - return ( - <a class="edit-on-github" href={href} target="_blank"> - <svg - aria-hidden="true" - focusable="false" - data-prefix="fas" - data-icon="pen" - class="svg-inline--fa fa-pen fa-w-16" - role="img" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 512 512" - height="1em" - width="1em" - > - <path - fill="currentColor" - d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z" - ></path> - </svg> - <span>Edit this page</span> - </a> - ); -}; - -export default EditOnGithub; diff --git a/docs/src/components/DocSidebar/More.tsx b/docs/src/components/DocSidebar/More.tsx deleted file mode 100644 index 6b0c5145c..000000000 --- a/docs/src/components/DocSidebar/More.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h, Fragment } from 'preact'; -import EditOnGithub from './EditOnGithub'; -import ThemeToggle from '../ThemeToggle'; - -const More: FunctionalComponent<{ editHref: string }> = ({ editHref }) => { - return ( - <> - <h2 class="heading">More</h2> - <ul> - <li class={`header-link depth-2`}> - <EditOnGithub href={editHref} /> - </li> - <li class={`header-link depth-2`}> - <a - href="https://github.com/snowpackjs/astro/issues/new/choose" - target="_blank" - > - <svg - aria-hidden="true" - focusable="false" - data-prefix="fas" - data-icon="bug" - class="svg-inline--fa fa-bug fa-w-16" - role="img" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 512 512" - height="1em" - width="1em" - > - <path - fill="currentColor" - d="M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z" - ></path> - </svg> - <span>Report a bug</span> - </a> - </li> - <li class={`header-link depth-2`}> - <a href="https://astro.build/chat" target="_blank"> - <svg - aria-hidden="true" - focusable="false" - data-prefix="fas" - data-icon="comment-alt" - class="svg-inline--fa fa-comment-alt fa-w-16" - role="img" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 512 512" - height="1em" - width="1em" - > - <path - fill="currentColor" - d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z" - ></path> - </svg> - <span>Join the community</span> - </a> - </li> - </ul> - <div style={{ margin: '2rem 0', textAlign: 'center' }}> - <ThemeToggle /> - </div> - </> - ); -}; - -export default More; diff --git a/docs/src/components/AvatarList.astro b/docs/src/components/Footer/AvatarList.astro index 589e296b9..589e296b9 100644 --- a/docs/src/components/AvatarList.astro +++ b/docs/src/components/Footer/AvatarList.astro diff --git a/docs/src/components/ArticleFooter.astro b/docs/src/components/Footer/Footer.astro index 48de51054..48de51054 100644 --- a/docs/src/components/ArticleFooter.astro +++ b/docs/src/components/Footer/Footer.astro diff --git a/docs/src/components/HeadCommon.astro b/docs/src/components/HeadCommon.astro new file mode 100644 index 000000000..3a58af07b --- /dev/null +++ b/docs/src/components/HeadCommon.astro @@ -0,0 +1,37 @@ +<!-- Global Metadata --> +<meta name="viewport" content="width=device-width, initial-scale=1.0"> +<link rel="icon" type="image/svg+xml" href="/favicon.svg"/> +<link rel="sitemap" href="/sitemap.xml"/> + +<!-- Global CSS --> +<link rel="stylesheet" href="/theme.css" /> +<link rel="stylesheet" href="/code.css" /> +<link rel="stylesheet" href="/index.css" /> + +<!-- Preload Fonts --> +<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"> + +<!-- Scrollable a11y code helper --> +<script type="module" src="/make-scrollable-code-focusable.js" /> + +<!-- 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> + +<!-- Global site tag (gtag.js) - Google Analytics --> +<script async src="https://www.googletagmanager.com/gtag/js?id=G-TEL60V1WM9"></script> +<script> + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + gtag('config', 'G-TEL60V1WM9'); +</script>
\ No newline at end of file diff --git a/docs/src/components/MetaData.astro b/docs/src/components/HeadSEO.astro index ce5a9ff77..5553eb2d0 100644 --- a/docs/src/components/MetaData.astro +++ b/docs/src/components/HeadSEO.astro @@ -1,38 +1,36 @@ --- +import {SITE, OPEN_GRAPH} from '../config.ts'; export interface Props { content: any, site: any, canonicalURL: URL | string, }; -const { content = {}, site, canonicalURL } = Astro.props; -const formattedContentTitle = content.title ? `${content.title} 🚀 ${site.title}` : site.title; -const imageSrc = content?.image?.src ?? site.image.src; +const { content = {}, canonicalURL } = Astro.props; +const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title; +const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src; const canonicalImageSrc = new URL(imageSrc, Astro.site); -const imageAlt = content?.image?.alt ?? site.image.alt; +const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt; --- +<!-- Page Metadata --> +<link rel="canonical" href={canonicalURL}/> <!-- OpenGraph Tags --> <meta property="og:title" content={formattedContentTitle}/> <meta property="og:type" content="article"/> <meta property="og:url" content={canonicalURL}/> -<meta property="og:locale" content={content.ogLocale ?? site.ogLocale}/> +<meta property="og:locale" content={content.ogLocale ?? OPEN_GRAPH.locale}/> <meta property="og:image" content={canonicalImageSrc}/> <meta property="og:image:alt" content={imageAlt}/> -<meta property="og:description" content={content.description ? content.description : site.description}/> -<meta property="og:site_name" content={site.title}/> -<!-- END OpenGraph Tags --> +<meta property="og:description" content={content.description ? content.description : SITE.description}/> +<meta property="og:site_name" content={SITE.title}/> <!-- Twitter Tags --> <meta name="twitter:card" content="summary_large_image"/> -<meta name="twitter:site" content={site.twitter.site}/> -<meta name="twitter:creator" content={site.twitter.creator}/> +<meta name="twitter:site" content={OPEN_GRAPH.twitter}/> <meta name="twitter:title" content={formattedContentTitle}/> -<meta name="twitter:description" content={content.description ? content.description : site.description}/> +<meta name="twitter:description" content={content.description ? content.description : SITE.description}/> <meta name="twitter:image" content={canonicalImageSrc}/> <meta name="twitter:image:alt" content={imageAlt}/> -<!-- END Twitter Tags --> - -<link rel="canonical" href={canonicalURL}/> <!-- TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense? diff --git a/docs/src/components/AstroLogo.astro b/docs/src/components/Header/AstroLogo.astro index ff1939ad9..ff1939ad9 100644 --- a/docs/src/components/AstroLogo.astro +++ b/docs/src/components/Header/AstroLogo.astro diff --git a/docs/src/components/Header/Header.astro b/docs/src/components/Header/Header.astro new file mode 100644 index 000000000..6ee66e24e --- /dev/null +++ b/docs/src/components/Header/Header.astro @@ -0,0 +1,155 @@ +--- +import SkipToContent from './SkipToContent.astro'; +import SidebarToggle from './SidebarToggle.tsx'; +import Search from "./Search.jsx"; +// import LanguageSelect from './LanguageSelect.jsx'; +--- +<style> + header { + z-index: 11; + height: var(--theme-navbar-height); + width: 100%; + background-color: var(--theme-navbar-bg); + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: sticky; + top: 0; + } + + + .logo { + display: flex; + overflow: hidden; + width: 30px; + font-size: 1rem; + flex-shrink: 0; + font-weight: 600; + line-height: 1; + color: hsla(var(--color-base-white), 100%, 1); + text-decoration: none; + gap: 0.5em; + z-index: -1; + } + + .logo a { + padding: 0.5em 0.25em; + margin: -0.5em -0.25em; + } + + .logo svg { + height: 40px; + width: auto; + display: block; + color: var(--theme-accent); + } + + .logo .hover { + opacity: 0.0; + } + .logo a { + transition: transform 180ms ease-out; + } + + .logo a:hover, + .logo a:focus { + outline: none; + opacity: 1.0; + transform: translateY(-2px); + } + + .logo h1 { + font: inherit; + color: inherit; + margin: 0; + } + + + + .nav-wrapper { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 1em; + width: 100%; + max-width: 82em; + padding: 0 1rem; + } + @media (min-width: 50em) { + header { + position: static; + padding: 2rem 0rem 0 2rem; + } + .logo { + width: auto; + margin: 0; + z-index: 0; + } + .menu-toggle { + display: none; + } + .logo { + width: auto; + } + } + + /** Style Algolia */ +:root { + --docsearch-primary-color: var(--theme-accent); + --docsearch-logo-color: var(--theme-text); +} + +.search-item { + display: none; + position: relative; + z-index: 10; + flex-grow: 1; + padding-right: 0.7rem; + display: flex; + max-width: 200px; +} +:global(.search-item > *) { + flex-grow: 1; +} +@media (min-width: 50em) { + .search-item { + max-width: 400px; + } +} +</style> +<header> + <SkipToContent /> + <nav class="nav-wrapper" title="Top Navigation"> + <div class="menu-toggle"> + <SidebarToggle client:idle/> + </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"> + <style> + .text { + fill: var(--theme-text); + } + .hover { + fill: var(--theme-accent); + } + </style> + <path class="text" 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 class="text" 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"/> + </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 style="flex-grow: 1;"></div> + <!-- Add back when ready: <LanguageSelect client:idle /> --> + <div class="search-item"><Search client:idle /></div> + </nav> +</header>
\ No newline at end of file diff --git a/docs/src/components/Header/LanguageSelect.css b/docs/src/components/Header/LanguageSelect.css new file mode 100644 index 000000000..f353c18c2 --- /dev/null +++ b/docs/src/components/Header/LanguageSelect.css @@ -0,0 +1,48 @@ + +.language-select { + flex-grow: 1; + width: 48px; + box-sizing: border-box; + margin: 0; + padding: 0.33em 0.5em; + overflow: visible; + font-weight: 500; + font-size: 1rem; + font-family: inherit; + line-height: inherit; + background-color: transparent; + border-color: var(--theme-text-lighter); + color: var(--theme-text-light); + border-style: solid; + border-width: 1px; + border-radius: 0.25rem; + outline: 0; + cursor: pointer; + transition-timing-function: ease-out; + transition-duration: 0.2s; + transition-property: border-color, color; + -webkit-font-smoothing: antialiased; + padding-left: 30px; + padding-right: 1rem; +} +.language-select-wrapper .language-select:hover, +.language-select-wrapper .language-select:focus { + color: var(--theme-text); + border-color: var(--theme-text-light); +} +.language-select-wrapper { + color: var(--theme-text-light); + position: relative; +} +.language-select-wrapper > svg { + position: absolute; + top: 7px; + left: 10px; + z-index: -1; +} + +@media (min-width: 50em) { + .language-select { + width: 100%; + } +}
\ No newline at end of file diff --git a/docs/src/components/Header/LanguageSelect.tsx b/docs/src/components/Header/LanguageSelect.tsx new file mode 100644 index 000000000..62849e867 --- /dev/null +++ b/docs/src/components/Header/LanguageSelect.tsx @@ -0,0 +1,44 @@ +import type { FunctionalComponent } from 'preact'; +import { h } from 'preact'; +import './LanguageSelect.css'; + +const SelectLanguage: FunctionalComponent<{}> = ({}) => { + let defaultValue = undefined; + if (!import.meta.env.SSR) { + const oldPathname = window.location.pathname; + const oldPathnameParts = oldPathname.split('/'); + if (/[a-z]{2}/.test(oldPathnameParts[1])) { + defaultValue = oldPathnameParts[1]; + } + } + + return ( + <div class="language-select-wrapper"> + <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.6 77.3" height="1.2em" width="1.2em"> <path fill="currentColor" d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" /> <path fill="currentColor" d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8 c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z" /> </svg> + <select class="language-select" value={defaultValue} onChange={(e) => { + const newLang = e.target.value; + if (newLang === 'en') { + window.location.pathname = `/getting-started`; + } else { + window.location.pathname = `/${newLang}/getting-started`; + } + // TODO: Preserve the current page, if it exists: + // const oldPathname = window.location.pathname; + // const oldPathnameParts = oldPathname.split('/'); + // oldPathnameParts.shift(); + // if (/^[a-z]{2}$/.test(oldPathnameParts[0])) { + // oldPathnameParts.shift(); + // } + // if (newLang !== 'en') { + // oldPathnameParts.unshift(newLang); + // } + // window.location.pathname = '/' + oldPathnameParts.join('/'); + }}> + <option value="en"><span>English</span></option> + <option value="nl"><span>Dutch</span></option> + </select> + </div> + ); +}; + +export default SelectLanguage; diff --git a/docs/src/components/Search.css b/docs/src/components/Header/Search.css index 330a02d1d..47ec15acf 100644 --- a/docs/src/components/Search.css +++ b/docs/src/components/Header/Search.css @@ -1,32 +1,8 @@ +/** Style Algolia */ :root { --docsearch-primary-color: var(--theme-accent); --docsearch-logo-color: var(--theme-text); } - -.search { - display: none; - position: relative; - z-index: 10; - flex-grow: 1; - grid-area: search; - padding-left: 0.75rem; - padding-right: 0.7rem; - display: flex; - width: 400px; - max-width: 400px; -} -.search > * { - flex-grow: 1; -} - -.search > :global(.algolia-autocomplete) { - width: 100%; -} - -:global(body.is-nav-open) .search { - display: flex; -} - .search-input { flex-grow: 1; box-sizing: border-box; @@ -48,22 +24,21 @@ cursor: pointer; transition-timing-function: ease-out; transition-duration: 0.2s; - transition-property: border-color, background-color; + transition-property: border-color, color; -webkit-font-smoothing: antialiased; } -.no-underline { - text-decoration: none; -} -.search-input:hover { +.search-input:hover, +.search-input:focus { color: var(--theme-text); + border-color: var(--theme-text-light); } -.search-input:hover::placeholder { +.search-input:hover::placeholder, +.search-input:focus::placeholder { color: var(--theme-text-light); } .search-input::placeholder { color: var(--theme-text-light); } - .search-hint { position: absolute; top: 7px; @@ -74,7 +49,6 @@ align-items: center; justify-content: center; letter-spacing: 0.125em; - color: var(--theme-text-light); font-size: 13px; font-family: var(--font-mono); pointer-events: none; @@ -90,4 +64,4 @@ .search-hint { display: flex; } -} +}
\ No newline at end of file diff --git a/docs/src/components/Search.tsx b/docs/src/components/Header/Search.tsx index af04829e9..a1684e49f 100644 --- a/docs/src/components/Search.tsx +++ b/docs/src/components/Header/Search.tsx @@ -5,7 +5,7 @@ import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'; import '@docsearch/css//dist/style.css'; import './Search.css'; -export function Search() { +export default function Search() { const [isOpen, setIsOpen] = useState(false); const searchButtonRef = useRef(); const [initialQuery, setInitialQuery] = useState(null); @@ -72,7 +72,6 @@ export function Search() { // work better on localhost, preview URLS. const a = document.createElement('a'); a.href = item.url; - console.log(a.hash); const hash = a.hash === '#overview' ? '' : a.hash; return { ...item, diff --git a/docs/src/components/MenuToggle.tsx b/docs/src/components/Header/SidebarToggle.tsx index 605581077..605581077 100644 --- a/docs/src/components/MenuToggle.tsx +++ b/docs/src/components/Header/SidebarToggle.tsx diff --git a/docs/src/components/Header/SkipToContent.astro b/docs/src/components/Header/SkipToContent.astro new file mode 100644 index 000000000..6df3a72ed --- /dev/null +++ b/docs/src/components/Header/SkipToContent.astro @@ -0,0 +1,21 @@ +<style> +.skiplink, +.skiplink:focus, +.skiplink:focus-visible { + position: absolute; + padding: 0.25em; + font-size: larger; + top: 0; + left: 0; + right: 0; + z-index: 9; + display: block; + text-align: center; + background-color: var(--theme-text-accent); + color: var(--theme-bg); + border-radius: 0.25em; + outline: var(--theme-bg) solid 1px; + outline-offset: 0; +} +</style> +<a href="#article" class="sr-only skiplink"><span>Skip to Content</span></a> diff --git a/docs/src/components/SiteSidebar.astro b/docs/src/components/LeftSidebar/LeftSidebar.astro index 382b122f4..f44762dba 100644 --- a/docs/src/components/SiteSidebar.astro +++ b/docs/src/components/LeftSidebar/LeftSidebar.astro @@ -1,11 +1,11 @@ --- -import { sidebar } from '../config.ts'; +import { SIDEBAR } from '../../config.ts'; const {currentPage} = Astro.props; --- -<nav aria-labelledby="sidebar-site"> +<nav aria-labelledby="grid-left"> <ul class="nav-groups"> - {sidebar.map(category => ( + {SIDEBAR.map(category => ( <li> <div class="nav-group"> <h2 class="nav-group-title">{category.text}</h2> diff --git a/docs/src/components/Note.astro b/docs/src/components/Note.astro deleted file mode 100644 index a9c2ebf51..000000000 --- a/docs/src/components/Note.astro +++ /dev/null @@ -1,45 +0,0 @@ ---- -const { type = 'tip', title } = Astro.props; ---- - -<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); - } - .note.type-warning { - --color: var(--color-yellow); - } - .note.type-error { - --color: var(--color-red); - } -</style> diff --git a/docs/src/components/PageContent/PageContent.astro b/docs/src/components/PageContent/PageContent.astro new file mode 100644 index 000000000..fd1e9d242 --- /dev/null +++ b/docs/src/components/PageContent/PageContent.astro @@ -0,0 +1,41 @@ +--- +const {content, githubEditUrl} = Astro.props; +const title = content.title; +const headers = content.astro.headers; +import MoreMenu from '../RightSidebar/MoreMenu.astro'; +import TableOfContents from '../RightSidebar/TableOfContents.tsx'; +--- +<style> + .content { + padding: 0; + max-width: 75ch; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + } + .content > section { + margin-bottom: 4rem; + } + .block { + display: block; + } + + @media (min-width: 50em) { + .sm\:hidden { + display: none; + } + } +</style> +<article id="article" class="content"> + <section class="main-section"> + <h1 class="content-title" id="overview">{title}</h1> + <nav class="block sm:hidden"> + <TableOfContents client:media="(max-width: 50em)" headers={headers}/> + </nav> + <slot /> + </section> + <nav class="block sm:hidden"> + <MoreMenu editHref={githubEditUrl}/> + </nav> +</article>
\ No newline at end of file diff --git a/docs/src/components/RightSidebar/MoreMenu.astro b/docs/src/components/RightSidebar/MoreMenu.astro new file mode 100644 index 000000000..6014bdee7 --- /dev/null +++ b/docs/src/components/RightSidebar/MoreMenu.astro @@ -0,0 +1,68 @@ +--- +import ThemeToggleButton from './ThemeToggleButton.jsx'; +const {editHref} = Astro.props; +--- +<style> + .edit-on-github { + text-decoration: none; + font: inherit; + color: inherit; + font-size: 1rem; + } +</style> +<h2 class="heading">More</h2> +<ul> + <li class={`header-link depth-2`}> + <a class="edit-on-github" href={editHref} target="_blank"> + <svg + aria-hidden="true" + focusable="false" + data-prefix="fas" + data-icon="pen" + class="svg-inline--fa fa-pen fa-w-16" + role="img" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 512 512" + height="1em" + width="1em" + > + <path + fill="currentColor" + d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z" + ></path> + </svg> + <span>Edit this page</span> + </a> + </li> + <li class={`header-link depth-2`}> + <a href={editHref} target="_blank"> + <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.6 77.3" height="1.24em" width="1.24em" style="margin: -2px;"> <path fill="currentColor" d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" /> <path fill="currentColor" d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8 c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z" /> </svg> + <span>Translate this page</span> + </a> + </li> + <li class={`header-link depth-2`}> + <a href="https://astro.build/chat" target="_blank"> + <svg + aria-hidden="true" + focusable="false" + data-prefix="fas" + data-icon="comment-alt" + class="svg-inline--fa fa-comment-alt fa-w-16" + role="img" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 512 512" + height="1em" + width="1em" + > + <path + fill="currentColor" + d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z" + ></path> + </svg> + <span>Join the community</span> + </a> + </li> +</ul> +<div style="margin: 2rem 0; text-align: center;"> + <ThemeToggleButton client:visible /> +</div> diff --git a/docs/src/components/RightSidebar/RightSidebar.astro b/docs/src/components/RightSidebar/RightSidebar.astro new file mode 100644 index 000000000..ed1dd37cc --- /dev/null +++ b/docs/src/components/RightSidebar/RightSidebar.astro @@ -0,0 +1,25 @@ +--- +import TableOfContents from './TableOfContents.jsx'; +import MoreMenu from './MoreMenu.astro'; +const {content, githubEditUrl} = Astro.props; +const headers = content.astro.headers; +--- +<style> + .sidebar-nav { + width: 100%; + position: sticky; + top: 0; + } + .sidebar-nav-inner { + height: 100%; + padding: 0; + padding-top: var(--doc-padding); + overflow: auto; + } +</style> +<nav class="sidebar-nav" aria-labelledby="grid-right"> + <div class="sidebar-nav-inner"> + <TableOfContents client:media="(min-width: 50em)" headers={headers} /> + <MoreMenu editHref={githubEditUrl} /> + </div> +</nav>
\ No newline at end of file diff --git a/docs/src/components/DocSidebar/TableOfContents.tsx b/docs/src/components/RightSidebar/TableOfContents.tsx index 803b05568..803b05568 100644 --- a/docs/src/components/DocSidebar/TableOfContents.tsx +++ b/docs/src/components/RightSidebar/TableOfContents.tsx diff --git a/docs/src/components/RightSidebar/ThemeToggleButton.css b/docs/src/components/RightSidebar/ThemeToggleButton.css new file mode 100644 index 000000000..43915c5b9 --- /dev/null +++ b/docs/src/components/RightSidebar/ThemeToggleButton.css @@ -0,0 +1,38 @@ + +.theme-toggle { + display: inline-flex; + align-items: center; + gap: 0.25em; + padding: 0.33em 0.67em; + border-radius: 99em; + background-color: var(--theme-code-inline-bg); +} + +.theme-toggle > label: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 { + color: var(--theme-code-inline-text); + position: relative; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.5; +} + +.theme-toggle .checked { + color: var(--theme-accent); + opacity: 1; +} + +input[name='theme-toggle'] { + position: absolute; + opacity: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; +}
\ No newline at end of file diff --git a/docs/src/components/ThemeToggle.tsx b/docs/src/components/RightSidebar/ThemeToggleButton.tsx index 37b028758..d3dc678c2 100644 --- a/docs/src/components/ThemeToggle.tsx +++ b/docs/src/components/RightSidebar/ThemeToggleButton.tsx @@ -1,6 +1,7 @@ import type { FunctionalComponent } from 'preact'; import { h, Fragment } from 'preact'; import { useState, useEffect } from 'preact/hooks'; +import './ThemeToggleButton.css'; const themes = ['light', 'dark']; @@ -53,7 +54,7 @@ const ThemeToggle: FunctionalComponent = () => { }, [theme]); return ( - <div id="theme-toggle"> + <div class="theme-toggle"> {themes.map((t, i) => { const icon = icons[i]; const checked = t === theme; diff --git a/docs/src/config.ts b/docs/src/config.ts index ad69bd16d..c3e78d8d9 100644 --- a/docs/src/config.ts +++ b/docs/src/config.ts @@ -1,4 +1,4 @@ -export const sidebar = [ +export const SIDEBAR = [ { text: 'Setup', link: '', @@ -50,36 +50,20 @@ export const sidebar = [ { text: 'Renderer Reference', link: 'reference/renderer-reference' }, ], }, - // To add once rest of the site is complete - // see https://github.com/snowpackjs/astro-docs/issues/9 - // { - // text: 'Integrations', - // link: 'integrations', - // children: [ - // { text: 'Deploy Astro', link: 'integrations/deploy-astro' }, - // { text: 'Data Sources / CMS', link: 'integrations/data-sources-cms' }, - // { text: 'State Management', link: 'integrations/state-management' }, - // { - // text: 'Styles & CSS Libraries', - // link: 'integrations/styles-and-css-libraries', - // }, - // { text: 'Developer Tools', link: 'integrations/developer-tools' }, - // ], - // }, ]; -export const site = { +export const SITE = { title: 'Astro Documentation', description: 'Build faster websites with less client-side Javascript.', - ogLocale: 'en_US', +} + +export const OPEN_GRAPH = { + locale: 'en_US', image: { src: '/default-og-image.png?v=1', alt: 'astro logo on a starry expanse of space,' + ' with a purple saturn-like planet floating in the right foreground', }, - twitter: { - site: 'astrodotbuild', - creator: 'astrodotbuild', - }, + twitter: 'astrodotbuild', }; diff --git a/docs/src/layouts/Main.astro b/docs/src/layouts/Main.astro deleted file mode 100644 index 52b0f84a0..000000000 --- a/docs/src/layouts/Main.astro +++ /dev/null @@ -1,367 +0,0 @@ ---- -import ArticleFooter from '../components/ArticleFooter.astro'; -import SiteSidebar from '../components/SiteSidebar.astro'; -import DocSidebar, { TableOfContents, More } from '../components/DocSidebar/DocSidebar.tsx'; -import MenuToggle from '../components/MenuToggle.tsx'; -import MetaData from "../components/MetaData.astro"; -import {Search} from "../components/Search.jsx"; -import { site } from "../config.ts"; - -const { content = {}, centered = false } = Astro.props; -const headers = content?.astro?.headers; -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'}" class="initial"> - <head> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - - <title>{content.title ? `${content.title} 🚀 ${site.title}` : site.title}</title> - <MetaData {content} {site} canonicalURL={Astro.request.canonicalURL}/> - - <!-- 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" /> - - <link rel="icon" - type="image/svg+xml" - href="/favicon.svg"/> - - <link rel="sitemap" href="/sitemap.xml"/> - - <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: var(--theme-navbar-height) 1fr; - --gutter: 0.5rem; - --doc-padding: 2rem; - } - - header { - z-index: 11; - height: var(--theme-navbar-height); - width: 100%; - background-color: var(--theme-navbar-bg); - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: sticky; - top: 0; - } - - - .logo { - display: flex; - overflow: hidden; - width: 30px; - font-size: 1rem; - flex-shrink: 0; - font-weight: 600; - line-height: 1; - color: hsla(var(--color-base-white), 100%, 1); - text-decoration: none; - gap: 0.5em; - z-index: -1; - } - - .logo a { - padding: 0.5em 0.25em; - margin: -0.5em -0.25em; - } - - .logo svg { - height: 40px; - width: auto; - display: block; - color: var(--theme-accent); - } - - .logo .hover { - opacity: 0.0; - } - .logo a:hover .hover { - opacity: 1; - } - - .logo h1 { - font: inherit; - color: inherit; - margin: 0; - } - - - - .layout { - display: grid; - grid-auto-flow: column; - grid-template-columns: - minmax(var(--gutter), 1fr) - minmax(0, var(--max-width)) - minmax(var(--gutter), 1fr); - overflow-x: hidden; - } - - .nav-wrapper { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 1em; - width: 100%; - max-width: 82em; - padding: 0 1rem; - } - - - .layout :global(> *) { - width: 100%; - height: 100%; - } - - .sidebar { - height: 100vh; - position: sticky; - top: 0; - padding: 0; - } - - #sidebar-site { - position: fixed; - background-color: var(--theme-bg); - z-index: 10; - } - - #article { - padding: var(--doc-padding) var(--gutter); - grid-column: 2; - display: flex; - flex-direction: column; - height: 100%; - } - - .layout.centered #article > article > section { - 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 > article > section :global(> *) { - margin: 0; - } - - .layout.centered #article > article > section h1 { - font-size: 5rem; - } - - .content { - padding: 0; - max-width: 75ch; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - } - - .content > section { - margin-bottom: 4rem; - } - - #sidebar-content { - display: none; - } - #sidebar-site { - display: none; - } - :global(.mobile-sidebar-toggle) { - overflow: hidden; - } - :global(.mobile-sidebar-toggle) #sidebar-site { - display: block; - top: 2rem; - } - .block { - display: block; - } - @media (min-width: 50em) { - header { - position: static; - padding: 2rem 0rem 0 2rem; - } - .layout { - overflow: initial; - } - .logo { - width: auto; - margin: 0; - z-index: 0; - } - #sidebar-site { - display: flex; - padding-left: 2rem; - position: sticky; - } - :global(.mobile-sidebar-toggle) { - overflow: initial; - } - :global(.mobile-sidebar-toggle) #sidebar-site { - display: flex; - top: 0; - } - .menu-toggle { - display: none; - } - .layout { - grid-template-columns: - 20rem - minmax(0, var(--max-width)); - gap: 1em; - } - #article { - grid-column: 2; - } - #sidebar-content { - /* display: flex; */ - grid-column: 3; - } - .sm\:hidden { - display: none; - } - .logo { - width: auto; - } - } - - @media (min-width: 72em) { - .layout { - grid-template-columns: - 20rem - minmax(0, var(--max-width)) - 18rem; - padding-left: 0; - padding-right: 0; - margin: 0 auto; - } - - #sidebar-site { - grid-column: 1; - } - #article { - grid-column: 2; - } - #sidebar-content { - display: flex; - grid-column: 3; - } - } - - </style> - </head> - - <body> - <header> - <a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a> - <nav class="nav-wrapper" title="Top Navigation"> - <div class="menu-toggle"> - <MenuToggle client:idle/> - </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"> - <style> - .text { - fill: var(--theme-text); - } - .hover { - fill: var(--theme-accent); - } - </style> - <path class="text" 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 class="text" 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"/> - <rect class="hover" x="106" y="82" width="258" height="6"></rect> - </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"/> - <rect class="hover" x="0" y="82" width="218" height="6"></rect> - </svg> - </a> - </div> - <div style="flex-grow: 1;"></div> - <div class="search"> - <Search client:idle /> - </div> - </nav> - </header> - - <main class={centered ? "layout centered" : "layout"}> - <aside class="sidebar" id="sidebar-site" title="Documentation Sections"> - <SiteSidebar currentPage={currentPage?.slice(1) ?? ''} /> - </aside> - <div id="article"> - <article class="content"> - <section class="main-section"> - <h1 class="content-title" id="overview">{content?.title}</h1> - {currentPage && <nav class="block sm:hidden"> - <TableOfContents client:media="(max-width: 50em)" headers={headers}/> - </nav>} - <slot /> - </section> - {currentPage && <nav class="block sm:hidden"> - <More client:media="(max-width: 50em)" editHref={githubEditUrl}/> - </nav>} - {currentPage && <ArticleFooter path={currentFile} />} - </article> - </div> - <aside class="sidebar" id="sidebar-content" title="Table of Contents"> - {currentPage && <DocSidebar client:media="(min-width: 50em)" headers={headers} editHref={githubEditUrl} />} - </aside> - </main> - - <!-- Scrollable a11y code helper --> - <script type="module" src="/make-scrollable-code-focusable.js" /> - <!-- Global site tag (gtag.js) - Google Analytics --> - <script async src="https://www.googletagmanager.com/gtag/js?id=G-TEL60V1WM9"></script> - <script> - window.dataLayer = window.dataLayer || []; - function gtag(){dataLayer.push(arguments);} - gtag('js', new Date()); - gtag('config', 'G-TEL60V1WM9'); - </script> - </body> -</html> diff --git a/docs/src/layouts/MainLayout.astro b/docs/src/layouts/MainLayout.astro new file mode 100644 index 000000000..c96091559 --- /dev/null +++ b/docs/src/layouts/MainLayout.astro @@ -0,0 +1,122 @@ +--- +import HeadCommon from "../components/HeadCommon.astro"; +import HeadSEO from "../components/HeadSEO.astro"; +import Header from '../components/Header/Header.astro'; +import Footer from '../components/Footer/Footer.astro'; +import PageContent from '../components/PageContent/PageContent.astro'; +import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro'; +import RightSidebar from '../components/RightSidebar/RightSidebar.astro'; +import { SITE } from "../config.ts"; + +const { content = {} } = Astro.props; +const currentPage = Astro.request.url.pathname; +const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`; +const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${currentFile}`; +--- + +<html lang="{content.lang ?? 'en-us'}" class="initial"> + <head> + <HeadCommon /> + <HeadSEO {content} canonicalURL={Astro.request.canonicalURL} /> + <title>{content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title}</title> + <style> + body { + width: 100%; + display: grid; + grid-template-rows: var(--theme-navbar-height) 1fr; + --gutter: 0.5rem; + --doc-padding: 2rem; + } + .layout { + display: grid; + grid-auto-flow: column; + grid-template-columns: + minmax(var(--gutter), 1fr) + minmax(0, var(--max-width)) + minmax(var(--gutter), 1fr); + overflow-x: hidden; + } + .layout :global(> *) { + width: 100%; + height: 100%; + } + .grid-sidebar { + height: 100vh; + position: sticky; + top: 0; + padding: 0; + } + #grid-left { + position: fixed; + background-color: var(--theme-bg); + z-index: 10; + display: none; + } + #grid-main { + padding: var(--doc-padding) var(--gutter); + grid-column: 2; + display: flex; + flex-direction: column; + height: 100%; + } + #grid-right { + display: none; + } + :global(.mobile-sidebar-toggle) { + overflow: hidden; + } + :global(.mobile-sidebar-toggle) #grid-left { + display: block; + top: 2rem; + } + @media (min-width: 50em) { + .layout { + overflow: initial; + grid-template-columns: + 20rem + minmax(0, var(--max-width)); + gap: 1em; + } + #grid-left { + display: flex; + padding-left: 2rem; + position: sticky; + grid-column: 1; + } + } + + @media (min-width: 72em) { + .layout { + grid-template-columns: + 20rem + minmax(0, var(--max-width)) + 18rem; + padding-left: 0; + padding-right: 0; + margin: 0 auto; + } + #grid-right { + grid-column: 3; + display: flex; + } + } + </style> + </head> + + <body> + <Header /> + <main class="layout"> + <aside id="grid-left" class="grid-sidebar" title="Site Navigation"> + <LeftSidebar currentPage={currentPage.slice(1) ?? ''} /> + </aside> + <div id="grid-main"> + <PageContent content={content} githubEditUrl={githubEditUrl}> + <slot /> + </PageContent> + </div> + <aside id="grid-right" class="grid-sidebar" title="Table of Contents"> + <RightSidebar content={content} githubEditUrl={githubEditUrl} /> + </aside> + </main> + </body> +</html> diff --git a/docs/src/layouts/SplashLayout.astro b/docs/src/layouts/SplashLayout.astro new file mode 100644 index 000000000..69d3f90b6 --- /dev/null +++ b/docs/src/layouts/SplashLayout.astro @@ -0,0 +1,48 @@ +--- +import HeadCommon from "../components/HeadCommon.astro"; +import Header from '../components/Header/Header.astro'; +import { SITE } from "../config.ts"; + +const { title } = Astro.props; +--- + +<html lang="en-us" class="initial"> + <head> + <HeadCommon /> + <title>{`${title} 🚀 ${SITE.title}`}</title> + <style> + body { + width: 100%; + display: grid; + grid-template-rows: var(--theme-navbar-height) 1fr; + --gutter: 0.5rem; + --doc-padding: 2rem; + } + .layout { + display: grid; + grid-auto-flow: column; + grid-template-columns: + minmax(var(--gutter), 1fr) + minmax(0, var(--max-width)) + minmax(var(--gutter), 1fr); + overflow-x: hidden; + } + article { + padding: var(--doc-padding) var(--gutter); + grid-column: 2; + display: flex; + flex-direction: column; + height: 100%; + } + </style> + </head> + + <body> + <Header /> + <main class="layout splash-layout"> + <article> + <slot /> + </article> + </main> + </body> +</html> diff --git a/docs/src/pages/404.astro b/docs/src/pages/404.astro index 195a29d4e..242cbf594 100644 --- a/docs/src/pages/404.astro +++ b/docs/src/pages/404.astro @@ -1,8 +1,9 @@ --- -import Layout from '../layouts/Main.astro'; +import SplashLayout from '../layouts/SplashLayout.astro'; --- -<Layout content={{title: "404"}} centered> +<SplashLayout title="Not Found"> + <h1>404</h1> <p>This page isn't in our solar system.</p> <a href="/">Take me home.</a> -</Layout> +</SplashLayout> diff --git a/docs/src/pages/blog/island-architecture.md b/docs/src/pages/blog/island-architecture.md index c516287ef..78be15c92 100644 --- a/docs/src/pages/blog/island-architecture.md +++ b/docs/src/pages/blog/island-architecture.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Island Architecture draft: true --- diff --git a/docs/src/pages/comparing-astro-vs-other-tools.md b/docs/src/pages/comparing-astro-vs-other-tools.md index 5157ee95e..aa9f12745 100644 --- a/docs/src/pages/comparing-astro-vs-other-tools.md +++ b/docs/src/pages/comparing-astro-vs-other-tools.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Comparing Astro --- diff --git a/docs/src/pages/core-concepts/astro-components.md b/docs/src/pages/core-concepts/astro-components.md index 758b3fb07..85d1fbccc 100644 --- a/docs/src/pages/core-concepts/astro-components.md +++ b/docs/src/pages/core-concepts/astro-components.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Astro Components --- diff --git a/docs/src/pages/core-concepts/astro-pages.md b/docs/src/pages/core-concepts/astro-pages.md index 87157c5b1..de61239c8 100644 --- a/docs/src/pages/core-concepts/astro-pages.md +++ b/docs/src/pages/core-concepts/astro-pages.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Pages --- diff --git a/docs/src/pages/core-concepts/collections.md b/docs/src/pages/core-concepts/collections.md index e49cd1500..edf4cf1fa 100644 --- a/docs/src/pages/core-concepts/collections.md +++ b/docs/src/pages/core-concepts/collections.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Collections --- diff --git a/docs/src/pages/core-concepts/component-hydration.md b/docs/src/pages/core-concepts/component-hydration.md index a4c25cf26..ed2ab453d 100644 --- a/docs/src/pages/core-concepts/component-hydration.md +++ b/docs/src/pages/core-concepts/component-hydration.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Partial Hydration in Astro --- diff --git a/docs/src/pages/core-concepts/layouts.md b/docs/src/pages/core-concepts/layouts.md index ca97f3b83..534c66ab3 100644 --- a/docs/src/pages/core-concepts/layouts.md +++ b/docs/src/pages/core-concepts/layouts.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Layouts --- diff --git a/docs/src/pages/core-concepts/project-structure.md b/docs/src/pages/core-concepts/project-structure.md index de929f2cc..3c2207a5b 100644 --- a/docs/src/pages/core-concepts/project-structure.md +++ b/docs/src/pages/core-concepts/project-structure.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Project Structure --- diff --git a/docs/src/pages/examples.md b/docs/src/pages/examples.md index cccecad90..17af0bb87 100644 --- a/docs/src/pages/examples.md +++ b/docs/src/pages/examples.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Examples --- diff --git a/docs/src/pages/getting-started.md b/docs/src/pages/getting-started.md index d1ff80a31..cc7d9d688 100644 --- a/docs/src/pages/getting-started.md +++ b/docs/src/pages/getting-started.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Getting Started --- diff --git a/docs/src/pages/guides/data-fetching.md b/docs/src/pages/guides/data-fetching.md index c3e033405..c853dfe54 100644 --- a/docs/src/pages/guides/data-fetching.md +++ b/docs/src/pages/guides/data-fetching.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Data Fetching --- diff --git a/docs/src/pages/guides/deploy.md b/docs/src/pages/guides/deploy.md index c12860565..261fb7269 100644 --- a/docs/src/pages/guides/deploy.md +++ b/docs/src/pages/guides/deploy.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Deploy a Website --- diff --git a/docs/src/pages/guides/imports.md b/docs/src/pages/guides/imports.md index f8f96b098..ec49c98d1 100644 --- a/docs/src/pages/guides/imports.md +++ b/docs/src/pages/guides/imports.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Supported Imports --- diff --git a/docs/src/pages/guides/markdown-content.md b/docs/src/pages/guides/markdown-content.md index 4ef908f6b..220a7ea16 100644 --- a/docs/src/pages/guides/markdown-content.md +++ b/docs/src/pages/guides/markdown-content.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Markdown --- diff --git a/docs/src/pages/guides/publish-to-npm.md b/docs/src/pages/guides/publish-to-npm.md index e7c974866..4f6ab402f 100644 --- a/docs/src/pages/guides/publish-to-npm.md +++ b/docs/src/pages/guides/publish-to-npm.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Publish a Component to NPM --- diff --git a/docs/src/pages/guides/styling.md b/docs/src/pages/guides/styling.md index 5d693c2fc..d570ef10a 100644 --- a/docs/src/pages/guides/styling.md +++ b/docs/src/pages/guides/styling.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Styling & CSS --- diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro index 7b16ea1a0..b462cacf9 100644 --- a/docs/src/pages/index.astro +++ b/docs/src/pages/index.astro @@ -1,9 +1,18 @@ --- -import Layout from '../layouts/Main.astro'; +import Layout from '../layouts/MainLayout.astro'; --- -<Layout centered> - <h1> - <code style="white-space: nowrap;">npm init astro</code> - </h1> -</Layout> +<script> + // This is some wip redirect code based on the browser language. + // A vercel.json redirect is enforced in production, so no user should ever see this page. + // Remove the vercel.json redirect when this is ready. + const KNOWN_LANGUAGES = ['en', 'nl']; + let newLang = (window.navigator.userLanguage || window.navigator.language || 'en').substr(0, 2); + if (newLang === 'en') { + window.location.pathname = '/getting-started'; + } else if (KNOWN_LANGUAGES.includes(newLang)) { + window.location.pathname = '/' + newLang + '/getting-started'; + } else { + window.location.pathname = '/getting-started'; + } +</script>
\ No newline at end of file diff --git a/docs/src/pages/installation.md b/docs/src/pages/installation.md index 4fcd08f64..231c6ee4c 100644 --- a/docs/src/pages/installation.md +++ b/docs/src/pages/installation.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Installation --- diff --git a/docs/src/pages/nl/getting-started.md b/docs/src/pages/nl/getting-started.md index 0f1678e62..c3600cfc2 100644 --- a/docs/src/pages/nl/getting-started.md +++ b/docs/src/pages/nl/getting-started.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Beginnen --- diff --git a/docs/src/pages/quick-start.md b/docs/src/pages/quick-start.md index f6f08304f..3685c6bbd 100644 --- a/docs/src/pages/quick-start.md +++ b/docs/src/pages/quick-start.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Quick Start --- diff --git a/docs/src/pages/reference/api-reference.md b/docs/src/pages/reference/api-reference.md index ee42196e0..f7e3f92bb 100644 --- a/docs/src/pages/reference/api-reference.md +++ b/docs/src/pages/reference/api-reference.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: API Reference --- diff --git a/docs/src/pages/reference/builtin-components.md b/docs/src/pages/reference/builtin-components.md index 54f22c2ea..d148c8ba0 100644 --- a/docs/src/pages/reference/builtin-components.md +++ b/docs/src/pages/reference/builtin-components.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Built-In Components --- diff --git a/docs/src/pages/reference/cli-reference.md b/docs/src/pages/reference/cli-reference.md index 710cf8d91..6be3b122f 100644 --- a/docs/src/pages/reference/cli-reference.md +++ b/docs/src/pages/reference/cli-reference.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: CLI Reference --- diff --git a/docs/src/pages/reference/configuration-reference.md b/docs/src/pages/reference/configuration-reference.md index d0a088ba4..ef851f848 100644 --- a/docs/src/pages/reference/configuration-reference.md +++ b/docs/src/pages/reference/configuration-reference.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: Configuration Reference --- diff --git a/docs/src/pages/reference/renderer-reference.md b/docs/src/pages/reference/renderer-reference.md index 6ce54df51..f74a024dd 100644 --- a/docs/src/pages/reference/renderer-reference.md +++ b/docs/src/pages/reference/renderer-reference.md @@ -1,5 +1,5 @@ --- -layout: ~/layouts/Main.astro +layout: ~/layouts/MainLayout.astro title: UI Renderer Reference --- diff --git a/docs/vercel.json b/docs/vercel.json index 9e0638fd8..20041cad5 100644 --- a/docs/vercel.json +++ b/docs/vercel.json @@ -1,10 +1,4 @@ { "cleanUrls": true, - "trailingSlash": false, - "redirects": [ - { - "source": "/", - "destination": "/getting-started" - } - ] + "trailingSlash": false } |