ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: clean up (#180)

Browse source 
* docs: clean up

* landing-page: remove image; update deps

* landing-page: remove twitter icon

* style(landing-page): set md maxwidth for copylink
This commit is contained in:
Ayo Ayco 2022-11-07 19:32:29 +01:00 committed by GitHub
parent 0158fd636a
commit 47c0b5e90e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 244 additions and 2163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
apps/docs/src/components/Header/AstroLogo.astro
View file

@ -1,40 +0,0 @@
---
type Props = {
size: number;
};
const { size } = Astro.props as Props;
---
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width={size}
viewBox="0 0 375 374.999991"
height={size}
zoomAndPan="magnify"
preserveAspectRatio="xMidYMid meet"
version="1.0"
><defs
><clipPath id="702d27c854"
><path
d="M 124.9375 112.5 L 265 112.5 L 265 262.5 L 124.9375 262.5 Z M 124.9375 112.5 "
clip-rule="nonzero"></path>
</clipPath><clipPath id="db9c64370c"
><path
d="M 169 153 L 189 153 L 189 262.5 L 169 262.5 Z M 169 153 "
clip-rule="nonzero"></path>
</clipPath>
</defs><g clip-path="url(#702d27c854)"
><path
fill="#004aad"
d="M 124.9375 262.386719 C 150.457031 262.386719 167.863281 230.78125 175.042969 207.984375 C 174.734375 207.984375 174.421875 207.984375 174.117188 207.984375 C 172.316406 207.984375 171.382812 206.539062 170.707031 204.882812 C 168.757812 204.882812 166.808594 204.882812 164.859375 204.882812 C 164.226562 206.949219 162.894531 208.851562 161.359375 209.652344 C 158.1875 211.300781 155.019531 212.949219 151.84375 214.597656 C 149.707031 215.710938 147.953125 214.273438 147.953125 211.40625 C 147.953125 208.566406 147.953125 205.730469 147.953125 202.894531 C 147.953125 200.027344 150.296875 197.605469 151.84375 195.644531 C 154.96875 191.703125 158.089844 187.757812 161.214844 183.808594 C 160.820312 178.402344 160.429688 172.996094 160.035156 167.585938 C 160.035156 150.964844 167.257812 136.027344 178.738281 125.710938 C 190.214844 136.027344 197.433594 150.964844 197.433594 167.585938 C 197.042969 172.992188 196.652344 178.402344 196.261719 183.808594 C 199.386719 187.757812 202.507812 191.699219 205.632812 195.644531 C 207.179688 197.605469 209.523438 200.027344 209.523438 202.894531 C 209.523438 205.730469 209.523438 208.570312 209.523438 211.40625 C 209.523438 214.273438 207.769531 215.714844 205.632812 214.597656 C 202.460938 212.949219 199.289062 211.300781 196.117188 209.652344 C 194.582031 208.851562 193.25 206.949219 192.613281 204.882812 C 190.664062 204.882812 188.714844 204.882812 186.769531 204.882812 C 186.09375 206.539062 185.164062 207.984375 183.359375 207.984375 C 183.050781 207.984375 182.746094 207.984375 182.433594 207.984375 C 189.613281 230.777344 207.019531 262.386719 232.539062 262.386719 C 241.136719 262.386719 256.164062 262.386719 264.761719 262.386719 L 227.265625 210.183594 C 264.992188 194.1875 265.183594 149.125 244.851562 128.890625 C 234.769531 118.621094 218.894531 112.628906 195.941406 112.628906 C 172.269531 112.628906 148.605469 112.628906 124.9375 112.628906 C 124.9375 162.550781 124.9375 212.46875 124.9375 262.386719 Z M 124.9375 262.386719 "
fill-opacity="1"
fill-rule="nonzero"></path>
</g><g clip-path="url(#db9c64370c)"
><path
fill="#ff1616"
d="M 186.925781 231.277344 C 187.671875 231.277344 188.273438 231.886719 188.273438 232.617188 L 188.273438 254.832031 C 188.273438 255.566406 187.664062 256.175781 186.929688 256.175781 L 186.925781 256.175781 C 186.191406 256.175781 185.582031 255.574219 185.582031 254.832031 L 185.582031 232.617188 C 185.578125 231.878906 186.183594 231.277344 186.925781 231.277344 Z M 170.546875 231.277344 C 171.292969 231.277344 171.894531 231.886719 171.894531 232.617188 L 171.894531 254.832031 C 171.894531 255.566406 171.28125 256.175781 170.550781 256.175781 L 170.546875 256.175781 C 169.8125 256.175781 169.203125 255.574219 169.203125 254.832031 L 169.203125 232.617188 C 169.203125 231.878906 169.804688 231.277344 170.546875 231.277344 Z M 178.738281 169.320312 C 183.066406 169.320312 186.578125 165.816406 186.578125 161.5 C 186.578125 157.183594 183.066406 153.683594 178.738281 153.683594 C 174.40625 153.683594 170.898438 157.183594 170.898438 161.5 C 170.894531 165.820312 174.40625 169.320312 178.738281 169.320312 Z M 178.734375 221.804688 C 179.480469 221.804688 180.082031 222.414062 180.082031 223.144531 L 180.082031 261.042969 C 180.082031 261.773438 179.46875 262.382812 178.738281 262.382812 L 178.734375 262.382812 C 178 262.382812 177.390625 261.78125 177.390625 261.042969 L 177.390625 223.148438 C 177.390625 222.410156 177.992188 221.804688 178.734375 221.804688 Z M 178.734375 221.804688 "
fill-opacity="1"
fill-rule="evenodd"></path>
</g>
</svg>

12
apps/docs/src/components/Header/Header.astro
View file

@ -1,11 +1,12 @@
--- ---
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from "../../languages"; import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from "../../languages";
import ThemeToggleButton from "./ThemeToggleButton";
import * as CONFIG from "../../config"; import * as CONFIG from "../../config";
// import AstroLogo from "./AstroLogo.astro"; // import AstroLogo from "./AstroLogo.astro";
import SkipToContent from "./SkipToContent.astro"; import SkipToContent from "./SkipToContent.astro";
import SidebarToggle from "./SidebarToggle"; import SidebarToggle from "./SidebarToggle";
import LanguageSelect from "./LanguageSelect"; import LanguageSelect from "./LanguageSelect";
import Search from "./Search"; // import Search from "./Search";
type Props = { type Props = {
currentPage: string; currentPage: string;
@ -23,7 +24,6 @@ const lang = getLanguageFromURL(currentPage);
</div> </div>
<div class="logo flex"> <div class="logo flex">
<a href="/"> <a href="/">
<!-- <AstroLogo size={200} /> -->
<h1>{CONFIG.SITE.title ?? "Documentation"}</h1> <h1>{CONFIG.SITE.title ?? "Documentation"}</h1>
</a> </a>
</div> </div>
@ -34,9 +34,11 @@ const lang = getLanguageFromURL(currentPage);
) )
} }
<!-- TODO: enable search --> <!-- TODO: enable search -->
<div class="search-item"> <!-- <div class="search-item">
<Search client:idle /> <Search client:idle />
</div> </div> -->
<ThemeToggleButton client:visible />
</nav> </nav>
</header> </header>
@ -100,7 +102,7 @@ const lang = getLanguageFromURL(currentPage);
gap: 1em; gap: 1em;
width: 100%; width: 100%;
max-width: 82em; max-width: 82em;
padding: 0 1rem; padding: 0 2rem;
} }
@media (min-width: 50em) { @media (min-width: 50em) {

0
apps/docs/src/components/RightSidebar/ThemeToggleButton.css → apps/docs/src/components/Header/ThemeToggleButton.css
View file

0
apps/docs/src/components/RightSidebar/ThemeToggleButton.tsx → apps/docs/src/components/Header/ThemeToggleButton.tsx
View file

181
apps/docs/src/components/LeftSidebar/LeftSidebar.astro
View file

@ -1,117 +1,124 @@
--- ---
import { getLanguageFromURL } from '../../languages'; import { getLanguageFromURL } from "../../languages";
import { SIDEBAR } from '../../config'; import { SIDEBAR } from "../../config";
type Props = { type Props = {
currentPage: string; currentPage: string;
}; };
const { currentPage } = Astro.props as Props; const { currentPage } = Astro.props as Props;
const currentPageMatch = currentPage.endsWith('/') const currentPageMatch = currentPage.endsWith("/")
? currentPage.slice(1, -1) ? currentPage.slice(1, -1)
: currentPage.slice(1); : currentPage.slice(1);
const langCode = getLanguageFromURL(currentPage); const langCode = getLanguageFromURL(currentPage);
const sidebar = SIDEBAR[langCode]; const sidebar = SIDEBAR[langCode];
--- ---
<nav aria-labelledby="grid-left"> <nav aria-labelledby="grid-left">
<ul class="nav-groups"> <ul class="nav-groups">
{Object.entries(sidebar).map(([header, children]) => ( {
<li> Object.entries(sidebar).map(([header, children]) => (
<div class="nav-group"> <li>
<h2>{header}</h2> <div class="nav-group">
<ul> <h2>{header}</h2>
{children.map((child) => { <ul>
const url = Astro.site?.pathname + child.link; {children.map((child) => {
return ( const url = Astro.site?.pathname + child.link;
<li class="nav-link"> return (
<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}> <li class="nav-link">
{child.text} <a
</a> href={url}
</li> aria-current={
); currentPageMatch === child.link ? "page" : false
})} }
</ul> >
</div> {child.text}
</li> </a>
))} </li>
</ul> );
})}
</ul>
</div>
</li>
))
}
</ul>
</nav> </nav>
<script is:inline> <script is:inline>
window.addEventListener('DOMContentLoaded', () => { window.addEventListener("DOMContentLoaded", () => {
var target = document.querySelector('[aria-current="page"]'); var target = document.querySelector('[aria-current="page"]');
if (target && target.offsetTop > window.innerHeight - 100) { if (target && target.offsetTop > window.innerHeight - 100) {
document.querySelector('.nav-groups').scrollTop = target.offsetTop; document.querySelector(".nav-groups").scrollTop = target.offsetTop;
} }
}); });
</script> </script>
<style> <style>
nav { nav {
width: 100%; width: 100%;
margin-right: 1rem; margin-right: 1rem;
} }
.nav-groups { .nav-groups {
height: 100%; height: 100%;
padding: 2rem 0; padding: 2rem;
overflow-x: visible; overflow-x: visible;
overflow-y: auto; overflow-y: auto;
max-height: 100vh; max-height: 100vh;
} }
.nav-groups > li + li { .nav-groups > li + li {
margin-top: 2rem; margin-top: 2rem;
} }
.nav-groups > :first-child { .nav-groups > :first-child {
padding-top: var(--doc-padding); padding-top: var(--doc-padding);
} }
.nav-groups > :last-child { .nav-groups > :last-child {
padding-bottom: 2rem; padding-bottom: 2rem;
margin-bottom: var(--theme-navbar-height); margin-bottom: var(--theme-navbar-height);
} }
.nav-group-title { .nav-group-title {
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
padding: 0.1rem 1rem; padding: 0.1rem 1rem;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.nav-link a { .nav-link a {
font-size: 1rem; font-size: 1rem;
margin: 1px; margin: 1px;
padding: 0.3rem 1rem; padding: 0.3rem 1rem;
font: inherit; font: inherit;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
display: block; display: block;
} }
.nav-link a:hover, .nav-link a:hover,
.nav-link a:focus { .nav-link a:focus {
background-color: var(--theme-bg-hover); background-color: var(--theme-bg-hover);
} }
.nav-link a[aria-current='page'] { .nav-link a[aria-current="page"] {
color: var(--theme-text-accent); color: var(--theme-text-accent);
background-color: var(--theme-bg-accent); background-color: var(--theme-bg-accent);
font-weight: 600; font-weight: 600;
} }
@media (min-width: 50em) { @media (min-width: 50em) {
.nav-groups { .nav-groups {
padding: 0; padding: 0;
} }
} }
</style> </style>
<style is:global> <style is:global>
:root.theme-dark .nav-link a[aria-current='page'] { :root.theme-dark .nav-link a[aria-current="page"] {
color: hsla(var(--color-base-white), 100%, 1); color: hsla(var(--color-base-white), 100%, 1);
} }
</style> </style>

79
apps/docs/src/components/PageContent/PageContent.astro
View file

@ -1,13 +1,13 @@
--- ---
import type { Frontmatter } from '../../config'; import type { Frontmatter } from "../../config";
import MoreMenu from '../RightSidebar/MoreMenu.astro'; import MoreMenu from "../RightSidebar/MoreMenu.astro";
import TableOfContents from '../RightSidebar/TableOfContents'; import TableOfContents from "../RightSidebar/TableOfContents";
import type { MarkdownHeading } from 'astro'; import type { MarkdownHeading } from "astro";
type Props = { type Props = {
frontmatter: Frontmatter; frontmatter: Frontmatter;
headings: MarkdownHeading[]; headings: MarkdownHeading[];
githubEditUrl: string; githubEditUrl: string;
}; };
const { frontmatter, headings, githubEditUrl } = Astro.props as Props; const { frontmatter, headings, githubEditUrl } = Astro.props as Props;
@ -15,39 +15,46 @@ const title = frontmatter.title;
--- ---
<article id="article" class="content"> <article id="article" class="content">
<section class="main-section"> <section class="main-section">
<h1 class="content-title" id="overview">{title}</h1> <h1 class="content-title" id="overview">{title}</h1>
<nav class="block sm:hidden"> <div class="warning">
<TableOfContents client:media="(max-width: 50em)" headings={headings} /> <strong>🛠 Under Construction:</strong> This library and the documentation are
</nav> undergoing rigorous development. Read and join our <a
<slot /> href="https://github.com/ayoayco/astro-reactive-library/discussions"
</section> >discussions</a
<nav class="block sm:hidden"> > for questions, suggestions, or feedback.
<MoreMenu editHref={githubEditUrl} /> </div>
</nav> <nav class="block sm:hidden">
<TableOfContents client:media="(max-width: 50em)" headings={headings} />
</nav>
<slot />
</section>
<nav class="block sm:hidden">
<MoreMenu editHref={githubEditUrl} />
</nav>
</article> </article>
<style> <style>
.content { .content {
padding: 0; padding: 0;
max-width: 75ch; max-width: 75ch;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.content > section { .content > section {
margin-bottom: 4rem; margin-bottom: 4rem;
} }
.block { .block {
display: block; display: block;
} }
@media (min-width: 50em) { @media (min-width: 50em) {
.sm\:hidden { .sm\:hidden {
display: none; display: none;
} }
} }
</style> </style>

120
apps/docs/src/components/RightSidebar/MoreMenu.astro
View file

@ -1,9 +1,8 @@
--- ---
import ThemeToggleButton from './ThemeToggleButton'; import * as CONFIG from "../../config";
import * as CONFIG from '../../config';
type Props = { type Props = {
editHref: string; editHref: string;
}; };
const { editHref } = Astro.props as Props; const { editHref } = Astro.props as Props;
@ -12,64 +11,65 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
{showMoreSection && <h2 class="heading">More</h2>} {showMoreSection && <h2 class="heading">More</h2>}
<ul> <ul>
{editHref && ( {
<li class={`heading-link depth-2`}> editHref && (
<a class="edit-on-github" href={editHref} target="_blank"> <li class={`heading-link depth-2`}>
<svg <a class="edit-on-github" href={editHref} target="_blank">
aria-hidden="true" <svg
focusable="false" aria-hidden="true"
data-prefix="fas" focusable="false"
data-icon="pen" data-prefix="fas"
class="svg-inline--fa fa-pen fa-w-16" data-icon="pen"
role="img" class="svg-inline--fa fa-pen fa-w-16"
xmlns="http://www.w3.org/2000/svg" role="img"
viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"
height="1em" viewBox="0 0 512 512"
width="1em" height="1em"
> width="1em"
<path >
fill="currentColor" <path
d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z" fill="currentColor"
/> d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
</svg> />
<span>Edit this page</span> </svg>
</a> <span>Edit this page</span>
</li> </a>
)} </li>
{CONFIG.COMMUNITY_INVITE_URL && ( )
<li class={`heading-link depth-2`}> }
<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank"> {
<svg CONFIG.COMMUNITY_INVITE_URL && (
aria-hidden="true" <li class={`heading-link depth-2`}>
focusable="false" <a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
data-prefix="fas" <svg
data-icon="comment-alt" aria-hidden="true"
class="svg-inline--fa fa-comment-alt fa-w-16" focusable="false"
role="img" data-prefix="fas"
xmlns="http://www.w3.org/2000/svg" data-icon="comment-alt"
viewBox="0 0 512 512" class="svg-inline--fa fa-comment-alt fa-w-16"
height="1em" role="img"
width="1em" xmlns="http://www.w3.org/2000/svg"
> viewBox="0 0 512 512"
<path height="1em"
fill="currentColor" width="1em"
d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z" >
/> <path
</svg> fill="currentColor"
<span>Join our community</span> d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
</a> />
</li> </svg>
)} <span>Join our community</span>
</a>
</li>
)
}
</ul> </ul>
<div style="margin: 2rem 0; text-align: center;">
<ThemeToggleButton client:visible />
</div>
<style> <style>
.edit-on-github { .edit-on-github {
text-decoration: none; text-decoration: none;
font: inherit; font: inherit;
color: inherit; color: inherit;
font-size: 1rem; font-size: 1rem;
} }
</style> </style>

10
apps/docs/src/config.ts
View file

@ -1,5 +1,5 @@
export const SITE = { export const SITE = {
title: "Astro Reactive", title: "Astro Reactive Docs",
description: description:
"Let your data build your UI with native Astro components and architecture.", "Let your data build your UI with native Astro components and architecture.",
defaultLanguage: "en_US", defaultLanguage: "en_US",
@ -7,12 +7,10 @@ export const SITE = {
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/ayoayco/astro-reactive-library/blob/main/.github/assets/astro-reactive-library-cover.png?raw=true",
alt: alt: "astro logo and astro reactive library text 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",
}, },
twitter: "astrodotbuild", twitter: "astroreactive",
}; };
// 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.

8
apps/docs/src/layouts/MainLayout.astro
View file

@ -142,14 +142,6 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
<LeftSidebar currentPage={currentPage} /> <LeftSidebar currentPage={currentPage} />
</aside> </aside>
<div id="grid-main"> <div id="grid-main">
<div class="warning">
<strong>🛠 Under Construction:</strong> This library and the documentation
are undergoing rigorous development. Read and join our <a
href="https://github.com/ayoayco/astro-reactive-library/discussions"
>Discussions</a
> for questions, suggestions, or feedback.
</div>
<PageContent <PageContent
frontmatter={frontmatter} frontmatter={frontmatter}
headings={headings} headings={headings}

7
apps/docs/src/pages/en/api/form/form-component.md
View file

@ -18,7 +18,12 @@ const form = new FormGroup(
<Form formGroups={form} /> <Form formGroups={form} />
``` ```
----- ## Installation
```
npm i @astro-reactive/form
```
## Usage ## Usage

4
apps/docs/src/pages/en/api/form/form-group.md
View file

@ -6,10 +6,10 @@ description: The FormGroup class represents a group of controls that will be ren
layout: ../../../../layouts/MainLayout.astro layout: ../../../../layouts/MainLayout.astro
--- ---
> **❗ Note:** This documentation is incomplete.
The `FormGroup` class represents a group of controls that will be rendered as a fieldset element in a form. The `FormGroup` class represents a group of controls that will be rendered as a fieldset element in a form.
> **❗ Note:** This documentation is incomplete.
## Properties ## Properties
| Property | Type | | | Property | Type | |

28
apps/docs/src/pages/en/introduction.md
View file

@ -1,45 +1,23 @@
--- ---
title: Hi, explorer! 🚀 title: Hi, explorer!
description: Astro Reactive Library Docs description: Astro Reactive Library Docs
layout: ../../layouts/MainLayout.astro layout: ../../layouts/MainLayout.astro
--- ---
![Astro Reactive Library](https://user-images.githubusercontent.com/4262489/193419437-6e437743-47bf-482b-8f7e-de3c7f5285f8.png)
Thanks for checking out the Astro Reactive Library! Welcome to a new adventure. Thanks for checking out the Astro Reactive Library! Welcome to a new adventure.
This project aims to be a new library of components and utilities for building reactive user interfaces with [Astro](https://astro.build). This project aims to be a new library of components and utilities for building reactive user interfaces with [Astro](https://astro.build).
We will update this documentation site later with a fun and easy tutorial so you can start building reactive UIs with Astro from scratch using our packages. We will update this documentation with a fun and easy tutorial so you can start building reactive UIs with Astro from scratch using our packages.
> **📝 Note:** See our [API Docs](/en/api) for example usage. > **📝 Note:** See our [API Docs](/en/api) for example usage.
## Installation
```
npm i @astro-reactive/form @astro-reactive/validator
```
## Packages ## Packages
| Package | Release notes | Description | | 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 | | [form](/en/api/form/form-component) | [![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 | | [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 | | data-grid | 🛠 | a dynamic data grid of values |
| themes | 🛠 | easy-to-use, accessible, consistent cross-browser styles | | themes | 🛠 | easy-to-use, accessible, consistent cross-browser styles |
| viz | 🛠 | data visualization that emits and responds to events | | viz | 🛠 | data visualization that emits and responds to events |
## Contributing
Any contribution is welcome. Feel free to look around our [repository](https://github.com/ayoayco/astro-reactive-library) to find something that interests you. :)
There's a lot of opportunity to contribute. A good start will be to understand what Astro is, and how to set up a basic Astro project. For this, the [Astro website](https://astro.build) and [documentation](https://docs.astro.build/en/getting-started/) are good places to start.
The [issues page](https://github.com/ayoayco/astro-reactive-library/issues?q=is%3Aopen+is%3Aissue+label%3A%22accepting+PRs%22) contains some ideas, but they should not limit your contribution.
If you don't find anything there, I'm happy to help you get your contribution in.
You can always [create a new issue](https://github.com/ayoayco/astro-reactive-library/issues/new/choose) for your own idea, [email me (ayo@ayco.io)](mailto:ayo@ayco.io) or message me on [Twitter (@ayoayco)](https://twitter.com/ayoayco).

1
apps/landing-page/package.json
View file

@ -16,7 +16,6 @@
"@astrojs/tailwind": "^2.0.2", "@astrojs/tailwind": "^2.0.2",
"@types/micromodal": "^0.3.3", "@types/micromodal": "^0.3.3",
"astro": "^1.4.7", "astro": "^1.4.7",
"astro-eleventy-img": "^0.5.0",
"astro-icon": "^0.8.0", "astro-icon": "^0.8.0",
"prettier": "2.7.1", "prettier": "2.7.1",
"prettier-plugin-astro": "^0.7.0", "prettier-plugin-astro": "^0.7.0",

16
apps/landing-page/src/components/copynpm.astro
View file

@ -3,10 +3,12 @@ import { Icon } from "astro-icon";
--- ---
<button <button
class="copy-btn flex items-center w-4/5 mt-3 justify-center astro-md:w-1/2 astro-lg:w-[28%] astro-lg:mt-0 astro-lg:ml-3" class="copy-btn flex items-center w-4/5 mt-3 justify-center astro-md:w-1/2 astro-lg:w-[28%] astro-lg:mt-0 astro-lg:ml-3 max-w-md"
id="copy-command-button" id="copy-command-button"
> >
<span id="command">npm install @astro-reactive/form @astro-reactive/validator</span> <span id="command"
>npm install @astro-reactive/form @astro-reactive/validator</span
>
<Icon name="mdi:content-copy" width="40px" height="40px" /> <Icon name="mdi:content-copy" width="40px" height="40px" />
</button> </button>
@ -36,10 +38,10 @@ import { Icon } from "astro-icon";
</style> </style>
<script> <script>
const copyCommandButton = document.getElementById("copy-command-button"); const copyCommandButton = document.getElementById("copy-command-button");
const commandText = document.getElementById('command').innerText; const commandText = document.getElementById("command").innerText;
copyCommandButton.addEventListener('click', () => { copyCommandButton.addEventListener("click", () => {
navigator.clipboard.writeText(commandText); navigator.clipboard.writeText(commandText);
}); });
</script> </script>

14
apps/landing-page/src/components/header.astro
View file

@ -8,11 +8,11 @@ const socials = [
url: "https://github.com/ayoayco/astro-reactive-library", url: "https://github.com/ayoayco/astro-reactive-library",
icon: "fa-brands:github-alt", icon: "fa-brands:github-alt",
}, },
{ // {
name: "Twitter", // name: "Twitter",
url: "https://twitter.com/astroreactive", // url: "https://twitter.com/astroreactive",
icon: "fa-brands:twitter", // icon: "fa-brands:twitter",
}, // },
]; ];
--- ---
@ -39,7 +39,7 @@ const socials = [
)) ))
} }
</ul> </ul>
<button <!-- <button
id="open-nav-button" id="open-nav-button"
type="button" type="button"
class="btn sm:hidden" class="btn sm:hidden"
@ -47,7 +47,7 @@ const socials = [
> >
<Icon pack="mdi" name="menu" class="h-8" /> <Icon pack="mdi" name="menu" class="h-8" />
</button> </button>
<ThemeSwitcher /> <ThemeSwitcher /-->
</div> </div>
<div id="menu-modal" class="hidden modal" aria-hidden="true"> <div id="menu-modal" class="hidden modal" aria-hidden="true">
<div class="fixed inset-0 px-8 py-4 bg-default text-default"> <div class="fixed inset-0 px-8 py-4 bg-default text-default">

54
apps/landing-page/src/sections/splash.astro
View file

@ -1,70 +1,38 @@
--- ---
import { generateImage } from "astro-eleventy-img";
import { Icon } from "astro-icon"; import { Icon } from "astro-icon";
import Copynpm from "~/components/copynpm.astro"; import Copynpm from "~/components/copynpm.astro";
const widths = [450, 800];
const sizes = "(min-width: 640px) 42vw, 67vw";
const { webp, avif, png } = generateImage("src/assets/astronaut.png", {
widths,
formats: ["webp", "avif", "png"],
outputDir: "public/assets/images/astronaut",
urlPath: "/assets/images/astronaut",
});
const avifSrcset = avif.map(({ srcset }) => srcset).join(",");
const webpSrcset = webp.map(({ srcset }) => srcset).join(",");
const pngSrcset = png.map(({ srcset }) => srcset).join(",");
--- ---
<section class="h-screen flex flex-col px-10 astro relative"> <section class="h-screen flex flex-col astro relative">
<div id="starfield" class="absolute -z-10 inset-0"> <div id="starfield" class="absolute -z-10 inset-0">
<canvas id="starfield-canvas"></canvas> <canvas id="starfield-canvas"></canvas>
</div> </div>
<div <div
class="relative flex flex-col-reverse justify-end pt-16 h-full astro-lg:grid-cols-2 place-items-center astro-lg:grid astro-lg:pt-0 astro-img:pt-10" class="relative flex flex-col-reverse justify-end h-full content-center grid pt-0"
> >
<!-- <div class="relative grid h-full astro-lg:grid-cols-2 place-items-center"> --> <div class="flex flex-col w-screen">
<div class="flex flex-col">
<h2 <h2
class="flex flex-col items-center gap-2 sm:gap-4 sm:self-auto sm:justify-self-end w-screen" class="flex flex-col items-center gap-2 sm:gap-4 sm:self-auto sm:justify-self-end"
> >
<div <div
class="font-extrabold tracking-tighter text-center text-8xl gradient-text" class="font-extrabold tracking-tighter text-center text-8xl gradient-text"
> >
Build Astro Astro. Reactive.
<br />Applications
<br />with Reactive UIs
</div> </div>
</h2> </h2>
<div <div
class="mt-8 flex justify-center flex-col items-center astro-lg:flex-row astro-lg:justify-center astro-sm:w-screen" class="mt-8 flex justify-center flex-col items-center astro-lg:flex-row astro-lg:justify-center"
> >
<a <a
href="https://docs.astro-reactive.dev" href="https://docs.astro-reactive.dev"
class="flex items-center w-4/5 astro-md:w-1/2 justify-center bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded transition-colors astro-lg:w-auto" class="flex items-center w-4/5 astro-md:w-1/2 justify-center bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded transition-colors astro-lg:w-auto"
> >
<span>Get Started</span> <span class="pr-2">Get Started</span>
<Icon name="mdi:arrow-right" width="20px" height="20px" /> <Icon name="mdi:arrow-right" width="20px" height="20px" />
</a> </a>
<Copynpm /> <Copynpm />
</div> </div>
</div> </div>
<picture
class="w-2/3 max-w-3xl sm:w-10/12 sm:self-auto sm:justify-self-start flex justify-center"
>
<source type="image/avif" srcset={avifSrcset} sizes={sizes} />
<source type="image/webp" srcset={webpSrcset} sizes={sizes} />
<source type="image/png" srcset={pngSrcset} sizes={sizes} />
<img
class="object-cover w-full h-full ml-[-3rem] astro-lg:ml-0 astro-img:w-[50%]"
src={png[0].url}
width={png[0].width}
height={png[0].height}
alt="A floating astronaut in a space suit"
/>
</picture>
</div> </div>
</section> </section>
@ -173,15 +141,7 @@ const pngSrcset = png.map(({ srcset }) => srcset).join(",");
} }
} }
picture {
animation: float linear 2.5s infinite alternate;
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
picture {
@apply animate-none;
}
:global(#starfield) { :global(#starfield) {
@apply hidden; @apply hidden;
} }

1829
package-lock.json generated
View file

File diff suppressed because it is too large Load diff