docs: clean up (#180)
* 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
GitHub
parent
0158fd636a
commit
47c0b5e90e
17 changed files with 244 additions and 2163 deletions
|
|
@ -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>
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
---
|
||||
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from "../../languages";
|
||||
import ThemeToggleButton from "./ThemeToggleButton";
|
||||
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 Search from "./Search";
|
||||
|
||||
type Props = {
|
||||
currentPage: string;
|
||||
|
|
@ -23,7 +24,6 @@ const lang = getLanguageFromURL(currentPage);
|
|||
</div>
|
||||
<div class="logo flex">
|
||||
<a href="/">
|
||||
<!-- <AstroLogo size={200} /> -->
|
||||
<h1>{CONFIG.SITE.title ?? "Documentation"}</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -34,9 +34,11 @@ const lang = getLanguageFromURL(currentPage);
|
|||
)
|
||||
}
|
||||
<!-- TODO: enable search -->
|
||||
<div class="search-item">
|
||||
<!-- <div class="search-item">
|
||||
<Search client:idle />
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<ThemeToggleButton client:visible />
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
|
@ -100,7 +102,7 @@ const lang = getLanguageFromURL(currentPage);
|
|||
gap: 1em;
|
||||
width: 100%;
|
||||
max-width: 82em;
|
||||
padding: 0 1rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
|
|
|
|||
|
|
@ -1,117 +1,124 @@
|
|||
---
|
||||
import { getLanguageFromURL } from '../../languages';
|
||||
import { SIDEBAR } from '../../config';
|
||||
import { getLanguageFromURL } from "../../languages";
|
||||
import { SIDEBAR } from "../../config";
|
||||
|
||||
type Props = {
|
||||
currentPage: string;
|
||||
currentPage: string;
|
||||
};
|
||||
|
||||
const { currentPage } = Astro.props as Props;
|
||||
const currentPageMatch = currentPage.endsWith('/')
|
||||
? currentPage.slice(1, -1)
|
||||
: currentPage.slice(1);
|
||||
const currentPageMatch = currentPage.endsWith("/")
|
||||
? currentPage.slice(1, -1)
|
||||
: currentPage.slice(1);
|
||||
const langCode = getLanguageFromURL(currentPage);
|
||||
const sidebar = SIDEBAR[langCode];
|
||||
---
|
||||
|
||||
<nav aria-labelledby="grid-left">
|
||||
<ul class="nav-groups">
|
||||
{Object.entries(sidebar).map(([header, children]) => (
|
||||
<li>
|
||||
<div class="nav-group">
|
||||
<h2>{header}</h2>
|
||||
<ul>
|
||||
{children.map((child) => {
|
||||
const url = Astro.site?.pathname + child.link;
|
||||
return (
|
||||
<li class="nav-link">
|
||||
<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}>
|
||||
{child.text}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<ul class="nav-groups">
|
||||
{
|
||||
Object.entries(sidebar).map(([header, children]) => (
|
||||
<li>
|
||||
<div class="nav-group">
|
||||
<h2>{header}</h2>
|
||||
<ul>
|
||||
{children.map((child) => {
|
||||
const url = Astro.site?.pathname + child.link;
|
||||
return (
|
||||
<li class="nav-link">
|
||||
<a
|
||||
href={url}
|
||||
aria-current={
|
||||
currentPageMatch === child.link ? "page" : false
|
||||
}
|
||||
>
|
||||
{child.text}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<script is:inline>
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
var target = document.querySelector('[aria-current="page"]');
|
||||
if (target && target.offsetTop > window.innerHeight - 100) {
|
||||
document.querySelector('.nav-groups').scrollTop = target.offsetTop;
|
||||
}
|
||||
});
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
var target = document.querySelector('[aria-current="page"]');
|
||||
if (target && target.offsetTop > window.innerHeight - 100) {
|
||||
document.querySelector(".nav-groups").scrollTop = target.offsetTop;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
width: 100%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
nav {
|
||||
width: 100%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.nav-groups {
|
||||
height: 100%;
|
||||
padding: 2rem 0;
|
||||
overflow-x: visible;
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
}
|
||||
.nav-groups {
|
||||
height: 100%;
|
||||
padding: 2rem;
|
||||
overflow-x: visible;
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.nav-groups > li + li {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.nav-groups > li + li {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.nav-groups > :first-child {
|
||||
padding-top: var(--doc-padding);
|
||||
}
|
||||
.nav-groups > :first-child {
|
||||
padding-top: var(--doc-padding);
|
||||
}
|
||||
|
||||
.nav-groups > :last-child {
|
||||
padding-bottom: 2rem;
|
||||
margin-bottom: var(--theme-navbar-height);
|
||||
}
|
||||
.nav-groups > :last-child {
|
||||
padding-bottom: 2rem;
|
||||
margin-bottom: var(--theme-navbar-height);
|
||||
}
|
||||
|
||||
.nav-group-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
padding: 0.1rem 1rem;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.nav-group-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
padding: 0.1rem 1rem;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-link a {
|
||||
font-size: 1rem;
|
||||
margin: 1px;
|
||||
padding: 0.3rem 1rem;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.nav-link a {
|
||||
font-size: 1rem;
|
||||
margin: 1px;
|
||||
padding: 0.3rem 1rem;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-link a:hover,
|
||||
.nav-link a:focus {
|
||||
background-color: var(--theme-bg-hover);
|
||||
}
|
||||
.nav-link a:hover,
|
||||
.nav-link a:focus {
|
||||
background-color: var(--theme-bg-hover);
|
||||
}
|
||||
|
||||
.nav-link a[aria-current='page'] {
|
||||
color: var(--theme-text-accent);
|
||||
background-color: var(--theme-bg-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-link a[aria-current="page"] {
|
||||
color: var(--theme-text-accent);
|
||||
background-color: var(--theme-bg-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
.nav-groups {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 50em) {
|
||||
.nav-groups {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style is:global>
|
||||
:root.theme-dark .nav-link a[aria-current='page'] {
|
||||
color: hsla(var(--color-base-white), 100%, 1);
|
||||
}
|
||||
:root.theme-dark .nav-link a[aria-current="page"] {
|
||||
color: hsla(var(--color-base-white), 100%, 1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
import type { Frontmatter } from '../../config';
|
||||
import MoreMenu from '../RightSidebar/MoreMenu.astro';
|
||||
import TableOfContents from '../RightSidebar/TableOfContents';
|
||||
import type { MarkdownHeading } from 'astro';
|
||||
import type { Frontmatter } from "../../config";
|
||||
import MoreMenu from "../RightSidebar/MoreMenu.astro";
|
||||
import TableOfContents from "../RightSidebar/TableOfContents";
|
||||
import type { MarkdownHeading } from "astro";
|
||||
|
||||
type Props = {
|
||||
frontmatter: Frontmatter;
|
||||
headings: MarkdownHeading[];
|
||||
githubEditUrl: string;
|
||||
frontmatter: Frontmatter;
|
||||
headings: MarkdownHeading[];
|
||||
githubEditUrl: string;
|
||||
};
|
||||
|
||||
const { frontmatter, headings, githubEditUrl } = Astro.props as Props;
|
||||
|
|
@ -15,39 +15,46 @@ const title = frontmatter.title;
|
|||
---
|
||||
|
||||
<article id="article" class="content">
|
||||
<section class="main-section">
|
||||
<h1 class="content-title" id="overview">{title}</h1>
|
||||
<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>
|
||||
<section class="main-section">
|
||||
<h1 class="content-title" id="overview">{title}</h1>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
padding: 0;
|
||||
max-width: 75ch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
padding: 0;
|
||||
max-width: 75ch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content > section {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.content > section {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
.sm\:hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: 50em) {
|
||||
.sm\:hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
---
|
||||
import ThemeToggleButton from './ThemeToggleButton';
|
||||
import * as CONFIG from '../../config';
|
||||
import * as CONFIG from "../../config";
|
||||
|
||||
type Props = {
|
||||
editHref: string;
|
||||
editHref: string;
|
||||
};
|
||||
|
||||
const { editHref } = Astro.props as Props;
|
||||
|
|
@ -12,64 +11,65 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
|
|||
|
||||
{showMoreSection && <h2 class="heading">More</h2>}
|
||||
<ul>
|
||||
{editHref && (
|
||||
<li class={`heading-link depth-2`}>
|
||||
<a class="edit-on-github" href={editHref} target="_blank">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="pen"
|
||||
class="svg-inline--fa fa-pen fa-w-16"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
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>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
{CONFIG.COMMUNITY_INVITE_URL && (
|
||||
<li class={`heading-link depth-2`}>
|
||||
<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="comment-alt"
|
||||
class="svg-inline--fa fa-comment-alt fa-w-16"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
<span>Join our community</span>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
{
|
||||
editHref && (
|
||||
<li class={`heading-link depth-2`}>
|
||||
<a class="edit-on-github" href={editHref} target="_blank">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="pen"
|
||||
class="svg-inline--fa fa-pen fa-w-16"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
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>
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
CONFIG.COMMUNITY_INVITE_URL && (
|
||||
<li class={`heading-link depth-2`}>
|
||||
<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="comment-alt"
|
||||
class="svg-inline--fa fa-comment-alt fa-w-16"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
<span>Join our community</span>
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
<div style="margin: 2rem 0; text-align: center;">
|
||||
<ThemeToggleButton client:visible />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.edit-on-github {
|
||||
text-decoration: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.edit-on-github {
|
||||
text-decoration: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export const SITE = {
|
||||
title: "Astro Reactive",
|
||||
title: "Astro Reactive Docs",
|
||||
description:
|
||||
"Let your data build your UI with native Astro components and architecture.",
|
||||
defaultLanguage: "en_US",
|
||||
|
|
@ -7,12 +7,10 @@ export const SITE = {
|
|||
|
||||
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",
|
||||
src: "https://github.com/ayoayco/astro-reactive-library/blob/main/.github/assets/astro-reactive-library-cover.png?raw=true",
|
||||
alt: "astro logo and astro reactive library text on a starry expanse of space",
|
||||
},
|
||||
twitter: "astrodotbuild",
|
||||
twitter: "astroreactive",
|
||||
};
|
||||
|
||||
// This is the type of the frontmatter you put in the docs markdown files.
|
||||
|
|
|
|||
|
|
@ -142,14 +142,6 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
|
|||
<LeftSidebar currentPage={currentPage} />
|
||||
</aside>
|
||||
<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
|
||||
frontmatter={frontmatter}
|
||||
headings={headings}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,12 @@ const form = new FormGroup(
|
|||
<Form formGroups={form} />
|
||||
```
|
||||
|
||||
-----
|
||||
## Installation
|
||||
|
||||
```
|
||||
npm i @astro-reactive/form
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ description: The FormGroup class represents a group of controls that will be ren
|
|||
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.
|
||||
|
||||
> **❗ Note:** This documentation is incomplete.
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Type | |
|
||||
|
|
|
|||
|
|
@ -1,45 +1,23 @@
|
|||
---
|
||||
title: Hi, explorer! 🚀
|
||||
title: Hi, explorer!
|
||||
description: Astro Reactive Library Docs
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
|
||||
|
||||
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).
|
||||
|
||||
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.
|
||||
|
||||
## Installation
|
||||
|
||||
```
|
||||
npm i @astro-reactive/form @astro-reactive/validator
|
||||
```
|
||||
|
||||
## Packages
|
||||
|
||||
| Package | Release notes | Description |
|
||||
| --- | --- | --- |
|
||||
| [form](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/form/README.md) | [](./packages/form/RELEASE.md) | a dynamic form which can be modified programmatically |
|
||||
| [form](/en/api/form/form-component) | [](./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) | [](./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 |
|
||||
|
||||
## 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).
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
"@astrojs/tailwind": "^2.0.2",
|
||||
"@types/micromodal": "^0.3.3",
|
||||
"astro": "^1.4.7",
|
||||
"astro-eleventy-img": "^0.5.0",
|
||||
"astro-icon": "^0.8.0",
|
||||
"prettier": "2.7.1",
|
||||
"prettier-plugin-astro": "^0.7.0",
|
||||
|
|
|
|||
|
|
@ -3,10 +3,12 @@ import { Icon } from "astro-icon";
|
|||
---
|
||||
|
||||
<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"
|
||||
>
|
||||
<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" />
|
||||
</button>
|
||||
|
||||
|
|
@ -36,10 +38,10 @@ import { Icon } from "astro-icon";
|
|||
</style>
|
||||
|
||||
<script>
|
||||
const copyCommandButton = document.getElementById("copy-command-button");
|
||||
const commandText = document.getElementById('command').innerText;
|
||||
const copyCommandButton = document.getElementById("copy-command-button");
|
||||
const commandText = document.getElementById("command").innerText;
|
||||
|
||||
copyCommandButton.addEventListener('click', () => {
|
||||
navigator.clipboard.writeText(commandText);
|
||||
});
|
||||
copyCommandButton.addEventListener("click", () => {
|
||||
navigator.clipboard.writeText(commandText);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -8,11 +8,11 @@ const socials = [
|
|||
url: "https://github.com/ayoayco/astro-reactive-library",
|
||||
icon: "fa-brands:github-alt",
|
||||
},
|
||||
{
|
||||
name: "Twitter",
|
||||
url: "https://twitter.com/astroreactive",
|
||||
icon: "fa-brands:twitter",
|
||||
},
|
||||
// {
|
||||
// name: "Twitter",
|
||||
// url: "https://twitter.com/astroreactive",
|
||||
// icon: "fa-brands:twitter",
|
||||
// },
|
||||
];
|
||||
---
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ const socials = [
|
|||
))
|
||||
}
|
||||
</ul>
|
||||
<button
|
||||
<!-- <button
|
||||
id="open-nav-button"
|
||||
type="button"
|
||||
class="btn sm:hidden"
|
||||
|
|
@ -47,7 +47,7 @@ const socials = [
|
|||
>
|
||||
<Icon pack="mdi" name="menu" class="h-8" />
|
||||
</button>
|
||||
<ThemeSwitcher />
|
||||
<ThemeSwitcher /-->
|
||||
</div>
|
||||
<div id="menu-modal" class="hidden modal" aria-hidden="true">
|
||||
<div class="fixed inset-0 px-8 py-4 bg-default text-default">
|
||||
|
|
|
|||
|
|
@ -1,70 +1,38 @@
|
|||
---
|
||||
import { generateImage } from "astro-eleventy-img";
|
||||
import { Icon } from "astro-icon";
|
||||
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">
|
||||
<canvas id="starfield-canvas"></canvas>
|
||||
</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">
|
||||
<div class="flex flex-col w-screen">
|
||||
<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
|
||||
class="font-extrabold tracking-tighter text-center text-8xl gradient-text"
|
||||
>
|
||||
Build Astro
|
||||
<br />Applications
|
||||
<br />with Reactive UIs
|
||||
Astro. Reactive.
|
||||
</div>
|
||||
</h2>
|
||||
<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
|
||||
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"
|
||||
>
|
||||
<span>Get Started</span>
|
||||
<span class="pr-2">Get Started</span>
|
||||
<Icon name="mdi:arrow-right" width="20px" height="20px" />
|
||||
</a>
|
||||
<Copynpm />
|
||||
</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>
|
||||
</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) {
|
||||
picture {
|
||||
@apply animate-none;
|
||||
}
|
||||
|
||||
:global(#starfield) {
|
||||
@apply hidden;
|
||||
}
|
||||
|
|
|
|||
1829
package-lock.json
generated
1829
package-lock.json
generated
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue