diff --git a/apps/docs/src/config.ts b/apps/docs/src/config.ts index 056ce18..a3892a4 100644 --- a/apps/docs/src/config.ts +++ b/apps/docs/src/config.ts @@ -1,32 +1,32 @@ 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', - alt: - 'astro logo on a starry expanse of space,' + - ' with a purple saturn-like planet floating in the right foreground', - }, - twitter: 'astrodotbuild', + image: { + 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", + }, + twitter: "astrodotbuild", }; // This is the type of the frontmatter you put in the docs markdown files. export type Frontmatter = { - title: string; - description: string; - layout: string; - image?: { src: string; alt: string }; - dir?: 'ltr' | 'rtl'; - ogLocale?: string; - lang?: string; + title: string; + description: string; + layout: string; + image?: { src: string; alt: string }; + 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,22 +36,22 @@ 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< - typeof KNOWN_LANGUAGE_CODES[number], - Record + typeof KNOWN_LANGUAGE_CODES[number], + 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' }, - ], - 'Another Section': [{ text: 'Page 4', link: 'en/page-4' }], - }, + en: { + Tutorial: [ + { text: "Getting Started", link: "en/getting-started" }, + { text: "Page 2", link: "en/page-2" }, + { text: "Page 3", link: "en/page-3" }, + ], + "API Docs": [{ text: "Page 4", link: "en/page-4" }], + }, }; diff --git a/apps/docs/src/pages/en/getting-started.md b/apps/docs/src/pages/en/getting-started.md new file mode 100644 index 0000000..7689491 --- /dev/null +++ b/apps/docs/src/pages/en/getting-started.md @@ -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)] + }, +]); +--- + +
+ +``` diff --git a/apps/docs/src/pages/en/introduction.md b/apps/docs/src/pages/en/introduction.md deleted file mode 100644 index cc5f3a5..0000000 --- a/apps/docs/src/pages/en/introduction.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Astro Reactive Library -description: Library homepage -layout: ../../layouts/MainLayout.astro ---- - -![library-cover](https://user-images.githubusercontent.com/4262489/193811991-dc6ed9d7-0960-42f3-8b72-108620c6ab25.png) - -[![Build and Test](https://github.com/ayoayco/astro-reactive-library/actions/workflows/build-and-test.yml/badge.svg?branch=main)](https://github.com/ayoayco/astro-reactive-library/actions/workflows/build-and-test.yml) -[![github](https://img.shields.io/github/last-commit/ayoayco/astro-reactive-library)](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) | [![npm](https://img.shields.io/npm/v/@astro-reactive/form)](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)| [![npm](https://img.shields.io/npm/v/@astro-reactive/validator)](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:/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 - - - - - -👉 _[Join our contributors!](https://github.com/ayoayco/astro-reactive-library/blob/main/CONTRIBUTING.md)_ diff --git a/apps/docs/src/pages/index.astro b/apps/docs/src/pages/index.astro index bce0697..d357d2a 100644 --- a/apps/docs/src/pages/index.astro +++ b/apps/docs/src/pages/index.astro @@ -1,5 +1,5 @@