feat: add astro example (#419)

I've originally created [this
](https://github.com/pedrobarco/astro-bazel) repo to test it and shared
it in slack but @alexeagle made me do this 😎

Let me know if there's anything you'd like to see in this particular
example.

I still need to understand how to fix the following warning:
```sh
WARNING: <repo>/examples/frontend/BUILD.bazel:10:22: input 'package' to //:.aspect_rules_js/node_modules/@swc+core@1.3.100/lc is a directory; dependency checking of directories is unsound
```

frontend/.bazelignore

@@ -5,3 +5,4 @@ react/node_modules
 react-webpack/node_modules
 vue/node_modules
 vue/libraries/simple/node_modules
+astro/node_modules

frontend/astro/.gitignore

@@ -0,0 +1,21 @@
+# 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

frontend/astro/.vscode/extensions.json

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

frontend/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"
+    }
+  ]
+}

frontend/astro/BUILD.bazel

@@ -0,0 +1,53 @@
+load("@aspect_rules_js//js:defs.bzl", "js_run_binary", "js_run_devserver")
+load("@npm//:defs.bzl", "npm_link_all_packages")
+load("@npm//astro:astro/package_json.bzl", "bin")
+
+npm_link_all_packages()
+
+SRCS = [
+    "package.json",
+    "tsconfig.json",
+    "astro.config.mjs",
+    "//astro/src",
+    "//astro/public",
+]
+
+BUILD_DEPS = [":node_modules/" + d for d in [
+    "astro",
+]]
+
+bin.astro_binary(
+    name = "astro",
+    chdir = package_name(),
+    # prevents modifying the host machine filesystem
+    env = {
+        "ASTRO_TELEMETRY_DISABLED": "1",
+    },
+)
+
+js_run_devserver(
+    name = "dev",
+    args = ["dev"],
+    data = SRCS + BUILD_DEPS,
+    tool = ":astro",
+)
+
+js_run_binary(
+    name = "build",
+    srcs = SRCS + BUILD_DEPS,
+    args = ["build"],
+    mnemonic = "AstroBuild",
+    out_dirs = ["dist"],
+    tool = ":astro",
+)
+
+bin.astro_binary(
+    name = "preview",
+    args = ["preview"],
+    chdir = package_name(),
+    data = [":build"],
+    # prevents modifying the host machine filesystem
+    env = {
+        "ASTRO_TELEMETRY_DISABLED": "1",
+    },
+)

frontend/astro/README.md

@@ -0,0 +1,38 @@
+# Astro Starter Kit: Basics
+
+Created by running `npm create astro@latest` following
+https://docs.astro.build/en/install/auto/
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── 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 run dev`     | Starts local dev server at `localhost:4321`  |
+| `npm run build`   | Build your production site to `./dist/`      |
+| `npm run preview` | Preview your build locally, before deploying |

frontend/astro/astro.config.mjs

@@ -0,0 +1,13 @@
+import { defineConfig } from "astro/config";
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    server: {
+      fs: {
+        // allows loading astro dev toolbar even if outside of vite serving allow list
+        strict: import.meta.env.PROD,
+      },
+    },
+  },
+});

frontend/astro/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "astro",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "ibazel run dev",
+    "build": "bazel build build",
+    "preview": "bazel run preview"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.5.6",
+    "astro": "^4.4.15",
+    "typescript": "^5.4.2"
+  },
+  "devDependencies": {
+    "@bazel/ibazel": "0.16.2"
+  }
+}

frontend/astro/public/BUILD.bazel

@@ -0,0 +1,7 @@
+load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
+
+copy_to_bin(
+    name = "public",
+    srcs = glob(["**"]),
+    visibility = ["//astro:__pkg__"],
+)

frontend/astro/src/BUILD.bazel

@@ -0,0 +1,11 @@
+load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
+
+copy_to_bin(
+    name = "src",
+    srcs = glob([
+        "**/*.astro",
+    ]) + [
+        "env.d.ts",
+    ],
+    visibility = ["//astro:__pkg__"],
+)

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

frontend/astro/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

frontend/astro/src/layouts/Layout.astro

@@ -0,0 +1,51 @@
+---
+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;
+		background-size: 224px;
+	}
+	code {
+		font-family:
+			Menlo,
+			Monaco,
+			Lucida Console,
+			Liberation Mono,
+			DejaVu Sans Mono,
+			Bitstream Vera Sans Mono,
+			Courier New,
+			monospace;
+	}
+</style>