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