docs: initial getting-started document
This commit is contained in:
Ayo
parent
98c4b77648
commit
a90ceec55e
4 changed files with 65 additions and 104 deletions
|
|
@ -1,17 +1,17 @@
|
|||
export const SITE = {
|
||||
title: 'Astro Reactive Library Docs',
|
||||
description: 'Documentation for the Astro Reactive Library',
|
||||
defaultLanguage: 'en_US',
|
||||
title: "Astro Reactive",
|
||||
description: "Documentation for the Astro Reactive Library",
|
||||
defaultLanguage: "en_US",
|
||||
};
|
||||
|
||||
export const OPEN_GRAPH = {
|
||||
image: {
|
||||
src: 'https://github.com/withastro/astro/blob/main/assets/social/banner.jpg?raw=true',
|
||||
src: "https://github.com/withastro/astro/blob/main/assets/social/banner.jpg?raw=true",
|
||||
alt:
|
||||
'astro logo on a starry expanse of space,' +
|
||||
' with a purple saturn-like planet floating in the right foreground',
|
||||
"astro logo on a starry expanse of space," +
|
||||
" with a purple saturn-like planet floating in the right foreground",
|
||||
},
|
||||
twitter: 'astrodotbuild',
|
||||
twitter: "astrodotbuild",
|
||||
};
|
||||
|
||||
// This is the type of the frontmatter you put in the docs markdown files.
|
||||
|
|
@ -20,13 +20,13 @@ export type Frontmatter = {
|
|||
description: string;
|
||||
layout: string;
|
||||
image?: { src: string; alt: string };
|
||||
dir?: 'ltr' | 'rtl';
|
||||
dir?: "ltr" | "rtl";
|
||||
ogLocale?: string;
|
||||
lang?: string;
|
||||
};
|
||||
|
||||
export const KNOWN_LANGUAGES = {
|
||||
English: 'en',
|
||||
English: "en",
|
||||
} as const;
|
||||
export const KNOWN_LANGUAGE_CODES = Object.values(KNOWN_LANGUAGES);
|
||||
|
||||
|
|
@ -36,9 +36,9 @@ export const COMMUNITY_INVITE_URL = `https://astro.build/chat`;
|
|||
|
||||
// See "Algolia" section of the README for more information.
|
||||
export const ALGOLIA = {
|
||||
indexName: 'XXXXXXXXXX',
|
||||
appId: 'XXXXXXXXXX',
|
||||
apiKey: 'XXXXXXXXXX',
|
||||
indexName: "XXXXXXXXXX",
|
||||
appId: "XXXXXXXXXX",
|
||||
apiKey: "XXXXXXXXXX",
|
||||
};
|
||||
|
||||
export type Sidebar = Record<
|
||||
|
|
@ -47,11 +47,11 @@ export type Sidebar = Record<
|
|||
>;
|
||||
export const SIDEBAR: Sidebar = {
|
||||
en: {
|
||||
'Section Header': [
|
||||
{ text: 'Introduction', link: 'en/introduction' },
|
||||
{ text: 'Page 2', link: 'en/page-2' },
|
||||
{ text: 'Page 3', link: 'en/page-3' },
|
||||
Tutorial: [
|
||||
{ text: "Getting Started", link: "en/getting-started" },
|
||||
{ text: "Page 2", link: "en/page-2" },
|
||||
{ text: "Page 3", link: "en/page-3" },
|
||||
],
|
||||
'Another Section': [{ text: 'Page 4', link: 'en/page-4' }],
|
||||
"API Docs": [{ text: "Page 4", link: "en/page-4" }],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
31
apps/docs/src/pages/en/getting-started.md
Normal file
31
apps/docs/src/pages/en/getting-started.md
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
title: Getting Started
|
||||
description: Library homepage
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
Consider the following code:
|
||||
|
||||
|
||||
``` astro
|
||||
---
|
||||
import Form { FormGroup } from '@astro-reactive/form';
|
||||
import { Validators } from '@astro-reactive/validator';
|
||||
|
||||
const form = new FormGroup([
|
||||
{
|
||||
name: 'username',
|
||||
label: 'Username',
|
||||
validators: [Validators.required]
|
||||
},
|
||||
{
|
||||
name: 'password',
|
||||
label: 'Password',
|
||||
validators: [Validators.required, Validators.minLength(8)]
|
||||
},
|
||||
]);
|
||||
---
|
||||
|
||||
<Form formGroups={form} />
|
||||
|
||||
```
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
---
|
||||
title: Astro Reactive Library
|
||||
description: Library homepage
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
|
||||
|
||||
[](https://github.com/ayoayco/astro-reactive-library/actions/workflows/build-and-test.yml)
|
||||
[](https://github.com/ayoayco/astro-reactive-library)
|
||||
|
||||
# Components and utilities for building reactive user interfaces 🔥
|
||||
|
||||
Let your data build your UI. Blazing-fast, reactive user interfaces with native [Astro](https://astro.build) components and architecture.
|
||||
|
||||
| Packages | Version | Description |
|
||||
| --- | --- | --- |
|
||||
| [@astro-reactive/form](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/form/README.md) | [](https://www.npmjs.com/package/@astro-reactive/form) | generate a dynamic form which can be modified programatically |
|
||||
| [@astro-reactive/validator](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/validator/README.md)| [](https://www.npmjs.com/package/@astro-reactive/validator) | set up validators for your form easily |
|
||||
| astro-reactive-datagrid | 🛠 | generate a dynamic datagrid or table of values |
|
||||
|
||||
# Running locally
|
||||
|
||||
We mainly use the `demo` app to see changes we make on the packages. Do the following to start hacking:
|
||||
|
||||
1. Fork the project then clone to your computer
|
||||
|
||||
```
|
||||
git clone git@github.com:<your-user-name>/astro-reactive-library.git
|
||||
```
|
||||
|
||||
2. Go into the project directory
|
||||
|
||||
```
|
||||
cd astro-reactive-library
|
||||
```
|
||||
|
||||
3. Install the node dependencies
|
||||
|
||||
```
|
||||
npm i
|
||||
```
|
||||
|
||||
4. Run the demo application
|
||||
|
||||
```
|
||||
npm start
|
||||
```
|
||||
|
||||
5. Open the demo application on you browser. Browse to the address:
|
||||
|
||||
```
|
||||
https://localhost:3000
|
||||
```
|
||||
|
||||
6. To run the tests:
|
||||
|
||||
```
|
||||
npm test
|
||||
```
|
||||
|
||||
_[Please report issues and suggestions](https://github.com/ayoayco/astro-reactive-library/issues)_
|
||||
|
||||
# Contributors
|
||||
|
||||
<a href="https://github.com/ayoayco/astro-reactive-library/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=ayoayco/astro-reactive-library" />
|
||||
</a>
|
||||
|
||||
👉 _[Join our contributors!](https://github.com/ayoayco/astro-reactive-library/blob/main/CONTRIBUTING.md)_
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script is:inline>
|
||||
// Redirect your homepage to the first page of documentation.
|
||||
// If you have a landing page, remove this script and add it here!
|
||||
window.location.pathname = `/en/introduction`;
|
||||
window.location.pathname = `/en/getting-started`;
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue