diff options
Diffstat (limited to 'examples/docs/src/pages/getting-started.md')
-rw-r--r-- | examples/docs/src/pages/getting-started.md | 60 |
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) |