Sync from a44cfb874a

.codesandbox/Dockerfile

@@ -0,0 +1 @@
+FROM node:18-bullseye

.gitignore

@@ -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/

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

astro.config.mjs

@@ -0,0 +1,13 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import svelte from '@astrojs/svelte';
+import node from '@astrojs/node';
+
+// https://astro.build/config
+export default defineConfig({
+	output: 'server',
+	adapter: node({
+		mode: 'standalone',
+	}),
+	integrations: [svelte()],
+});

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@example/ssr",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "server": "node dist/server/entry.mjs"
+  },
+  "dependencies": {
+    "@astrojs/node": "^9.0.0",
+    "@astrojs/svelte": "^7.0.1",
+    "astro": "^5.0.8",
+    "svelte": "^5.1.16"
+  }
+}

public/favicon.svg

@@ -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>

src/api.ts

@@ -0,0 +1,79 @@
+export interface Product {
+	id: number;
+	name: string;
+	price: number;
+	image: string;
+}
+
+interface User {
+	id: number;
+}
+
+interface Cart {
+	items: Array<{
+		id: number;
+		name: string;
+		count: number;
+	}>;
+}
+
+async function get<T>(
+	incomingReq: Request,
+	endpoint: string,
+	cb: (response: Response) => Promise<T>
+): Promise<T> {
+	const origin = new URL(incomingReq.url).origin;
+	const response = await fetch(`${origin}${endpoint}`, {
+		credentials: 'same-origin',
+		headers: incomingReq.headers,
+	});
+	if (!response.ok) {
+		// TODO make this better...
+		throw new Error('Fetch failed');
+	}
+	return cb(response);
+}
+
+export async function getProducts(incomingReq: Request): Promise<Product[]> {
+	return get<Product[]>(incomingReq, '/api/products', async (response) => {
+		const products: Product[] = await response.json();
+		return products;
+	});
+}
+
+export async function getProduct(incomingReq: Request, id: number): Promise<Product> {
+	return get<Product>(incomingReq, `/api/products/${id}`, async (response) => {
+		const product: Product = await response.json();
+		return product;
+	});
+}
+
+export async function getUser(incomingReq: Request): Promise<User> {
+	return get<User>(incomingReq, `/api/user`, async (response) => {
+		const user: User = await response.json();
+		return user;
+	});
+}
+
+export async function getCart(incomingReq: Request): Promise<Cart> {
+	return get<Cart>(incomingReq, `/api/cart`, async (response) => {
+		const cart: Cart = await response.json();
+		return cart;
+	});
+}
+
+export async function addToUserCart(id: number | string, name: string): Promise<void> {
+	await fetch(`${location.origin}/api/cart`, {
+		credentials: 'same-origin',
+		method: 'POST',
+		mode: 'no-cors',
+		headers: {
+			'Content-Type': 'application/json',
+			Cache: 'no-cache',
+		},
+		body: JSON.stringify({
+			id,
+			name,
+		}),
+	});
+}

src/components/AddToCart.svelte

@@ -0,0 +1,53 @@
+<script>
+	import { addToUserCart } from '../api';
+	let { id, name } = $props()
+
+	function notifyCartItem(id) {
+		window.dispatchEvent(new CustomEvent('add-to-cart', {
+			detail: id
+		}));
+	}
+
+	async function addToCart() {
+		await addToUserCart(id, name);
+		notifyCartItem(id);
+	}
+</script>
+<style>
+	button {
+  display:block;
+  padding:0.5em 1em 0.5em 1em;
+  border-radius:100px;
+  border:none;
+  font-size: 1.4em;
+  position:relative;
+  background:#0652DD;
+  cursor:pointer;
+  height:2em;
+  width:10em;
+  overflow:hidden;
+  transition:transform 0.1s;
+  z-index:1;
+}
+button:hover {
+  transform:scale(1.1);
+}
+
+.pretext {
+  color:#fff;
+  background:#0652DD;
+  position:absolute;
+  top:0;
+  left:0;
+  height:100%;
+  width:100%;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  font-family: 'Quicksand', sans-serif;
+	text-transform: uppercase;
+}
+</style>
+<button click={addToCart}>
+	<span class="pretext">Add to cart</span>
+</button>

src/components/Cart.svelte

@@ -0,0 +1,34 @@
+<script>
+	let { count } = $props()
+	let items = new Set();
+
+	function onAddToCart(ev) {
+		const id = ev.detail;
+		items.add(id);
+		count++;
+	}
+</script>
+<style>
+	.cart {
+		display: flex;
+		align-items: center;
+		text-decoration: none;
+		color: inherit;
+	}
+	.cart :first-child {
+		margin-right: 5px;
+	}
+
+	.cart-icon {
+		font-size: 36px;
+	}
+
+	.count {
+		font-size: 24px;
+	}
+</style>
+<svelte:window onadd-to-cart={onAddToCart}/>
+<a href="/cart" class="cart">
+	<span class="material-icons cart-icon">shopping_cart</span>
+	<span class="count">{count}</span>
+</a>

src/components/Container.astro

@@ -0,0 +1,13 @@
+---
+const { tag = 'div' } = Astro.props;
+const Tag = tag;
+---
+
+<style>
+	.container {
+		width: 1248px; /** TODO: responsive */
+		margin-left: auto;
+		margin-right: auto;
+	}
+</style>
+<Tag class="container"><slot /></Tag>

src/components/Header.astro

@@ -0,0 +1,49 @@
+---
+import TextDecorationSkip from './TextDecorationSkip.astro';
+import Cart from './Cart.svelte';
+import { getCart } from '../api';
+
+const cart = await getCart(Astro.request);
+const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
+---
+
+<style>
+	@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
+
+	header {
+		margin: 1rem 2rem;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	h1 {
+		margin: 0;
+		font-family: 'Lobster', cursive;
+		color: black;
+	}
+
+	a,
+	a:visited {
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.right-pane {
+		display: flex;
+	}
+
+	.material-icons {
+		font-size: 36px;
+		margin-right: 1rem;
+	}
+</style>
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+<header>
+	<h1><a href="/"><TextDecorationSkip text="Online Store" /></a></h1>
+	<div class="right-pane">
+		<a href="/login">
+			<span class="material-icons"> login</span>
+		</a>
+		<Cart client:idle count={cartCount} />
+	</div>
+</header>

src/components/ProductListing.astro

@@ -0,0 +1,70 @@
+---
+import type { Product } from '../api';
+
+interface Props {
+	products: Product[];
+}
+
+const { products } = Astro.props;
+---
+
+<style>
+	ul {
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+	}
+
+	figure {
+		width: 200px;
+		padding: 7px;
+		border: 1px solid black;
+		display: flex;
+		flex-direction: column;
+	}
+
+	figure figcaption {
+		text-align: center;
+		line-height: 1.6;
+	}
+
+	figure img {
+		width: 100%;
+		height: 250px;
+		object-fit: cover;
+	}
+
+	.product a {
+		display: block;
+		text-decoration: none;
+		color: inherit;
+	}
+
+	.name {
+		font-weight: 500;
+	}
+
+	.price {
+		font-size: 90%;
+		color: #787878;
+	}
+</style>
+<slot name="title" />
+<ul>
+	{
+		products.map((product) => (
+			<li class="product">
+				<a href={`/products/${product.id}`}>
+					<figure>
+						<img src={product.image} />
+						<figcaption>
+							<div class="name">{product.name}</div>
+							<div class="price">${product.price}</div>
+						</figcaption>
+					</figure>
+				</a>
+			</li>
+		))
+	}
+</ul>

src/components/TextDecorationSkip.astro

@@ -0,0 +1,23 @@
+---
+interface Props {
+	text: string;
+}
+
+const { text } = Astro.props;
+const words = text.split(' ');
+const last = words.length - 1;
+---
+
+<style>
+	span {
+		text-decoration: underline;
+	}
+</style>
+{
+	words.map((word, i) => (
+		<Fragment>
+			<span>{word}</span>
+			{i !== last && <Fragment>&#32;</Fragment>}
+		</Fragment>
+	))
+}

src/models/db.json

@@ -0,0 +1,28 @@
+{
+  "products": [
+    {
+      "id": 1,
+      "name": "Cereal",
+      "price": 3.99,
+      "image": "/images/products/cereal.jpg"
+    },
+    {
+      "id": 2,
+      "name": "Yogurt",
+      "price": 3.97,
+      "image": "/images/products/yogurt.jpg"
+    },
+    {
+      "id": 3,
+      "name": "Rolled Oats",
+      "price": 2.89,
+      "image": "/images/products/oats.jpg"
+    },
+    {
+      "id": 4,
+      "name": "Muffins",
+      "price": 4.39,
+      "image": "/images/products/muffins.jpg"
+    }
+  ]
+}

src/models/db.ts

@@ -0,0 +1,6 @@
+import db from './db.json';
+
+const products = db.products;
+const productMap = new Map(products.map((product) => [product.id, product]));
+
+export { products, productMap };

src/models/session.ts

@@ -0,0 +1,2 @@
+// Normally this would be in a database.
+export const userCartItems = new Map();

src/pages/api/cart.ts

@@ -0,0 +1,38 @@
+import type { APIContext } from 'astro';
+import { userCartItems } from '../../models/session';
+
+export function GET({ cookies }: APIContext) {
+	let userId = cookies.get('user-id')?.value;
+
+	if (!userId || !userCartItems.has(userId)) {
+		return Response.json({ items: [] });
+	}
+	let items = userCartItems.get(userId);
+	let array = Array.from(items.values());
+
+	return Response.json({ items: array });
+}
+
+interface AddToCartItem {
+	id: number;
+	name: string;
+}
+
+export async function POST({ cookies, request }: APIContext) {
+	const item: AddToCartItem = await request.json();
+
+	let userId = cookies.get('user-id')?.value;
+
+	if (!userCartItems.has(userId)) {
+		userCartItems.set(userId, new Map());
+	}
+
+	let cart = userCartItems.get(userId);
+	if (cart.has(item.id)) {
+		cart.get(item.id).count++;
+	} else {
+		cart.set(item.id, { id: item.id, name: item.name, count: 1 });
+	}
+
+	return Response.json({ ok: true });
+}

src/pages/api/products.ts

@@ -0,0 +1,5 @@
+import { products } from '../../models/db';
+
+export function GET() {
+	return new Response(JSON.stringify(products));
+}

src/pages/api/products/[id].ts

@@ -0,0 +1,16 @@
+import { productMap } from '../../../models/db';
+import type { APIContext } from 'astro';
+
+export function GET({ params }: APIContext) {
+	const id = Number(params.id);
+	if (productMap.has(id)) {
+		const product = productMap.get(id);
+
+		return new Response(JSON.stringify(product));
+	} else {
+		return new Response(null, {
+			status: 400,
+			statusText: 'Not found',
+		});
+	}
+}

src/pages/cart.astro

@@ -0,0 +1,51 @@
+---
+import Header from '../components/Header.astro';
+import Container from '../components/Container.astro';
+import { getCart } from '../api';
+
+if (!Astro.cookies.get('user-id')) {
+	return Astro.redirect('/');
+}
+
+// They must be logged in.
+
+const user = { name: 'test' }; // getUser?
+const cart = await getCart(Astro.request);
+---
+
+<html lang="en">
+	<head>
+		<title>Cart | Online Store</title>
+		<style>
+			h1 {
+				font-size: 36px;
+			}
+		</style>
+	</head>
+	<body>
+		<Header />
+
+		<Container tag="main">
+			<h1>Cart</h1>
+			<p>Hi {user.name}! Here are your cart items:</p>
+			<table>
+				<thead>
+					<tr>
+						<th>Item</th>
+						<th>Count</th>
+					</tr>
+				</thead>
+				<tbody>
+					{
+						cart.items.map((item) => (
+							<tr>
+								<td>{item.name}</td>
+								<td>{item.count}</td>
+							</tr>
+						))
+					}
+				</tbody>
+			</table>
+		</Container>
+	</body>
+</html>

src/pages/index.astro

@@ -0,0 +1,33 @@
+---
+import Header from '../components/Header.astro';
+import Container from '../components/Container.astro';
+import ProductListing from '../components/ProductListing.astro';
+import { getProducts } from '../api';
+import '../styles/common.css';
+
+const products = await getProducts(Astro.request);
+---
+
+<html lang="en">
+	<head>
+		<title>Online Store</title>
+		<style>
+			h1 {
+				font-size: 36px;
+			}
+
+			.product-listing-title {
+				text-align: center;
+			}
+		</style>
+	</head>
+	<body>
+		<Header />
+
+		<Container tag="main">
+			<ProductListing products={products}>
+				<h2 class="product-listing-title" slot="title">Product Listing</h2>
+			</ProductListing>
+		</Container>
+	</body>
+</html>

src/pages/login.astro

@@ -0,0 +1,58 @@
+---
+import Header from '../components/Header.astro';
+import Container from '../components/Container.astro';
+---
+
+<html lang="en">
+	<head>
+		<title>Online Store</title>
+		<style>
+			h1 {
+				font-size: 36px;
+			}
+		</style>
+
+		<script type="module" is:inline>
+			document.addEventListener('DOMContentLoaded', () => {
+				const form = document.querySelector('form');
+				if (!form) throw new Error('Form not found');
+				form.addEventListener('submit', (e) => {
+					e.preventDefault();
+					const formData = new FormData(form);
+					const data = Object.fromEntries(formData);
+
+					fetch('/login.form.async', {
+						method: 'POST',
+						body: JSON.stringify(data),
+					})
+						.then((res) => res.json())
+						.then(() => {
+							const result = document.querySelector('#result');
+							if (result) {
+								result.innerHTML =
+									'Progressive login was successful! you will be redirected to the store in 3 seconds';
+								setTimeout(() => (location.href = '/'), 3000);
+							}
+						});
+				});
+			});
+		</script>
+	</head>
+	<body>
+		<Header />
+
+		<Container tag="main">
+			<h1>Login</h1>
+			<form action="/login.form" method="POST">
+				<label for="name">Name</label>
+				<input type="text" name="name" />
+
+				<label for="password">Password</label>
+				<input type="password" name="password" />
+
+				<input type="submit" value="Submit" />
+			</form>
+			<div id="result"></div>
+		</Container>
+	</body>
+</html>

src/pages/login.form.async.ts

@@ -0,0 +1,14 @@
+import type { APIContext, APIRoute } from 'astro';
+
+export const POST: APIRoute = ({ cookies }: APIContext) => {
+	// add a new cookie
+	cookies.set('user-id', '1', {
+		path: '/',
+		maxAge: 2592000,
+	});
+
+	return Response.json({
+		ok: true,
+		user: 1,
+	});
+};

src/pages/login.form.ts

@@ -0,0 +1,16 @@
+import type { APIContext } from 'astro';
+
+export function POST({ cookies }: APIContext) {
+	// add a new cookie
+	cookies.set('user-id', '1', {
+		path: '/',
+		maxAge: 2592000,
+	});
+
+	return new Response(null, {
+		status: 301,
+		headers: {
+			Location: '/',
+		},
+	});
+}

src/pages/products/[id].astro

@@ -0,0 +1,45 @@
+---
+import Header from '../../components/Header.astro';
+import Container from '../../components/Container.astro';
+import AddToCart from '../../components/AddToCart.svelte';
+import { getProduct } from '../../api';
+import '../../styles/common.css';
+
+const id = Number(Astro.params.id);
+const product = await getProduct(Astro.request, id);
+---
+
+<html lang="en">
+	<head>
+		<title>{product.name} | Online Store</title>
+		<style>
+			h2 {
+				text-align: center;
+				font-size: 3.5rem;
+			}
+
+			figure {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+			}
+
+			img {
+				width: 400px;
+			}
+		</style>
+	</head>
+	<body>
+		<Header />
+
+		<Container tag="article">
+			<h2>{product.name}</h2>
+			<figure>
+				<img src={product.image} />
+				<figcaption>
+					<AddToCart client:idle id={id} name={product.name} />
+					<p>Description here...</p>
+				</figcaption>
+			</figure>
+		</Container>
+	</body>
+</html>

src/styles/common.css

@@ -0,0 +1,3 @@
+body {
+	font-family: 'GT America Standard', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}

tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}