Update `with-nanostores` example to match docs walkthrough (#3840)

* feat: replace with-nanostores with new example

* docs: update README with docs call-out

* chore: small formatting inconsistencies

* nit: standardize to spaces :'(

* nit: standardize to tabs!

* refactor: use html "hidden" property

* nit: beta.66 for sanity

9 files changed, 123 insertions, 113 deletions

diff --git a/examples/with-nanostores/src/components/AddToCartForm.tsx b/examples/with-nanostores/src/components/AddToCartForm.tsx
new file mode 100644
index 000000000..2f1befb9f
--- /dev/null
+++ b/examples/with-nanostores/src/components/AddToCartForm.tsx
@@ -0,0 +1,22 @@
+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>
+	)
+}
diff --git a/examples/with-nanostores/src/components/AdminsReact.jsx b/examples/with-nanostores/src/components/AdminsReact.jsx
deleted file mode 100644
index f2b38a3cd..000000000
--- a/examples/with-nanostores/src/components/AdminsReact.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { useStore } from '@nanostores/react';
-
-import { admins } from '../store/admins.js';
-import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
-
-const AdminsReact = () => {
-	const list = useStore(admins);
-	const count = useStore(counter);
-
-	return (
-		<>
-			<h1>React</h1>
-			<ul>
-				{list.map((admin) => (
-					<li key={admin.id}>{JSON.stringify(admin, null, 2)}</li>
-				))}
-			</ul>
-			<div>
-				<h3>Counter</h3>
-				<p>{count.value}</p>
-				<button onClick={decreaseCounter}>-1</button>
-				<button onClick={increaseCounter}>+1</button>
-			</div>
-			<br />
-		</>
-	);
-};
-
-export default AdminsReact;
diff --git a/examples/with-nanostores/src/components/AdminsSolid.jsx b/examples/with-nanostores/src/components/AdminsSolid.jsx
deleted file mode 100644
index 8ad2756a3..000000000
--- a/examples/with-nanostores/src/components/AdminsSolid.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { createSignal } from 'solid-js';
-import { useStore } from 'solid-nanostores';
-
-import { admins } from '../store/admins.js';
-import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
-
-const AdminsSolid = () => {
-	const list = useStore(admins);
-	const count = useStore(counter);
-
-	return (
-		<>
-			<h1>Solid</h1>
-			<ul>
-				{list.map((admin) => (
-					<li key={admin.id}>{JSON.stringify(admin, null, 2)}</li>
-				))}
-			</ul>
-			<div>
-				<h3>Counter</h3>
-				<p>{count.value}</p>
-				<button onClick={decreaseCounter}>-1</button>
-				<button onClick={increaseCounter}>+1</button>
-			</div>
-			<br />
-		</>
-	);
-};
-
-export default AdminsSolid;
diff --git a/examples/with-nanostores/src/components/AdminsSvelte.svelte b/examples/with-nanostores/src/components/AdminsSvelte.svelte
deleted file mode 100644
index bae3fbef8..000000000
--- a/examples/with-nanostores/src/components/AdminsSvelte.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { admins } from '../store/admins.js';
-  import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
-</script>
-
-<h1>Svelte</h1>
-<ul>
-  {#each $admins as admin}
-    <li>{JSON.stringify(admin, null, 2)}</li>
-  {/each}
-</ul>
-<div>
-  <h3>Counter</h3>
-  <p>{$counter.value}</p>
-  <button on:click={decreaseCounter}>-1</button>
-  <button on:click={increaseCounter}>+1</button>
-</div>
-<br />
-<!-- Just to get rid of a warning -->
-<slot />
diff --git a/examples/with-nanostores/src/components/AdminsVue.vue b/examples/with-nanostores/src/components/AdminsVue.vue
deleted file mode 100644
index 5eb73dd3d..000000000
--- a/examples/with-nanostores/src/components/AdminsVue.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-	<div>
-		<h1>Vue</h1>
-		<ul>
-			<li v-for="admin in list" :key="admin.id">
-				{{ JSON.stringify(admin, null, 2) }}
-			</li>
-		</ul>
-		<div>
-			<h3>Counter</h3>
-			<p>{{ count.value }}</p>
-			<button @click="decreaseCounter">-1</button>
-			<button @click="increaseCounter">+1</button>
-		</div>
-		<br />
-	</div>
-</template>
-
-<script>
-import { useStore } from '@nanostores/vue';
-
-import { admins } from '../store/admins.js';
-import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
-
-export default {
-	setup() {
-		const list = useStore(admins);
-		const count = useStore(counter);
-
-		return { list, count, increaseCounter, decreaseCounter };
-	},
-};
-</script>
diff --git a/examples/with-nanostores/src/components/CartFlyout.module.css b/examples/with-nanostores/src/components/CartFlyout.module.css
new file mode 100644
index 000000000..cee43dd4c
--- /dev/null
+++ b/examples/with-nanostores/src/components/CartFlyout.module.css
@@ -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;
+}
diff --git a/examples/with-nanostores/src/components/CartFlyout.tsx b/examples/with-nanostores/src/components/CartFlyout.tsx
new file mode 100644
index 000000000..29fd7a882
--- /dev/null
+++ b/examples/with-nanostores/src/components/CartFlyout.tsx
@@ -0,0 +1,26 @@
+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>
+	);
+}
diff --git a/examples/with-nanostores/src/components/CartFlyoutToggle.tsx b/examples/with-nanostores/src/components/CartFlyoutToggle.tsx
new file mode 100644
index 000000000..9c94bc831
--- /dev/null
+++ b/examples/with-nanostores/src/components/CartFlyoutToggle.tsx
@@ -0,0 +1,10 @@
+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>
+	)
+}
diff --git a/examples/with-nanostores/src/components/FigurineDescription.astro b/examples/with-nanostores/src/components/FigurineDescription.astro
new file mode 100644
index 000000000..8d801d53a
--- /dev/null
+++ b/examples/with-nanostores/src/components/FigurineDescription.astro
@@ -0,0 +1,36 @@
+<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 adjustible 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>