mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
Sync from a44cfb874a
This commit is contained in:
github-actions[bot]
commit
e10eb13e66
17 changed files with 407 additions and 0 deletions
1
.codesandbox/Dockerfile
Normal file
1
.codesandbox/Dockerfile
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
FROM node:18-bullseye
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# build output
|
||||||
|
dist/
|
||||||
|
# generated types
|
||||||
|
.astro/
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# macOS-specific files
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# jetbrains setting folder
|
||||||
|
.idea/
|
||||||
11
README.md
Normal file
11
README.md
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
# Astro Example: Nanostores
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm create astro@latest -- --template with-nanostores
|
||||||
|
```
|
||||||
|
|
||||||
|
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-nanostores)
|
||||||
|
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/with-nanostores)
|
||||||
|
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/with-nanostores/devcontainer.json)
|
||||||
|
|
||||||
|
This example showcases using [`nanostores`](https://github.com/nanostores/nanostores) to provide shared state between components of any framework. [**Read our documentation on sharing state**](https://docs.astro.build/en/core-concepts/sharing-state/) for a complete breakdown of this project, along with guides to use React, Vue, Svelte, or Solid!
|
||||||
9
astro.config.mjs
Normal file
9
astro.config.mjs
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
// @ts-check
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
import preact from '@astrojs/preact';
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
// Enable many frameworks to support all different kinds of components.
|
||||||
|
integrations: [preact()],
|
||||||
|
});
|
||||||
19
package.json
Normal file
19
package.json
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "@example/with-nanostores",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/preact": "^4.0.0",
|
||||||
|
"@nanostores/preact": "^0.5.2",
|
||||||
|
"astro": "^5.0.8",
|
||||||
|
"nanostores": "^0.11.3",
|
||||||
|
"preact": "^10.24.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
9
public/favicon.svg
Normal file
9
public/favicon.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||||
|
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||||
|
<style>
|
||||||
|
path { fill: #000; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
path { fill: #FFF; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 749 B |
BIN
public/images/astronaut-figurine.png
Normal file
BIN
public/images/astronaut-figurine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 487 KiB |
31
src/cartStore.ts
Normal file
31
src/cartStore.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { atom, map } from 'nanostores';
|
||||||
|
|
||||||
|
export const isCartOpen = atom(false);
|
||||||
|
|
||||||
|
export type CartItem = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
imageSrc: string;
|
||||||
|
quantity: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type CartItemDisplayInfo = Pick<CartItem, 'id' | 'name' | 'imageSrc'>;
|
||||||
|
|
||||||
|
export const cartItems = map<Record<string, CartItem>>({});
|
||||||
|
|
||||||
|
export function addCartItem({ id, name, imageSrc }: CartItemDisplayInfo) {
|
||||||
|
const existingEntry = cartItems.get()[id];
|
||||||
|
if (existingEntry) {
|
||||||
|
cartItems.setKey(id, {
|
||||||
|
...existingEntry,
|
||||||
|
quantity: existingEntry.quantity + 1,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
cartItems.setKey(id, {
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
imageSrc,
|
||||||
|
quantity: 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
18
src/components/AddToCartForm.tsx
Normal file
18
src/components/AddToCartForm.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { isCartOpen, addCartItem } from '../cartStore';
|
||||||
|
import type { CartItemDisplayInfo } from '../cartStore';
|
||||||
|
import type { ComponentChildren } from 'preact';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
item: CartItemDisplayInfo;
|
||||||
|
children: ComponentChildren;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function AddToCartForm({ item, children }: Props) {
|
||||||
|
function addToCart(e: SubmitEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
isCartOpen.set(true);
|
||||||
|
addCartItem(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <form onSubmit={addToCart}>{children}</form>;
|
||||||
|
}
|
||||||
29
src/components/CartFlyout.module.css
Normal file
29
src/components/CartFlyout.module.css
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
.container {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: var(--nav-height);
|
||||||
|
height: 100vh;
|
||||||
|
background: var(--color-bg-2);
|
||||||
|
padding-inline: 2rem;
|
||||||
|
min-width: min(90vw, 300px);
|
||||||
|
border-left: 3px solid var(--color-bg-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem * {
|
||||||
|
margin-block: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItemImg {
|
||||||
|
width: 4rem;
|
||||||
|
}
|
||||||
28
src/components/CartFlyout.tsx
Normal file
28
src/components/CartFlyout.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { useStore } from '@nanostores/preact';
|
||||||
|
import { cartItems, isCartOpen } from '../cartStore';
|
||||||
|
import styles from './CartFlyout.module.css';
|
||||||
|
|
||||||
|
export default function CartFlyout() {
|
||||||
|
const $isCartOpen = useStore(isCartOpen);
|
||||||
|
const $cartItems = useStore(cartItems);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside hidden={!$isCartOpen} className={styles.container}>
|
||||||
|
{Object.values($cartItems).length ? (
|
||||||
|
<ul className={styles.list} role="list">
|
||||||
|
{Object.values($cartItems).map((cartItem) => (
|
||||||
|
<li className={styles.listItem}>
|
||||||
|
<img className={styles.listItemImg} src={cartItem.imageSrc} alt={cartItem.name} />
|
||||||
|
<div>
|
||||||
|
<h3>{cartItem.name}</h3>
|
||||||
|
<p>Quantity: {cartItem.quantity}</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
) : (
|
||||||
|
<p>Your cart is empty!</p>
|
||||||
|
)}
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
7
src/components/CartFlyoutToggle.tsx
Normal file
7
src/components/CartFlyoutToggle.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { useStore } from '@nanostores/preact';
|
||||||
|
import { isCartOpen } from '../cartStore';
|
||||||
|
|
||||||
|
export default function CartFlyoutToggle() {
|
||||||
|
const $isCartOpen = useStore(isCartOpen);
|
||||||
|
return <button onClick={() => isCartOpen.set(!$isCartOpen)}>Cart</button>;
|
||||||
|
}
|
||||||
44
src/components/FigurineDescription.astro
Normal file
44
src/components/FigurineDescription.astro
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
<h1>Astronaut Figurine</h1>
|
||||||
|
<p class="limited-edition-badge">Limited Edition</p>
|
||||||
|
<p>
|
||||||
|
The limited edition Astronaut Figurine is the perfect gift for any Astro contributor. This
|
||||||
|
fully-poseable action figurine comes equipped with:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>A fabric space suit with adjustable straps</li>
|
||||||
|
<li>Boots lightly dusted by the lunar surface *</li>
|
||||||
|
<li>An adjustable space visor</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
<sub>* Dust not actually from the lunar surface</sub>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
margin-block-start: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.limited-edition-badge {
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background-image: linear-gradient(0deg, var(--astro-blue), var(--astro-pink));
|
||||||
|
background-size: 100% 200%;
|
||||||
|
background-position-y: 100%;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
animation: pulse 4s ease-in-out infinite;
|
||||||
|
display: inline-block;
|
||||||
|
color: white;
|
||||||
|
padding: 0.2rem 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
background-position-y: 0%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position-y: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
113
src/layouts/Layout.astro
Normal file
113
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
---
|
||||||
|
import CartFlyout from '../components/CartFlyout';
|
||||||
|
import CartFlyoutToggle from '../components/CartFlyoutToggle';
|
||||||
|
import { withBase } from '../utils';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<link rel="icon" type="image/svg+xml" href={withBase('/favicon.svg')} />
|
||||||
|
<title>{title}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<a href={withBase('/')} class="nav-header">
|
||||||
|
<span style="color: var(--astro-blue)">Astro</span> storefront
|
||||||
|
</a>
|
||||||
|
<CartFlyoutToggle client:load />
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<slot />
|
||||||
|
<CartFlyout client:load />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style is:global>
|
||||||
|
:root {
|
||||||
|
--font-family: system-ui, sans-serif;
|
||||||
|
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
|
||||||
|
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
|
||||||
|
--font-size-xl: clamp(2rem, 1.75vw + 1.35rem, 2.75rem);
|
||||||
|
|
||||||
|
--color-text: hsl(12, 5%, 4%);
|
||||||
|
--color-bg: hsl(17, 20%, 97%);
|
||||||
|
--color-bg-2: hsl(17, 20%, 94%);
|
||||||
|
--color-bg-3: hsl(17, 20%, 88%);
|
||||||
|
--astro-blue: #4f39fa;
|
||||||
|
--astro-pink: #da62c4;
|
||||||
|
|
||||||
|
--content-max-width: 90ch;
|
||||||
|
--nav-height: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: var(--font-size-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
color: var(--astro-blue);
|
||||||
|
border: 2px solid var(--astro-blue);
|
||||||
|
transition:
|
||||||
|
color 0.2s,
|
||||||
|
background-color 0.2s;
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-size: var(--font-size-base);
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: var(--astro-blue);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-size: var(--font-size-base);
|
||||||
|
color: var(--color-text);
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background: var(--color-bg-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
max-width: var(--content-max-width);
|
||||||
|
height: var(--nav-height);
|
||||||
|
margin: auto;
|
||||||
|
padding-inline: 1rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-header,
|
||||||
|
.nav-header:visited {
|
||||||
|
font-size: var(--font-size-base);
|
||||||
|
font-weight: bold;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
50
src/pages/index.astro
Normal file
50
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
---
|
||||||
|
import type { CartItemDisplayInfo } from '../cartStore';
|
||||||
|
import Layout from '../layouts/Layout.astro';
|
||||||
|
import AddToCartForm from '../components/AddToCartForm';
|
||||||
|
import FigurineDescription from '../components/FigurineDescription.astro';
|
||||||
|
import { withBase } from '../utils';
|
||||||
|
|
||||||
|
const item: CartItemDisplayInfo = {
|
||||||
|
id: 'astronaut-figurine',
|
||||||
|
name: 'Astronaut Figurine',
|
||||||
|
imageSrc: withBase('/images/astronaut-figurine.png'),
|
||||||
|
};
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title={item.name}>
|
||||||
|
<main>
|
||||||
|
<div class="product-layout">
|
||||||
|
<div>
|
||||||
|
<FigurineDescription />
|
||||||
|
<AddToCartForm item={item} client:load>
|
||||||
|
<button type="submit">Add to cart</button>
|
||||||
|
</AddToCartForm>
|
||||||
|
</div>
|
||||||
|
<img src={item.imageSrc} alt={item.name} />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
margin: auto;
|
||||||
|
padding: 1em;
|
||||||
|
max-width: var(--content-max-width);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-layout {
|
||||||
|
display: grid;
|
||||||
|
gap: 2rem;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(20rem, max-content));
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-layout img {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 26rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button[type='submit'] {
|
||||||
|
margin-block-start: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
4
src/utils.ts
Normal file
4
src/utils.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
const base = import.meta.env.BASE_URL.replace(/\/$/, '');
|
||||||
|
|
||||||
|
/** Prefix a URL path with the site’s base path if set. */
|
||||||
|
export const withBase = (path: string) => base + path;
|
||||||
10
tsconfig.json
Normal file
10
tsconfig.json
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"include": [".astro/types.d.ts", "**/*"],
|
||||||
|
"exclude": ["dist"],
|
||||||
|
"compilerOptions": {
|
||||||
|
// Preact specific settings
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"jsxImportSource": "preact"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue