Fix/issue #385 (#392)

* Apply favicon to the docs template

* Fix Sidebar category headers aren't clickable

Fixes #385

* Improve Docs example documentation

* Fix Documentation List on getting started page

1 files changed, 60 insertions, 0 deletions

diff --git a/examples/docs/src/pages/getting-started.md b/examples/docs/src/pages/getting-started.md
new file mode 100644
index 000000000..e569ca790
--- /dev/null
+++ b/examples/docs/src/pages/getting-started.md
@@ -0,0 +1,60 @@
+---
+layout: ../layouts/Main.astro
+---
+
+# Getting Started
+
+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: '/',
+    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:
+
+- [General Instructions](https://github.com/snowpackjs/astro#readme)
+- [astro.config.mjs](https://github.com/snowpackjs/astro/blob/main/docs/config.md)
+- [API](https://github.com/snowpackjs/astro/blob/main/docs/api.md)
+- [Command Line Interface](https://github.com/snowpackjs/astro/blob/main/docs/cli.md)
+- [Collections](https://github.com/snowpackjs/astro/blob/main/docs/collections.md)
+- [Development Server](https://github.com/snowpackjs/astro/blob/main/docs/dev.md)
+- [Markdown](https://github.com/snowpackjs/astro/blob/main/docs/markdown.md)
+- [Publishing Astro components](https://github.com/snowpackjs/astro/blob/main/docs/publishing.md)
+- [Renderers](https://github.com/snowpackjs/astro/blob/main/docs/renderers.md)
+- [Styling](https://github.com/snowpackjs/astro/blob/main/docs/styling.md)
+- [.astro Syntax](https://github.com/snowpackjs/astro/blob/main/docs/syntax.md)