Merge branch 'okikio/main' (#1111)

2021-08-26 15:04:19 -07:00 · 2021-08-26 15:04:19 -07:00 · fdd701dd88
commit fdd701dd88
parent 84c18d3030 2e8db7ad23
47 changed files with 2050 additions and 1406 deletions
--- a/examples/docs/README.md
+++ b/examples/docs/README.md
@ -4,25 +4,134 @@
 npm init astro -- --template docs
 ```

-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+## Features

-Features:
+- ✅ **Full Markdown support**
+- ✅ **Responsive mobile-friendly design**
+- ✅ **Sidebar navigation**
+- ✅ **Search (powered by Algolia)**
+- ✅ **Multi-language i18n**
+- ✅ **Automatic table of contents**
+- ✅ **Automatic list of contributors**
+- ✅ (and, best of all) **dark mode**

- ✅ CSS Grid Layout
- ✅ Full Markdown support
- ✅ Automatic header navigation sidebar
- ✅ Dark mode enabled by default
-
-## 🧞 Commands
+## Commands Cheatsheet

 All commands are run from the root of the project, from a terminal:

-| Command         | Action                                      |
-|:----------------|:--------------------------------------------|
-| `npm install`   | Installs dependencies                       |
-| `npm run dev`   | Starts local dev server at `localhost:3000` |
-| `npm run build` | Build your production site to `./dist/`     |
+| Command          | Action                                       |
+|:-----------------|:---------------------------------------------|
+| `npm install`    | Installs dependencies                        |
+| `npm run dev`    | Starts local dev server at `localhost:3000`  |
+| `npm run build`  | Build your production site to `./dist/`      |
+| `npm run preview`| Preview your build locally, before deploying |

-## 👀 Want to learn more?
+To deploy your site to production, check out our [Deploy an Astro Website](https://docs.astro.build/guides/deploy) guide.

-Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat).
+## New to Astro?
+
+Welcome! Check out [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat).
+
+## Customize This Theme
+
+### Site metadata
+
+`src/config.ts` contains several data objects that describe metadata about your site like title, description, default language, and Open Graph details. You can customize these to match your project.
+### CSS styling
+
+The theme's look and feel is controlled by a few key variables that you can customize yourself. You'll find them in the `public/theme.css` CSS file.
+
+If you've never worked with CSS variables before, give [MDN's guide on CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) a quick read.
+
+This theme uses a "cool blue" accent color by default. To customize this for your project, change the `--theme-accent` variable to whatever color you'd like:
+
+```diff
+/* public/theme.css */
+:root {
+  color-scheme: light;
+-  --theme-accent: hsla(var(--color-blue), 1);
+  --theme-accent: hsla(var(--color-red), 1);   /* or: hsla(#FF0000, 1); */
+```
+
+
+### Sidebar navigation
+
+The sidebar navigation is controlled by the `SIDEBAR` variable in your `src/config.ts` file. You can customize the sidebar by modifying this object. A default, starter navigation has already been created for you.
+
+```ts
+export const SIDEBAR = {
+  en: [
+    { text: 'Section Header', header: true, },
+    { text: 'Introduction', link: 'en/introduction' },
+    { text: 'Page 2', link: 'en/page-2' },
+    { text: 'Page 3', link: 'en/page-3' },
+
+    { text: 'Another Section', header: true },
+    { text: 'Page 4', link: 'en/page-4' },
+  ],
+};
+```
+
+Note the top-level `en` key: This is needed for multi-language support. You can change it to whatever language you'd like, or add new languages as you go. More details on this below.
+
+### Multiple Languages support
+
+The Astro docs template supports multiple langauges out of the box. The default theme only shows `en` documentation, but you can enable multi-language support features by adding a second language to your project.
+
+To add a new language to your project, you'll want to extend the current `src/pages/[lang]/...` layout:
+
+```diff
+ 📂 src/pages
+ ┣ 📂 en
+ ┃ ┣ 📜 page-1.md
+ ┃ ┣ 📜 page-2.md
+ ┃ ┣ 📜 page-3.astro
+ ┣ 📂 es
+ ┃ ┣ 📜 page-1.md
+ ┃ ┣ 📜 page-2.md
+ ┃ ┣ 📜 page-3.astro
+```
+
+You'll also need to add the new language name to the `KNOWN_LANGUAGES` map in your `src/config.ts` file. This will enable your new language switcher in the site header.
+
+```diff
+// src/config.ts
+export const KNOWN_LANGUAGES = {
+  English: 'en',
+  Spanish: 'es',
+};
+```
+
+Last step: you'll need to add a new entry to your sidebar, to create the table of contents for that language. While duplicating every page might not sound ideal to everyone, this extra control allows you to create entirely custom content for every language.
+
+> Make sure the sidebar `link` value points to the correct language!
+
+```diff
+// src/config.ts
+export const SIDEBAR = {
+  en: [
+    { text: 'Section Header', header: true, },
+    { text: 'Introduction', link: 'en/introduction' },
+    // ...
+  ],
+  es: [
+    { text: 'Encabezado de sección', header: true, },
+    { text: 'Introducción', link: 'es/introduction' },
+    // ...
+  ],
+};
+
+// ...
+```
+
+### What if I don't plan to support multiple languages?
+
+That's totally fine! Not all projects need (or can support) multiple languages. You can continue to use this theme without ever adding a second language.
+
+### Search (Powered by Algolia)
+
+[Algolia](https://www.algolia.com/) offers a free service to qualified open source projects called [DocSearch](https://docsearch.algolia.com/). If you are accepted to the DocSearch program, provide your API Key & index name in `src/config.ts` and a search box will automatically appear in your site header.
+
+Note that Aglolia and Astro are not affiliated. We have no say over acceptance to the DocSearch program.
+
+If you'd prefer to remove Algolia's search and replace it with your own, check out the `src/components/Header.astro` component to see where the component is added.
--- a/examples/docs/astro.config.mjs
+++ b/examples/docs/astro.config.mjs
@ -8,6 +8,10 @@

 // @ts-check
 export default /** @type {import('astro').AstroUserConfig} */ ({
-  // Enable the Preact renderer to support Preact JSX components.
-  renderers: ['@astrojs/renderer-preact'],
+  renderers: [
+    // Enable the Preact renderer to support Preact JSX components.
+    '@astrojs/renderer-preact',
+    // Enable the React renderer, for the Algolia search component
+    '@astrojs/renderer-react',
+  ],
 });
--- a/examples/docs/package.json
+++ b/examples/docs/package.json
@ -8,10 +8,21 @@
    "build": "astro build",
    "preview": "astro preview"
  },
+  "dependencies": {
+    "@docsearch/react": "^1.0.0-alpha.27"
+  },
  "devDependencies": {
-    "astro": "^0.20.1"
+    "astro": "^0.20.1",
+    "@snowpack/plugin-dotenv": "^2.1.0"
  },
  "snowpack": {
+    "alias": {
+      "components": "./src/components",
+      "~": "./src"
+    },
+    "plugins": [
+      "@snowpack/plugin-dotenv"
+    ],
    "workspaceRoot": "../.."
  }
 }
--- a/examples/docs/public/code.css
+++ b/examples/docs/public/code.css
@ -8,148 +8,89 @@
  opacity: 0.7;
 }

-.token.atrule {
-  color: #c792ea;
+.token.plain-text,
+[class*='language-bash'] span.token,
+[class*='language-shell'] span.token {
+  color: hsla(var(--color-gray-90), 1);
 }

-.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: #616161;
-}
-
-.token.constant {
-  color: #c792ea;
+.token.prolog,
+.token.comment,
+[class*='language-bash'] span.token.comment,
+[class*='language-shell'] span.token.comment {
+  color: hsla(var(--color-gray-70), 1);
 }

+.token.selector,
+.token.tag,
+.token.unit,
+.token.url,
+.token.variable,
+.token.entity,
 .token.deleted {
-  color: #ff6666;
+  color: #fa5e5b;
 }

-.token.doctype {
-  color: #616161;
+.token.boolean,
+.token.constant,
+.token.doctype,
+.token.number,
+.token.regex,
+.token.builtin,
+.token.class,
+.token.hexcode,
+.token.class-name,
+.token.attr-name {
+  color: hsla(var(--color-yellow), 1);
 }

-.token.entity {
-  color: #ff6666;
-}
-
-.token.function {
-  color: #c792ea;
-}
-
-.token.hexcode {
-  color: #f2ff00;
-}
-
-.token.id {
-  color: #c792ea;
-  font-weight: bold;
+.token.atrule,
+.token.attribute,
+.token.attr-value .token.punctuation,
+.token.attr-value,
+.token.pseudo-class,
+.token.pseudo-element,
+.token.string {
+  color: hsla(var(--color-green), 1);
 }

+.token.symbol,
+.token.function,
+.token.id,
 .token.important {
-  color: #c792ea;
+  color: hsla(var(--color-blue), 1);
+}
+
+.token.important,
+.token.id {
  font-weight: bold;
 }

+.token.cdata,
+.token.char,
+.token.property {
+  color: #23b1af;
+}
+
 .token.inserted {
-  color: #80cbc4;
+  color: hsla(var(--color-green), 1);
 }

 .token.keyword {
-  color: #c792ea;
-}
-
-.token.number {
-  color: #fd9170;
+  color: #ff657c;
+  font-style: italic;
 }

 .token.operator {
-  color: #89ddff;
-}
-
-.token.prolog {
-  color: #616161;
-}
-
-.token.property {
-  color: #80cbc4;
-}
-
-.token.pseudo-class {
-  color: #a5e844;
-}
-
-.token.pseudo-element {
-  color: #a5e844;
+  color: hsla(var(--color-gray-70), 1);
 }

+.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: hsla(var(--color-gray-80), 1);
 }
--- a/examples/docs/public/default-og-image.png
+++ b/examples/docs/public/default-og-image.png
--- a/examples/docs/public/index.css
+++ b/examples/docs/public/index.css
@ -3,14 +3,19 @@
  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) {
  :root {
-    --max-width: 48em;
+    --max-width: 46em;
  }
 }

@ -20,8 +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.125rem);
-  line-height: 1.625;
+  font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem);
+  line-height: 1.5;
+  max-width: 100vw;
 }

 nav ul {
@ -29,18 +35,28 @@ nav ul {
  padding: 0;
 }

-.content main > * + * {
-  margin-top: 1rem;
+.content > section > * + * {
+  margin-top: 1.25rem;
+}
+
+.content > section > :first-child {
+  margin-top: 0;
 }

 /* Typography */
-:is(h1, h2, h3, h4, h5, h6) {
-  margin-bottom: 1.38rem;
-  font-weight: 400;
-  line-height: 1.3;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 1rem;
+  font-weight: bold;
+  line-height: 1;
 }

-:is(h1, h2) {
+h1,
+h2 {
  max-width: 40ch;
 }

@ -48,27 +64,41 @@ nav ul {
  margin-top: 3rem;
 }

+:is(h4, h5, h6):not(:first-child) {
+  margin-top: 2rem;
+}
+
 h1 {
-  font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem);
+  font-size: 3.25rem;
+  font-weight: 800;
 }

 h2 {
-  font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem);
+  font-size: 2.5rem;
 }

 h3 {
-  font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem);
+  font-size: 1.75rem;
 }

 h4 {
-  font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem);
+  font-size: 1.3rem;
 }

 h5 {
-  font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
+  font-size: 1rem;
 }

 p {
+  line-height: 1.65em;
+}
+
+.content ul {
+  line-height: 1.1em;
+}
+
+p,
+.content ul {
  color: var(--theme-text-light);
 }

@ -78,18 +108,52 @@ small,
 }

 a {
-  color: var(--theme-accent);
+  color: var(--theme-text-accent);
  font-weight: 400;
  text-underline-offset: 0.08em;
-  text-decoration: none;
-  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
 }

+article > section :is(ul, ol) > * + * {
+  margin-top: 0.75rem;
+}
+
+article > section nav :is(ul, ol) > * + * {
+  margin-top: inherit;
+}
+
+article > section li > :is(p, pre, blockquote):not(:first-child) {
+  margin-top: 1rem;
+}
+
+article > section :is(ul, ol) {
+  padding-left: 1em;
+}
+
+article > section nav :is(ul, ol) {
+  padding-left: inherit;
+}
+
+article > section nav {
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
+article > section ::marker {
+  font-weight: bold;
+  color: var(--theme-text-light);
+}
+
+article > section iframe {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16 / 9;
+}
+
 a > code:not([class*='language']) {
  position: relative;
-  color: var(--theme-accent);
+  color: var(--theme-text-accent);
  background: transparent;
  text-underline-offset: var(--padding-block);
 }
@ -123,19 +187,21 @@ 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;
-  color: inherit;
+  --padding-inline: 0.4rem;
+  color: var(--theme-code-inline-text);
  background-color: var(--theme-code-inline-bg);
  padding: var(--padding-block) var(--padding-inline);
  margin: calc(var(--padding-block) * -1) -0.125em;
  border-radius: var(--border-radius);
+  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.08);
 }

 pre > code:not([class*='language']) {
@ -146,37 +212,78 @@ pre > code:not([class*='language']) {
  color: inherit;
 }

+pre > code {
+  font-size: 1em;
+}
+
+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(50vw - var(--padding-inline));
-  transform: translateX(-50vw);
+  margin-left: calc(var(--padding-inline) * -1);
+  margin-right: calc(var(--padding-inline) * -1);
+  font-family: var(--font-mono);

-  line-height: 1.414;
-  width: calc(100vw + 4px);
-  max-width: calc(100% + (var(--padding-inline) * 2));
+  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: var(--theme-color);
+  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;
  }
 }

 blockquote {
  margin: 2rem 0;
-  padding: 0.5em 1rem;
-  border-left: 3px solid rgba(0, 0, 0, 0.35);
-  background-color: rgba(0, 0, 0, 0.05);
+  padding: 1.25em 1.5rem;
+  border-left: 3px solid var(--theme-text-light);
+  background-color: var(--theme-bg-offset);
  border-radius: 0 0.25rem 0.25rem 0;
+  line-height: 1.7;
+}
+
+img {
+  max-width: 100%;
 }

 .flex {
@ -197,92 +304,43 @@ button {
  align-items: center;
  gap: 0.25em;
  border-radius: 99em;
-  background-color: var(--theme-bg);
-}
-button:hover {
-}
-
-#theme-toggle {
-  display: flex;
-  align-items: center;
-  gap: 0.25em;
-  padding: 0.33em 0.67em;
-  margin-left: -0.67em;
-  margin-right: -0.67em;
-  border-radius: 99em;
+  color: var(--theme-text);
  background-color: var(--theme-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;
+h2.heading {
+  font-size: 1rem;
+  font-weight: 700;
+  padding: 0.1rem 1rem;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
 }

-#theme-toggle > label {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.5;
-  transition: transform 120ms ease-out, opacity 120ms ease-out;
-}
-
-#theme-toggle > label:hover,
-#theme-toggle > label:focus {
-  transform: scale(1.125);
-  opacity: 1;
-}
-
-#theme-toggle .checked {
-  color: var(--theme-accent);
-  transform: scale(1.125);
-  opacity: 1;
-}
-
-input[name='theme-toggle'] {
-  position: absolute;
-  opacity: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: -1;
-}
-
-nav h4 {
-  font-weight: 400;
-  font-size: 1.25rem;
-  margin: 0;
-  margin-bottom: 1em;
-}
-
-.edit-on-github,
 .header-link {
  font-size: 1rem;
-  padding-left: 1rem;
+  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 4px solid var(--theme-divider);
 }

-.edit-on-github:hover,
-.edit-on-github:focus,
 .header-link:hover,
 .header-link:focus {
-  color: var(--theme-text-light);
-  border-left-color: var(--theme-text-lighter);
-}
-
-.header-link:focus-within {
-  color: var(--theme-text-light);
-  border-left-color: var(--theme-text-lighter);
-}
-
-.header-link.active {
  border-left-color: var(--theme-accent);
  color: var(--theme-accent);
 }
-
-.header-link.depth-2 {
-  font-weight: 600;
+.header-link:focus-within {
+  color: var(--theme-text-light);
+  border-left-color: hsla(var(--color-gray-40), 1);
+}
+.header-link svg {
+  opacity: 0.6;
+}
+.header-link:hover svg {
+  opacity: 0.8;
+}
+.header-link a {
+  display: inline-flex;
+  gap: 0.5em;
+  width: 100%;
 }

 .header-link.depth-3 {
@ -292,88 +350,37 @@ nav h4 {
  padding-left: 3rem;
 }

-.edit-on-github,
 .header-link a {
  font: inherit;
  color: inherit;
  text-decoration: none;
 }

-.edit-on-github {
-  margin-top: 2rem;
-  text-decoration: none;
-}
-.edit-on-github > * {
-  text-decoration: none;
+/* Screenreader Only Text */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
 }

-.nav-link {
-  font-size: 1rem;
-  margin-bottom: 0;
-  transform: translateX(0);
-  transition: 120ms transform ease-out;
+.focus\:not-sr-only:focus,
+.focus\:not-sr-only:focus-visible {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
 }

-.nav-link:hover,
-.nav-link:focus {
-  color: var(--theme-text-lighter);
-  transform: translateX(0.25em);
+:target {
+  scroll-margin: calc(var(--theme-sidebar-offset, 5rem) + 2rem) 0 2rem;
 }
-
-.nav-link:focus-within {
-  color: var(--theme-text-lighter);
-  transform: translateX(0.25em);
-}
-
-.nav-link a {
-  font: inherit;
-  color: inherit;
-  text-decoration: none;
-}
-
-.nav-groups {
-  padding-bottom: 2rem;
-  max-height: calc(100% - 3rem);
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.nav-groups > li + li {
-  margin-top: 2rem;
-}
-
-/* Scrollbar */
-
-/* Firefox */
-body {
-  scrollbar-width: thin;
-  scrollbar-color: var(--theme-text-lighter) var(--theme-divider);
-}
-
-/* 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 */
--- a/examples/docs/public/make-scrollable-code-focusable.js
+++ b/examples/docs/public/make-scrollable-code-focusable.js
@ -0,0 +1,3 @@
+Array.from(document.getElementsByTagName('pre')).forEach((element) => {
+  element.setAttribute('tabindex', '0');
+});
--- a/examples/docs/public/theme.css
+++ b/examples/docs/public/theme.css
@ -1,51 +1,81 @@
 :root {
  --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;
+  /*
+   * Variables with --color-base prefix define
+   * the hue, and saturation values to be used for
+   * hsla colors.
+   *
+   * ex:
+   *
+   * --color-base-{color}: {hue}, {saturation};
+   *
+   */

-  --color-gray-50: #f9fafb;
-  --color-gray-100: #f3f4f6;
-  --color-gray-200: #e5e7eb;
-  --color-gray-300: #d1d5db;
-  --color-gray-400: #9ca3af;
-  --color-gray-500: #6b7280;
-  --color-gray-600: #4b5563;
-  --color-gray-700: #374151;
-  --color-gray-800: #1f2937;
-  --color-gray-900: #111827;
+  --color-base-white: 0, 0%;
+  --color-base-black: 240, 100%;
+  --color-base-gray: 215, 14%;
+  --color-base-blue: 212, 100%;
+  --color-base-blue-dark: 212, 72%;
+  --color-base-green: 158, 79%;
+  --color-base-orange: 22, 100%;
+  --color-base-purple: 269, 79%;
+  --color-base-red: 351, 100%;
+  --color-base-yellow: 41, 100%;

-  --color-blue: #3894ff;
-  --color-blue-rgb: 56, 148, 255;
-  --color-green: #17c083;
-  --color-green-rgb: 23, 192, 131;
-  --color-orange: #ff5d01;
-  --color-orange-rgb: 255, 93, 1;
-  --color-purple: #882de7;
-  --color-purple-rgb: 136, 45, 231;
-  --color-red: #ff1639;
-  --color-red-rgb: 255, 22, 57;
-  --color-yellow: #ffbe2d;
-  --color-yellow-rgb: 255, 190, 45;
+  /*
+   * Color palettes are made using --color-base 
+   * variables, along with a lightness value to
+   * define different variants.
+   *
+   */
+
+  --color-gray-5: var(--color-base-gray), 5%;
+  --color-gray-10: var(--color-base-gray), 10%;
+  --color-gray-20: var(--color-base-gray), 20%;
+  --color-gray-30: var(--color-base-gray), 30%;
+  --color-gray-40: var(--color-base-gray), 40%;
+  --color-gray-50: var(--color-base-gray), 50%;
+  --color-gray-60: var(--color-base-gray), 60%;
+  --color-gray-70: var(--color-base-gray), 70%;
+  --color-gray-80: var(--color-base-gray), 80%;
+  --color-gray-90: var(--color-base-gray), 90%;
+  --color-gray-95: var(--color-base-gray), 95%;
+
+  --color-blue: var(--color-base-blue), 61%;
+  --color-blue-dark: var(--color-base-blue-dark), 39%;
+  --color-green: var(--color-base-green), 42%;
+  --color-orange: var(--color-base-orange), 50%;
+  --color-purple: var(--color-base-purple), 54%;
+  --color-red: var(--color-base-red), 54%;
+  --color-yellow: var(--color-base-yellow), 59%;
 }

 :root {
  color-scheme: light;
-  --theme-accent: var(--color-blue);
-  --theme-accent-rgb: var(--color-blue-rgb);
+  --theme-accent: hsla(var(--color-blue), 1);
+  --theme-text-accent: hsla(var(--color-blue), 1);
  --theme-accent-opacity: 0.1;
-  --theme-divider: var(--color-gray-100);
-  --theme-text: var(--color-gray-800);
-  --theme-text-light: var(--color-gray-600);
-  --theme-text-lighter: var(--color-gray-400);
-  --theme-bg: var(--color-white);
-  --theme-bg-offset: var(--color-gray-100);
-  --theme-bg-accent: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
-  --theme-code-inline-bg: var(--color-gray-100);
-  --theme-code-text: var(--color-gray-100);
-  --theme-code-bg: var(--color-gray-700);
+  --theme-divider: hsla(var(--color-gray-95), 1);
+  --theme-text: hsla(var(--color-gray-10), 1);
+  --theme-text-light: hsla(var(--color-gray-40), 1);
+  /* @@@: not used anywhere */
+  --theme-text-lighter: hsla(var(--color-gray-80), 1);
+  --theme-bg: hsla(var(--color-base-white), 100%, 1);
+  --theme-bg-hover: hsla(var(--color-gray-95), 1);
+  --theme-bg-offset: hsla(var(--color-gray-90), 1);
+  --theme-bg-accent: hsla(var(--color-blue), var(--theme-accent-opacity));
+  --theme-code-inline-bg: hsla(var(--color-gray-95), 1);
+  --theme-code-inline-text: var(--theme-text);
+  --theme-code-bg: hsla(217, 19%, 27%, 1);
+  --theme-code-text: hsla(var(--color-gray-95), 1);
+  --theme-navbar-bg: hsla(var(--color-base-white), 100%, 1);
+  --theme-navbar-height: 6rem;
+  --theme-selection-color: hsla(var(--color-blue), 1);
+  --theme-selection-bg: hsla(var(--color-blue), var(--theme-accent-opacity));
 }

 body {
@ -55,19 +85,39 @@ body {

 :root.theme-dark {
  color-scheme: dark;
-  --theme-accent-opacity: 0.3;
-  --theme-divider: var(--color-gray-900);
-  --theme-text: var(--color-gray-200);
-  --theme-text-light: var(--color-gray-400);
-  --theme-text-lighter: var(--color-gray-600);
-  --theme-bg: var(--color-black);
-  --theme-bg-offset: var(--color-gray-900);
-  --theme-code-inline-bg: var(--color-gray-800);
-  --theme-code-text: var(--color-gray-200);
-  --theme-code-bg: var(--color-gray-900);
+  --theme-accent-opacity: 0.4;
+  --theme-accent: hsla(var(--color-orange), 1);
+  --theme-text-accent: hsla(var(--color-orange), 1);
+  --theme-divider: hsla(var(--color-gray-10), 1);
+  --theme-text: hsla(var(--color-gray-90), 1);
+  --theme-text-light: hsla(var(--color-gray-80), 1);
+
+  /* @@@: not used anywhere */
+  --theme-text-lighter: hsla(var(--color-gray-40), 1);
+  --theme-bg: hsla(215, 28%, 17%, 1);
+  --theme-bg-hover: hsla(var(--color-gray-40), 1);
+  --theme-bg-offset: hsla(var(--color-gray-5), 1);
+  --theme-code-inline-bg: hsla(var(--color-gray-10), 1);
+  --theme-code-inline-text: hsla(var(--color-base-white), 100%, 1);
+  --theme-code-bg: hsla(var(--color-gray-5), 1);
+  --theme-code-text: hsla(var(--color-base-white), 100%, 1);
+  --theme-navbar-bg: hsla(215, 28%, 17%, 1);
+  --theme-selection-color: hsla(var(--color-base-white), 100%, 1);
+  --theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity));
+
+  /* DocSearch [Algolia] */
+  --docsearch-modal-background: var(--theme-bg);
+  --docsearch-searchbox-focus-background: var(--theme-divider);
+  --docsearch-footer-background: var(--theme-divider);
+  --docsearch-text-color: var(--theme-text);
+  --docsearch-hit-background: var(--theme-divider);
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-color: var(--theme-text);
+  --docsearch-footer-shadow: inset 0 2px 10px #000;
+  --docsearch-modal-shadow: inset 0 0 8px #000;
 }

 ::selection {
-  color: var(--theme-accent);
-  background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity));
+  color: var(--theme-selection-color);
+  background-color: var(--theme-selection-bg);
 }
--- a/examples/docs/public/theme.js
+++ b/examples/docs/public/theme.js
@ -1,8 +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');
-  }
-})();
--- a/examples/docs/src/components/AvatarList.astro
+++ b/examples/docs/src/components/AvatarList.astro
@ -1,74 +0,0 @@
-<!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
-
-<ul class="avatar-list">
-  <li><a href="https://smolcss.dev/#smol-avatar-list"><img alt="Avatar 1" width="64" height="64" src='https://avataaars.io/?avatarStyle=Transparent&topType=LongHairBun&accessoriesType=Blank&hairColor=Auburn&facialHairType=BeardMedium&facialHairColor=Auburn&clotheType=ShirtCrewNeck&clotheColor=Blue01&eyeType=Side&eyebrowType=RaisedExcitedNatural&mouthType=Serious&skinColor=Tanned' /></a></li>
-  <li><a href="https://smolcss.dev/#smol-avatar-list"><img alt="Avatar 2" width="64" height="64" src='https://avataaars.io/?avatarStyle=Transparent&topType=LongHairDreads&accessoriesType=Blank&hairColor=Brown&facialHairType=Blank&clotheType=ShirtScoopNeck&clotheColor=PastelGreen&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Smile&skinColor=Tanned' /></a></li>
-  <li><a href="https://smolcss.dev/#smol-avatar-list"><img alt="Avatar 3" width="64" height="64" src='https://avataaars.io/?avatarStyle=Transparent&topType=LongHairCurly&hairColor=BrownDark&facialHairType=Blank&clotheType=GraphicShirt&clotheColor=Pink&graphicType=Diamond&eyeType=Side&eyebrowType=Default&mouthType=Default&skinColor=Brown'/></a></li>
-</ul>
-
-<style>
-.avatar-list {
-  --avatar-size: 2.5rem;
-  --avatar-count: 3;
-
-  display: grid;
-  list-style: none;
-  /* Default to displaying most of the avatar to
-  enable easier access on touch devices, ensuring
-  the WCAG touch target size is met or exceeded */
-  grid-template-columns: repeat(
-    var(--avatar-count),
-    max(44px, calc(var(--avatar-size) / 1.15))
-  );
-  /* `padding` matches added visual dimensions of
-  the `box-shadow` to help create a more accurate
-  computed component size */
-  padding: 0.08em;
-  font-size: var(--avatar-size);
-}
-
-@media (any-hover: hover) and (any-pointer: fine) {
-  .avatar-list {
-    /* We create 1 extra cell to enable the computed 
-    width to match the final visual width */
-    grid-template-columns: repeat(
-      calc(var(--avatar-count) + 1),
-      calc(var(--avatar-size) / 1.75)
-    );
-  }
-}
-
-.avatar-list li {
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-}
-
-.avatar-list li:hover ~ li a,
-.avatar-list li:focus-within ~ li a {
-  transform: translateX(33%);
-}
-
-.avatar-list img,
-.avatar-list a {
-  display: block;
-  border-radius: 50%;
-}
-
-.avatar-list a {
-  transition: transform 180ms ease-in-out;
-}
-
-.avatar-list img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  background-color: #fff;
-  box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
-}
-
-.avatar-list a:focus {
-  outline: 2px solid transparent;
-  /* Double-layer trick to work for dark and light backgrounds */
-  box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
-}
-</style>
--- a/examples/docs/src/components/DocSidebar.tsx
+++ b/examples/docs/src/components/DocSidebar.tsx
@ -1,61 +0,0 @@
-import type { FunctionalComponent } from 'preact';
-import { h } from 'preact';
-import { useState, useEffect, useRef } from 'preact/hooks';
-import EditOnGithub from './EditOnGithub';
-
-const DocSidebar: FunctionalComponent<{ headers: any[]; editHref: string }> = ({ headers = [], editHref }) => {
-  const itemOffsets = useRef([]);
-  const [activeId, setActiveId] = useState<string>(undefined);
-
-  useEffect(() => {
-    const getItemOffsets = () => {
-      const titles = document.querySelectorAll('article :is(h2, h3, h4)');
-      itemOffsets.current = Array.from(titles).map((title) => ({
-        id: title.id,
-        topOffset: title.getBoundingClientRect().top + window.scrollY,
-      }));
-    };
-
-    const onScroll = () => {
-      const itemIndex = itemOffsets.current.findIndex((item) => item.topOffset > window.scrollY + window.innerHeight / 3);
-      if (itemIndex === 0) {
-        setActiveId(undefined);
-      } else if (itemIndex === -1) {
-        setActiveId(itemOffsets.current[itemOffsets.current.length - 1].id);
-      } else {
-        setActiveId(itemOffsets.current[itemIndex - 1].id);
-      }
-    };
-
-    getItemOffsets();
-    window.addEventListener('resize', getItemOffsets);
-    window.addEventListener('scroll', onScroll);
-
-    return () => {
-      window.removeEventListener('resize', getItemOffsets);
-      window.removeEventListener('scroll', onScroll);
-    };
-  }, []);
-
-  return (
-    <nav>
-      <div>
-        <h4>Contents</h4>
-        <ul>
-          {headers
-            .filter(({ depth }) => depth > 1 && depth < 5)
-            .map((header) => (
-              <li class={`header-link depth-${header.depth} ${activeId === header.slug ? 'active' : ''}`.trim()}>
-                <a href={`#${header.slug}`}>{header.text}</a>
-              </li>
-            ))}
-        </ul>
-      </div>
-      <div>
-        <EditOnGithub href={editHref} />
-      </div>
-    </nav>
-  );
-};
-
-export default DocSidebar;
--- a/examples/docs/src/components/EditOnGithub.tsx
+++ b/examples/docs/src/components/EditOnGithub.tsx
@ -1,26 +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}>
-      <svg
-        preserveAspectRatio="xMidYMid meet"
-        height="1em"
-        width="1em"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 438.549 438.549"
-        stroke="none"
-        class="icon-7f6730be--text-3f89f380"
-      >
-        <g>
-          <path d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 0 1-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path>
-        </g>
-      </svg>
-      <span>Edit on GitHub</span>
-    </a>
-  );
-};
-
-export default EditOnGithub;
--- a/examples/docs/src/components/Footer/AvatarList.astro
+++ b/examples/docs/src/components/Footer/AvatarList.astro
@ -0,0 +1,151 @@
+---
+// fetch all commits for just this page's path
+const path = "docs/" + Astro.props.path;
+const url = `https://api.github.com/repos/snowpackjs/astro/commits?path=${path}`;
+const commitsURL = `https://github.com/snowpackjs/astro/commits/main/${path}`;
+
+async function getCommits(url) {
+  try {
+    const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN;
+    if (!token) {
+      throw new Error(
+        'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.'
+      );
+    }
+
+    const auth = `Basic ${Buffer.from(token, "binary").toString("base64")}`;
+
+    const res = await fetch(url, {
+      method: "GET",
+      headers: {
+        Authorization: auth,
+        "User-Agent": "astro-docs/1.0",
+      },
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      throw new Error(
+        `Request to fetch commits failed. Reason: ${res.statusText}
+       Message: ${data.message}`
+      );
+    }
+
+    return data;
+  } catch (e) {
+    console.warn(`[error]  /src/components/AvatarList.astro 
+    ${e?.message ?? e}`);
+    return new Array();
+  }
+}
+
+function removeDups(arr) {
+  if (!arr) {
+    return new Array();
+  }
+  let map = new Map();
+
+  for (let item of arr) {
+    let author = item.author;
+    // Deduplicate based on author.id
+    map.set(author.id, { login: author.login, id: author.id });
+  }
+
+  return Array.from(map.values());
+}
+
+const data = await getCommits(url);
+const unique = removeDups(data);
+const recentContributors = unique.slice(0, 3); // only show avatars for the 3 most recent contributors
+const additionalContributors = unique.length - recentContributors.length; // list the rest of them as # of extra contributors
+
+---
+<!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
+<div class="contributors">
+<ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}>
+
+{recentContributors.map((item) => (
+      <li><a href={`https://github.com/${item.login}`}><img alt={`Contributor ${item.login}`} title={`Contributor ${item.login}`} width="64" height="64" src={`https://avatars.githubusercontent.com/u/${item.id}`}/></a></li>
+      
+))}
+  </ul>
+  {additionalContributors > 0 && <span><a href={commitsURL}>{`and ${additionalContributors} additional contributor${additionalContributors > 1 ? 's' : ''}.`}</a></span>}
+  {unique.length === 0 && <a href={commitsURL}>Contributors</a>}
+</div>
+
+<style>
+.avatar-list {
+  --avatar-size: 2.5rem;
+  --avatar-count: 3;
+
+  display: grid;
+  list-style: none;
+  /* Default to displaying most of the avatar to
+  enable easier access on touch devices, ensuring
+  the WCAG touch target size is met or exceeded */
+  grid-template-columns: repeat(
+    var(--avatar-count),
+    max(44px, calc(var(--avatar-size) / 1.15))
+  );
+  /* `padding` matches added visual dimensions of
+  the `box-shadow` to help create a more accurate
+  computed component size */
+  padding: 0.08em;
+  font-size: var(--avatar-size);
+}
+
+@media (any-hover: hover) and (any-pointer: fine) {
+  .avatar-list {
+    /* We create 1 extra cell to enable the computed 
+    width to match the final visual width */
+    grid-template-columns: repeat(
+      calc(var(--avatar-count) + 1),
+      calc(var(--avatar-size) / 1.75)
+    );
+  }
+}
+
+.avatar-list li {
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+}
+
+.avatar-list li:hover ~ li a,
+.avatar-list li:focus-within ~ li a {
+  transform: translateX(33%);
+}
+
+.avatar-list img,
+.avatar-list a {
+  display: block;
+  border-radius: 50%;
+}
+
+.avatar-list a {
+  transition: transform 180ms ease-in-out;
+}
+
+.avatar-list img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background-color: #fff;
+  box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
+}
+
+.avatar-list a:focus {
+  outline: 2px solid transparent;
+  /* Double-layer trick to work for dark and light backgrounds */
+  box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
+}
+
+.contributors {
+  display: flex;
+  align-items: center;
+}
+
+.contributors > * + * {
+  margin-left: .75rem;
+}
+</style>
--- a/examples/docs/src/components/Footer/Footer.astro
+++ b/examples/docs/src/components/Footer/Footer.astro
@ -1,9 +1,10 @@
 ---
 import AvatarList from './AvatarList.astro';
+const { path } = Astro.props;
 ---

 <footer>
-  <AvatarList />
+  <AvatarList path={path} />
 </footer>

 <style>
--- a/examples/docs/src/components/HeadCommon.astro
+++ b/examples/docs/src/components/HeadCommon.astro
@ -0,0 +1,40 @@
+<!-- Global Metadata -->
+<meta name="viewport" content="width=device-width">
+
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
+<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> -->
--- a/examples/docs/src/components/HeadSEO.astro
+++ b/examples/docs/src/components/HeadSEO.astro
@ -0,0 +1,40 @@
+---
+import {SITE, OPEN_GRAPH} from '../config.ts';
+export interface Props {
+  content: any,
+  site: any,
+  canonicalURL: URL | string,
+};
+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 ?? 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.defaultLanguage}/>
+<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}/>
+
+<!-- Twitter Tags -->
+<meta name="twitter:card" content="summary_large_image"/>
+<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:image" content={canonicalImageSrc}/>
+<meta name="twitter:image:alt" content={imageAlt}/>
+
+<!-- 
+  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense? 
+  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
+  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
+  Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
+-->
--- a/examples/docs/src/components/Header/AstroLogo.astro
+++ b/examples/docs/src/components/Header/AstroLogo.astro
@ -0,0 +1,18 @@
+---
+const {size} = Astro.props;
+---
+<svg class="logo" width={size} height={size} viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame {
+            fill: var(--theme-text-accent);
+        }
+        #a {
+            fill: var(--theme-text-accent);
+        }
+    </style>
+    <title>Logo</title>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd"
+        d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd"
+        d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
--- a/examples/docs/src/components/Header/Header.astro
+++ b/examples/docs/src/components/Header/Header.astro
@ -0,0 +1,132 @@
+---
+import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages.ts';
+import * as CONFIG from '../../config.ts';
+import AstroLogo from './AstroLogo.astro';
+import SkipToContent from './SkipToContent.astro';
+import SidebarToggle from './SidebarToggle.tsx';
+import LanguageSelect from './LanguageSelect.jsx';
+import Search from "./Search.jsx";
+
+const {currentPage} = Astro.props;
+const lang = currentPage && getLanguageFromURL(currentPage);
+---
+<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: 2rem;
+      flex-shrink: 0;
+      font-weight: 600;
+      line-height: 1;
+      color: hsla(var(--color-base-white), 100%, 1);
+      gap: 0.25em;
+      z-index: -1;
+    }
+
+    .logo a {
+      padding: 0.5em 0.25em;
+      margin: -0.5em -0.25em;
+      text-decoration: none;
+      font-weight: bold;
+    }
+
+    .logo a {
+      transition: color 100ms ease-out;
+      color: var(--theme-text);
+    }
+
+    .logo a:hover,
+    .logo a:focus {
+      color: var(--theme-text-accent);
+    }
+
+    .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;
+        }
+        .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">
+        <AstroLogo size={40} />
+        <a href="/">
+          <h1>Documentation</h1>
+        </a>
+    </div>
+    <div style="flex-grow: 1;"></div>
+    {KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle />}
+    {CONFIG.ALGOLIA && <div class="search-item"><Search client:idle /></div>}
+    </nav>
+</header>
--- a/examples/docs/src/components/Header/LanguageSelect.css
+++ b/examples/docs/src/components/Header/LanguageSelect.css
@ -0,0 +1,47 @@
+.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: var(--theme-bg);
+  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;
+  pointer-events: none;
+}
+
+@media (min-width: 50em) {
+  .language-select {
+    width: 100%;
+  }
+}
--- a/examples/docs/src/components/Header/LanguageSelect.tsx
+++ b/examples/docs/src/components/Header/LanguageSelect.tsx
@ -0,0 +1,38 @@
+import type { FunctionalComponent } from 'preact';
+import { h } from 'preact';
+import './LanguageSelect.css';
+import { KNOWN_LANGUAGES, langPathRegex } from '../../languages';
+
+const LanguageSelect: FunctionalComponent<{ lang: string }> = ({ lang }) => {
+  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={lang}
+        onChange={(e) => {
+          const newLang = e.target.value;
+          let actualDest = window.location.pathname.replace(langPathRegex, '/');
+          if (actualDest == '/') actualDest = `/introduction`;
+          window.location.pathname = '/' + newLang + actualDest;
+        }}
+      >
+        {Object.keys(KNOWN_LANGUAGES).map((key) => {
+          return (
+            <option value={KNOWN_LANGUAGES[key]}>
+              <span>{key}</span>
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+};
+
+export default LanguageSelect;
--- a/examples/docs/src/components/Header/Search.css
+++ b/examples/docs/src/components/Header/Search.css
@ -0,0 +1,76 @@
+/** Style Algolia */
+:root {
+  --docsearch-primary-color: var(--theme-accent);
+  --docsearch-logo-color: var(--theme-text);
+}
+.search-input {
+  flex-grow: 1;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 0.33em 0.5em;
+  overflow: visible;
+  font-weight: 500;
+  font-size: 1rem;
+  font-family: inherit;
+  line-height: inherit;
+  background-color: var(--theme-divider);
+  border-color: var(--theme-divider);
+  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;
+}
+.search-input:hover,
+.search-input:focus {
+  color: var(--theme-text);
+  border-color: var(--theme-text-light);
+}
+.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;
+  right: 19px;
+  padding: 3px 5px;
+  display: none;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  letter-spacing: 0.125em;
+  font-size: 13px;
+  font-family: var(--font-mono);
+  pointer-events: none;
+  border-color: var(--theme-text-lighter);
+  color: var(--theme-text-light);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 0.25rem;
+  line-height: 14px;
+}
+
+@media (min-width: 50em) {
+  .search-hint {
+    display: flex;
+  }
+}
+
+/* ------------------------------------------------------------ *\
+	DocSearch (Algolia)
+\* ------------------------------------------------------------ */
+
+.DocSearch-Modal .DocSearch-Hit a {
+  box-shadow: none;
+  border: 1px solid var(--theme-accent);
+}
--- a/examples/docs/src/components/Header/Search.tsx
+++ b/examples/docs/src/components/Header/Search.tsx
@ -0,0 +1,77 @@
+/* jsxImportSource: react */
+import { useState, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
+import * as CONFIG from '../../config.js';
+import '@docsearch/css/dist/style.css';
+import './Search.css';
+
+export default function Search() {
+  const [isOpen, setIsOpen] = useState(false);
+  const searchButtonRef = useRef();
+  const [initialQuery, setInitialQuery] = useState(null);
+
+  const onOpen = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+
+  const onInput = useCallback(
+    (e) => {
+      setIsOpen(true);
+      setInitialQuery(e.key);
+    },
+    [setIsOpen, setInitialQuery]
+  );
+
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen,
+    onClose,
+    onInput,
+    searchButtonRef,
+  });
+
+  return (
+    <>
+      <button type="button" ref={searchButtonRef} onClick={onOpen} className="search-input">
+        <svg width="24" height="24" fill="none">
+          <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+        <span>Search</span>
+        <span className="search-hint">
+          <span className="sr-only">Press </span>
+          <kbd>/</kbd>
+          <span className="sr-only"> to search</span>
+        </span>
+      </button>
+      {isOpen &&
+        createPortal(
+          <DocSearchModal
+            initialQuery={initialQuery}
+            initialScrollY={window.scrollY}
+            onClose={onClose}
+            indexName={(CONFIG as any).ALGOLIA.indexName}
+            apiKey={(CONFIG as any).ALGOLIA.apiKey}
+            transformItems={(items) => {
+              return items.map((item) => {
+                // We transform the absolute URL into a relative URL to
+                // work better on localhost, preview URLS.
+                const a = document.createElement('a');
+                a.href = item.url;
+                const hash = a.hash === '#overview' ? '' : a.hash;
+                return {
+                  ...item,
+                  url: `${a.pathname}${hash}`,
+                };
+              });
+            }}
+          />,
+          document.body
+        )}
+    </>
+  );
+}
--- a/examples/docs/src/components/Header/SidebarToggle.tsx
+++ b/examples/docs/src/components/Header/SidebarToggle.tsx
@ -0,0 +1,27 @@
+import type { FunctionalComponent } from 'preact';
+import { h, Fragment } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+
+const MenuToggle: FunctionalComponent = () => {
+  const [sidebarShown, setSidebarShown] = useState(false);
+
+  useEffect(() => {
+    const body = document.getElementsByTagName('body')[0];
+    if (sidebarShown) {
+      body.classList.add('mobile-sidebar-toggle');
+    } else {
+      body.classList.remove('mobile-sidebar-toggle');
+    }
+  }, [sidebarShown]);
+
+  return (
+    <button type="button" aria-pressed={sidebarShown ? 'true' : 'false'} id="menu-toggle" onClick={() => setSidebarShown(!sidebarShown)}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+      <span className="sr-only">Toggle sidebar</span>
+    </button>
+  );
+};
+
+export default MenuToggle;
--- a/examples/docs/src/components/Header/SkipToContent.astro
+++ b/examples/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>
--- a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
+++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
@ -0,0 +1,109 @@
+---
+import { getLanguageFromURL } from '../../languages.ts';
+import { SIDEBAR } from '../../config.ts';
+const {currentPage} = Astro.props;
+const currentPageMatch = currentPage.slice(1);
+const langCode = getLanguageFromURL(currentPage);
+// SIDEBAR is a flat array. Group it by sections to properly render. 
+const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
+  if (item.header) {
+    col.push({...item, children: []});
+  } else {
+    col[col.length-1].children.push(item);
+  }
+  return col;
+}, []);
+
+---
+
+<nav aria-labelledby="grid-left">
+  <ul class="nav-groups">  
+    {sidebarSections.map(section => (
+      <li>
+        <div class="nav-group">
+          <h2 class="nav-group-title">{section.text}</h2>
+          <ul>
+            {section.children.map(child => (
+              <li class="nav-link"><a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}>{child.text}</a></li>
+            ))}
+          </ul>
+        </div>
+      </li>
+    ))}
+  </ul>
+</nav>
+
+<script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    var target = document.querySelector('[aria-current="page"]');
+    if (target && (target.offsetTop > (window.innerHeight - 100))) {
+      document.querySelector('.nav-groups').scrollTop = target.offsetTop;
+    }
+  });
+</script>
+
+<style>
+  nav {
+    width: 100%;
+    margin-right: 1rem;
+  }
+  .nav-groups {
+    height: 100%;
+    padding: 2rem 0;
+    overflow-x: visible;
+    overflow-y: auto;
+    max-height: 100vh;
+  }
+
+  .nav-groups > li + li {
+    margin-top: 2rem;
+  }
+
+  .nav-groups > :first-child {
+    padding-top: var(--doc-padding);
+  }
+
+  .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 1rem;
+    text-transform: uppercase;
+    margin-bottom: 0.5rem;
+  }
+
+  .nav-link a {
+    font-size: 1.0rem;
+    margin: 1px;
+    padding: 0.3rem 1rem;
+    font: inherit;
+    color: inherit;
+    text-decoration: none;
+    display: block;
+  }
+  .nav-link a:hover,
+  .nav-link a:focus {
+    background-color: var(--theme-bg-hover);
+  }
+
+  .nav-link a[aria-current="page"] {
+    color: var(--theme-text-accent);
+    background-color: var(--theme-bg-accent);
+    font-weight: 600;
+  }
+
+  :global(:root.theme-dark) .nav-link a[aria-current="page"] {
+    color: hsla(var(--color-base-white), 100%, 1);
+  }
+
+  @media (min-width: 50em) {
+    .nav-groups {
+      padding: 0;
+    }
+  }
+
+</style>
--- a/examples/docs/src/components/Note.astro
+++ b/examples/docs/src/components/Note.astro
@ -1,52 +0,0 @@
---
-export interface Props {
-  title: string;
-  type?: 'tip' | 'warning' | 'error'
-}
-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);
-    --color-rgb: var(--color-green-rgb);
-  }
-  .note.type-warning {
-    --color: var(--color-yellow);
-    --color-rgb: var(--color-yellow-rgb);
-  }
-  .note.type-error {
-    --color: var(--color-red);
-    --color-rgb: var(--color-red-rgb);
-  }
-</style>
--- a/examples/docs/src/components/PageContent/PageContent.astro
+++ b/examples/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>
--- a/examples/docs/src/components/RightSidebar/MoreMenu.astro
+++ b/examples/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="https://github.com/snowpackjs/astro/blob/main/CONTRIBUTING.md#translations" 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 our community</span>
+    </a>
+  </li>
+</ul>
+<div style="margin: 2rem 0; text-align: center;">
+  <ThemeToggleButton client:visible />
+</div>
--- a/examples/docs/src/components/RightSidebar/RightSidebar.astro
+++ b/examples/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>
--- a/examples/docs/src/components/RightSidebar/TableOfContents.tsx
+++ b/examples/docs/src/components/RightSidebar/TableOfContents.tsx
@ -0,0 +1,45 @@
+import type { FunctionalComponent } from 'preact';
+import { h, Fragment } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+
+const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({ headers = [] }) => {
+  const itemOffsets = useRef([]);
+  const [activeId, setActiveId] = useState<string>(undefined);
+
+  useEffect(() => {
+    const getItemOffsets = () => {
+      const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)');
+      itemOffsets.current = Array.from(titles).map((title) => ({
+        id: title.id,
+        topOffset: title.getBoundingClientRect().top + window.scrollY,
+      }));
+    };
+
+    getItemOffsets();
+    window.addEventListener('resize', getItemOffsets);
+
+    return () => {
+      window.removeEventListener('resize', getItemOffsets);
+    };
+  }, []);
+
+  return (
+    <>
+      <h2 class="heading">On this page</h2>
+      <ul>
+        <li class={`header-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}>
+          <a href="#overview">Overview</a>
+        </li>
+        {headers
+          .filter(({ depth }) => depth > 1 && depth < 4)
+          .map((header) => (
+            <li class={`header-link depth-${header.depth} ${activeId === header.slug ? 'active' : ''}`.trim()}>
+              <a href={`#${header.slug}`}>{header.text}</a>
+            </li>
+          ))}
+      </ul>
+    </>
+  );
+};
+
+export default TableOfContents;
--- a/examples/docs/src/components/RightSidebar/ThemeToggleButton.css
+++ b/examples/docs/src/components/RightSidebar/ThemeToggleButton.css
@ -0,0 +1,37 @@
+.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;
+}
--- a/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx
+++ b/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx
@ -1,17 +1,11 @@
 import type { FunctionalComponent } from 'preact';
 import { h, Fragment } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
+import './ThemeToggleButton.css';

-const themes = ['system', 'light', 'dark'];
+const themes = ['light', 'dark'];

 const icons = [
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
-    <path
-      fill-rule="evenodd"
-      d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z"
-      clip-rule="evenodd"
-    />
-  </svg>,
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
    <path
      fillRule="evenodd"
@ -25,42 +19,48 @@ const icons = [
 ];

 const ThemeToggle: FunctionalComponent = () => {
-  const [theme, setTheme] = useState(themes[0]);
-
-  useEffect(() => {
-    const user = localStorage.getItem('theme');
-    if (!user) return;
-    setTheme(user);
-  }, []);
+  const [theme, setTheme] = useState(() => {
+    if (import.meta.env.SSR) {
+      return undefined;
+    }
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+      return localStorage.getItem('theme');
+    }
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    return 'light';
+  });

  useEffect(() => {
    const root = document.documentElement;
-    if (theme === 'system') {
-      localStorage.removeItem('theme');
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        root.classList.add('theme-dark');
-      } else {
-        root.classList.remove('theme-dark');
-      }
+    if (theme === 'light') {
+      root.classList.remove('theme-dark');
    } else {
-      localStorage.setItem('theme', theme);
-      if (theme === 'light') {
-        root.classList.remove('theme-dark');
-      } else {
-        root.classList.add('theme-dark');
-      }
+      root.classList.add('theme-dark');
    }
  }, [theme]);

  return (
-    <div id="theme-toggle">
+    <div class="theme-toggle">
      {themes.map((t, i) => {
        const icon = icons[i];
        const checked = t === theme;
        return (
-          <label className={checked ? 'checked' : ''}>
+          <label className={checked ? ' checked' : ''}>
            {icon}
-            <input type="radio" name="theme-toggle" checked={checked} value={t} title={`Use ${t} theme`} aria-label={`Use ${t} theme`} onChange={() => setTheme(t)} />
+            <input
+              type="radio"
+              name="theme-toggle"
+              checked={checked}
+              value={t}
+              title={`Use ${t} theme`}
+              aria-label={`Use ${t} theme`}
+              onChange={() => {
+                localStorage.setItem('theme', t);
+                setTheme(t);
+              }}
+            />
          </label>
        );
      })}
--- a/examples/docs/src/components/SiteSidebar.astro
+++ b/examples/docs/src/components/SiteSidebar.astro
@ -1,20 +0,0 @@
---
-import { sidebar } from '../config.ts';
---
-
-<nav>
-  <ul class="nav-groups">
-    {sidebar.map(category => (
-      <li>
-        <div class="nav-group">
-          <h4 class="nav-group-title"><a href={`${Astro.site}${category.link}`}>{category.text}</a></h4>
-          <ul>
-            {category.children.map(child => (
-              <li class="nav-link"><a href={`${Astro.site}${child.link}`}>{child.text}</a></li>
-            ))}
-          </ul>
-        </div>
-      </li>
-    ))}
-  </ul>
-</nav>
--- a/examples/docs/src/config.ts
+++ b/examples/docs/src/config.ts
@ -1,10 +1,36 @@
-export const sidebar = [
-  {
-    text: 'Introduction',
-    link: '', // No leading slash needed, so this links to the homepage
-    children: [
-      { text: 'Getting Started', link: 'getting-started' },
-      { text: 'Example', link: 'example' },
-    ],
+export const SITE = {
+  title: 'Your Documentation Website',
+  description: 'Your website description.',
+  defaultLanguage: 'en_US',
+};
+
+export const OPEN_GRAPH = {
+  image: {
+    src: 'https://github.com/snowpackjs/astro/blob/main/assets/social/banner.png?raw=true',
+    alt: 'astro logo on a starry expanse of space,' + ' with a purple saturn-like planet floating in the right foreground',
  },
-];
+  twitter: 'astrodotbuild',
+};
+
+export const KNOWN_LANGUAGES = {
+  English: 'en',
+};
+
+// Uncomment this to enable site search.
+// See "Algolia" section of the README for more information.
+// export const ALGOLIA = {
+//   indexName: 'XXXXXXXXXX',
+//   apiKey: 'XXXXXXXXXX',
+// }
+
+export const SIDEBAR = {
+  en: [
+    { text: 'Section Header', header: true },
+    { text: 'Introduction', link: 'en/introduction' },
+    { text: 'Page 2', link: 'en/page-2' },
+    { text: 'Page 3', link: 'en/page-3' },
+
+    { text: 'Another Section', header: true },
+    { text: 'Page 4', link: 'en/page-4' },
+  ],
+};
--- a/examples/docs/src/languages.ts
+++ b/examples/docs/src/languages.ts
@ -0,0 +1,8 @@
+import { KNOWN_LANGUAGES } from './config.js';
+
+export const KNOWN_LANGUAGE_CODES = Object.values(KNOWN_LANGUAGES);
+
+export function getLanguageFromURL(pathname: string) {
+  const langCodeMatch = pathname.match(/\/([a-z]{2}-?[A-Z]{0,2})\//);
+  return langCodeMatch ? langCodeMatch[1] : 'en';
+}
--- a/examples/docs/src/layouts/Main.astro
+++ b/examples/docs/src/layouts/Main.astro
@ -1,239 +0,0 @@
---
-// Component Imports
-import ArticleFooter from '../components/ArticleFooter.astro';
-import SiteSidebar from '../components/SiteSidebar.astro';
-import ThemeToggle from '../components/ThemeToggle.tsx';
-import DocSidebar from '../components/DocSidebar.tsx';
-
-// Component Script:
-// You can write any JavaScript/TypeScript that you'd like here.
-// It will run during the build, but never in the browser.
-// All variables are available to use in the HTML template below.
-const { content } = Astro.props;
-const headers = content.astro.headers;
-const currentPage = Astro.request.url.pathname;
-const currentFile = currentPage === '/' ? 'src/pages/index.md' : `src/pages${currentPage.replace(/\/$/, "")}.md`;
-const githubEditUrl = `https://github.com/USER/REPO/blob/main/${currentFile}`
-
-// Full Astro Component Syntax:
-// https://docs.astro.build/core-concepts/astro-components/
---
-<html lang={ content.lang || 'en' }>
-  <head>
-    <title>{content.title}</title>
-    
-    <link rel="stylesheet" href="/index.css" />
-    <link rel="stylesheet" href="/theme.css" />
-    <link rel="stylesheet" href="/code.css" />
-    <script src="/theme.js" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-
-    <style>
-      body {
-        width: 100%;
-        display: grid;
-        grid-template-rows: 3.5rem 1fr;
-        --gutter: 0.5rem;
-        --doc-padding: 2rem;
-      }
-
-      header {
-        width: 100%;
-        height: 100%;
-        background-color: var(--theme-bg-offset);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .layout {
-        display: grid;
-        grid-auto-flow: column;
-        grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
-        gap: 1em;
-      }
-
-      .menu-and-logo {
-        gap: 1em;
-      }
-
-      nav.layout {
-        justify-content: center;
-        width: 100%;
-      }
-
-      nav.layout :global(> :nth-child(1)) {
-        grid-column: 2;
-      }
-
-      #site-title {
-        display: flex;
-        align-items: center;
-        gap: 0.25em;
-        font-size: 1.5rem;
-        font-weight: 700;
-        margin: 0;
-        line-height: 1;
-        color: var(--theme-text);
-        text-decoration: none;
-      }
-
-      #site-title:hover,
-      #site-title:focus {
-        color: var(--theme-text-light);
-      }
-
-      #site-title h1 {
-        font: inherit;
-        color: inherit;
-        margin: 0;
-      }
-
-      .nav-wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        max-width: 64ch;
-        margin: 0 auto;
-      }
-
-      .layout :global(> *) {
-        width: 100%;
-        height: 100%;
-      }
-
-      .sidebar {
-        max-height: 100vh;
-        position: sticky;
-        top: 0;
-        padding: var(--doc-padding) 0;
-      }
-
-      #sidebar-nav {
-        display: none;
-        max-height: 100vh;
-        padding: var(--doc-padding) 0;
-      }
-
-      #article {
-        padding: var(--doc-padding) var(--gutter);
-        grid-column: 2;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        height: 100%;
-      }
-
-      .content {
-        max-width: 64ch;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .content > main {
-        margin-bottom: 4rem;
-      }
-
-      #sidebar-content {
-        display: none;
-      }
-
-      @media (min-width: 64em) {
-        .menu-and-logo button {
-          display: none;
-        }
-        .layout {
-          grid-template-columns: 20rem minmax(0, 1fr);
-          padding-left: 1rem;
-          padding-right: 1rem;
-        }
-        #article {
-          grid-column: 2;
-        }
-        #sidebar-nav {
-          display: flex;
-        }
-        #sidebar-content {
-          /* display: flex; */
-          grid-column: 3;
-        }
-
-        .nav-wrapper {
-          display: contents;
-        }
-      }
-
-      @media (min-width: 88em) {
-        .layout {
-          grid-template-columns: minmax(var(--gutter), 1fr) 20rem minmax(0, var(--max-width)) 16rem minmax(var(--gutter), 1fr);
-          padding-left: 0;
-          padding-right: 0;
-        }
-
-        #sidebar-nav,
-        .nav-wrapper :global(:nth-child(1)) {
-          grid-column: 2;
-        }
-        #article,
-        .nav-wrapper :global(:nth-child(2)) {
-          grid-column: 3;
-        }
-        #sidebar-content,
-        .nav-wrapper :global(:nth-child(3)) {
-          display: flex;
-          grid-column: 4;
-        }
-      }
-
-    </style>
-  </head>
-
-  <body>
-    <header>
-      <nav class="layout">
-        <div class="nav-wrapper">
-          <div class="menu-and-logo flex">
-            <button id="menu-toggle">
-              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-              </svg>
-            </button>
-            <a id="site-title" href="/">
-              <svg width="1em" height="1em" viewBox="0 0 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M320 170C320 170 296.88 171.746 267.428 188.75C237.975 205.754 205.754 237.975 188.75 267.428C171.746 296.88 170 320 170 320C170 320 168.254 296.88 151.25 267.428C134.246 237.975 102.025 205.754 72.5721 188.75C43.1197 171.746 20 170 20 170C20 170 43.1197 168.254 72.5721 151.25C102.025 134.246 134.246 102.025 151.25 72.5721C168.254 43.1197 170 20 170 20C170 20 171.746 43.1197 188.75 72.5721C205.754 102.025 237.975 134.246 267.428 151.25C296.88 168.254 320 170 320 170Z" fill="currentColor"/>
-              </svg>
-              <h1>Astroid</h1>
-            </a>
-          </div>
-
-          <div />
-
-          <div>
-            <ThemeToggle client:idle />
-          </div>
-        </div>
-      </nav>
-    </header>
-
-    <main class="layout">
-      <aside class="sidebar" id="sidebar-nav">
-        <SiteSidebar />
-      </aside>
-      <div id="article">
-        <article class="content">
-          <main>
-            <h1>{content.title}</h1>
-            <slot />
-          </main>
-          <ArticleFooter />
-        </article>
-      </div>
-      <aside class="sidebar" id="sidebar-content">
-        <DocSidebar client:idle headers={headers} editHref={githubEditUrl} />
-      </aside>
-    </main>
-  </body>
-</html>
--- a/examples/docs/src/layouts/MainLayout.astro
+++ b/examples/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 dir="{content.dir ?? 'ltr'}" 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 currentPage={currentPage} />
+    <main class="layout">
+      <aside id="grid-left" class="grid-sidebar" title="Site Navigation">
+        <LeftSidebar currentPage={currentPage} />
+      </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>
--- a/examples/docs/src/pages/en/introduction.md
+++ b/examples/docs/src/pages/en/introduction.md
@ -0,0 +1,17 @@
+---
+title: Introduction
+layout: ~/layouts/MainLayout.astro
+---
+
+**Welcome to Astro!**
+
+This is the `docs` starter template. It contains all of the features that you need to build a Markdown-powered documentation site, including:
+
+- ✅ **Sidebar navigation**
+- ✅ **Search (powered by Algolia)**
+- ✅ **Multi-language i18n**
+- ✅ (and, best of all) **dark mode**
+
+To get started, check out the project `README.md` that the template came with. It provides documentation on how to use and customize this template for your own project, which you can always refer back to as you build.
+
+Found a missing feature that you can't live without? Please suggest it and even consider adding it yourself to the Astro repo! We're an open source project and contributions from developers like you are how we grow! 💙
--- a/examples/docs/src/pages/en/page-2.md
+++ b/examples/docs/src/pages/en/page-2.md
@ -0,0 +1,50 @@
+---
+title: Page 2
+layout: ~/layouts/MainLayout.astro
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Sed flavum. Stridore nato, Alcandrumque desint ostendit derat, longoque, eadem
+iunxit miserum pedum pectora. Liberat sine pignus cupit, ferit mihi venias
+amores, et quod, maduere haec _gravi_ contentusque heros. Qui suae attonitas.
+
+_Acta caelo_ ego, hoc illi ferroque, qui fluitque Achillis deiecerat erat
+inhospita arasque ad sume et aquis summo. Fugerat ipse iam. Funeris Iuno Danaos
+est inroravere aurum foret nati aeque tetigisset! Esse ad tibi queritur [Sol sub
+est](http://iusserat.net/) pugno solitoque movet coercuit solent caput te?
+
+Crescit sint petit gemellos gemino, et _gemma deus sub_ Surrentino frena
+principiis statione. Soporiferam secunda nulli Tereus is _Aeolidae cepit_, tua
+peregrinosque illam parvis, deerit sub et times sedant.
+
+## Apium haec candida mea movebo obsuntque descendat
+
+Furti lucos cum iussa quid temptanti gravitate animus: vocat
+[ira](http://rediere.com/): illa. Primis aeternus, illi cinguntur ad mugitus
+aevo repentinos nec.
+
+Transcurrere tenens in _litore_ tuti plebe circumspicit viventi quoque mox
+troades medio mea locuta gradus perque sic unguibus
+[gramen](http://quantoque.io/). Effetus celerique nomina quoque. Ire gemino est.
+Eurus quaerenti: et lacus, tibi ignorant tertia omnes subscribi ducentem sedit
+experientia sine ludunt multae. Ponderis memor purasque, ut armenta corpora
+efferre: praeterea infantem in virgam verso.
+
+- Revellit quoniam vulnerat dique respicit
+- Modo illis
+- Nec victoria quodque
+- Spectans si vitis iussorum corpora quas
+
+Tibi igni, iamque, sum arsuro patet et Talibus cecidere: levati Atlas villosa
+dubium conparentis litem volentem nec? Iuga tenent, passi cumque generosior
+luminis, quique mea aequora ingens bracchia furor, respiramen eram: in. Caelebs
+et passu Phaethonta alumna orbem rapuit inplet [adfusaeque
+oculis](http://www.virum.net/ille-miserae.html) paene. Casus mea cingebant idque
+suis nymphe ut arae potuit et non, inmota erat foret, facta manu arvum.
+
+Fugam nec stridentemque undis te solet mentemque Phrygibus fulvae adhuc quam
+cernimus est! Aper iube dederat adsere iamque mortale ita cornua si fundamina
+quem caperet, iubeas stolidae pedesque intrarunt navigat triformis. Undas terque
+digitos satis in nautae sternuntur curam, iaculum ignoscere _pianda dominique
+nostra_ vivacemque teneraque!
--- a/examples/docs/src/pages/en/page-3.md
+++ b/examples/docs/src/pages/en/page-3.md
@ -1,6 +1,6 @@
 ---
-title: Markdown Example
-layout: ../layouts/Main.astro
+title: Page 3
+layout: ~/layouts/MainLayout.astro
 ---

 This is a fully-featured page, written in Markdown!
@ -17,7 +17,9 @@ Nam quam dolor, pellentesque sed odio euismod, feugiat tempus tellus. Quisque ar

 ```markdown
 ---
-layout: ../layouts/Main.astro
+title: Markdown Page!
+lang: en
+layout: ~/layouts/MainLayout.astro
 ---

 # Markdown example
--- a/examples/docs/src/pages/en/page-4.md
+++ b/examples/docs/src/pages/en/page-4.md
@ -0,0 +1,36 @@
+---
+title: Page 4
+layout: ~/layouts/MainLayout.astro
+---
+
+This is a fully-featured page, written in Markdown!
+
+## Section A
+
+Lorem ipsum dolor sit amet, **consectetur adipiscing elit**. Sed ut tortor _suscipit_, posuere ante id, vulputate urna. Pellentesque molestie aliquam dui sagittis aliquet. Sed sed felis convallis, lacinia lorem sit amet, fermentum ex. Etiam hendrerit mauris at elementum egestas. Vivamus id gravida ante. Praesent consectetur fermentum turpis, quis blandit tortor feugiat in. Aliquam erat volutpat. In elementum purus et tristique ornare. Suspendisse sollicitudin dignissim est a ultrices. Pellentesque sed ipsum finibus, condimentum metus eget, sagittis elit. Sed id lorem justo. Vivamus in sem ac mi molestie ornare.
+
+## Section B
+
+Nam quam dolor, pellentesque sed odio euismod, feugiat tempus tellus. Quisque arcu velit, ultricies in faucibus sed, ultrices ac enim. Nunc eget dictum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex nisi, egestas mollis ultricies ut, laoreet suscipit libero. Nam condimentum molestie turpis. Sed vestibulum sagittis congue. Maecenas tristique enim et tincidunt tempor. Curabitur ac scelerisque nulla, in malesuada libero. Praesent eu tempus odio. Pellentesque aliquam ullamcorper quam at gravida. Sed non fringilla mauris. Aenean sit amet ultrices erat. Vestibulum congue venenatis tortor, nec suscipit tortor. Aenean pellentesque mauris eget tortor tincidunt pharetra.
+
+## Section C
+
+```markdown
+---
+title: Markdown Page!
+lang: en
+layout: ~/layouts/MainLayout.astro
+---
+
+# Markdown example
+
+This is a fully-featured page, written in Markdown!
+
+## Section A
+
+Lorem ipsum dolor sit amet, **consectetur adipiscing elit**. Sed ut tortor _suscipit_, posuere ante id, vulputate urna. Pellentesque molestie aliquam dui sagittis aliquet. Sed sed felis convallis, lacinia lorem sit amet, fermentum ex. Etiam hendrerit mauris at elementum egestas. Vivamus id gravida ante. Praesent consectetur fermentum turpis, quis blandit tortor feugiat in. Aliquam erat volutpat. In elementum purus et tristique ornare. Suspendisse sollicitudin dignissim est a ultrices. Pellentesque sed ipsum finibus, condimentum metus eget, sagittis elit. Sed id lorem justo. Vivamus in sem ac mi molestie ornare.
+
+## Section B
+
+Nam quam dolor, pellentesque sed odio euismod, feugiat tempus tellus. Quisque arcu velit, ultricies in faucibus sed, ultrices ac enim. Nunc eget dictum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex nisi, egestas mollis ultricies ut, laoreet suscipit libero. Nam condimentum molestie turpis. Sed vestibulum sagittis congue. Maecenas tristique enim et tincidunt tempor. Curabitur ac scelerisque nulla, in malesuada libero. Praesent eu tempus odio. Pellentesque aliquam ullamcorper quam at gravida. Sed non fringilla mauris. Aenean sit amet ultrices erat. Vestibulum congue venenatis tortor, nec suscipit tortor. Aenean pellentesque mauris eget tortor tincidunt pharetra.
+```
--- a/examples/docs/src/pages/getting-started.md
+++ b/examples/docs/src/pages/getting-started.md
@ -1,59 +0,0 @@
---
-title: Getting Started
-layout: ../layouts/Main.astro
---
-
-This template already provides your pages with a side bar navigation (on the left) for your pages, and a content navigation (on the right) for your sections.
-
-## Page navigation
-
-The page navigation, through the side bar on the left, needs to be manually updated. Open the `config.ts` file and you will find the following structure:
-
-```ts
-export const sidebar = [
-  {
-    text: 'Introduction',
-    link: '', // No leading slash needed, so this links to the homepage
-    children: [
-      { text: 'Getting Started', link: 'getting-started' },
-      { text: 'Example', link: 'example' },
-    ],
-  },
-];
-```
-
-You can change this file to match the pages you want to display, the items within `children` can also have children elements, but only the first level and second levels will be displayed.
-
-The page navigation is generated in the `src/components/SiteSidebar.astro`, so if you want to change the depth of elements displayed, styles, etc, that's the place to go.
-
-## Section navigation
-
-The section navigation, through the side bar on the right, is automatically generated by the `src/components/DocSidebar.tsx` file, it uses the meta-data from markdown files to generate the structure you see.
-
-By default only elements from depth 2 to 5 will be displayed, and at the moment doesn't work for `.astro files`.
-
-## Other Components
-
-### Footer
-
-You can edit your footer here `src/components/ArticleFooter.astro`, at the moment it is composed of a list of avatars. You can generate your own avatar [here](https://getavataaars.com/) and replace the ones from `AvatarList.astro`.
-
-### Theme
-
-The `src/components/ThemeToggle.tsx` is only responsible for applying the theme, to change the theme colors see `public/theme.css`
-
-## Documentation
-
-For more information on how to use Astro components, check the documentation pages:
-
- [Quick Start](https://docs.astro.build/quick-start)
- [astro.config.mjs](https://docs.astro.build/reference/configuration-reference)
- [API](https://docs.astro.build/reference/api-reference)
- [Command Line Interface](https://docs.astro.build/reference/cli-reference)
- [Collections](https://docs.astro.build/core-concepts/collections)
- [Development Server](https://docs.astro.build/reference/dev/)
- [Markdown](https://docs.astro.build/guides/markdown-content)
- [Publishing Astro components](https://docs.astro.build/guides/publish-to-npm)
- [Renderers](https://docs.astro.build/reference/renderer-reference)
- [Styling](https://docs.astro.build/guides/styling)
- [.astro Syntax](https://docs.astro.build/core-concepts/astro-components)
--- a/examples/docs/src/pages/index.astro
+++ b/examples/docs/src/pages/index.astro
@ -0,0 +1,5 @@
+<script>
+  // Redirect your homepage to the first page of documentation.
+  // If you have a landing page, remove this script and add it here!
+  window.location.pathname = `/en/introduction`;
+</script>
--- a/examples/docs/src/pages/index.md
+++ b/examples/docs/src/pages/index.md
@ -1,61 +0,0 @@
---
-title: Hello, Documentation!
-layout: ../layouts/Main.astro
---
-
-<img src="https://github.com/snowpackjs/astro/blob/main/assets/social/banner.png?raw=true" alt="Astro" width="638" height="320" >
-
-## What is Astro?
-
-**Astro** is a _fresh but familiar_ approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era.
-
-With Astro, you can use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default, it's none at all!
-
-## Project Status
-
-⚠️ **Astro is still an early beta, missing features and bugs are to be expected!** If you can stomach it, then Astro-built sites are production ready and several production websites built with Astro already exist in the wild. We will update this note once we get closer to a stable, v1.0 release.
-
-## 🔧 Quick Start
-
-> **Important**: Astro is built with [ESM modules](https://nodejs.org/api/esm.html) which are not supported in older version of Node.js. The minimum supported version is **14.16.1**.
-
-```bash
-# create your project
-mkdir new-project-directory
-cd new-project-directory
-npm init astro
-
-# install your dependencies
-npm install
-
-# start the dev server and open your browser
-npm run dev
-```
-
-### 🚀 Build & Deployment
-
-The default Astro project has the following `scripts` in the `/package.json` file:
-
-```json
-{
-  "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview"
-  }
-}
-```
-
-For local development, run:
-
-```
-npm run dev
-```
-
-To build for production, run the following command:
-
-```
-npm run build
-```
-
-To deploy your Astro site to production, upload the contents of `/dist` to your favorite static site host.
--- a/examples/docs/tsconfig.json
+++ b/examples/docs/tsconfig.json
@ -1,3 +1,8 @@
 {
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "esnext",
+    "jsx": "preserve"
+  },
  "moduleResolution": "node"
 }
--- a/packages/astro/README.md
+++ b/packages/astro/README.md
@ -1,23 +1 @@
-<img src="https://github.com/snowpackjs/astro/blob/main/assets/social/banner.png?raw=true" />
-
-**Astro** is a _fresh but familiar_ approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default. 
-
-
-### [Announcement Post →](https://astro.build/blog/introducing-astro)
-
-### [Full Documentation Site →](https://docs.astro.build/)
-
-## Project Status
-
-⚠️ **Astro is still an early beta, missing features and bugs are to be expected!** If you can stomach it, then Astro-built sites are production ready and several production websites built with Astro already exist in the wild. We will update this note once we get closer to a stable, v1.0 release.
-
-## Quick Start
-
-```bash
-# get started with astro in 3 easy steps:
-mkdir new-project-directory
-cd new-project-directory
-npm init astro
-```
-
-### [Full Documentation Site →](https://docs.astro.build/)
+packages/astro/README.md
--- a/yarn.lock
+++ b/yarn.lock
@ -2,109 +2,109 @@
 # yarn lockfile v1


-"@algolia/cache-browser-local-storage@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.10.4.tgz#d6799fef0f107ac8e99a991a846b851ef7b0f8ad"
-  integrity sha512-oNCRQWI9cTYqNkyt+lelkqF5Z3sQNSJ2OT9tK5w0587IJNWqkzZzqipJyWHZv2sWyBbOboDrwZfZUcik3y0Qrg==
+"@algolia/cache-browser-local-storage@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.10.5.tgz#961cf07cf59955de17af13bd74f7806bd2119553"
+  integrity sha512-cfX2rEKOtuuljcGI5DMDHClwZHdDqd2nT2Ohsc8aHtBiz6bUxKVyIqxr2gaC6tU8AgPtrTVBzcxCA+UavXpKww==
  dependencies:
-    "@algolia/cache-common" "4.10.4"
+    "@algolia/cache-common" "4.10.5"

-"@algolia/cache-common@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.10.4.tgz#c4976256bd1373e849caf310dd2bc3d7c413f03e"
-  integrity sha512-R2Sbg8zvVMsxFDKWQYAZD1cQIEO6J00dZFjFfYDMTH+r/t2CCOZal2EFGnHl7FcgTIEUsSrNJUzLefL8NM8/iA==
+"@algolia/cache-common@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.10.5.tgz#9510419e9dfb6d8814582c6b20615196f213a9d6"
+  integrity sha512-1mClwdmTHll+OnHkG+yeRoFM17kSxDs4qXkjf6rNZhoZGXDvfYLy3YcZ1FX4Kyz0DJv8aroq5RYGBDsWkHj6Tw==

-"@algolia/cache-in-memory@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.10.4.tgz#eacadfee2ad8961c84d3fc9bf94db341a9f24504"
-  integrity sha512-ReQnhekfAvYFRu2odShmMxPM2OcRjSK1Atncam2HSu7Zt/51gtQp6WJMm7K+Mb3y+mT+ckBbOTamv/uTREcu2A==
+"@algolia/cache-in-memory@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.10.5.tgz#de9331cb86734bf7f7624063cdaa639e43509be1"
+  integrity sha512-+ciQnfIGi5wjMk02XhEY8fmy2pzy+oY1nIIfu8LBOglaSipCRAtjk6WhHc7/KIbXPiYzIwuDbM2K1+YOwSGjwA==
  dependencies:
-    "@algolia/cache-common" "4.10.4"
+    "@algolia/cache-common" "4.10.5"

-"@algolia/client-account@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.10.4.tgz#b9730a2c067380419f5b23d0b77b6c4e2d081cca"
-  integrity sha512-Wtr91lXidDh5niXL0LPWxCluRdKA2CDpE2O/RKc9uMNDYCzCOkAxF2CcUuIpEW0IceO0D3d8n/TLuuKOIk2mww==
+"@algolia/client-account@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.10.5.tgz#82f7c330fc5f0625b5b559afe9c6b1aa6722b6cf"
+  integrity sha512-I9UkSS2glXm7RBZYZIALjBMmXSQbw/fI/djPcBHxiwXIheNIlqIFl2SNPkvihpPF979BSkzjqdJNRPhE1vku3Q==
  dependencies:
-    "@algolia/client-common" "4.10.4"
-    "@algolia/client-search" "4.10.4"
-    "@algolia/transporter" "4.10.4"
+    "@algolia/client-common" "4.10.5"
+    "@algolia/client-search" "4.10.5"
+    "@algolia/transporter" "4.10.5"

-"@algolia/client-analytics@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.10.4.tgz#830e17f87e878863294e438690c64e4c2520938f"
-  integrity sha512-CNOqWwq735i2kDh4DWk9Y4AN4mPIYOOec83xeWRnlSTfoL6DbLWVZTNBHi7Mi97h3prKVpr/Zm4f46RPrTYSsA==
+"@algolia/client-analytics@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.10.5.tgz#269e47c9de7e53e9e05e4a2d3c380607c3d2631f"
+  integrity sha512-h2owwJSkovPxzc+xIsjY1pMl0gj+jdVwP9rcnGjlaTY2fqHbSLrR9yvGyyr6305LvTppxsQnfAbRdE/5Z3eFxw==
  dependencies:
-    "@algolia/client-common" "4.10.4"
-    "@algolia/client-search" "4.10.4"
-    "@algolia/requester-common" "4.10.4"
-    "@algolia/transporter" "4.10.4"
+    "@algolia/client-common" "4.10.5"
+    "@algolia/client-search" "4.10.5"
+    "@algolia/requester-common" "4.10.5"
+    "@algolia/transporter" "4.10.5"

-"@algolia/client-common@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.10.4.tgz#a3b6874d4873249c10e4ca10e3a2a453b36df7ae"
-  integrity sha512-O5GcD/7JW7eLlLPc2AUGUHmWP95JZthivpiOmwloAVR1DFvgKZL3+1e3/e1wederPA3ETvz80++aL+6yPRhb8w==
+"@algolia/client-common@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.10.5.tgz#a7d0833796a9a2da68be16be76b6dc3962bf2f18"
+  integrity sha512-21FAvIai5qm8DVmZHm2Gp4LssQ/a0nWwMchAx+1hIRj1TX7OcdW6oZDPyZ8asQdvTtK7rStQrRnD8a95SCUnzA==
  dependencies:
-    "@algolia/requester-common" "4.10.4"
-    "@algolia/transporter" "4.10.4"
+    "@algolia/requester-common" "4.10.5"
+    "@algolia/transporter" "4.10.5"

-"@algolia/client-personalization@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-4.10.4.tgz#047909c626266803ddd0b1c08033f4429c1efb55"
-  integrity sha512-n5lb4DXLhk0rbCBSE2TgjKko+NCX0/lNBCSTszdanznkdA8NaHnOdy0/LvDoXh2ZYAMJx2etZvfWLYcSLO8cGQ==
+"@algolia/client-personalization@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-4.10.5.tgz#78a8fb8161bdbeaa66b400b3283640ef689e155b"
+  integrity sha512-nH+IyFKBi8tCyzGOanJTbXC5t4dspSovX3+ABfmwKWUYllYzmiQNFUadpb3qo+MLA3jFx5IwBesjneN6dD5o3w==
  dependencies:
-    "@algolia/client-common" "4.10.4"
-    "@algolia/requester-common" "4.10.4"
-    "@algolia/transporter" "4.10.4"
+    "@algolia/client-common" "4.10.5"
+    "@algolia/requester-common" "4.10.5"
+    "@algolia/transporter" "4.10.5"

-"@algolia/client-search@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.10.4.tgz#d14f9ded350cf2b5807561e10105d377f86223b5"
-  integrity sha512-qqSKogn85YTub8g01N4tcctsowbxq+QJzzzHSQA0+j4Pw93CguinDpX6mU/WbLIZIu2eaTeAQ7pORual3Li0yA==
+"@algolia/client-search@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.10.5.tgz#47907232a3e4ecf2aa4459b8de17242afd88147c"
+  integrity sha512-1eQFMz9uodrc5OM+9HeT+hHcfR1E1AsgFWXwyJ9Q3xejA2c1c4eObGgOgC9ZoshuHHdptaTN1m3rexqAxXRDBg==
  dependencies:
-    "@algolia/client-common" "4.10.4"
-    "@algolia/requester-common" "4.10.4"
-    "@algolia/transporter" "4.10.4"
+    "@algolia/client-common" "4.10.5"
+    "@algolia/requester-common" "4.10.5"
+    "@algolia/transporter" "4.10.5"

-"@algolia/logger-common@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.10.4.tgz#72c42a2b4a4335e0049108481fa0e9b9fd84cfa2"
-  integrity sha512-B4D6HqS2TDcf6S8YEr9cFm8S7eswIniojC8IFoCtlfMxhCj2OM70rH1eqfY2VQy/KPY1txYPdMPk8AG8685fHg==
+"@algolia/logger-common@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.10.5.tgz#cf807107e755ad4a72c5afc787e968ff1196f1cc"
+  integrity sha512-gRJo9zt1UYP4k3woEmZm4iuEBIQd/FrArIsjzsL/b+ihNoOqIxZKTSuGFU4UUZOEhvmxDReiA4gzvQXG+TMTmA==

-"@algolia/logger-console@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.10.4.tgz#61565ca5eca3ff978d165e78054dd5340c0c2a2d"
-  integrity sha512-217KiWZ66BcQ5begHhD+h8mNTjOHvTmUYV203pXteExOgfAm/gzQ4GzzAwXVAhCID2tzRDObfDq8M3BCMp8NPA==
+"@algolia/logger-console@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.10.5.tgz#f961a7a7c6718c3f3842fb9b522d47b03b9df8ad"
+  integrity sha512-4WfIbn4253EDU12u9UiYvz+QTvAXDv39mKNg9xSoMCjKE5szcQxfcSczw2byc6pYhahOJ9PmxPBfs1doqsdTKQ==
  dependencies:
-    "@algolia/logger-common" "4.10.4"
+    "@algolia/logger-common" "4.10.5"

-"@algolia/requester-browser-xhr@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.10.4.tgz#e6873b354e15c8e4676e3086e2b8eec95d973f7f"
-  integrity sha512-a8sEt9WQeolA/ZCSfhd2ImH+8v7o45359Omn2iBXzB3+UD/fo1jOFcDgyX35AusXw8pNtDI/Jd4n0vBYJvtSWg==
+"@algolia/requester-browser-xhr@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.10.5.tgz#7063e3bc6d9c72bc535e1794352eddf47459dfe6"
+  integrity sha512-53/MURQEqtK+bGdfq4ITSPwTh5hnADU99qzvpAINGQveUFNSFGERipJxHjTJjIrjFz3vxj5kKwjtxDnU6ygO9g==
  dependencies:
-    "@algolia/requester-common" "4.10.4"
+    "@algolia/requester-common" "4.10.5"

-"@algolia/requester-common@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.10.4.tgz#93c042d201287b1623db3d6d4b0e91dfb64a5971"
-  integrity sha512-RkAxkX/z8DAHUGg0vtZkY/lZXBPc/aEUf/DmWPp2dspAiCp1ekYlyf+qLNwOwEHMu+Q6nm+meStpAUl0BpsNVg==
+"@algolia/requester-common@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.10.5.tgz#52abfbf10b743d26afd3ce20f62771bc393ff4f0"
+  integrity sha512-UkVa1Oyuj6NPiAEt5ZvrbVopEv1m/mKqjs40KLB+dvfZnNcj+9Fry4Oxnt15HMy/HLORXsx4UwcthAvBuOXE9Q==

-"@algolia/requester-node-http@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.10.4.tgz#413701d24b87220f78645ae7caadc429af8a8217"
-  integrity sha512-iixy8GOrj0A4sIQX2Q0GChc1z3iM6LF8fJNXVXG629hbXlssEECAl8wO3+6bqAOgbCLiYeY9Aj3QsJyA6vJ4Iw==
+"@algolia/requester-node-http@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.10.5.tgz#db7e9ece1fda1b71a28c8e623666aaa096320b5c"
+  integrity sha512-aNEKVKXL4fiiC+bS7yJwAHdxln81ieBwY3tsMCtM4zF9f5KwCzY2OtN4WKEZa5AAADVcghSAUdyjs4AcGUlO5w==
  dependencies:
-    "@algolia/requester-common" "4.10.4"
+    "@algolia/requester-common" "4.10.5"

-"@algolia/transporter@4.10.4":
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.10.4.tgz#aec3bb3b87569ceec331861fe2c6ca6698a48d19"
-  integrity sha512-I60q9+4mYo3D9qIsUYaxU8ZukJVG/DWn1FBAeB5bW9c6/+chmppYJ5CJd/ZvKYEWd7ESwaRrrceYev94O4VrWw==
+"@algolia/transporter@4.10.5":
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.10.5.tgz#9354989f12af3e2ce7d3109a94f519d467a960e0"
+  integrity sha512-F8DLkmIlvCoMwSCZA3FKHtmdjH3o5clbt0pi2ktFStVNpC6ZDmY307HcK619bKP5xW6h8sVJhcvrLB775D2cyA==
  dependencies:
-    "@algolia/cache-common" "4.10.4"
-    "@algolia/logger-common" "4.10.4"
-    "@algolia/requester-common" "4.10.4"
+    "@algolia/cache-common" "4.10.5"
+    "@algolia/logger-common" "4.10.5"
+    "@algolia/requester-common" "4.10.5"

 "@babel/code-frame@7.12.11":
  version "7.12.11"
@ -287,7 +287,7 @@
    chalk "^2.0.0"
    js-tokens "^4.0.0"

-"@babel/parser@*", "@babel/parser@^7.12.0", "@babel/parser@^7.13.15", "@babel/parser@^7.13.9", "@babel/parser@^7.14.5", "@babel/parser@^7.15.0", "@babel/parser@^7.4.5":
+"@babel/parser@*", "@babel/parser@^7.13.15", "@babel/parser@^7.14.5", "@babel/parser@^7.15.0", "@babel/parser@^7.4.5":
  version "7.15.3"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.3.tgz#3416d9bea748052cfcb63dbcc27368105b1ed862"
  integrity sha512-O0L6v/HvqbdJawj0iBEfVQMc3/6WP+AeOsovsIgBFyJaG+W2w7eqvZB7puddATmWuARlm1SX7DwxJ/JJUnDpEA==
@ -341,7 +341,7 @@
    debug "^4.1.0"
    globals "^11.1.0"

-"@babel/types@^7.0.0", "@babel/types@^7.11.5", "@babel/types@^7.12.0", "@babel/types@^7.13.0", "@babel/types@^7.14.0", "@babel/types@^7.14.5", "@babel/types@^7.14.8", "@babel/types@^7.14.9", "@babel/types@^7.15.0", "@babel/types@^7.3.0":
+"@babel/types@^7.0.0", "@babel/types@^7.11.5", "@babel/types@^7.14.0", "@babel/types@^7.14.5", "@babel/types@^7.14.8", "@babel/types@^7.14.9", "@babel/types@^7.15.0", "@babel/types@^7.3.0":
  version "7.15.0"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
  integrity sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==
@ -561,25 +561,6 @@
    "@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.28"
    algoliasearch "^4.0.0"

-"@emmetio/abbreviation@^2.2.2":
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/@emmetio/abbreviation/-/abbreviation-2.2.2.tgz#746762fd9e7a8c2ea604f580c62e3cfe250e6989"
-  integrity sha512-TtE/dBnkTCct8+LntkqVrwqQao6EnPAs1YN3cUgxOxTaBlesBCY37ROUAVZrRlG64GNnVShdl/b70RfAI3w5lw==
-  dependencies:
-    "@emmetio/scanner" "^1.0.0"
-
-"@emmetio/css-abbreviation@^2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@emmetio/css-abbreviation/-/css-abbreviation-2.1.4.tgz#90362e8a1122ce3b76f6c3157907d30182f53f54"
-  integrity sha512-qk9L60Y+uRtM5CPbB0y+QNl/1XKE09mSO+AhhSauIfr2YOx/ta3NJw2d8RtCFxgzHeRqFRr8jgyzThbu+MZ4Uw==
-  dependencies:
-    "@emmetio/scanner" "^1.0.0"
-
-"@emmetio/scanner@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@emmetio/scanner/-/scanner-1.0.0.tgz#065b2af6233fe7474d44823e3deb89724af42b5f"
-  integrity sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==
-
 "@eslint/eslintrc@^0.4.3":
  version "0.4.3"
  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@ -605,6 +586,11 @@
  resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.28.tgz#a5ad7996f42e43e4acbb4e0010d663746d0e9997"
  integrity sha512-bprfNmYt1opFUFEtD2XfY/kEsm13bzHQgU80uMjhuK0DJ914IjolT1GytpkdM6tJ4MBvyiJPP+bTtWO+BZ7c7w==

+"@gar/promisify@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
+  integrity sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==
+
 "@hapi/hoek@^9.0.0":
  version "9.2.0"
  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.0.tgz#f3933a44e365864f4dad5db94158106d511e8131"
@ -1433,6 +1419,14 @@
  resolved "https://registry.yarnpkg.com/@npmcli/ci-detect/-/ci-detect-1.3.0.tgz#6c1d2c625fb6ef1b9dea85ad0a5afcbef85ef22a"
  integrity sha512-oN3y7FAROHhrAt7Rr7PnTSwrHrZVRTS2ZbyxeQwSSYD0ifwM3YNgQqbaRmjcWoPyq77MjchusjJDspbzMmip1Q==

+"@npmcli/fs@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-1.0.0.tgz#589612cfad3a6ea0feafcb901d29c63fd52db09f"
+  integrity sha512-8ltnOpRR/oJbOp8vaGUnipOi3bqkcW+sLHFlyXIr08OGHmVJLB1Hn7QtGXbYcpVtH1gAYZTlmDXtE4YV0+AMMQ==
+  dependencies:
+    "@gar/promisify" "^1.0.1"
+    semver "^7.3.5"
+
 "@npmcli/git@^2.1.0":
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/@npmcli/git/-/git-2.1.0.tgz#2fbd77e147530247d37f325930d457b3ebe894f6"
@ -1712,9 +1706,9 @@
  integrity sha512-Qm9hBEBu18wt1PO2flE7LPb30BHMQt1eQgbV76YntdNk73XZGpn3izvGTYxbGgzXKgbCjiia0uxTd3aTNQrY/g==

 "@snowpack/plugin-dotenv@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@snowpack/plugin-dotenv/-/plugin-dotenv-2.1.0.tgz#dac77007bf657f999d222318506a850fd7d16875"
-  integrity sha512-NvwB+kQuxKheZLWrRvOgXB8i0cXhuIkljbgCn02fRGCIOigPIDk1jZrnn3x9skqqtul/XvW9dNulVi6Fa7CN6g==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@snowpack/plugin-dotenv/-/plugin-dotenv-2.2.0.tgz#624348a83e28ae523a7d2695cbe81f53381bc964"
+  integrity sha512-/gj91mHz9iPi7e393sibVfpm4jrG7hqZytgkfiscOIWJ8Y838D0jX1JFXu9IAThZz0IEKTLpb74d5A7pM00HVg==
  dependencies:
    dotenv "^8.2.0"
    dotenv-expand "^5.1.0"
@ -1880,20 +1874,13 @@
  dependencies:
    "@types/node" "*"

-"@types/mdast@^3.0.0":
+"@types/mdast@^3.0.0", "@types/mdast@^3.0.3":
  version "3.0.10"
  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
  integrity sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==
  dependencies:
    "@types/unist" "*"

-"@types/mdast@^3.0.3":
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.9.tgz#3f7fa18faf9e567da9aa49e44ecc76ad33c359ce"
-  integrity sha512-IUlIhG2KNPjOEuXIblTjovD1XW8HPGeulA12nEyc6xhO4Yrrcs+xczAl4ucR3cpwVlE+vb2x9Z7pRmVP4bUHng==
-  dependencies:
-    "@types/unist" "*"
-
 "@types/mdurl@^1.0.0":
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
@ -1933,19 +1920,19 @@
    form-data "^3.0.0"

 "@types/node@*":
-  version "16.7.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.7.1.tgz#c6b9198178da504dfca1fd0be9b2e1002f1586f0"
-  integrity sha512-ncRdc45SoYJ2H4eWU9ReDfp3vtFqDYhjOsKlFFUDEn8V1Bgr2RjYal8YT5byfadWIRluhPFU6JiDOl0H6Sl87A==
+  version "16.7.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.7.2.tgz#0465a39b5456b61a04d98bd5545f8b34be340cb7"
+  integrity sha512-TbG4TOx9hng8FKxaVrCisdaxKxqEwJ3zwHoCWXZ0Jw6mnvTInpaB99/2Cy4+XxpXtjNv9/TgfGSvZFyfV/t8Fw==

 "@types/node@^12.7.1":
-  version "12.20.20"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.20.tgz#ce3d6c13c15c5e622a85efcd3a1cb2d9c7fa43a6"
-  integrity sha512-kqmxiJg4AT7rsSPIhO6eoBIx9mNwwpeH42yjtgQh6X2ANSpLpvToMXv+LMFdfxpwG1FZXZ41OGZMiUAtbBLEvg==
+  version "12.20.21"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.21.tgz#575e91f59c2e79318c2d39a48286c6954e484fd5"
+  integrity sha512-Qk7rOvV2A4vNgXNS88vEvbJE1NDFPCQ8AU+pNElrU2bA4yrRDef3fg3SUe+xkwyin3Bpg/Xh5JkNWTlsOcS2tA==

 "@types/node@^14.14.31":
-  version "14.17.11"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.11.tgz#82d266d657aec5ff01ca59f2ffaff1bb43f7bf0f"
-  integrity sha512-n2OQ+0Bz6WEsUjrvcHD1xZ8K+Kgo4cn9/w94s1bJS690QMUWfJPW/m7CCb7gPkA1fcYwL2UpjXP/rq/Eo41m6w==
+  version "14.17.12"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.12.tgz#7a31f720b85a617e54e42d24c4ace136601656c7"
+  integrity sha512-vhUqgjJR1qxwTWV5Ps5txuy2XMdf7Fw+OrdChRboy8BmWUPkckOhphaohzFG6b8DW7CrxaBMdrdJ47SYFq1okw==

 "@types/normalize-package-data@^2.4.0":
  version "2.4.1"
@ -2023,11 +2010,6 @@
  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
  integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==

-"@types/vscode@^1.52.0":
-  version "1.59.0"
-  resolved "https://registry.yarnpkg.com/@types/vscode/-/vscode-1.59.0.tgz#11c93f5016926126bf30b47b9ece3bd617eeef31"
-  integrity sha512-Zg38rusx2nU6gy6QdF7v4iqgxNfxzlBlDhrRCjOiPQp+sfaNrp3f9J6OHIhpGNN1oOAca4+9Hq0+8u3jwzPMlQ==
-
 "@types/yargs-parser@^20.2.0":
  version "20.2.1"
  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129"
@ -2102,39 +2084,40 @@
    "@typescript-eslint/types" "4.29.3"
    eslint-visitor-keys "^2.0.0"

-"@vue/compiler-core@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.4.tgz#a98d295771998c1e8dccc4ee3d52feb14b02aea9"
-  integrity sha512-c8NuQq7mUXXxA4iqD5VUKpyVeklK53+DMbojYMyZ0VPPrb0BUWrZWFiqSDT+MFDv0f6Hv3QuLiHWb1BWMXBbrw==
+"@vue/compiler-core@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.6.tgz#7162bb0670273f04566af0d353009187ab577915"
+  integrity sha512-vbwnz7+OhtLO5p5i630fTuQCL+MlUpEMTKHuX+RfetQ+3pFCkItt2JUH+9yMaBG2Hkz6av+T9mwN/acvtIwpbw==
  dependencies:
-    "@babel/parser" "^7.12.0"
-    "@babel/types" "^7.12.0"
-    "@vue/shared" "3.2.4"
-    estree-walker "^2.0.1"
+    "@babel/parser" "^7.15.0"
+    "@babel/types" "^7.15.0"
+    "@vue/shared" "3.2.6"
+    estree-walker "^2.0.2"
    source-map "^0.6.1"

-"@vue/compiler-dom@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.4.tgz#3a43de243eba127abbe57e796a0b969d2df78c08"
-  integrity sha512-uj1nwO4794fw2YsYas5QT+FU/YGrXbS0Qk+1c7Kp1kV7idhZIghWLTjyvYibpGoseFbYLPd+sW2/noJG5H04EQ==
+"@vue/compiler-dom@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.6.tgz#3764d7fe1a696e39fb2a3c9d638da0749e369b2d"
+  integrity sha512-+a/3oBAzFIXhHt8L5IHJOTP4a5egzvpXYyi13jR7CUYOR1S+Zzv7vBWKYBnKyJLwnrxTZnTQVjeHCgJq743XKg==
  dependencies:
-    "@vue/compiler-core" "3.2.4"
-    "@vue/shared" "3.2.4"
+    "@vue/compiler-core" "3.2.6"
+    "@vue/shared" "3.2.6"

 "@vue/compiler-sfc@^3.0.10":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.4.tgz#9807868cc950291f163c3930a81bb16e870df097"
-  integrity sha512-GM+ouDdDzhqgkLmBH4bgq4kiZxJQArSppJiZHWHIx9XRaefHLmc1LBNPmN8ivm4SVfi2i7M2t9k8ZnjsScgzPQ==
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.6.tgz#d6ab7410cff57081ab627b15a1ea51a1072c7cf1"
+  integrity sha512-Ariz1eDsf+2fw6oWXVwnBNtfKHav72RjlWXpEgozYBLnfRPzP+7jhJRw4Nq0OjSsLx2HqjF3QX7HutTjYB0/eA==
  dependencies:
-    "@babel/parser" "^7.13.9"
-    "@babel/types" "^7.13.0"
+    "@babel/parser" "^7.15.0"
+    "@babel/types" "^7.15.0"
    "@types/estree" "^0.0.48"
-    "@vue/compiler-core" "3.2.4"
-    "@vue/compiler-dom" "3.2.4"
-    "@vue/compiler-ssr" "3.2.4"
-    "@vue/shared" "3.2.4"
+    "@vue/compiler-core" "3.2.6"
+    "@vue/compiler-dom" "3.2.6"
+    "@vue/compiler-ssr" "3.2.6"
+    "@vue/ref-transform" "3.2.6"
+    "@vue/shared" "3.2.6"
    consolidate "^0.16.0"
-    estree-walker "^2.0.1"
+    estree-walker "^2.0.2"
    hash-sum "^2.0.0"
    lru-cache "^5.1.1"
    magic-string "^0.25.7"
@ -2144,50 +2127,61 @@
    postcss-selector-parser "^6.0.4"
    source-map "^0.6.1"

-"@vue/compiler-ssr@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.4.tgz#be51f219c2042b3e530373e60bc126ada6bb1cc0"
-  integrity sha512-bKZuXu9/4XwsFHFWIKQK+5kN7mxIIWmMmT2L4VVek7cvY/vm3p4WTsXYDGZJy0htOTXvM2ifr6sflg012T0hsw==
+"@vue/compiler-ssr@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.6.tgz#cadcf199859fa00739f4275b4c85970e4b0abe7d"
+  integrity sha512-A7IKRKHSyPnTC4w1FxHkjzoyjXInsXkcs/oX22nBQ+6AWlXj2Tt1le96CWPOXy5vYlsTYkF1IgfBaKIdeN/39g==
  dependencies:
-    "@vue/compiler-dom" "3.2.4"
-    "@vue/shared" "3.2.4"
+    "@vue/compiler-dom" "3.2.6"
+    "@vue/shared" "3.2.6"

-"@vue/reactivity@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.4.tgz#a020ad7e50f674219a07764b105b5922e61597ea"
-  integrity sha512-ljWTR0hr8Tn09hM2tlmWxZzCBPlgGLnq/k8K8X6EcJhtV+C8OzFySnbWqMWataojbrQOocThwsC8awKthSl2uQ==
+"@vue/reactivity@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.6.tgz#b8993fa6f48545178e588e25a9c9431a1c1b7d50"
+  integrity sha512-8vIDD2wpCnYisNNZjmcIj+Rixn0uhZNY3G1vzlgdVdLygeRSuFjkmnZk6WwvGzUWpKfnG0e/NUySM3mVi59hAA==
  dependencies:
-    "@vue/shared" "3.2.4"
+    "@vue/shared" "3.2.6"

-"@vue/runtime-core@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.4.tgz#da5dde3dc1e48df99dd31ea9a972f5c02acdc3f5"
-  integrity sha512-W6PtEOs8P8jKYPo3JwaMAozZQivxInUleGfNwI2pK1t8ZLZIxn4kAf7p4VF4jJdQB8SZBzpfWdLUc06j7IOmpQ==
+"@vue/ref-transform@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.6.tgz#30b5f1fa77daf9894bc23e6a5a0e3586a4a796b8"
+  integrity sha512-ie39+Y4nbirDLvH+WEq6Eo/l3n3mFATayqR+kEMSphrtMW6Uh/eEMx1Gk2Jnf82zmj3VLRq7dnmPx72JLcBYkQ==
  dependencies:
-    "@vue/reactivity" "3.2.4"
-    "@vue/shared" "3.2.4"
+    "@babel/parser" "^7.15.0"
+    "@vue/compiler-core" "3.2.6"
+    "@vue/shared" "3.2.6"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"

-"@vue/runtime-dom@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.4.tgz#1025595f2ae99a12fe0e1e6bce8df6761efec24b"
-  integrity sha512-HcVtLyn2SGwsf6BFPwkvDPDOhOqkOKcfHDpBp5R1coX+qMsOFrY8lJnGXIY+JnxqFjND00E9+u+lq5cs/W7ooA==
+"@vue/runtime-core@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.6.tgz#376baeef7fe02a62377d46d0d0a8ab9510db1d8e"
+  integrity sha512-3mqtgpj/YSGFxtvTufSERRApo92B16JNNxz9p+5eG6PPuqTmuRJz214MqhKBEgLEAIQ6R6YCbd83ZDtjQnyw2g==
  dependencies:
-    "@vue/runtime-core" "3.2.4"
-    "@vue/shared" "3.2.4"
+    "@vue/reactivity" "3.2.6"
+    "@vue/shared" "3.2.6"
+
+"@vue/runtime-dom@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.6.tgz#0f74dbca84d56c222fbfbd53415b260386859a3b"
+  integrity sha512-fq33urnP0BNCGm2O3KCzkJlKIHI80C94HJ4qDZbjsTtxyOn5IHqwKSqXVN3RQvO6epcQH+sWS+JNwcNDPzoasg==
+  dependencies:
+    "@vue/runtime-core" "3.2.6"
+    "@vue/shared" "3.2.6"
    csstype "^2.6.8"

 "@vue/server-renderer@^3.2.0":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.4.tgz#7d465a0e3c8d4eefd45b21c4b968269880a02215"
-  integrity sha512-ai9WxJ78nnUDk+26vwZhlA1Quz3tA+90DgJX6iseen2Wwnndd91xicFW+6ROR/ZP0yFNuQ017eZJBw8OqoPL+w==
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.6.tgz#f6e0e6160e57dea894dc88f616451f9e6558329b"
+  integrity sha512-Izc4F79W8Q36qLV442Yp1xOdwekb5DwA2p8wFsWmhgDLDeZOP9LeyYqN5BduDtAfLVe7gHOwt2Xg7QQltSVuBA==
  dependencies:
-    "@vue/compiler-ssr" "3.2.4"
-    "@vue/shared" "3.2.4"
+    "@vue/compiler-ssr" "3.2.6"
+    "@vue/shared" "3.2.6"

-"@vue/shared@3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.4.tgz#ba2a09527afff27b28d08f921b4a597e9504ca7a"
-  integrity sha512-j2j1MRmjalVKr3YBTxl/BClSIc8UQ8NnPpLYclxerK65JIowI4O7n8O8lElveEtEoHxy1d7BelPUDI0Q4bumqg==
+"@vue/shared@3.2.6":
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.6.tgz#2c22bae88fe2b7b59fa68a9c9c4cd60bae2c1794"
+  integrity sha512-uwX0Qs2e6kdF+WmxwuxJxOnKs/wEkMArtYpHSm7W+VY/23Tl8syMRyjnzEeXrNCAP0/8HZxEGkHJsjPEDNRuHw==

 "@webcomponents/template-shadowroot@^0.1.0":
  version "0.1.0"
@ -2327,24 +2321,24 @@ algoliasearch@^3.24.5:
    tunnel-agent "^0.6.0"

 algoliasearch@^4.0.0:
-  version "4.10.4"
-  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.10.4.tgz#500e66db668b0b7cedb36e9135a4fa719f236e59"
-  integrity sha512-noZ59PZYyYJVsm78YEo6EXH5DgaU0jSKf17xxJ3q9WtpBkmiaNk5b53mSJFsAI3c5gMOWgXM4+4o1EEaCbXXGg==
+  version "4.10.5"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.10.5.tgz#1faf34a3ae5ac3bef27282eb141251c70c7f5db2"
+  integrity sha512-KmH2XkiN+8FxhND4nWFbQDkIoU6g2OjfeU9kIv4Lb+EiOOs3Gpp7jvd+JnatsCisAZsnWQdjd7zVlW7I/85QvQ==
  dependencies:
-    "@algolia/cache-browser-local-storage" "4.10.4"
-    "@algolia/cache-common" "4.10.4"
-    "@algolia/cache-in-memory" "4.10.4"
-    "@algolia/client-account" "4.10.4"
-    "@algolia/client-analytics" "4.10.4"
-    "@algolia/client-common" "4.10.4"
-    "@algolia/client-personalization" "4.10.4"
-    "@algolia/client-search" "4.10.4"
-    "@algolia/logger-common" "4.10.4"
-    "@algolia/logger-console" "4.10.4"
-    "@algolia/requester-browser-xhr" "4.10.4"
-    "@algolia/requester-common" "4.10.4"
-    "@algolia/requester-node-http" "4.10.4"
-    "@algolia/transporter" "4.10.4"
+    "@algolia/cache-browser-local-storage" "4.10.5"
+    "@algolia/cache-common" "4.10.5"
+    "@algolia/cache-in-memory" "4.10.5"
+    "@algolia/client-account" "4.10.5"
+    "@algolia/client-analytics" "4.10.5"
+    "@algolia/client-common" "4.10.5"
+    "@algolia/client-personalization" "4.10.5"
+    "@algolia/client-search" "4.10.5"
+    "@algolia/logger-common" "4.10.5"
+    "@algolia/logger-console" "4.10.5"
+    "@algolia/requester-browser-xhr" "4.10.5"
+    "@algolia/requester-common" "4.10.5"
+    "@algolia/requester-node-http" "4.10.5"
+    "@algolia/transporter" "4.10.5"

 ansi-align@^2.0.0:
  version "2.0.0"
@ -2534,14 +2528,6 @@ astring@^1.7.4:
  resolved "https://registry.yarnpkg.com/astring/-/astring-1.7.5.tgz#a7d47fceaf32b052d33a3d07c511efeec67447ca"
  integrity sha512-lobf6RWXb8c4uZ7Mdq0U12efYmpD1UFnyOWVJPTa3ukqZrMopav+2hdNu0hgBF0JIBFK9QgrBDfwYvh3DFJDAA==

-"astro-scripts@file:scripts":
-  version "0.0.1"
-  dependencies:
-    arg "^5.0.0"
-    esbuild "^0.11.16"
-    globby "^11.0.3"
-    tar "^6.1.0"
-
 async-limiter@~1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
@ -2572,12 +2558,12 @@ autocomplete.js@0.36.0:
    immediate "^3.2.3"

 autoprefixer@^10.2.5, autoprefixer@^10.2.6:
-  version "10.3.2"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.3.2.tgz#836e4b4f59eb6876c41012c1c937be74035f3ec8"
-  integrity sha512-RHKq0YCvhxAn9987n0Gl6lkzLd39UKwCkUPMFE0cHhxU0SvcTjBxWG/CtkZ4/HvbqK9U5V8j03nAcGBlX3er/Q==
+  version "10.3.3"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.3.3.tgz#4bac89c74ef98e6a40fe1c5b76c0d1c91db153ce"
+  integrity sha512-yRzjxfnggrP/+qVHlUuZz5FZzEbkT+Yt0/Df6ScEMnbbZBLzYB2W0KLxoQCW+THm1SpOsM1ZPcTHAwuvmibIsQ==
  dependencies:
    browserslist "^4.16.8"
-    caniuse-lite "^1.0.30001251"
+    caniuse-lite "^1.0.30001252"
    colorette "^1.3.0"
    fraction.js "^4.1.1"
    normalize-range "^0.1.2"
@ -2861,10 +2847,11 @@ bytes@^3.0.0:
  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==

 cacache@^15.0.0, cacache@^15.0.3, cacache@^15.0.5, cacache@^15.2.0:
-  version "15.2.0"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.2.0.tgz#73af75f77c58e72d8c630a7a2858cb18ef523389"
-  integrity sha512-uKoJSHmnrqXgthDFx/IU6ED/5xd+NNGe+Bb+kLZy7Ku4P+BaiWEUflAKPZ7eAzsYGcsAGASJZsybXp+quEcHTw==
+  version "15.3.0"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.3.0.tgz#dc85380fb2f556fe3dda4c719bfa0ec875a7f1eb"
+  integrity sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==
  dependencies:
+    "@npmcli/fs" "^1.0.0"
    "@npmcli/move-file" "^1.0.1"
    chownr "^2.0.0"
    fs-minipass "^2.0.0"
@ -2986,10 +2973,10 @@ camelcase@^5.0.0, camelcase@^5.3.1:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

-caniuse-lite@^1.0.30001251:
-  version "1.0.30001251"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001251.tgz#6853a606ec50893115db660f82c094d18f096d85"
-  integrity sha512-HOe1r+9VkU4TFmnU70z+r7OLmtR+/chB1rdcJUeQlAinjEeb0cKL20tlAtOagNZhbrtLnCvV19B4FmF1rgzl6A==
+caniuse-lite@^1.0.30001251, caniuse-lite@^1.0.30001252:
+  version "1.0.30001252"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001252.tgz#cb16e4e3dafe948fc4a9bb3307aea054b912019a"
+  integrity sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw==

 caseless@~0.12.0:
  version "0.12.0"
@ -4018,22 +4005,9 @@ ee-first@1.1.1:
  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=

 electron-to-chromium@^1.3.811:
-  version "1.3.814"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.814.tgz#418fad80c3276a46103ca72a21a8290620d83c4a"
-  integrity sha512-0mH03cyjh6OzMlmjauGg0TLd87ErIJqWiYxMcOLKf5w6p0YEOl7DJAj7BDlXEFmCguY5CQaKVOiMjAMODO2XDw==
-
-emmet@^2.1.5:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/emmet/-/emmet-2.3.4.tgz#5ba0d7a5569a68c7697dfa890c772e4f3179d123"
-  integrity sha512-3IqSwmO+N2ZGeuhDyhV/TIOJFUbkChi53bcasSNRE7Yd+4eorbbYz4e53TpMECt38NtYkZNupQCZRlwdAYA42A==
-  dependencies:
-    "@emmetio/abbreviation" "^2.2.2"
-    "@emmetio/css-abbreviation" "^2.1.4"
-
-"emoji-regex@>=6.0.0 <=6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.1.1.tgz#c6cd0ec1b0642e2a3c67a1137efc5e796da4f88e"
-  integrity sha1-xs0OwbBkLio8Z6ETfvxeeW2k+I4=
+  version "1.3.818"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.818.tgz#32ed024fa8316e5d469c96eecbea7d2463d80085"
+  integrity sha512-c/Z9gIr+jDZAR9q+mn40hEc1NharBT+8ejkarjbCDnBNFviI6hvcC5j2ezkAXru//bTnQp5n6iPi0JA83Tla1Q==

 emoji-regex@^8.0.0:
  version "8.0.0"
@ -4193,9 +4167,9 @@ esbuild@^0.11.16, esbuild@^0.11.17:
  integrity sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==

 esbuild@^0.12.12:
-  version "0.12.22"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.22.tgz#6031a1257b8d0307d306bed673b79c3668607f51"
-  integrity sha512-yWCr9RoFehpqoe/+MwZXJpYOEIt7KOEvNnjIeMZpMSyQt+KCBASM3y7yViiN5dJRphf1wGdUz1+M4rTtWd/ulA==
+  version "0.12.23"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.23.tgz#fd40d70d3ec5e7893d8c5be655e3e38d096dd882"
+  integrity sha512-qvS4aKnmKikoWGscd5lVAzgobMovlH/JhaWitRiQ8xJx0x1Fym0pqVjMFs43Nvff8WpibeWm+fWoLK88T1U0Xw==

 esbuild@~0.9.0:
  version "0.9.7"
@ -4966,11 +4940,9 @@ gitconfiglocal@^1.0.0:
    ini "^1.3.2"

 github-slugger@^1.0.0, github-slugger@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.3.0.tgz#9bd0a95c5efdfc46005e82a906ef8e2a059124c9"
-  integrity sha512-gwJScWVNhFYSRDvURk/8yhcFBee6aFjye2a7Lhb2bUyRulpIoek9p0I9Kt7PT67d/nUlZbFu8L9RLiA0woQN8Q==
-  dependencies:
-    emoji-regex ">=6.0.0 <=6.1.1"
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.4.0.tgz#206eb96cdb22ee56fdc53a28d5a302338463444e"
+  integrity sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==

 glob-parent@^5.1.1, glob-parent@^5.1.2, glob-parent@~5.1.2:
  version "5.1.2"
@ -5254,7 +5226,7 @@ hast-util-parse-selector@^3.0.0:
  dependencies:
    "@types/hast" "^2.0.0"

-hast-util-raw@^7.0.0:
+hast-util-raw@^7.2.0:
  version "7.2.0"
  resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-7.2.0.tgz#279fe5bc154f1c0b956f656781fa9ae1fdac7c70"
  integrity sha512-K2ofsY59XqrtBNUAkvT2vPdyNPUchjj1Z0FxUOwBadS6R5h9O3LaRZqpukQ+YfgQ/IMy9GGMB/Nlpzpu+cuuMA==
@ -5393,12 +5365,12 @@ htmlparser2@^6.1.0:
    entities "^2.0.0"

 http-assert@^1.3.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/http-assert/-/http-assert-1.4.1.tgz#c5f725d677aa7e873ef736199b89686cceb37878"
-  integrity sha512-rdw7q6GTlibqVVbXr0CKelfV5iY8G2HqEUkhSk297BMbSpSL8crXC+9rjKoMcZZEsksX30le6f/4ul4E28gegw==
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/http-assert/-/http-assert-1.5.0.tgz#c389ccd87ac16ed2dfa6246fd73b926aa00e6b8f"
+  integrity sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==
  dependencies:
    deep-equal "~1.0.1"
-    http-errors "~1.7.2"
+    http-errors "~1.8.0"

 http-cache-semantics@^4.0.0, http-cache-semantics@^4.1.0:
  version "4.1.0"
@ -5410,7 +5382,7 @@ http-equiv-refresh@^1.0.0:
  resolved "https://registry.yarnpkg.com/http-equiv-refresh/-/http-equiv-refresh-1.0.0.tgz#8ec538866042be5f3f7afa737d198d94beb1b07b"
  integrity sha1-jsU4hmBCvl8/evpzfRmNlL6xsHs=

-http-errors@^1.6.3, http-errors@^1.7.3:
+http-errors@^1.6.3, http-errors@^1.7.3, http-errors@~1.8.0:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.0.tgz#75d1bbe497e1044f51e4ee9e704a62f28d336507"
  integrity sha512-4I8r0C5JDhT5VkvI47QktDW75rNlGVsUf/8hzjCC/wkWI/jdTRmBb9aI7erSG82r1bjKY3F6k28WnsVxB1C73A==
@ -6146,11 +6118,6 @@ json5@^2.1.2:
  dependencies:
    minimist "^1.2.5"

-jsonc-parser@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.3.1.tgz#59549150b133f2efacca48fe9ce1ec0659af2342"
-  integrity sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==
-
 jsonfile@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@ -6640,9 +6607,9 @@ make-fetch-happen@^8.0.9:
    ssri "^8.0.0"

 make-fetch-happen@^9.0.1:
-  version "9.0.5"
-  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-9.0.5.tgz#e7819afd9c8605f1452df4c1c6dc5c502ca18459"
-  integrity sha512-XN0i/VqHsql30Oq7179spk6vu3IuaPL1jaivNYhBrJtK7tkOuJwMK2IlROiOnJ40b9SvmOo2G86FZyI6LD2EsQ==
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz#53085a09e7971433e6765f7971bf63f4e05cb968"
+  integrity sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==
  dependencies:
    agentkeepalive "^4.1.3"
    cacache "^15.2.0"
@ -8819,9 +8786,9 @@ read-package-json@^3.0.0:
    npm-normalize-package-bin "^1.0.0"

 read-package-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/read-package-json/-/read-package-json-4.0.0.tgz#b555a9f749bf5eb9b8f053806b32f17001914e90"
-  integrity sha512-EBQiek1udd0JKvUzaViAWHYVQRuQZ0IP0LWUOqVCJaZIX92ZO86dOpvsTOO3esRIQGgl7JhFBaGqW41VI57KvQ==
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/read-package-json/-/read-package-json-4.0.1.tgz#da88a38c410344fecb7d840d35f27635e848ea54"
+  integrity sha512-czqCcYfkEl6sIFJVOND/5/Goseu7cVw1rcDUATq6ED0jLGjMm9/HOPmFmEZMvRu9yl272YERaMUcOlvcNU9InQ==
  dependencies:
    glob "^7.1.1"
    json-parse-even-better-errors "^2.3.0"
@ -8993,12 +8960,12 @@ rehype-autolink-headings@^6.1.0:
    unist-util-visit "^4.0.0"

 rehype-raw@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/rehype-raw/-/rehype-raw-6.0.0.tgz#7a176e73f7c452db7e8608b637355d566f61245e"
-  integrity sha512-vzbvI7d3WUJHh+7aaHs0PHlgc+NevOh+buLkEB7I/FD3xskTmhUntnjS57uTW3uQt67xcF3COm9OwLpVsk6jvg==
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/rehype-raw/-/rehype-raw-6.1.0.tgz#78ba31d8725fe98467ca1acbbd65e2d0040b46e1"
+  integrity sha512-12j2UiiYJgZFdjnHDny77NY5BF3eW4Jsl0vtgL1DWdTzcHjPpbhumU+GtPUdivEWwQc8x9OdEuO0oxaGz7Tvyg==
  dependencies:
    "@types/hast" "^2.0.0"
-    hast-util-raw "^7.0.0"
+    hast-util-raw "^7.2.0"
    unified "^10.0.0"

 rehype-stringify@^9.0.1:
@ -9362,9 +9329,9 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@^5.2.1,
  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

 sass@^1.3.0, sass@^1.32.13:
-  version "1.38.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.38.0.tgz#2f3e60a1efdcdc910586fa79dc89d3399a145b4f"
-  integrity sha512-WBccZeMigAGKoI+NgD7Adh0ab1HUq+6BmyBUEaGxtErbUtWUevEbdgo5EZiJQofLUGcKtlNaO2IdN73AHEua5g==
+  version "1.38.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.38.1.tgz#54dfb17fb168846b5850324b82fc62dc68f51bad"
+  integrity sha512-Lj8nPaSYOuRhgqdyShV50fY5jKnvaRmikUNalMPmbH+tKMGgEKVkltI/lP30PEfO2T1t6R9yc2QIBLgOc3uaFw==
  dependencies:
    chokidar ">=3.0.0 <4.0.0"

@ -9573,9 +9540,9 @@ smartwrap@^1.2.3:
    yargs "^15.1.0"

 snowpack@^3.8.6:
-  version "3.8.6"
-  resolved "https://registry.yarnpkg.com/snowpack/-/snowpack-3.8.6.tgz#0bef5c071caef86a2f91aa5c3d5b70d0c2e2793c"
-  integrity sha512-EZ3Y7RtTiPvxnVFTKPfkvi2PKBrprXCvOHKWQQLBkHonf+xdtG51RiNjtrRLJeCjislAlD6OoeGHUxz76ToGHw==
+  version "3.8.8"
+  resolved "https://registry.yarnpkg.com/snowpack/-/snowpack-3.8.8.tgz#237f1c0ad49c68313864f3aa4438db3affee0806"
+  integrity sha512-Y/4V8FdzzYpwmJU2TgXRRFytz+GFSliWULK9J5O6C72KyK60w20JKqCdRtVs1S6BuobCedF5vSBD1Gvtm+gsJg==
  dependencies:
    "@npmcli/arborist" "^2.6.4"
    bufferutil "^4.0.2"
@ -9604,6 +9571,7 @@ snowpack@^3.8.6:
    isbinaryfile "^4.0.6"
    jsonschema "~1.2.5"
    kleur "^4.1.1"
+    magic-string "^0.25.7"
    meriyah "^3.1.6"
    mime-types "^2.1.26"
    mkdirp "^1.0.3"
@ -10108,9 +10076,9 @@ svelte-preprocess@^4.7.2:
    strip-indent "^3.0.0"

 svelte@^3.35.0, svelte@^3.38.0:
-  version "3.42.2"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.42.2.tgz#0246c175c820c1aeca07300c48573a15aae3c1e4"
-  integrity sha512-FOyNYKXb8wdE0Ot+Ctt2/OyDLsNBP8+V6PUE9ag6ZKeLslIou0LnMu1fhtWUA+HjzKTbAM1yj+4PFLtg/3pMJA==
+  version "3.42.3"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.42.3.tgz#a7687a43ff6aa12263e03cf56219cd21eff5372d"
+  integrity sha512-pbdtdNZEx2GBqSM6XEgPoHbwtvWBwFLt/1bRmzsyXZO+i424wFnPe7O5B3GOJDPFSxPRztumAW3mL5LPzecWUg==

 table@^6.0.9:
  version "6.7.1"
@ -10175,9 +10143,9 @@ tar@^4.4.12:
    yallist "^3.1.1"

 tar@^6.0.2, tar@^6.1.0:
-  version "6.1.10"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.10.tgz#8a320a74475fba54398fa136cd9883aa8ad11175"
-  integrity sha512-kvvfiVvjGMxeUNB6MyYv5z7vhfFRwbwCXJAeL0/lnbrttBVqcMOnpHUf0X42LrPMR8mMpgapkJMchFH4FSHzNA==
+  version "6.1.11"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.11.tgz#6760a38f003afa1b2ffd0ffe9e9abbd0eab3d621"
+  integrity sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==
  dependencies:
    chownr "^2.0.0"
    fs-minipass "^2.0.0"
@ -10215,9 +10183,9 @@ term-size@^2.1.0:
  integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==

 terser@^5.0.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.7.1.tgz#2dc7a61009b66bb638305cb2a824763b116bf784"
-  integrity sha512-b3e+d5JbHAe/JSjwsC3Zn55wsBIM7AsHLjKxT31kGCldgbpFePaFo+PiddtO6uwRZWRw7sPXmAN8dTW61xmnSg==
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.7.2.tgz#d4d95ed4f8bf735cb933e802f2a1829abf545e3f"
+  integrity sha512-0Omye+RD4X7X69O0eql3lC4Heh/5iLj3ggxR/B5ketZLOtLiOqukUgjw3q4PDnNQbsrkKr3UMypqStQG3XKRvw==
  dependencies:
    commander "^2.20.0"
    source-map "~0.7.2"
@ -10484,7 +10452,7 @@ typedarray@^0.0.6:
  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=

-typescript@^4.2.4, typescript@^4.3.1-rc:
+typescript@^4.2.4:
  version "4.3.5"
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
@ -10885,105 +10853,14 @@ vm2@^3.9.2:
  resolved "https://registry.yarnpkg.com/vm2/-/vm2-3.9.3.tgz#29917f6cc081cc43a3f580c26c5b553fd3c91f40"
  integrity sha512-smLS+18RjXYMl9joyJxMNI9l4w7biW8ilSDaVRvFBDwOH8P0BK1ognFQTpg0wyQ6wIKLTblHJvROW692L/E53Q==

-vscode-css-languageservice@^5.1.1:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-5.1.4.tgz#07e4c63f1c3bb06e6f3f329c32b490d20a601bab"
-  integrity sha512-fIJZJMXbaBsK0ifBb2RmSiLtzwn6NrZnKn7O+0ziIjwAY+rPvSK9St2qqQXFU3reZVRAt/I4GBp40dC/THcUDA==
-  dependencies:
-    vscode-languageserver-textdocument "^1.0.1"
-    vscode-languageserver-types "^3.16.0"
-    vscode-nls "^5.0.0"
-    vscode-uri "^3.0.2"
-
-vscode-emmet-helper@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/vscode-emmet-helper/-/vscode-emmet-helper-2.1.2.tgz#2978060ebb736a7e0f6e6f1d649bd026880528c3"
-  integrity sha512-Fy6UNawSgxE3Kuqi54vSXohf03iOIrp1A74ReAgzvGP9Yt7fUAvkqF6No2WAc34/w0oWAHAeqoBNqmKKWh6U5w==
-  dependencies:
-    emmet "^2.1.5"
-    jsonc-parser "^2.3.0"
-    vscode-languageserver-textdocument "^1.0.1"
-    vscode-languageserver-types "^3.15.1"
-    vscode-nls "^5.0.0"
-    vscode-uri "^2.1.2"
-
-vscode-html-languageservice@^3.0.3:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/vscode-html-languageservice/-/vscode-html-languageservice-3.2.0.tgz#e92269a04097d87bd23431e3a4e491a27b5447b9"
-  integrity sha512-aLWIoWkvb5HYTVE0kI9/u3P0ZAJGrYOSAAE6L0wqB9radKRtbJNrF9+BjSUFyCgBdNBE/GFExo35LoknQDJrfw==
-  dependencies:
-    vscode-languageserver-textdocument "^1.0.1"
-    vscode-languageserver-types "3.16.0-next.2"
-    vscode-nls "^5.0.0"
-    vscode-uri "^2.1.2"
-
-vscode-jsonrpc@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-6.0.0.tgz#108bdb09b4400705176b957ceca9e0880e9b6d4e"
-  integrity sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==
-
-vscode-languageclient@~7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/vscode-languageclient/-/vscode-languageclient-7.0.0.tgz#b505c22c21ffcf96e167799757fca07a6bad0fb2"
-  integrity sha512-P9AXdAPlsCgslpP9pRxYPqkNYV7Xq8300/aZDpO35j1fJm/ncize8iGswzYlcvFw5DQUx4eVk+KvfXdL0rehNg==
-  dependencies:
-    minimatch "^3.0.4"
-    semver "^7.3.4"
-    vscode-languageserver-protocol "3.16.0"
-
-vscode-languageserver-protocol@3.16.0, vscode-languageserver-protocol@^3.15.3:
-  version "3.16.0"
-  resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.16.0.tgz#34135b61a9091db972188a07d337406a3cdbe821"
-  integrity sha512-sdeUoAawceQdgIfTI+sdcwkiK2KU+2cbEYA0agzM2uqaUy2UpnnGHtWTHVEtS0ES4zHU0eMFRGN+oQgDxlD66A==
-  dependencies:
-    vscode-jsonrpc "6.0.0"
-    vscode-languageserver-types "3.16.0"
-
-vscode-languageserver-textdocument@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.1.tgz#178168e87efad6171b372add1dea34f53e5d330f"
-  integrity sha512-UIcJDjX7IFkck7cSkNNyzIz5FyvpQfY7sdzVy+wkKN/BLaD4DQ0ppXQrKePomCxTS7RrolK1I0pey0bG9eh8dA==
-
-vscode-languageserver-types@3.16.0, vscode-languageserver-types@^3.15.1, vscode-languageserver-types@^3.16.0:
-  version "3.16.0"
-  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz#ecf393fc121ec6974b2da3efb3155644c514e247"
-  integrity sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==
-
-vscode-languageserver-types@3.16.0-next.2:
-  version "3.16.0-next.2"
-  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0-next.2.tgz#940bd15c992295a65eae8ab6b8568a1e8daa3083"
-  integrity sha512-QjXB7CKIfFzKbiCJC4OWC8xUncLsxo19FzGVp/ADFvvi87PlmBSCAtZI5xwGjF5qE0xkLf0jjKUn3DzmpDP52Q==
-
-vscode-languageserver@6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-6.1.1.tgz#d76afc68172c27d4327ee74332b468fbc740d762"
-  integrity sha512-DueEpkUAkD5XTR4MLYNr6bQIp/UFR0/IPApgXU3YfCBCB08u2sm9hRCs6DxYZELkk++STPjpcjksR2H8qI3cDQ==
-  dependencies:
-    vscode-languageserver-protocol "^3.15.3"
-
-vscode-nls@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-5.0.0.tgz#99f0da0bd9ea7cda44e565a74c54b1f2bc257840"
-  integrity sha512-u0Lw+IYlgbEJFF6/qAqG2d1jQmJl0eyAGJHoAJqr2HT4M2BNuQYSEiSE75f52pXHSJm8AlTjnLLbBFPrdz2hpA==
-
-vscode-uri@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-2.1.2.tgz#c8d40de93eb57af31f3c715dd650e2ca2c096f1c"
-  integrity sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==
-
-vscode-uri@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.2.tgz#ecfd1d066cb8ef4c3a208decdbab9a8c23d055d0"
-  integrity sha512-jkjy6pjU1fxUvI51P+gCsxg1u2n8LSt0W6KrCNQceaziKzff74GoWmjVG46KieVzybO1sttPQmYfrwSHey7GUA==
-
 vue@^3.2.0:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.4.tgz#d94d88675e41c050d3a722d0848a7063b5e87a60"
-  integrity sha512-rNCFmoewm8IwmTK0nj3ysKq53iRpNEFKoBJ4inar6tIh7Oj7juubS39RI8UI+VE7x+Cs2z6PBsadtZu7z2qppg==
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.6.tgz#c71445078751f458648fd8fb3a2da975507d03d2"
+  integrity sha512-Zlb3LMemQS3Xxa6xPsecu45bNjr1hxO8Bh5FUmE0Dr6Ot0znZBKiM47rK6O7FTcakxOnvVN+NTXWJF6u8ajpCQ==
  dependencies:
-    "@vue/compiler-dom" "3.2.4"
-    "@vue/runtime-dom" "3.2.4"
-    "@vue/shared" "3.2.4"
+    "@vue/compiler-dom" "3.2.6"
+    "@vue/runtime-dom" "3.2.6"
+    "@vue/shared" "3.2.6"

 wait-on@6.0.0:
  version "6.0.0"