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,32 +1,32 @@
|
||||||
export const SITE = {
|
export const SITE = {
|
||||||
title: 'Astro Reactive Library Docs',
|
title: "Astro Reactive",
|
||||||
description: 'Documentation for the Astro Reactive Library',
|
description: "Documentation for the Astro Reactive Library",
|
||||||
defaultLanguage: 'en_US',
|
defaultLanguage: "en_US",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const OPEN_GRAPH = {
|
export const OPEN_GRAPH = {
|
||||||
image: {
|
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:
|
alt:
|
||||||
'astro logo on a starry expanse of space,' +
|
"astro logo on a starry expanse of space," +
|
||||||
' with a purple saturn-like planet floating in the right foreground',
|
" 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.
|
// This is the type of the frontmatter you put in the docs markdown files.
|
||||||
export type Frontmatter = {
|
export type Frontmatter = {
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
layout: string;
|
layout: string;
|
||||||
image?: { src: string; alt: string };
|
image?: { src: string; alt: string };
|
||||||
dir?: 'ltr' | 'rtl';
|
dir?: "ltr" | "rtl";
|
||||||
ogLocale?: string;
|
ogLocale?: string;
|
||||||
lang?: string;
|
lang?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const KNOWN_LANGUAGES = {
|
export const KNOWN_LANGUAGES = {
|
||||||
English: 'en',
|
English: "en",
|
||||||
} as const;
|
} as const;
|
||||||
export const KNOWN_LANGUAGE_CODES = Object.values(KNOWN_LANGUAGES);
|
export const KNOWN_LANGUAGE_CODES = Object.values(KNOWN_LANGUAGES);
|
||||||
|
|
||||||
|
|
@ -36,22 +36,22 @@ export const COMMUNITY_INVITE_URL = `https://astro.build/chat`;
|
||||||
|
|
||||||
// See "Algolia" section of the README for more information.
|
// See "Algolia" section of the README for more information.
|
||||||
export const ALGOLIA = {
|
export const ALGOLIA = {
|
||||||
indexName: 'XXXXXXXXXX',
|
indexName: "XXXXXXXXXX",
|
||||||
appId: 'XXXXXXXXXX',
|
appId: "XXXXXXXXXX",
|
||||||
apiKey: 'XXXXXXXXXX',
|
apiKey: "XXXXXXXXXX",
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Sidebar = Record<
|
export type Sidebar = Record<
|
||||||
typeof KNOWN_LANGUAGE_CODES[number],
|
typeof KNOWN_LANGUAGE_CODES[number],
|
||||||
Record<string, { text: string; link: string }[]>
|
Record<string, { text: string; link: string }[]>
|
||||||
>;
|
>;
|
||||||
export const SIDEBAR: Sidebar = {
|
export const SIDEBAR: Sidebar = {
|
||||||
en: {
|
en: {
|
||||||
'Section Header': [
|
Tutorial: [
|
||||||
{ text: 'Introduction', link: 'en/introduction' },
|
{ text: "Getting Started", link: "en/getting-started" },
|
||||||
{ text: 'Page 2', link: 'en/page-2' },
|
{ text: "Page 2", link: "en/page-2" },
|
||||||
{ text: 'Page 3', link: 'en/page-3' },
|
{ 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>
|
<script is:inline>
|
||||||
// Redirect your homepage to the first page of documentation.
|
// Redirect your homepage to the first page of documentation.
|
||||||
// If you have a landing page, remove this script and add it here!
|
// 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>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue