Astro Integration

examples/astro/.env.example

@@ -0,0 +1 @@
+QSTASH_TOKEN=""

examples/astro/.gitignore

@@ -0,0 +1,25 @@
+# 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/
+.vercel

examples/astro/.vscode/extensions.json

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

examples/astro/.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/README.md

@@ -0,0 +1,49 @@
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fupstash%2Fqstash-js%2Ftree%2Fmain%2Fexamples%2Fworkflow%2Fastro&env=QSTASH_TOKEN&envDescription=You%20can%20access%20this%20variable%20from%20Upstash%20Console%2C%20under%20QStash%20page.%20&project-name=qstash-workflow-astro&repository-name=qstash-workflow-astro&demo-title=Upstash%20QStash%20Workflow%20Example&demo-description=A%20Astro%20application%20utilizing%20QStash%20Workflows)
+
+# Upstash Workflow Astro Example
+
+This is an example of how to use Upstash Workflow with Astro. You can learn more in [Upstash Workflow quickstart documentation](https://upstash.com/docs/workflow/quickstarts/platforms).
+
+
+## Development
+
+> [!TIP]
+> You can use [the `bootstrap.sh` script](https://github.com/upstash/qstash-js/tree/main/examples/workflow) to run this example with a local tunnel.
+>
+> Simply set the environment variables as explained below and run the following command in the `qstash-js/examples/workflow` directory:
+>
+> ```
+> bash bootstrap.sh astro
+> ```
+
+1. Install the dependencies
+
+```bash
+npm install
+```
+
+1. Get the credentials from the [Upstash Console](https://console.upstash.com/qstash) and add them to the `.env` file.
+
+```bash
+QSTASH_TOKEN=
+```
+
+3. Open a local tunnel to port of the development server
+
+```bash
+ngrok http 3001
+```
+
+Also, set the `UPSTASH_WORKLFOW_URL` environment variable to the public url provided by ngrok.
+
+4. Run the development server
+
+```bash
+npm run dev
+```
+
+5. Send a `POST` request to the endpoint.
+
+```bash
+curl -X POST "http://localhost:3001/api/demo-workflow" -d '{"url": "test.com"}'
+```

examples/astro/astro.config.mjs

@@ -0,0 +1,10 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import vercel from '@astrojs/vercel/serverless';
+
+// https://astro.build/config
+export default defineConfig({
+  output: "server",
+  adapter: vercel(),
+  server: { port: 3001 }
+});

examples/astro/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "workflow-astro",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/vercel": "^7.8.2",
+    "@upstash/workflow": "0.1.2-canary-astro",
+    "astro": "^4.16.7",
+    "typescript": "^5.6.3"
+  },
+  "devDependencies": {
+    "@types/node": "^22.8.7"
+  }
+}

examples/astro/src/components/Card.astro

@@ -0,0 +1,61 @@
+---
+interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 1px;
+		background-color: #23262d;
+		background-image: none;
+		background-size: 400%;
+		border-radius: 7px;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+	}
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: calc(1.5rem - 1px);
+		border-radius: 8px;
+		color: white;
+		background-color: #23262d;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+		background-image: var(--accent-gradient);
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent-light));
+	}
+</style>

examples/astro/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference path="../.astro/types.d.ts" />
+interface ImportMetaEnv {
+	readonly QSTASH_TOKEN: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}

examples/astro/src/layouts/Layout.astro

@@ -0,0 +1,50 @@
+---
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	:root {
+		--accent: 136, 58, 234;
+		--accent-light: 224, 204, 250;
+		--accent-dark: 49, 10, 101;
+		--accent-gradient: linear-gradient(
+			45deg,
+			rgb(var(--accent)),
+			rgb(var(--accent-light)) 30%,
+			white 60%
+		);
+	}
+	html {
+		font-family: system-ui, sans-serif;
+		background: #13151a;
+	}
+	code {
+		font-family:
+			Menlo,
+			Monaco,
+			Lucida Console,
+			Liberation Mono,
+			DejaVu Sans Mono,
+			Bitstream Vera Sans Mono,
+			Courier New,
+			monospace;
+	}
+</style>

examples/astro/src/pages/api/demo-workflow.ts

@@ -0,0 +1,27 @@
+import { serve } from "@upstash/workflow/astro";
+
+const someWork = (input: string) => {
+  return `processed '${JSON.stringify(input)}'`
+}
+
+export const { POST } = serve<{ url: string }>(async (context) => {
+  const input = context.requestPayload.url
+  const result1 = await context.run('step1', async () => {
+    const output = someWork(input)
+    console.log('step 1 input', input, 'output', output)
+    return output
+  })
+
+  await context.run('step2', async () => {
+    const output = someWork(result1)
+    console.log('step 2 input', result1, 'output', output)
+  })
+}, {
+  // env must be passed in astro.
+  // for local dev, we need import.meta.env.
+  // For deployment, we need process.env:
+  env: {
+    ...process.env,
+    ...import.meta.env
+  }
+})