build site with bun (#32)

.github/workflows/test.yml

@@ -13,11 +13,11 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Setup Node
-        uses: actions/setup-node@v4
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
         with:
-          node-version: "latest"
-      - name: Run Node install and build
+          bun-version: "latest"
+      - name: Run Bun install and build
         run: |
-          npm ci
-          npm run build
+          bun install --frozen-lockfile
+          bun run build

Dockerfile

@@ -1,12 +1,12 @@
-FROM node:alpine as node
-USER node
+FROM oven/bun:alpine as bun
+USER bun
 WORKDIR /usr/src/app
 
 COPY . .
 
-RUN ["npm", "ci"]
-RUN ["npm", "run", "build"]
+RUN ["bun", "install", "--frozen-lockfile"]
+RUN ["bun", "run", "build"]
 
 FROM ghcr.io/static-web-server/static-web-server:latest
 WORKDIR /
-COPY --from=node /usr/src/app/dist /public
+COPY --from=bun /usr/src/app/dist /public

astro.config.ts

@@ -4,11 +4,29 @@ import rehypeExternalLinks from "rehype-external-links";
 import mdx from "@astrojs/mdx";
 import tailwind from "@astrojs/tailwind";
 import icon from "astro-icon";
+import expressiveCode from "astro-expressive-code";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://troylusty.com",
-  integrations: [sitemap(), mdx(), tailwind(), icon()],
+  integrations: [
+    sitemap(),
+    expressiveCode({
+      themes: ["github-dark-default", "github-light-default"],
+      defaultProps: {
+        frame: "none",
+        wrap: true,
+      },
+      styleOverrides: {
+        frames: {
+          shadowColor: "none",
+        },
+      },
+    }),
+    mdx(),
+    tailwind(),
+    icon(),
+  ],
   output: "static",
   markdown: {
     rehypePlugins: [
@@ -19,10 +37,6 @@ export default defineConfig({
         },
       ],
     ],
-    shikiConfig: {
-      wrap: true,
-    },
-    syntaxHighlight: false,
   },
   image: {
     service: passthroughImageService(),

package.json

@@ -12,26 +12,27 @@
   },
   "dependencies": {
     "@astrojs/check": "0.9.4",
-    "@astrojs/mdx": "^4.0.3",
+    "@astrojs/mdx": "^4.0.6",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "3.2.1",
     "@astrojs/tailwind": "^5.1.4",
     "@fontsource-variable/outfit": "^5.1.1",
-    "@fontsource-variable/red-hat-mono": "^5.1.0",
+    "@fontsource-variable/red-hat-mono": "^5.1.1",
     "@fontsource/borel": "^5.1.1",
-    "astro": "^5.1.6",
-    "astro-icon": "^1.1.4",
+    "astro": "^5.1.7",
+    "astro-expressive-code": "^0.40.1",
+    "astro-icon": "^1.1.5",
     "rehype-external-links": "^3.0.0",
-    "tailwindcss": "^3.4.15",
-    "typescript": "^5.7.2"
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.3"
   },
   "devDependencies": {
-    "@iconify-json/mdi": "^1.2.1",
-    "@iconify-json/simple-icons": "^1.2.18",
-    "@tailwindcss/typography": "^0.5.15",
-    "@types/node": "^22.10.6",
-    "prettier": "^3.4.1",
+    "@iconify-json/mdi": "^1.2.2",
+    "@iconify-json/simple-icons": "^1.2.20",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/node": "^22.10.7",
+    "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.9"
+    "prettier-plugin-tailwindcss": "^0.6.10"
   }
 }

shell.nix

@@ -1,6 +1,6 @@
 {pkgs ? import <nixpkgs> {}}:
 pkgs.mkShell {
   nativeBuildInputs = with pkgs.buildPackages; [
-    nodejs
+    bun
   ];
 }

src/components/Head.astro

@@ -1,7 +1,7 @@
 ---
 import { SITE } from "@consts";
 import gradient from "../../public/assets/gradient.avif";
-import { ClientRouter } from 'astro:transitions';
+import { ClientRouter } from "astro:transitions";
 
 interface Props {
   title: string;

src/content/config.ts

@@ -1,45 +1,49 @@
 import { defineCollection, z } from "astro:content";
-import { rssSchema } from '@astrojs/rss';
+import { rssSchema } from "@astrojs/rss";
 
 const posts = defineCollection({
   type: "content",
   schema: ({ image }) =>
-    z.object({
-      title: z.string(),
-      description: z.string(),
-      date: z.coerce.date(),
-      updated: z.date().optional(),
-      draft: z.boolean().optional(),
-      image: z.object({
-        url: image(),
-        alt: z.string(),
-      }),
-      tags: z.array(z.string()),
-      extraAuthors: z.array(z.string()).optional(),
-      categories: z.array(z.string()),
-    }).merge(rssSchema)
+    z
+      .object({
+        title: z.string(),
+        description: z.string(),
+        date: z.coerce.date(),
+        updated: z.date().optional(),
+        draft: z.boolean().optional(),
+        image: z.object({
+          url: image(),
+          alt: z.string(),
+        }),
+        tags: z.array(z.string()),
+        extraAuthors: z.array(z.string()).optional(),
+        categories: z.array(z.string()),
+      })
+      .merge(rssSchema),
 });
 
 const projects = defineCollection({
   type: "content",
   schema: ({ image }) =>
-    z.object({
-      title: z.string(),
-      description: z.string(),
-      date: z.coerce.date(),
-      updated: z.date().optional(),
-      draft: z.boolean().optional(),
-      image: z.object({
-        url: image(),
-        alt: z.string(),
-      }),
-      tags: z.array(z.string()),
-      extraAuthors: z.array(z.string()).optional(),
-      categories: z.array(z.string()),
-      featured: z.boolean().optional(),
-      collection: z.boolean().optional(),
-      includeHero: z.boolean().optional(),
-    }).merge(rssSchema)
+    z
+      .object({
+        title: z.string(),
+        description: z.string(),
+        date: z.coerce.date(),
+        updated: z.date().optional(),
+        draft: z.boolean().optional(),
+        image: z.object({
+          url: image(),
+          alt: z.string(),
+        }),
+        tags: z.array(z.string()),
+        extraAuthors: z.array(z.string()).optional(),
+        categories: z.array(z.string()),
+        featured: z.boolean().optional(),
+        collection: z.boolean().optional(),
+        includeHero: z.boolean().optional(),
+      })
+      .merge(rssSchema),
 });
 
 const work = defineCollection({

src/content/projects/packard/index.mdx

@@ -24,9 +24,9 @@ On NixOS you can install Packard by including it as an input in flake.nix, then
 inputs = {
     packard.url = "github:troylusty/packard";
 };
-```
 
-```nix
+...
+
 environment.systemPackages = {
     inputs.packard.packages."${pkgs.system}".default
 };

src/layouts/Layout.astro

@@ -17,7 +17,7 @@ const { title, description, image, date, updated, tags } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="en" class="scroll-smooth antialiased">
+<html lang="en" class="scroll-smooth antialiased" transition:animate="none">
   <Head
     title={title}
     description={description}
@@ -30,7 +30,10 @@ const { title, description, image, date, updated, tags } = Astro.props;
     class="flex min-h-screen flex-col justify-start bg-primary p-8 pt-0 text-secondary md:pt-8"
   >
     <Header />
-    <main class="mx-auto w-full max-w-prose space-y-6">
+    <main
+      class="mx-auto w-full max-w-prose space-y-6"
+      transition:animate="fade"
+    >
       <slot />
     </main>
     <Footer />

src/styles/global.css

@@ -23,6 +23,18 @@
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  .astro-code,
+  .astro-code span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}
+
 @layer components {
   .prose img {
     @apply cursor-pointer transition-transform hover:scale-[98%] active:scale-[200%];