Also bundle css with bun so it busts caches

And updates the `build.rs` script so that it also builds a manifest.txt
for css files.

.gitignore

@@ -1,6 +1,6 @@
 /target
 /logs
 .env
-/static/js/**.js
+/static/js/*
-/static/js/js_bundles.txt
+/static/css/*
 .frontend-built

build.rs

@@ -2,19 +2,21 @@ use std::env;
 use std::fs;
 use std::path::Path;
 
-fn main() {
+fn write_bundle_manifest(asset_type: &str) {
-    println!("cargo:rerun-if-changed=migrations");
-    println!("cargo:rerun-if-changed=.frontend-built");
-
     let root_dir = env::var("CARGO_MANIFEST_DIR").unwrap();
     let root_dir = Path::new(&root_dir);
-    let dir = root_dir.join("static/js");
+    let dir = root_dir.join(format!("static/{}", asset_type));
 
     let entries = fs::read_dir(&dir).unwrap();
 
-    let js_bundles: Vec<String> = entries
+    let bundles: Vec<String> = entries
         .filter_map(Result::ok)
-        .filter(|entry| entry.file_name().to_string_lossy().ends_with(".js"))
+        .filter(|entry| {
+            entry
+                .file_name()
+                .to_string_lossy()
+                .ends_with(&format!(".{}", asset_type))
+        })
         .map(|entry| {
             Path::new("/")
                 .join(entry.path().strip_prefix(root_dir).unwrap())
@@ -23,5 +25,13 @@ fn main() {
         })
         .collect();
 
-    fs::write(dir.join("js_bundles.txt"), js_bundles.join("\n")).unwrap();
+    fs::write(dir.join("manifest.txt"), bundles.join("\n")).unwrap();
+}
+
+fn main() {
+    println!("cargo:rerun-if-changed=migrations");
+    println!("cargo:rerun-if-changed=.frontend-built");
+
+    write_bundle_manifest("js");
+    write_bundle_manifest("css");
 }

frontend/css/styles.css

@@ -70,3 +70,10 @@ article span.published {
   font-size: 16px;
   line-height: 1.2em;
 }
+
+article img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+}

frontend/js/index.ts

@@ -2,5 +2,8 @@ import { Application } from "@hotwired/stimulus";
 
 import LocalTimeController from "./local_time_controller";
 
+// import CSS so it gets named with a content hash that busts caches
+import "../css/styles.css";
+
 window.Stimulus = Application.start();
 window.Stimulus.register("local-time", LocalTimeController);

frontend/js/local_time_controller.ts

@@ -12,7 +12,11 @@ export default class extends Controller {
 
   get localTimeString(): string {
     if (this.utcTime) {
-      return this.utcTime.toLocaleDateString();
+      return this.utcTime.toLocaleDateString(window.navigator.language, {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
     }
     return "Unknown datetime"
   }

frontend/package.json

@@ -3,7 +3,7 @@
     "@hotwired/stimulus": "^3.2.1"
   },
   "name": "crawlnicle-frontend",
-  "module": "hello_controller.ts",
+  "module": "js/index.ts",
   "type": "module",
   "devDependencies": {
     "bun-types": "^0.6.0"

justfile

@@ -7,18 +7,22 @@ install-frontend:
   bun install --cwd frontend
 
 clean-frontend:
-  rm -rf ./static/js/*
+  rm -rf ./static/js/* ./static/css/*
 
 build-frontend: clean-frontend
-  bun build frontend/index.ts \
+  bun build frontend/js/index.ts \
-    --outdir ./static/js \
+    --outdir ./static \
-    --entry-naming [name]-[hash].[ext] \
+    --root ./frontend \
+    --entry-naming [dir]/[name]-[hash].[ext] \
+    --asset-naming [dir]/[name]-[hash].[ext] \
     --minify
 
 build-dev-frontend: clean-frontend
-  bun build frontend/index.ts \
+  bun build frontend/js/index.ts \
-    --outdir ./static/js \
+    --outdir ./static \
-    --entry-naming [name]-[hash].[ext]
+    --root ./frontend \
+    --entry-naming [dir]/[name]-[hash].[ext] \
+    --asset-naming [dir]/[name]-[hash].[ext]
   touch .frontend-built # triggers watch-backend since static/* is ignored
 
 watch-frontend: install-frontend

src/lib.rs

@@ -9,4 +9,5 @@ pub mod state;
 pub mod utils;
 pub mod uuid;
 
-pub const JS_BUNDLES: &'static str = include_str!("../static/js/js_bundles.txt");
+pub const JS_BUNDLES: &str = include_str!("../static/js/manifest.txt");
+pub const CSS_BUNDLES: &str = include_str!("../static/css/manifest.txt");

src/partials/layout.rs

@@ -6,7 +6,7 @@ use axum::{
 };
 use maud::{html, Markup, DOCTYPE};
 
-use crate::JS_BUNDLES;
+use crate::{JS_BUNDLES, CSS_BUNDLES};
 use crate::config::Config;
 use crate::partials::header::header;
 
@@ -46,7 +46,9 @@ impl Layout {
                     @for js_bundle in JS_BUNDLES.lines() {
                         script type="module" src=(js_bundle) {}
                     }
-                    link rel="stylesheet" href="/static/styles.css";
+                    @for css_bundle in CSS_BUNDLES.lines() {
+                        link rel="stylesheet" href=(css_bundle) {}
+                    }
                 }
                 body {
                     (header(&self.title))