diff options
Diffstat (limited to 'examples/docs/src')
| -rw-r--r-- | examples/docs/src/components/SiteSidebar.astro | 2 | ||||
| -rw-r--r-- | examples/docs/src/config.ts | 5 | ||||
| -rw-r--r-- | examples/docs/src/layouts/Main.astro | 3 | ||||
| -rw-r--r-- | examples/docs/src/pages/getting-started.md | 60 | ||||
| -rw-r--r-- | examples/docs/src/pages/index.astro | 2 |
5 files changed, 69 insertions, 3 deletions
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> |