diff --git a/README.md b/README.md index 61654cb..35e5f01 100644 --- a/README.md +++ b/README.md @@ -25,11 +25,11 @@ | Package | Release notes | Description | | --- | --- | --- | -| [form](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/form/README.md) | [![npm](https://img.shields.io/npm/v/@astro-reactive/form)](./packages/form/RELEASE.md) | a dynamic form which can be modified programmatically | -| [validator](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/validator/README.md) | [![npm](https://img.shields.io/npm/v/@astro-reactive/validator)](./packages/validator/RELEASE.md) | validators for editable fields | -| data-grid | 🛠 | a dynamic data grid of values | -| themes | 🛠 | easy-to-use, accessible, consistent cross-browser styles | -| viz | 🛠 | data visualization that emits and responds to events | +| [form](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/form/README.md) | [![npm](https://img.shields.io/npm/v/@astro-reactive/form)](./packages/form/RELEASE.md) | a dynamic form which can be modified programmatically | +| [validator](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/validator/README.md) | [![npm](https://img.shields.io/npm/v/@astro-reactive/validator)](./packages/validator/RELEASE.md) | validators for editable fields | +| data-grid | 🛠 | a dynamic data grid of values | +| themes | 🛠 | easy-to-use, accessible, consistent cross-browser styles | +| viz | 🛠 | data visualization that emits and responds to events | # Running locally diff --git a/apps/demo/src/components/Nav.astro b/apps/demo/src/components/Nav.astro index 6041af5..71ac142 100644 --- a/apps/demo/src/components/Nav.astro +++ b/apps/demo/src/components/Nav.astro @@ -4,5 +4,5 @@ diff --git a/apps/demo/src/pages/examples/form-component.astro b/apps/demo/src/pages/examples/form-component.astro new file mode 100644 index 0000000..c5a0e35 --- /dev/null +++ b/apps/demo/src/pages/examples/form-component.astro @@ -0,0 +1,26 @@ +--- +import Form, { FormGroup } from "@astro-reactive/form"; + +const simpleForm = new FormGroup([ + { + name: "username", + label: "Username", + value: "awesome_dev", + }, + { + name: "comment", + label: "Feedback", + type: "textarea", + value: "Nice!", + }, + { + name: "size", + label: "Size", + type: "dropdown", + options: ["S", "M", "L", "XL", "XXL"], + placeholder: "-- Please choose an option --", + }, +]); +--- + +
diff --git a/apps/demo/src/pages/examples/index.astro b/apps/demo/src/pages/examples/index.astro new file mode 100644 index 0000000..81a1096 --- /dev/null +++ b/apps/demo/src/pages/examples/index.astro @@ -0,0 +1,7 @@ +--- +--- + +

Docs Examples

+ diff --git a/apps/docs/src/components/Header/AstroLogo.astro b/apps/docs/src/components/Header/AstroLogo.astro index 6c8b5b9..a533bd3 100644 --- a/apps/docs/src/components/Header/AstroLogo.astro +++ b/apps/docs/src/components/Header/AstroLogo.astro @@ -1,40 +1,40 @@ --- type Props = { - size: number; + size: number; }; const { size } = Astro.props as Props; --- diff --git a/apps/docs/src/components/Header/Header.astro b/apps/docs/src/components/Header/Header.astro index 58fe46e..58c4ef1 100644 --- a/apps/docs/src/components/Header/Header.astro +++ b/apps/docs/src/components/Header/Header.astro @@ -1,14 +1,14 @@ --- -import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages'; -import * as CONFIG from '../../config'; -import AstroLogo from './AstroLogo.astro'; -import SkipToContent from './SkipToContent.astro'; -import SidebarToggle from './SidebarToggle'; -import LanguageSelect from './LanguageSelect'; -import Search from './Search'; +import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from "../../languages"; +import * as CONFIG from "../../config"; +// import AstroLogo from "./AstroLogo.astro"; +import SkipToContent from "./SkipToContent.astro"; +import SidebarToggle from "./SidebarToggle"; +import LanguageSelect from "./LanguageSelect"; +import Search from "./Search"; type Props = { - currentPage: string; + currentPage: string; }; const { currentPage } = Astro.props as Props; @@ -16,134 +16,139 @@ const lang = getLanguageFromURL(currentPage); ---
- - + +
diff --git a/apps/docs/src/config.ts b/apps/docs/src/config.ts index 2f1cb6c..8cb6699 100644 --- a/apps/docs/src/config.ts +++ b/apps/docs/src/config.ts @@ -47,11 +47,23 @@ export type Sidebar = Record< >; export const SIDEBAR: Sidebar = { en: { - Tutorial: [ - { text: "Getting Started", link: "en/getting-started" }, - { text: "Page 2", link: "en/page-2" }, - { text: "Page 3", link: "en/page-3" }, + // TODO: create tutorial + // Tutorial: [ + // { text: "Getting Started", link: "en/getting-started" }, + // { text: "Page 2", link: "en/page-2" }, + // { text: "Page 3", link: "en/page-3" }, + // ], + + // TODO: create overview + Introduction: [ + { text: "Overview", link: "en/introduction" }, + // { text: "Philosophy", link: "en/philosophy" }, + ], + + "API Docs": [ + { text: "Form", link: "en/api/form/form-component" }, + { text: "FormGroup", link: "en/api/form/form-group" }, + { text: "FormControl", link: "en/api/form/form-control" }, ], - "API Docs": [{ text: "Form", link: "en/form" }], }, }; diff --git a/apps/docs/src/layouts/MainLayout.astro b/apps/docs/src/layouts/MainLayout.astro index 60d4392..b0e2d14 100644 --- a/apps/docs/src/layouts/MainLayout.astro +++ b/apps/docs/src/layouts/MainLayout.astro @@ -1,139 +1,167 @@ --- -import HeadCommon from '../components/HeadCommon.astro'; -import HeadSEO from '../components/HeadSEO.astro'; -import Header from '../components/Header/Header.astro'; -import PageContent from '../components/PageContent/PageContent.astro'; -import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro'; -import RightSidebar from '../components/RightSidebar/RightSidebar.astro'; -import * as CONFIG from '../config'; -import type { MarkdownHeading } from 'astro'; -import Footer from '../components/Footer/Footer.astro'; +import HeadCommon from "../components/HeadCommon.astro"; +import HeadSEO from "../components/HeadSEO.astro"; +import Header from "../components/Header/Header.astro"; +import PageContent from "../components/PageContent/PageContent.astro"; +import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro"; +import RightSidebar from "../components/RightSidebar/RightSidebar.astro"; +import * as CONFIG from "../config"; +import type { MarkdownHeading } from "astro"; +import Footer from "../components/Footer/Footer.astro"; type Props = { - frontmatter: CONFIG.Frontmatter; - headings: MarkdownHeading[]; + frontmatter: CONFIG.Frontmatter; + headings: MarkdownHeading[]; }; const { frontmatter, headings } = Astro.props as Props; const canonicalURL = new URL(Astro.url.pathname, Astro.site); const currentPage = Astro.url.pathname; -const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`; +const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`; const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`; --- - - - - - - {frontmatter.title ? `${frontmatter.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title} - - - + - + .mobile-sidebar-toggle { + overflow: hidden; + } - -
-
- -
- - - -
- -
-