wip: new ssr demo

examples/astro-star-explorer/.gitignore

@@ -0,0 +1,17 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

examples/astro-star-explorer/.npmrc

@@ -0,0 +1,2 @@
+# Expose Astro dependencies for `pnpm` users
+shamefully-hoist=true

examples/astro-star-explorer/.stackblitzrc

@@ -0,0 +1,6 @@
+{
+  "startCommand": "npm start",
+  "env": {
+    "ENABLE_CJS_IMPORTS": true
+  }
+}

examples/astro-star-explorer/.vscode/extensions.json

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

examples/astro-star-explorer/.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"
+    }
+  ]
+}

examples/astro-star-explorer/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "problems.decorations.enabled": false,
+  "workbench.colorCustomizations": {
+    "editorError.foreground":   "#00000000",
+    "editorWarning.foreground": "#00000000",
+    "editorInfo.foreground":    "#00000000"
+  }
+}

examples/astro-star-explorer/README.md

@@ -0,0 +1,43 @@
+# Astro Starter Kit: Minimal
+
+```
+npm init astro -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command           | Action                                       |
+|:----------------  |:-------------------------------------------- |
+| `npm install`     | Installs dependencies                        |
+| `npm run dev`     | Starts local dev server at `localhost:3000`  |
+| `npm run build`   | Build your production site to `./dist/`      |
+| `npm run preview` | Preview your build locally, before deploying |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://github.com/withastro/astro) or jump into our [Discord server](https://astro.build/chat).

examples/astro-star-explorer/astro.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config';
+import svelte from "@astrojs/svelte";
+import nodeAdapter from '@astrojs/node'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [svelte()],
+  adapter: nodeAdapter(),
+});

examples/astro-star-explorer/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@example/minimal",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev --experimental-ssr",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "devDependencies": {
+    "@astrojs/svelte": "^0.0.2",
+    "@astrojs/tailwind": "^0.0.2",
+    "astro": "workspace:*",
+    "svelte": "^3.46.4"
+  },
+  "dependencies": {
+    "@astrojs/node": "^0.0.2"
+  }
+}

examples/astro-star-explorer/public/fonts.css

@@ -0,0 +1,29 @@
+@font-face {
+	font-family: 'RT Alias Medium';
+	font-style: normal;
+	font-weight: 400;
+	src: local(''), url('/fonts/RTAliasMedium-Regular.woff2') format('woff2');
+	font-display: swap;
+}
+@font-face {
+	font-family: 'RT Alias Medium';
+	font-style: italic;
+	font-weight: 400;
+	src: local(''),
+		url('/fonts/RTAliasMedium-RegularOblique.woff2') format('woff2');
+	font-display: swap;
+}
+@font-face {
+	font-family: 'RT Alias Medium';
+	font-style: normal;
+	font-weight: 700;
+	src: local(''), url('/fonts/RTAliasMedium-Bold.woff2') format('woff2');
+	font-display: swap;
+}
+@font-face {
+	font-family: 'RT Alias Medium';
+	font-style: italic;
+	font-weight: 700;
+	src: local(''), url('/fonts/RTAliasMedium-BoldOblique.woff2') format('woff2');
+	font-display: swap;
+}

examples/astro-star-explorer/public/fonts/LICENSE.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Razzia Type - Web EULA</title>
+    <style>
+    body {
+      font-family: sans-serif;
+      font-size: 16px;
+      line-height: 1.6;
+    }
+    main {
+      max-width: 40em;
+      margin: 40px auto;
+    }
+    aside {
+      display: none
+    }
+    .title {
+      font-size: 1em;
+      font-weight: normal;
+    }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1 class="title">Razzia Type</h1>
+      <article>
+        <p>Razziatype Web End User License Agreement</p>
+<ol>
+<li><p>Contractual</p>
+<ol>
+<li><p>This is an agreement between you, the purchaser and licensee, and Mirco Schiavone (ID.-Nr.C9505879), hereafter Mirco Schiavone. By purchasing, or downloading, or installing, or using, or otherwise handling the digital typeface software (hereafter fonts), you accept the terms of this agreement. In accepting the terms of this agreement, you acknowledge understanding and complying with its terms. This agreement replaces and supersedes any previously made oral or written proposal or agreement between you and Mirco Schiavone.</p>
+</li>
+<li><p>You agree that the intellectual property of the design and any other part of the fonts, and all its copies are property of Mirco Schiavone and are protected under Swiss law. You are not purchasing the copyright to the design or any other part of the fonts. You are purchasing a non-exclusive, non-transferable and perpetual license granting you the right to use the fonts as specified in this agreement and referenced during your purchase and on your invoice.</p>
+</li>
+<li><p>You are allowed to purchase a license and act on behalf of the end user. The end user must be registered as the licensee during the checkout process. You have to provide your client with the original invoice related to the purchase. Asking the end user another price than the one offered by Mirco Schiavone is strictly prohibited. The end user must accept this EULA as it is, that is without any alterations and amendments. You must not use the respective software yourself. Any subsidiary company, affiliate company, servicing company, production company, design agency and any other third party carrying out work on behalf of the licensee making active use of the fonts is required to buy their own, individual license.</p>
+</li>
+</ol>
+</li>
+<li><p>Definitions<br/>
+Wherever used in this EULA the meaning shall be the following:</p>
+<ol>
+<li><p>“Font” or “fonts” shall mean the digital typeface software developed and produced by Mirco Schiavone including any and all updates, upgrades, expansions, modified versions and working copies of the fonts to which you, the licensee, have purchased a license, as referenced during your purchase and on your invoice.</p>
+</li>
+<li><p>“Modify” shall mean to create, assist in and / or cause the creation of derivative or modified product or design, cause the creation of modifications, additions, to the fonts, including, but not limited to, creating additional weights; creating additional characters; modify copyright, trademark and any other proprietary notices present on the purchased fonts; modifying the design of existing characters, even if converted to outlines with the help of an editing or design software; modifying font spacing and kerning; or converting fonts to an alternate digital format, adapt, translate, copy, reverse engineer, decompile, disassemble, rename, alter the fonts or otherwise attempt to discover the source code of the fonts without first obtaining written permission from Mirco Schi- avone. Mirco Schiavone does not offer any support for or guarantee the proper functioning of any modified fonts.</p>
+</li>
+<li><p>“Transfer” the fonts shall mean distribute, lend, rent, sell, give away, share, embed the fonts into any physical device or saving the fonts onto any physical device and in any way hand that device to a third party or in any other way transfer any modified or unmodified version of the fonts to a third party outside of the terms and conditions defined in this agreement and referenced during your purchase and on your invoice. You are obliged to undertake all steps to prevent unauthorized access to the fonts and its copies. The files created using the fonts must not feature outlines of the fonts, or permit the extraction or extrapolation of outlines of the licensed fonts. If you grant employees, representatives, a third party prepress bureau or printer, a third party web developer or a third party app developer access to the fonts, you are required to inform them of this EULA.</p>
+</li>
+</ol>
+</li>
+<li><p>Web Licensing</p>
+<ol>
+<li><p>You are purchasing a specified number of licenses to use fonts by Mirco Schiavone on online storage (hereafter servers) to serve websites to which you, and a single company, organization, business entity or institution, have sole administrative access (aside from the owner of the server), to serve a specified number of domains and its subdomains, and a specified number of pageviews per month. “Pageview per month” shall mean the number of single requests for the viewing of your websites during the time period of one (1) month. The fonts must be exclusively self-hosted on your own servers. All fonts must be exclusively stored on servers to which you, and a single company, organization, business entity or institution, have sole administrative access (aside from the owner of the server). In the case of the closure of a website, the fonts and/or the license to use the fonts cannot be transferred.</p>
+</li>
+<li><p>The number of pageviews per month your websites may serve depends on the specified licensed number of pageviews per month purchased and referenced during your purchase and on your invoice. You are obliged to record and control the number of monthly pageviews for your websites. If at any point the number of pageviews per month to your websites exceeds the specified number of pageviews per month referenced during your purchase and on your invoice you are obliged to purchase a licensing upgrade. Mirco Schiavone is entitled to request and receive proof that your current number of pageviews per month does not exceed the specified number of pageviews per month referenced during your purchase and on your invoice. “Proof” shall mean screenshots of your analytics tool that is able to document the number of pageviews per month to your websites.<br/>
+<br/>
+You may use the fonts on devices by you or in your company, organization, business entity or institution exclusively for preparing their use on servers and so-called web development. The fonts may not be used aside from the fonts’ use as embedded fonts in your websites. The fonts may be embedded into websites using the CSS @font-face technique. The fonts may not be embedded into any other format or in any other way under this license. You must not use the fonts under this license to create or save raster or vector images.</p>
+</li>
+<li><p>You may not transfer the fonts with the exception of sending a copy of the fonts to a third-party website developer if necessary. Your license is not transferred to the third-party website developer or to any other third party. Once the third party website developer has completed the job, all copies of the fonts must be deleted from the third party website developers computers.</p>
+</li>
+<li><p>You must not modify the fonts under any circumstance with the exception of subsetting the character set of the fonts. “Subsetting” shall mean to reduce the number of characters or features in the fonts using an application or service. Any rights, including but not limited to copyrights and trademarks, of both the original version and the edited version remains with Mirco Schiavone. The terms and conditions described in this agreement and referenced during your purchase and on your invoice remain the same for both the original version and the edited version.</p>
+</li>
+</ol>
+</li>
+<li><p>General</p>
+<ol>
+<li><p>Mirco Schiavone represents and warrants that he has the right and authority to enter into this licensing agreement and that the agreed upon licensed fonts do not infringe any third party intellectual property rights.</p>
+</li>
+<li><p>Mirco Schiavone guarantees the fonts to be free of malfunction for thirty (30) days upon purchase. Can you prove that the fonts do not function as promised, Mirco Schiavone is entitled to resolve the malfunction. Claims must include receipt and documentation of the malfunction. Refunds are granted exclusively when the fonts’ malfunction cannot be resolved by Mirco Schiavone within 30 days after your first information. After a refund the respective license terminates with immediate effect and any further use is strictly prohibited. The fonts are not warranted to operate on all computer operating systems. Mirco Schiavone is not responsible for operating system errors or inoperability faults.</p>
+</li>
+<li><p>Mirco Schiavone’s liability is exclusively limited to the purchase price of your font license. Under no circumstances shall Mirco Schiavone’s liability to you or any other third party exceed either the refunding of the purchase price of your font license or replacement of the fonts either of which shall be at Mirco Schiavone’s sole discretion.<br/>
+<br/>
+Under no circumstances shall Mirco Schiavone be responsible for any consequential, indirect, incidental, punitive or special damages including but not limited to any loss of profits, loss of data, loss of savings, loss of revenue, loss of business information, business interruption, loss of time, etc. arising out of the use or inability to use the fonts. Mirco Schiavone makes no warranties, express or implied as to merchantability, fitness for a particular purpose, or otherwise. The font software was not manufactured for use in manufacturing control devices or navigation devices or in any circumstances that could result in environmental damage or personal injury or death.</p>
+</li>
+<li><p>Any breach of the terms and conditions of this agreement terminates your complete license to use the fonts with immediate effect. In the event of termination of the agreement you must destroy any copies of the fonts, including your archival copies. In the event of an use of fonts without valid or adequate license, the infringer shall pay to Mirco Schiavone a retroactive license for the illegitimate use. The price of the retroactive license is calculated according to the valid licencing tariff of Mirco Schiavone, plus an additional surcharge of at least 200%. You still are obliged to obey to this EULA.
+Without prejudice of the foregoing, Mirco Schiavone reserves its right to claim for any damages, loss and costs (including attorneys’ fees and expenses) that Mirco Schiavone may incur or suffer in relation to any breach of this agreement and to exercise any other rights and remedies, in particular appropriation of profits. The handling of any individual cases may be arranged at Mirco Schiavone‘s sole discretion without prejudice.</p>
+</li>
+<li><p>Any and all rights not expressly granted in this agreement are reserved to Mirco Schiavone. This license agreement cannot be amended without written permission of Mirco Schiavone.</p>
+</li>
+<li><p>You agree that if any use of a license is made in any way public by you, Mirco Schiavone is authorized to use your company’s name, as well as other trademarks and images and videos of the use, for marketing purposes only.</p>
+</li>
+<li><p>This agreement shall be governed by and construed exclusively in accordance with Swiss law. Place of performance and exclusive place of jurisdiction is Zurich, Switzerland. The rights and obligations of the parties arising from this contract are based on Swiss law as it relates to contracts made in Switzerland and fully performed therein. If any part of this agreement is declared by a court of competent jurisdiction to be invalid, void or unenforceable for any reason the other provisions of this agreement shall remain valid, unaffected and enforceable to the fullest extent possible. An invalid provision shall be replaced by Mirco Schiavone with a provision that effects the intent of the invalid provision. The Licensee expressly consents to the jurisdiction of the Swiss Courts over any dispute arising out of this agreement, even if the breach of contractual rights takes place in a foreign country. This agreement is not governed by the “United Nation Convention on Contracts for the International Sale of Goods.”</p>
+</li>
+</ol>
+</li>
+</ol>
+<p>Edition November 2019, future editions subject to change.</p>
+
+      </article>
+    </main>
+  </body>
+</html>

examples/astro-star-explorer/sandbox.config.json

@@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}

examples/astro-star-explorer/src/components/Layout.astro

@@ -0,0 +1,66 @@
+---
+const { title = 'Galaxy explorer' } = Astro.props
+---
+
+<noscript>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/fonts.css">
+  <title>{title}</title>
+</head>
+<body>
+  <slot />
+</body>
+</html>
+</noscript>
+
+<style>
+  * {
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  :root {
+    --grey-1: 12, 5%, 4%;
+    --grey-7: 12, 14%, 70%;
+    --grey-8: 12, 15%, 84%;
+    --grey-9: 12, 17%, 94%;
+    --blue-1: #215EFE;
+    --pink-1: #C038BD;
+    --pink-2: #DA62C4;
+
+    --text: hsl(var(--grey-1));
+    --gradient-primary: linear-gradient(var(--blue-1), var(--pink-1));
+    --bg: hsl(var(--grey-9));
+
+    --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    --font-heading: 'RT Alias Medium', var(--font-base);
+  }
+
+  html {
+    font-family: var(--font-base);
+    color: var(--text);
+  }
+
+  body {
+    margin: 0;
+    background: linear-gradient(20deg, #DA62C4, #ED999A 15%, #F3EFEE 50%);
+    min-height: 100vh;
+  }
+
+  :global(h1, h2, h3, h4, h5, h6, button) {
+    font-family: var(--font-heading);
+  }
+
+  :global(button) {
+    border: none;
+    padding: 0.8rem 0.3rem;
+    font-size: 1.2em;
+    background: none;
+    cursor: pointer;
+  }
+</style>

examples/astro-star-explorer/src/exData.js

@@ -0,0 +1,10 @@
+export default {
+  copyright: 'U. Mishra',
+  date: '2021-03-01',
+  explanation: 'The Pelican Nebula is changing.   The entire nebula, officially designated IC 5070, is divided from the larger North America Nebula by a molecular cloud filled with dark dust.  The Pelican, however, is particularly interesting because it is an unusually active mix of star formation and evolving gas clouds.  The featured picture was processed to bring out two main colors, red and blue, with the red dominated by light emitted by interstellar hydrogen. Ultraviolet light emitted by young energetic stars is slowly transforming cold gas in the nebula to hot gas, with the advancing boundary between the two, known as an ionization front, visible in bright red across the image center. Particularly dense tentacles of cold gas remain.  Millions of years from now this nebula might no longer be known as the Pelican, as the balance and placement of stars and gas will surely leave something that appears completely different.   APOD in world languages: Arabic, Bulgarian, Catalan, Chinese (Beijing), Chinese (Taiwan), Croatian, Czech, Dutch, Farsi, French, German, Hebrew, Indonesian, Korean, Montenegrin, Polish, Russian, Serbian, Slovenian,  Spanish, Taiwanese, Turkish, Turkish, and  Ukrainian',
+  hdurl: 'https://apod.nasa.gov/apod/image/2102/Pelican_PetraskoEtAl_3555.jpg',
+  media_type: 'image',
+  service_version: 'v1',
+  title: 'The Pelican Nebula in Red and Blue',
+  url: 'https://apod.nasa.gov/apod/image/2102/Pelican_PetraskoEtAl_960.jpg'
+}

examples/astro-star-explorer/src/pages/index.astro

@@ -0,0 +1,9 @@
+---
+import Layout from '../components/Layout.astro'
+---
+<Layout>
+	<h1>Galaxy explorer</h1>
+	<p>Explore the universe, buy some prints!</p>
+
+	<a href=`/product/2021-03-29`>Show me the latest</a>
+</Layout>

examples/astro-star-explorer/src/pages/product/[product].astro

@@ -0,0 +1,120 @@
+---
+import Layout from '../../components/Layout.astro'
+
+const { product } = Astro.params
+const { NASA_API_KEY } = import.meta.env
+const photoInfo = await fetch(
+  `https://api.nasa.gov/planetary/apod?date=${product}&api_key=${NASA_API_KEY}`
+).then((res) => res.json());
+
+// const photoInfo = (await import('../../exData')).default
+
+if (photoInfo?.code >= 400) {
+  return Astro.redirect('/')
+}
+
+type PhotoInfo = {
+  title: string;
+  date: string;
+  explanation: string;
+  copyright: string;
+  url: string;
+	media_type: 'image' | 'video';
+  hdurl: string;
+}
+
+const { title, date, url } = photoInfo as PhotoInfo
+const formattedDate = (new Date(`${date}:00:00:00`)).toLocaleDateString('en-US', {
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+})
+
+const parsedUrl = new URL(Astro.request.url)
+const error = 'One of the form fields is invalid. Please try again.'
+---
+
+<Layout>
+  <main class="container">
+    <img class="image" src={url} width="960" height="960" />
+    <div>
+      <div class="heading">
+        <h1>{title}</h1>
+        <time datetime={date}>{formattedDate}</time>
+				{parsedUrl.searchParams.has('error') && 
+				<p class="error-banner">{error}</p>}
+      </div>
+      <form class="form" action="/quick-checkout" method="post">
+        <label class="label">
+          <span>Quantity</span>
+          <input class="input" type="number" name="quantity">
+        </label>
+        <label class="label">
+          <span>Print size</span>
+          <select class="input" name="size">
+            <option value="12x12">12 x 12</option>
+            <option value="24x24">24 x 24</option>
+            <option value="36x36">36 x 36</option>
+          </select>
+        </label>
+				<input hidden name="productName" value={title}>
+        <button class="add-to-cart" type="submit">Add to cart</button>
+      </form>
+    </div>
+  </main>
+</Layout>
+
+<style>
+  .container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    max-width: 1000px;
+    margin: auto;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background: hsl(var(--grey-9), 0.5);
+  }
+	.error-banner {
+		background: #FF2F57;
+		color: white;
+		padding: 0.3rem 0.8rem;
+		border-radius: 0.2rem;
+	}
+  .image {
+    width: 100%;
+    height: auto;
+  }
+  .heading {
+    margin-bottom: 2rem;
+  }
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    font-family: var(--font-heading);
+  }
+  .input {
+    padding: 0.8rem 0.5rem;
+    border: 1px solid hsl(var(--grey-8));
+    border-radius: 0.3rem;
+    color: var(--text);
+  }
+  .add-to-cart {
+    color: var(--text);
+    background: var(--gradient-primary);
+    background-size: 100% 200%;
+    transition: background-position-y 0.2s;
+    border-radius: 0.3rem;
+    color: var(--bg);
+  }
+
+  .add-to-cart:hover, .add-to-cart:focus {
+    background-position-y: 100%;
+  }
+</style>

examples/astro-star-explorer/src/pages/quick-checkout.astro

@@ -0,0 +1,84 @@
+---
+import Layout from '../components/Layout.astro'
+import parseCartRequest, { AddToCartParams } from '../utils/parseCartRequest'
+
+let atcParams: AddToCartParams
+try {
+	atcParams = await parseCartRequest(Astro.request)
+} catch {
+	return Astro.redirect(Astro.request.headers.get('referer') + '?error')
+}
+const { productName, size, quantity } = atcParams
+---
+
+<Layout>
+	<main>
+		<h1>Checkout</h1>
+		<form class="form">
+			<section class="product-details">
+				<h2>Product details</h2>
+				<ul>
+					<li>{productName}</li>
+					<li>Size: {size}</li>
+					<li>Quantity: {quantity}</li>
+				</ul>
+			</section>
+			<label class="label">
+				<span>Name</span>
+				<input class="input" name="name" placeholder="John doe">
+			</label>
+			<label class="label">
+				<span>Address</span>
+				<input class="input" name="address" placeholder="123 Moonlander Lane">
+			</label>
+			<label class="label">
+				<span>Card Number</span>
+				<input class="input" name="cardNumber" placeholder="42 4242 4242 4242">
+			</label>
+		</form>
+	</main>
+</Layout>
+
+<style>
+	main {
+		margin: auto;
+		max-width: 600px;
+	}
+	.product-details {
+		background: var(--bg);
+		padding: 0.2rem 0.7rem;
+		border-radius: 0.4rem;
+	}
+	.form {
+		display: flex;
+    flex-direction: column;
+		background: hsl(12, 17%, 100%, 50%);
+    gap: 1rem;
+		padding: 2rem 1rem;
+		border-radius: 0.5rem;
+		box-shadow: 0 4px 20px hsl(var(--grey-8));
+  }
+	ul > li {
+		margin-bottom: 0.2rem;
+	}
+  .label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    font-family: var(--font-heading);
+  }
+  .input {
+    padding: 0.8rem 0.5rem;
+    border: 1px solid hsl(var(--grey-8));
+    border-radius: 0.3rem;
+    color: var(--text);
+  }
+  .add-to-cart {
+    color: var(--text);
+    background: var(--gradient-primary);
+    background-size: 100% 200%;
+    transition: background-position-y 0.2s;
+    border-radius: 0.3rem;
+    color: var(--bg);
+  }
+</style>

examples/astro-star-explorer/src/utils/parseCartRequest.ts

@@ -0,0 +1,29 @@
+import querystring from 'querystring';
+
+export type ATCParams = {
+	productName: string;
+	quantity: number;
+	size: string;
+};
+
+export default async function parseCartRequest(request: Request): Promise<ATCParams> {
+	'quanity=1&alkdfj=sdlkf';
+	// TODO: use URL search params
+	const data = querystring.decode(await request.text());
+	console.log(data);
+
+	if (typeof data?.productName !== 'string' || typeof data?.quantity !== 'string' || typeof data?.size !== 'string') {
+		throw new Error('One of the required checkout fields was missing.');
+	}
+
+	const quantity = parseInt(data.quantity);
+	if (Number.isNaN(quantity)) {
+		throw new Error('Quantity must be a valid integer.');
+	}
+
+	return {
+		quantity,
+		productName: data.productName,
+		size: data.size,
+	};
+}

examples/astro-star-explorer/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node"
+  }
+}

examples/ssr/src/pages/login.form.js

@@ -1,4 +1,5 @@
 export function post(params, request) {
+	console.log('alskjfasd')
 	return new Response(null, {
 		status: 301,
 		headers: {

pnpm-lock.yaml

@@ -41,6 +41,21 @@ importers:
       turbo: 1.1.10
       typescript: 4.6.3
 
+  examples/astro-star-explorer:
+    specifiers:
+      '@astrojs/node': ^0.0.2
+      '@astrojs/svelte': ^0.0.2
+      '@astrojs/tailwind': ^0.0.2
+      astro: workspace:*
+      svelte: ^3.46.4
+    dependencies:
+      '@astrojs/node': link:../../packages/integrations/node
+    devDependencies:
+      '@astrojs/svelte': link:../../packages/integrations/svelte
+      '@astrojs/tailwind': link:../../packages/integrations/tailwind
+      astro: link:../../packages/astro
+      svelte: 3.46.4
+
   examples/blog:
     specifiers:
       '@astrojs/preact': ^0.0.2