1 files changed, 190 insertions, 0 deletions
diff --git a/examples/docs/src/pages/en/getting-started.md b/examples/docs/src/pages/en/getting-started.md
new file mode 100644
index 000000000..33494432c
--- /dev/null
+++ b/examples/docs/src/pages/en/getting-started.md
@@ -0,0 +1,190 @@
+---
+title: Getting Started
+layout: ~/layouts/MainLayout.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 = {
+  en: [
+    { text: 'Getting Started', header: true },
+    { text: 'Introduction', link: 'en/introduction' },
+    { text: 'Getting Started', link: 'en/getting-started' },
+    { text: 'Example', link: 'en/example' },
+  ],
+  es: [
+    { text: 'Empezando', header: true },
+    { text: 'Introducción', link: 'es/introduction' },
+    { text: 'Empezando', link: 'es/getting-started' },
+    { text: 'Ejemplo', link: 'es/example' },
+  ],
+  fr: [
+    { text: 'Commencer', header: true },
+    { text: 'Introduction', link: 'fr/introduction' },
+    { text: 'Commencer', link: 'fr/getting-started' },
+    { text: 'Exemple', link: 'fr/example' },
+  ],
+};
+```
+
+The sidebar supports many languages, and each language has items to display, and pages to link to, allowing for a truly native experience for international users. You can change this file to match the pages you want to display, the object with the `{ header: true, ... }` set to true will act as a section title and cannot contain a link.
+
+The page navigation is generated in the `src/components/LeftSidebar/LeftSidebar.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/RightSidebar/RightSidebar.astro` 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/Footer/Footer.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 `src/components/Footer/AvatarList.astro`.
+
+### Theme
+
+The `src/components/RightSidebar/ThemeToggleButton.tsx` is only responsible for applying the theme, to change the theme colors see `public/theme.css`
+
+## Multiple Languages
+
+By default the Astro docs template encourages writing your docs in mutliple languages, it also encourages writing your docs in a specific file structure
+
+```
+📦pages
+ ┣ 📂en
+ ┃ ┣ 📜example.md
+ ┃ ┣ 📜getting-started.md
+ ┃ ┣ 📜index.astro
+ ┃ ┗ 📜introduction.md
+ ┣ 📂es
+ ┃ ┣ 📜example.md
+ ┃ ┣ 📜getting-started.md
+ ┃ ┣ 📜index.astro
+ ┃ ┗ 📜introduction.md
+ ┣ 📂fr
+ ┃ ┣ 📜example.md
+ ┃ ┣ 📜getting-started.md
+ ┃ ┣ 📜index.astro
+ ┃ ┗ 📜introduction.md
+ ┗ 📜index.astro
+```
+
+each folder within the `pages/` folder represents a language, to add new languages, you will need to create a new langauge folder,
+add the langauges name to the `LANGUAGE_NAMES` variable in the [`languages.ts`](../../languages.ts) file, and add new sidebar links corrosponding to the new language. E.g. Adding Deutsch as a supported language
+
+1. Create the `de/` folder in the pages directory
+
+```
+📦pages
+ ┣ 📂en
+ ┃ ┣ 📜example.md
+ ┃ ┣ 📜getting-started.md
+ ┃ ┣ 📜index.astro
+ ┃ ┗ 📜introduction.md
+ ┣ 📂de
+ ┃ ┣ 📜example.md
+ ┃ ┣ 📜getting-started.md
+ ┃ ┣ 📜index.astro
+ ┃ ┗ 📜introduction.md
+ ┗ 📜index.astro
+```
+
+2. Add Deutsch to the `LANGUAGE_NAMES` variable in the [`languages.ts`](../../languages.ts) file
+
+```ts
+// src/languages.ts
+export const LANGUAGE_NAMES = {
+  English: 'en',
+  Deutsch: 'de',
+};
+
+// ...
+```
+
+3. Add Deutch as a localized language for the SIDEBAR
+
+```ts
+// src/config.ts
+export const SIDEBAR = {
+  en: [
+    { text: 'Getting Started', header: true },
+    { text: 'Introduction', link: 'en/introduction' },
+    { text: 'Getting Started', link: 'en/getting-started' },
+    { text: 'Example', link: 'en/example' },
+  ],
+  de: [
+    { text: 'Einstieg', header: true },
+    { text: 'Einführung', link: 'de/introduction' },
+    { text: 'Einstieg', link: 'de/getting-started' },
+    { text: 'Beispiel', link: 'de/example' },
+  ],
+};
+
+// ...
+```
+
+> _**Note**: make sure the sidebar links point to the proper language folder_
+
+<!-- , but if you are unable to properly support multiple languages, you can disable multiple languages, you set the `DISABLE_MULTIPLE_LANGUAGES` variable in the [`config.ts`](../../config.ts) file to `true`, but you still need to change and tweak a couple more things.
+
+After settings `DISABLE_MULTIPLE_LANGUAGES` you can now move the pages from the language folder you wish to use, e.g. I speak english, so, I would delete every other folders and files in the [`pages/`](../) folder except for the [`en/`](./) folder, I would then move the files from the [`en/`](./) folder to the [`pages/`](../) folder, delete all `index.astro` files, and finally delete the [`en/`](./) folder.
+
+The file structure will look like this once you are done,
+
+```
+📦src
+ ┣ 📂components
+ ┃ ┣ ...
+ ┣ 📂layouts
+ ┃ ┗ 📜MainLayout.astro
+ ┣ 📂pages
+ ┃ ┣ 📜example.md
+ ┃ ┣ 📜getting-started.md
+ ┃ ┗ 📜introduction.md
+ ┣ 📜config.ts
+ ┗ 📜languages.ts
+```
+
+You will then need to rename `introductions.md` to `index.md`, and reorganize the `SIDEBAR` variable in the [`config.ts`](../../config.ts) file to resemble something like this (remember to change the links, since the `en/` folder has been deleted),
+
+```ts
+export const SIDEBAR = [
+  // index.md is the homepage, so, you don't need to set a sidebar link
+  { text: 'Introduction', header: true },
+  { text: 'Getting Started', link: 'getting-started' },
+  { text: 'Example', link: 'example' },
+]
+```
+
+and that's it. -->
+
+## Algolia DocSearch
+
+[Algolia](https://www.algolia.com/) offers [DocSearch](https://docsearch.algolia.com/), a _"State-of-the-art search for technical documentation"_. We use DocSearch for the Astro docs as it's a great documentation search engine, to make things setting up docs easier we built it into the docs template, you can setup DocSearch for your site by following these instructions, ...
+
+### 🛠 Configuration
+
+...
+
+## 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)