From 348d829e94b778874d13c8e07a5105321deab025 Mon Sep 17 00:00:00 2001
From: Laura Caroline <Hanawa02@users.noreply.github.com>
Date: Fri, 11 Jun 2021 21:55:13 +0200
Subject: [PATCH] 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
---
 .../docs/src/components/SiteSidebar.astro     |  2 +-
 examples/docs/src/config.ts                   |  5 +-
 examples/docs/src/layouts/Main.astro          |  3 +
 examples/docs/src/pages/getting-started.md    | 60 +++++++++++++++++++
 examples/docs/src/pages/index.astro           |  2 +
 5 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 examples/docs/src/pages/getting-started.md

diff --git a/examples/docs/src/components/SiteSidebar.astro b/examples/docs/src/components/SiteSidebar.astro
index 7279d9aea..30b14621c 100644
--- a/examples/docs/src/components/SiteSidebar.astro
+++ b/examples/docs/src/components/SiteSidebar.astro
@@ -7,7 +7,7 @@ import { sidebar } from '../config.ts';
     {sidebar.map(category => (
       <li>
         <div class="nav-group">
-          <h4 class="nav-group-title">{category.text}</h4>
+          <h4 class="nav-group-title"><a href={category.link}>{category.text}</a></h4>
           <ul>
             {category.children.map(child => (
               <li class="nav-link"><a href={child.link}>{child.text}</a></li>
diff --git a/examples/docs/src/config.ts b/examples/docs/src/config.ts
index 6b6ce3fdc..96edecaf3 100644
--- a/examples/docs/src/config.ts
+++ b/examples/docs/src/config.ts
@@ -1,8 +1,9 @@
 export const sidebar = [
   {
-    text: 'Introduction',
+    text: 'Introduction', 
+    link: '/',
     children: [
-      { text: 'Welcome', link: '/' },
+      { text: 'Getting Started', link: '/getting-started' },
       { text: 'Example', link: '/example' },
     ],
   },
diff --git a/examples/docs/src/layouts/Main.astro b/examples/docs/src/layouts/Main.astro
index b741098ef..e6f30faca 100644
--- a/examples/docs/src/layouts/Main.astro
+++ b/examples/docs/src/layouts/Main.astro
@@ -17,6 +17,9 @@ editHref = `https://github.com/snowpackjs/astro/tree/main/examples/doc/src/pages
     
     <link rel="stylesheet" href="/index.css" />
     <script src="/theme.js" />
+    <link rel="icon" 
+          type="image/svg+xml" 
+          href="/favicon.svg">
 
     <style>
       body {
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)
diff --git a/examples/docs/src/pages/index.astro b/examples/docs/src/pages/index.astro
index 75ca0da4f..6cba4c7fe 100644
--- a/examples/docs/src/pages/index.astro
+++ b/examples/docs/src/pages/index.astro
@@ -10,5 +10,7 @@ import Layout from '../layouts/Main.astro';
     This is a starter template, have fun building your next documentation site with [Astro](https://astro.build).
 
     It offers the right mix of simple-to-use [Markdown pages](/example) and rich, interactive components embedded in `.astro` files using `<Markdown>`.
+
+    The docs template has some nice components, for more information click [here](/getting-started).
   </Markdown>
 </Layout>