Skip to content

Commit ee80f9f

Browse files
pedrobarcopedrobarco
authored
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[email protected]/lc is a directory; dependency checking of directories is unsound ```
1 parent a75b789 commit ee80f9f

18 files changed

+3181
-171
lines changed

‎frontend/.bazelignore

+1
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ react/node_modules
55
react-webpack/node_modules
66
vue/node_modules
77
vue/libraries/simple/node_modules
8+
astro/node_modules

‎frontend/astro/.gitignore

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# build output
2+
dist/
3+
4+
# generated types
5+
.astro/
6+
7+
# dependencies
8+
node_modules/
9+
10+
# logs
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# environment variables
17+
.env
18+
.env.production
19+
20+
# macOS-specific files
21+
.DS_Store

‎frontend/astro/.vscode/extensions.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"recommendations": ["astro-build.astro-vscode"],
3+
"unwantedRecommendations": []
4+
}

‎frontend/astro/.vscode/launch.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"command": "./node_modules/.bin/astro dev",
6+
"name": "Development server",
7+
"request": "launch",
8+
"type": "node-terminal"
9+
}
10+
]
11+
}

‎frontend/astro/BUILD.bazel

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
load("@aspect_rules_js//js:defs.bzl", "js_run_binary", "js_run_devserver")
2+
load("@npm//:defs.bzl", "npm_link_all_packages")
3+
load("@npm//astro:astro/package_json.bzl", "bin")
4+
5+
npm_link_all_packages()
6+
7+
SRCS = [
8+
"package.json",
9+
"tsconfig.json",
10+
"astro.config.mjs",
11+
"//astro/src",
12+
"//astro/public",
13+
]
14+
15+
BUILD_DEPS = [":node_modules/" + d for d in [
16+
"astro",
17+
]]
18+
19+
bin.astro_binary(
20+
name = "astro",
21+
chdir = package_name(),
22+
# prevents modifying the host machine filesystem
23+
env = {
24+
"ASTRO_TELEMETRY_DISABLED": "1",
25+
},
26+
)
27+
28+
js_run_devserver(
29+
name = "dev",
30+
args = ["dev"],
31+
data = SRCS + BUILD_DEPS,
32+
tool = ":astro",
33+
)
34+
35+
js_run_binary(
36+
name = "build",
37+
srcs = SRCS + BUILD_DEPS,
38+
args = ["build"],
39+
mnemonic = "AstroBuild",
40+
out_dirs = ["dist"],
41+
tool = ":astro",
42+
)
43+
44+
bin.astro_binary(
45+
name = "preview",
46+
args = ["preview"],
47+
chdir = package_name(),
48+
data = [":build"],
49+
# prevents modifying the host machine filesystem
50+
env = {
51+
"ASTRO_TELEMETRY_DISABLED": "1",
52+
},
53+
)

‎frontend/astro/README.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Astro Starter Kit: Basics
2+
3+
Created by running `npm create astro@latest` following
4+
https://docs.astro.build/en/install/auto/
5+
6+
## 🚀 Project Structure
7+
8+
Inside of your Astro project, you'll see the following folders and files:
9+
10+
```text
11+
/
12+
├── public/
13+
│ └── favicon.svg
14+
├── src/
15+
│ ├── components/
16+
│ │ └── Card.astro
17+
│ ├── layouts/
18+
│ │ └── Layout.astro
19+
│ └── pages/
20+
│ └── index.astro
21+
└── package.json
22+
```
23+
24+
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
25+
26+
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
27+
28+
Any static assets, like images, can be placed in the `public/` directory.
29+
30+
## 🧞 Commands
31+
32+
All commands are run from the root of the project, from a terminal:
33+
34+
| Command | Action |
35+
| :---------------- | :------------------------------------------- |
36+
| `npm run dev` | Starts local dev server at `localhost:4321` |
37+
| `npm run build` | Build your production site to `./dist/` |
38+
| `npm run preview` | Preview your build locally, before deploying |

‎frontend/astro/astro.config.mjs

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { defineConfig } from "astro/config";
2+
3+
// https://astro.build/config
4+
export default defineConfig({
5+
vite: {
6+
server: {
7+
fs: {
8+
// allows loading astro dev toolbar even if outside of vite serving allow list
9+
strict: import.meta.env.PROD,
10+
},
11+
},
12+
},
13+
});

‎frontend/astro/package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "astro",
3+
"type": "module",
4+
"version": "0.0.1",
5+
"scripts": {
6+
"dev": "ibazel run dev",
7+
"build": "bazel build build",
8+
"preview": "bazel run preview"
9+
},
10+
"dependencies": {
11+
"@astrojs/check": "^0.5.6",
12+
"astro": "^4.4.15",
13+
"typescript": "^5.4.2"
14+
},
15+
"devDependencies": {
16+
"@bazel/ibazel": "0.16.2"
17+
}
18+
}

‎frontend/astro/public/BUILD.bazel

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
2+
3+
copy_to_bin(
4+
name = "public",
5+
srcs = glob(["**"]),
6+
visibility = ["//astro:__pkg__"],
7+
)

‎frontend/astro/public/favicon.svg

+9
Loading

‎frontend/astro/src/BUILD.bazel

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
2+
3+
copy_to_bin(
4+
name = "src",
5+
srcs = glob([
6+
"**/*.astro",
7+
]) + [
8+
"env.d.ts",
9+
],
10+
visibility = ["//astro:__pkg__"],
11+
)

‎frontend/astro/src/components/Card.astro

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
interface Props {
3+
title: string;
4+
body: string;
5+
href: string;
6+
}
7+
8+
const { href, title, body } = Astro.props;
9+
---
10+
11+
<li class="link-card">
12+
<a href={href}>
13+
<h2>
14+
{title}
15+
<span>&rarr;</span>
16+
</h2>
17+
<p>
18+
{body}
19+
</p>
20+
</a>
21+
</li>
22+
<style>
23+
.link-card {
24+
list-style: none;
25+
display: flex;
26+
padding: 1px;
27+
background-color: #23262d;
28+
background-image: none;
29+
background-size: 400%;
30+
border-radius: 7px;
31+
background-position: 100%;
32+
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
33+
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
34+
}
35+
.link-card > a {
36+
width: 100%;
37+
text-decoration: none;
38+
line-height: 1.4;
39+
padding: calc(1.5rem - 1px);
40+
border-radius: 8px;
41+
color: white;
42+
background-color: #23262d;
43+
opacity: 0.8;
44+
}
45+
h2 {
46+
margin: 0;
47+
font-size: 1.25rem;
48+
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
49+
}
50+
p {
51+
margin-top: 0.5rem;
52+
margin-bottom: 0;
53+
}
54+
.link-card:is(:hover, :focus-within) {
55+
background-position: 0;
56+
background-image: var(--accent-gradient);
57+
}
58+
.link-card:is(:hover, :focus-within) h2 {
59+
color: rgb(var(--accent-light));
60+
}
61+
</style>

‎frontend/astro/src/env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="astro/client" />

‎frontend/astro/src/layouts/Layout.astro

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
interface Props {
3+
title: string;
4+
}
5+
6+
const { title } = Astro.props;
7+
---
8+
9+
<!doctype html>
10+
<html lang="en">
11+
<head>
12+
<meta charset="UTF-8" />
13+
<meta name="description" content="Astro description" />
14+
<meta name="viewport" content="width=device-width" />
15+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
16+
<meta name="generator" content={Astro.generator} />
17+
<title>{title}</title>
18+
</head>
19+
<body>
20+
<slot />
21+
</body>
22+
</html>
23+
<style is:global>
24+
:root {
25+
--accent: 136, 58, 234;
26+
--accent-light: 224, 204, 250;
27+
--accent-dark: 49, 10, 101;
28+
--accent-gradient: linear-gradient(
29+
45deg,
30+
rgb(var(--accent)),
31+
rgb(var(--accent-light)) 30%,
32+
white 60%
33+
);
34+
}
35+
html {
36+
font-family: system-ui, sans-serif;
37+
background: #13151a;
38+
background-size: 224px;
39+
}
40+
code {
41+
font-family:
42+
Menlo,
43+
Monaco,
44+
Lucida Console,
45+
Liberation Mono,
46+
DejaVu Sans Mono,
47+
Bitstream Vera Sans Mono,
48+
Courier New,
49+
monospace;
50+
}
51+
</style>

0 commit comments

Comments
 (0)