Merge branch 'main' into slx-autocomplete

buildall.sh

@@ -1,14 +1,21 @@
-echo "\n--- Bun Install"
-bun i
+#!/bin/bash
 
-echo "\n--- Build Components"
-bun run build:components
+run() {
+    echo -e "\n--- $1"
+    $2
+    if [ $? -ne 0 ]; then
+        echo "$1 failed."
+        exit 1
+    fi
+}
 
-echo "\n--- Build TypeScript"
-bun run build:ts
-
-echo "\n--- Build CSS"
-bun run build:css
-
-echo "\n--- Generate Templ Templates"
-templ generate
+run "Bun Install"\
+    "bun i"
+run "Build Components"\
+    "bun run build:components"
+run "Build TypeScript"\
+    "bun run build:ts"
+run "Build CSS"\
+    "bun run build:css"
+run "Generate Templ Templates"\
+    "templ generate"

dev.sh

@@ -5,17 +5,13 @@ if [ ! -d "node_modules" ]; then
   bun i
 fi
 
-echo "\n--- Build Components"
-bun run build:components
-
-echo "\n--- Build TypeScript"
-bun run build:ts
-
-echo "\n--- Build CSS"
-bun run build:css
+./buildall.sh
+if [ $? -ne 0 ]; then
+    echo "building generated files failed"
+    exit 1
+fi
 
-echo "\n--- Generate Templ Templates"
-templ generate
+clear
 
 # DEV="true" sets the env var to enable development mode in the app server.
 DEV="true" go run github.com/romshark/templier

prodrun.sh

@@ -0,0 +1,38 @@
+#!/bin/sh
+
+# This helper script runs the server in production mode.
+
+if ! grep -q "^127\.0\.0\.1[[:space:]]\+islands\.demo" /etc/hosts; then
+    echo 'Please add "127.0.0.1 islands.demo" to your hosts file (usually /etc/hosts)'
+    exit 1
+fi
+
+./buildall.sh
+if [ $? -ne 0 ]; then
+    echo "building generated files failed"
+    exit 1
+fi
+
+mkcert -install
+mkcert islands.demo
+
+# Create a temporary executable file
+TEMP_BIN=$(mktemp)
+
+# Compile the server
+go build -o "$TEMP_BIN" ./cmd/server
+if [ $? -ne 0 ]; then
+    echo "Compilation failed."
+    exit 1
+fi
+
+# Run the server
+sudo TLS_CERT="islands.demo.pem" TLS_KEY="islands.demo-key.pem" \
+    $TEMP_BIN -compress -host islands.demo:443
+RUN_EXIT_CODE=$?
+
+# Clean up the temp executable
+rm -f "$TEMP_BIN"
+
+# Exit with the same status code as the server
+exit $RUN_EXIT_CODE

server/input.ts

@@ -11,7 +11,6 @@ declare global {
 }
 
 interface App {
-  testValue: string;
   theme: Theme | null;
   themeLinkEl: HTMLLinkElement | null;
   init(): void;
@@ -70,18 +69,6 @@ document.addEventListener("htmx:afterRequest", function (event) {
   }
 });
 
-{
-  // Reveal <sl-option> elements once the page is loaded or
-  // parts of the page are reloaded to avoid CLS (cumulative layout shift).
-  function slOptionsReveal() {
-    document
-      .querySelectorAll("sl-option")
-      .forEach((o) => o.classList.add("visible"));
-  }
-  window.addEventListener("load", slOptionsReveal);
-  document.addEventListener("htmx:afterSwap", slOptionsReveal);
-}
-
 enum Theme {
   Light = "light",
   Dark = "dark",
@@ -138,7 +125,6 @@ function getCookieTheme(): Theme | null {
 document.addEventListener("DOMContentLoaded", () => {
   document.addEventListener("alpine:init", () => {
     Alpine.data("app", () => ({
-      testValue: "dark",
       theme: null as Theme | null,
       themeLinkEl: null as HTMLLinkElement | null,
 
@@ -147,20 +133,6 @@ document.addEventListener("DOMContentLoaded", () => {
         this.themeLinkEl = document.getElementById(
           "stylesheet-shoelace-theme"
         ) as HTMLLinkElement;
-        switch (this.theme) {
-          case Theme.Light: {
-            this.$refs.themeSelect.setAttribute("value", "light");
-            break;
-          }
-          case Theme.Dark: {
-            this.$refs.themeSelect.setAttribute("value", "dark");
-            break;
-          }
-          default: {
-            this.$refs.themeSelect.setAttribute("value", "");
-            break;
-          }
-        }
 
         // Watch for changes to the system preference.
         window

server/input.tw.css

@@ -2,17 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* to avoid CLS (cumulative layout shift) on page load the "visible"
-class will be added on `window.load` and `htmx:afterSwap` events. */
-
-sl-option {
-  display: none;
-}
-
-sl-option.visible {
-  display: block;
-}
-
 /*--- HTMX loading indicator ---*/
 
 .hx-loading {
@@ -101,6 +90,18 @@ sl-option.visible {
   --skeleton-accent-color: #3b3b3b;
 }
 
+.hide-until-loaded:has(:not(*:defined)) * {
+  /* Avoid displaying contents behind this wrapper before they're initialized.
+  This prevents HTML content from flashing before they get hidden by the dynamic
+  JS container components. */
+  display: none;
+}
+
+.hide-until-loaded.skeleton:has(:not(*:defined))::before {
+  /* Once the dynamic JS components are initialized their contents may display again. */
+  display: block;
+}
+
 .skeleton {
   position: relative;
 }