integrate parallax into index and tidy up

more dev work
2026-07-11 11:06:38 -07:00 · 2026-07-11 11:06:10 -07:00
14 changed files with 294 additions and 236 deletions
--- a/2
+++ b/2
@ -33,6 +33,8 @@ COPY --from=install /temp/prod/node_modules node_modules
 COPY --from=prerelease /usr/src/app/dist ./dist
 COPY --from=prerelease /usr/src/app/package.json ./

+ENV HOST=0.0.0.0
+
 USER node
 EXPOSE 4321
 ENTRYPOINT ["node", "./dist/server/entry.mjs"]
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -10,11 +10,12 @@ export default defineConfig({
  site: "https://badblocks.dev",
  trailingSlash: "never",
  // bun adapter is not official, also a little wonky, so use node adapter for now
-  adapter: node({
-    mode: "standalone",
-  }),
  // adapter: bun(),
  // output: "static",
+  adapter: node({
+    mode: "standalone",
+    staticHeaders: true,
+  }),
  compressHTML: false,
  devToolbar: { enabled: false },
  prefetch: {
@ -29,7 +30,6 @@ export default defineConfig({
    }),
  },
  server: {
-    host: true,
    port: 4321,
  },
  env: {
@ -57,7 +57,4 @@ export default defineConfig({
    },
  },
  integrations: [alpinejs(), sitemap()],
-  experimental: {
-    chromeDevtoolsWorkspace: true,
-  },
 });
--- a/compose.yaml
+++ b/compose.yaml
@ -6,12 +6,12 @@ services:
    volumes:
      - ./db:/db
    environment:
-      ANDROID_SMS_GATEWAY_IP: ${ANDROID_SMS_GATEWAY_IP:-192.168.0.1}
-      ANDROID_SMS_GATEWAY_URL: ${ANDROID_SMS_GATEWAY_URL:-http://192.168.0.1:8080}
-      ANDROID_SMS_GATEWAY_LOGIN: ${ANDROID_SMS_GATEWAY_LOGIN:-sms}
-      ANDROID_SMS_GATEWAY_PASSWORD: ${ANDROID_SMS_GATEWAY_PASSWORD:-super-secret-password}
-      ANDROID_SMS_GATEWAY_RECIPIENT_PHONE: ${ANDROID_SMS_GATEWAY_RECIPIENT_PHONE:-555-555-1234}
-      OTP_SUPER_SECRET_SALT: ${OTP_SUPER_SECRET_SALT:-super-secret-salt}
+      ANDROID_SMS_GATEWAY_IP: ${ANDROID_SMS_GATEWAY_IP:?ANDROID_SMS_GATEWAY_IP is required}
+      ANDROID_SMS_GATEWAY_URL: ${ANDROID_SMS_GATEWAY_URL:? ANDROID_SMS_GATEWAY_URL is required}
+      ANDROID_SMS_GATEWAY_LOGIN: ${ANDROID_SMS_GATEWAY_LOGIN:? ANDROID_SMS_GATEWAY_LOGIN is required}
+      ANDROID_SMS_GATEWAY_PASSWORD: ${ANDROID_SMS_GATEWAY_PASSWORD:?ANDROID_SMS_GATEWAY_PASSWORD is required}
+      ANDROID_SMS_GATEWAY_RECIPIENT_PHONE: ${ANDROID_SMS_GATEWAY_RECIPIENT_PHONE:? ANDROID_SMS_GATEWAY_RECIPIENT_PHONE is required}
+      OTP_SUPER_SECRET_SALT: ${OTP_SUPER_SECRET_SALT:?OTP_SUPER_SECRET_SALT is required}
    healthcheck:
      test:
        [
--- a/package.json
+++ b/package.json
@ -29,6 +29,7 @@
    "iconify-icon": "^3.0.2",
    "ofetch": "^1.5.1",
    "otplib": "12.0.1",
+    "thirty-two": "^1.0.2",
    "typescript": "^6.0.3",
    "validator": "^13.15.35"
  },
--- a/public/theme.css
+++ b/public/theme.css
@ -42,12 +42,12 @@ body {
    var(--color-accent-transparent),
    black 120%
  );
+  background-attachment: fixed;
  color: var(--color-fg);
  column-gap: var(--gutter-large);
  display: grid;
  font-size: var(--pt-pica);
  grid-template-rows: auto 1fr auto;
-  height: 100dvb;
  left: 0;
  overflow-x: hidden;
  padding-inline: var(--page-padding-inline);
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -1,19 +1,31 @@
 <!doctype html>
-<!--prettier-ignore-->
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preload" href="/unscii-16.woff" as="font" crossorigin="anonymous" />
+    <link
+      rel="preload"
+      href="/unscii-16.woff"
+      as="font"
+      crossorigin="anonymous"
+    />
    <link rel="preload" href="reset.css" as="style" />
    <link rel="preload" href="theme.css" as="style" />
    <link rel="stylesheet" type="text/css" href="/style.css" />
-    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100px' height='100px'><rect x='0' y='0' width='100' height='100' rx='15' ry='15' style='fill: rgb(0,0,0);'/><foreignObject width='100' height='100'><div xmlns='http://www.w3.org/1999/xhtml' style='width:100px;height:100px;line-height:100px;text-align:center;vertical-align:middle;color:transparent;text-shadow: 0 0 rgb(0 255 0);font-size:80px;'>👾</div></foreignObject></svg>"/>
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100px' height='100px'><rect x='0' y='0' width='100' height='100' rx='15' ry='15' style='fill: rgb(0,0,0);'/><foreignObject width='100' height='100'><div xmlns='http://www.w3.org/1999/xhtml' style='width:100px;height:100px;line-height:100px;text-align:center;vertical-align:middle;color:transparent;text-shadow: 0 0 rgb(0 255 0);font-size:80px;'>👾</div></foreignObject></svg>"
+    />
    <meta name="generator" content={Astro.generator} />
    <meta name="darkreader-lock" />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <script is:inline src="/htmz.js"></script>
-    <script is:inline async src="/goat.js" data-goatcounter="https://badblocks.goatcounter.com/count"></script>
+    <script
+      is:inline
+      async
+      src="/goat.js"
+      data-goatcounter="https://badblocks.goatcounter.com/count"></script>
    <slot name="head" />
  </head>
  <body>
@ -34,9 +46,16 @@
    <footer>
      <p>
        <a href="/license">
-            <img src="/mit.svg" title="MIT Licensed" alt="MIT License Logo" width="24" height="24" role="img">
+          <img
+            src="/mit.svg"
+            title="MIT Licensed"
+            alt="MIT License Logo"
+            width="24"
+            height="24"
+            role="img"
+          />
        </a>
-        <br>
+        <br />
        Made from scratch with BAHz: Bun, Astro, and Htmz!
      </p>
    </footer>
--- a/src/lib/Otp.ts
+++ b/src/lib/Otp.ts
@ -1,5 +1,6 @@
 import { authenticator } from "otplib";
-import { createHash } from "crypto";
+import { createHmac } from "crypto";
+import base32 from "thirty-two";

 const submissionTimestamps = new Map<string, number[]>();
 const otpRequestTimestamps = new Map<string, number[]>();
@ -52,9 +53,9 @@ function getUserSecret(phoneNumber: string, salt: string): string {
      "Phone number and salt are required to generate a user secret.",
    );
  }
-  return createHash("sha256")
-    .update(phoneNumber + salt)
-    .digest("hex");
+
+  const digest = createHmac("sha256", salt).update(phoneNumber).digest("hex");
+  return base32.encode(digest).toString().replace(/=/g, "");
 }

 export function normalizePhone(phone: string) {
--- a/src/pages/ai.astro
+++ b/src/pages/ai.astro
@ -1,8 +0,0 @@
---
-import Layout from "@layouts/BaseLayout.astro";
---
-
-<Layout>
-  <title slot="head">AI Policy</title>
-  <Fragment slot="main"> </Fragment>
-</Layout>
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@ -157,7 +157,12 @@ const msgValue = pickValue("msg") || (await Astro.session?.get("msg"));
                {result?.error.message}
                Please correct any errors and try again.
              </p>
-            )) || <p>Use this form to shoot me a quick text!</p>}
+            )) || (
+              <p>
+                Inquiries, opportunities, or comments? Shoot me a quick text
+                here!
+              </p>
+            )}
          </div>
          <fieldset id="send_otp_fields" disabled={nextAction != "send_otp"}>
            <label for="name">
--- a/src/pages/health.ts
+++ b/src/pages/health.ts
@ -2,6 +2,7 @@ import type { APIRoute } from "astro";
 export const prerender = false;

 export const GET: APIRoute = async () => {
+  // flesh out later if needed
  try {
    return new Response(
      JSON.stringify({
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -3,11 +3,242 @@ import Layout from "@layouts/BaseLayout.astro";
 ---

 <Layout>
-  <title slot="head">Home</title>
+  <title slot="head">Parallax Demo</title>
+  <style>
+    :root {
+      --scroll-multiplier: 5;
+      --theme: winternight;
+    }
+
+    .parallax-theme-winternight {
+      --layer-0-speed: 6250s;
+      --layer-1-speed: 1250s;
+      --layer-2-speed: 500s;
+      --layer-3-speed: 250s;
+      --layer-4-speed: 80s;
+      --layer-0-url: url("/parallax/winternight/0-sky.png");
+      --layer-1-url: url("/parallax/winternight/1-backmountain.png");
+      --layer-2-url: url("/parallax/winternight/2-midmountain.png");
+      --layer-3-url: url("/parallax/winternight/3-midforest.png");
+      --layer-4-url: url("/parallax/winternight/4-frontfloor.png");
+      --parallax-width: calc(3800px * 10);
+    }
+
+    .parallax-theme-sunnyvale-forest {
+      --layer-0-speed: 2000s;
+      --layer-1-speed: 400s;
+      --layer-2-speed: 50s;
+      --layer-0-url: url("/parallax/sunnyvale-forest/0-clouds.png");
+      --layer-1-url: url("/parallax/sunnyvale-forest/1-mountains.png");
+      --layer-2-url: url("/parallax/sunnyvale-forest/2-trees.png");
+      --parallax-width: calc(160px * 200);
+    }
+
+    .parallax-theme-city-destroyed {
+      --layer-0-speed: 1000s;
+      --layer-1-speed: 275s;
+      --layer-2-speed: 250s;
+      --layer-3-speed: 250s;
+      --layer-4-speed: 250s;
+      --layer-5-speed: 100s;
+      --layer-0-url: url("/parallax/city-destroyed/0-sky.png");
+      --layer-1-url: url("/parallax/city-destroyed/1-buildingssmoke.png");
+      --layer-2-url: url("/parallax/city-destroyed/2-water.png");
+      --layer-3-url: url("/parallax/city-destroyed/3-buildings.png");
+      --layer-4-url: url("/parallax/city-destroyed/4-buildingreflection.png");
+      --layer-5-url: url("/parallax/city-destroyed/5-frontsmoke.png");
+      --parallax-width: calc(3800px * 10);
+    }
+
+    .parallax-theme-city-destroyed .layer.layer-1,
+    .parallax-theme-city-destroyed .layer.layer-3,
+    .parallax-theme-city-destroyed .layer.layer-4 {
+      background-repeat: repeat-x;
+    }
+
+    .parallax-theme-city-destroyed .layer.layer-4 {
+      background-position-y: 4rem;
+    }
+
+    .parallax-container {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+      z-index: 0;
+    }
+
+    .layer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: var(--parallax-width);
+      background-repeat: round;
+      background-position: bottom;
+      background-size: contain;
+    }
+
+    .layer-0 {
+      background-image: var(--layer-0-url);
+      z-index: 1;
+      animation: scroll calc(var(--scroll-multiplier) * var(--layer-0-speed))
+        linear infinite;
+    }
+
+    .layer-1 {
+      background-image: var(--layer-1-url);
+      z-index: 2;
+      animation: scroll calc(var(--scroll-multiplier) * var(--layer-1-speed))
+        linear infinite;
+    }
+
+    .layer-2 {
+      background-image: var(--layer-2-url);
+      z-index: 3;
+      animation: scroll calc(var(--scroll-multiplier) * var(--layer-2-speed))
+        linear infinite;
+    }
+
+    .layer-3 {
+      background-image: var(--layer-3-url);
+      z-index: 4;
+      animation: scroll calc(var(--scroll-multiplier) * var(--layer-3-speed))
+        linear infinite;
+    }
+
+    .layer-4 {
+      background-image: var(--layer-4-url);
+      z-index: 5;
+      animation: scroll calc(var(--scroll-multiplier) * var(--layer-4-speed))
+        linear infinite;
+    }
+
+    .layer-5 {
+      background-image: var(--layer-5-url);
+      z-index: 6;
+      animation: scroll calc(var(--scroll-multiplier) * var(--layer-5-speed))
+        linear infinite;
+    }
+
+    @keyframes scroll {
+      0% {
+        transform: translateX(0);
+      }
+      100% {
+        transform: translateX(-50%);
+      }
+    }
+
+    .desktop-monitor {
+      margin: 10px auto 0px auto;
+      width: 330px;
+      height: 230px;
+      border: 4px solid #34495e;
+      border-radius: 15px;
+    }
+
+    .desktop-audio {
+      border: 2px solid #34495e;
+      width: 10px;
+      height: 8px;
+      border-radius: 10px;
+      margin: 6px auto 0px auto;
+    }
+
+    .desktop-screen {
+      margin: 5px auto 0px auto;
+      border: 3px solid #34495e;
+      border-radius: 5px;
+      width: 305px;
+      height: 195px;
+      background-color: black;
+      object-fit: contain;
+      position: relative;
+    }
+
+    .desktop-screen-text {
+      position: absolute;
+      top: 0;
+      right: 0.25em;
+    }
+
+    .desktop-keyboard {
+      width: 360px;
+      height: 20px;
+      border: 4px solid #34495e;
+      border-radius: 2px;
+      margin: -4px auto 2px auto;
+    }
+
+    .desktop-keyboard-detail {
+      border: 1px solid #34495e;
+      width: 50px;
+      height: 8px;
+      border-radius: 10px;
+      margin: 0px auto 0px auto;
+    }
+
+    .desktop-keyboard-base {
+      width: 360px;
+      height: 8px;
+      background-color: #34495e;
+      border-radius: 2px;
+      margin: -2px auto 4px auto;
+      clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
+    }
+    .sided {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    .sided > div {
+      flex: 1;
+    }
+  </style>
  <Fragment slot="main">
-    <article id="hero">
-      <h2>Hi, I'm badblocks!</h2>
-      <p>I ♥ building websites and making things!</p>
+    <article
+      id="hero"
+      x-data="{
+        themes: [
+          { value: 'winternight', label: 'Winternight' },
+          { value: 'sunnyvale-forest', label: 'SunnyVale' },
+          { value: 'city-destroyed', label: 'Apocalypse' },
+        ],
+        index: 0,
+        get theme() { return this.themes[this.index].value },
+        next() { this.index = (this.index + 1) % this.themes.length },
+      }"
+    >
+      <div class="sided">
+        <div>
+          <h2>Hi, I'm badblocks!</h2>
+          <p>I ♥ building websites and making things!</p>
+        </div><div class="desktop">
+          <div class="desktop-monitor">
+            <div class="desktop-audio"></div>
+            <div class="desktop-screen" @click="next()">
+              <div
+                class="parallax-container"
+                :class="'parallax-theme-' + theme"
+              >
+                <div class="layer layer-0"></div>
+                <div class="layer layer-1"></div>
+                <div class="layer layer-2"></div>
+                <div class="layer layer-3"></div>
+                <div class="layer layer-4"></div>
+                <div class="layer layer-5"></div>
+              </div>
+              <div class="desktop-screen-text" x-text="themes[index].label">
+              </div>
+            </div>
+          </div>
+          <div class="desktop-keyboard-base"></div>
+          <div class="desktop-keyboard">
+            <div class="desktop-keyboard-detail"></div>
+          </div>
+        </div>
+      </div>
    </article>
  </Fragment>
 </Layout>
--- a/src/pages/parallax.astro
+++ b/src/pages/parallax.astro
@ -1,152 +0,0 @@
---
-import Layout from "@layouts/BaseLayout.astro";
---
-
-<Layout>
-  <title slot="head">Parallax Demo</title>
-  <style>
-    :root {
-      --scroll-multiplier: 5;
-      --theme: winternight;
-    }
-
-    .parallax-theme-winternight {
-      --layer-0-speed: 6250s;
-      --layer-1-speed: 1250s;
-      --layer-2-speed: 500s;
-      --layer-3-speed: 250s;
-      --layer-4-speed: 80s;
-      --layer-0-url: url("/parallax/winternight/0-sky.png");
-      --layer-1-url: url("/parallax/winternight/1-backmountain.png");
-      --layer-2-url: url("/parallax/winternight/2-midmountain.png");
-      --layer-3-url: url("/parallax/winternight/3-midforest.png");
-      --layer-4-url: url("/parallax/winternight/4-frontfloor.png");
-      --parallax-width: calc(3800px * 10);
-    }
-
-    .parallax-theme-sunnyvale-forest {
-      --layer-0-speed: 2000s;
-      --layer-1-speed: 400s;
-      --layer-2-speed: 50s;
-      --layer-0-url: url("/parallax/sunnyvale-forest/0-clouds.png");
-      --layer-1-url: url("/parallax/sunnyvale-forest/1-mountains.png");
-      --layer-2-url: url("/parallax/sunnyvale-forest/2-trees.png");
-      --parallax-width: calc(160px * 200);
-    }
-
-    .parallax-theme-city-destroyed {
-      --layer-0-speed: 1000s;
-      --layer-1-speed: 275s;
-      --layer-2-speed: 250s;
-      --layer-3-speed: 250s;
-      --layer-4-speed: 250s;
-      --layer-5-speed: 100s;
-      --layer-0-url: url("/parallax/city-destroyed/0-sky.png");
-      --layer-1-url: url("/parallax/city-destroyed/1-buildingssmoke.png");
-      --layer-2-url: url("/parallax/city-destroyed/2-water.png");
-      --layer-3-url: url("/parallax/city-destroyed/3-buildings.png");
-      --layer-4-url: url("/parallax/city-destroyed/4-buildingreflection.png");
-      --layer-5-url: url("/parallax/city-destroyed/5-frontsmoke.png");
-      --parallax-width: calc(3800px * 10);
-    }
-
-    .parallax-theme-city-destroyed .layer.layer-1,
-    .parallax-theme-city-destroyed .layer.layer-3,
-    .parallax-theme-city-destroyed .layer.layer-4 {
-      background-repeat: repeat-x;
-    }
-
-    .parallax-theme-city-destroyed .layer.layer-4 {
-      background-position-y: 16rem;
-    }
-
-    .parallax-container {
-      position: relative;
-      height: 30rem;
-      width: 100%;
-      overflow: hidden;
-      z-index: 0;
-    }
-
-    .layer {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: var(--parallax-width);
-      background-repeat: round;
-      background-position: bottom;
-      background-size: contain;
-    }
-
-    .layer-0 {
-      background-image: var(--layer-0-url);
-      z-index: 1;
-      animation: scroll calc(var(--scroll-multiplier) * var(--layer-0-speed))
-        linear infinite;
-    }
-
-    .layer-1 {
-      background-image: var(--layer-1-url);
-      z-index: 2;
-      animation: scroll calc(var(--scroll-multiplier) * var(--layer-1-speed))
-        linear infinite;
-    }
-
-    .layer-2 {
-      background-image: var(--layer-2-url);
-      z-index: 3;
-      animation: scroll calc(var(--scroll-multiplier) * var(--layer-2-speed))
-        linear infinite;
-    }
-
-    .layer-3 {
-      background-image: var(--layer-3-url);
-      z-index: 4;
-      animation: scroll calc(var(--scroll-multiplier) * var(--layer-3-speed))
-        linear infinite;
-    }
-
-    .layer-4 {
-      background-image: var(--layer-4-url);
-      z-index: 5;
-      animation: scroll calc(var(--scroll-multiplier) * var(--layer-4-speed))
-        linear infinite;
-    }
-
-    .layer-5 {
-      background-image: var(--layer-5-url);
-      z-index: 6;
-      animation: scroll calc(var(--scroll-multiplier) * var(--layer-5-speed))
-        linear infinite;
-    }
-
-    @keyframes scroll {
-      0% {
-        transform: translateX(0);
-      }
-      100% {
-        transform: translateX(-50%);
-      }
-    }
-  </style>
-  <Fragment slot="main">
-    <article id="hero" x-data="{ theme: 'winternight'}">
-      <div class="parallax-container" :class="'parallax-theme-' + theme">
-        <div class="layer layer-0"></div>
-        <div class="layer layer-1"></div>
-        <div class="layer layer-2"></div>
-        <div class="layer layer-3"></div>
-        <div class="layer layer-4"></div>
-        <div class="layer layer-5"></div>
-      </div>
-      <h2>Parallax Demo</h2>
-      <p>Pardon the dust!</p>
-      <select id="theme" x-model="theme">
-        <option value="winternight">Winternight</option>
-        <option value="sunnyvale-forest">SunnyVale</option>
-        <option value="city-destroyed">Apocalypse</option>
-      </select>
-    </article>
-  </Fragment>
-</Layout>
--- a/src/thirty-two.d.ts
+++ b/src/thirty-two.d.ts
@ -0,0 +1,8 @@
+declare module "thirty-two" {
+  interface Base32 {
+    encode(input: string | Buffer): Buffer;
+    decode(input: string | Buffer): Buffer;
+  }
+  const base32: Base32;
+  export = base32;
+}
--- a/utils/generate-env-example.sh
+++ b/utils/generate-env-example.sh
@ -1,47 +0,0 @@
-#!/bin/bash
-
-cd $(dirname $(dirname $(realpath $0)))
-
-# Path to the original .env file
-ENV_FILE=".env"
-# Path to the new .env.example file
-EXAMPLE_FILE=".env.example"
-
-# Check if the .env file exists
-if [ ! -f "$ENV_FILE" ]; then
-    echo "The file $ENV_FILE does not exist."
-    exit 1
-fi
-
-# Create or empty the .env.example file
-> "$EXAMPLE_FILE"
-
-SKIP_NEXT=false
-
-# Read each line in .env
-while IFS= read -r line; do
-  # Skip the current line if the previous line is part of a multiline/quoted string
-  if [[ $SKIP_NEXT == true ]]; then
-    if [[ $line == *'"'* ]]; then
-        SKIP_NEXT=false
-    fi
-    continue
-  # Copy comments and empty lines verbatim
-  elif [[ $line == \#* ]] || [[ -z $line ]]; then
-    echo "$line" >> "$EXAMPLE_FILE"
-    continue
-  # Check if the line is a multiline/quoted string
-  elif [[ $line == *'="'* ]]; then
-    if [[ $line != *'"' ]]; then
-      SKIP_NEXT=true
-    fi
-    LINE=${line%%=*}
-    echo "$LINE=\"\${$LINE}\"" >> "$EXAMPLE_FILE"
-  # For all other lines, copy only the key (everything before the '=') if present
-  elif [[ $line == *'='* ]]; then
-    LINE=${line%%=*}
-    echo "$LINE=\${$LINE}" >> "$EXAMPLE_FILE"
-  fi
-done < "$ENV_FILE"
-
-echo ".env.example file created successfully."
Author	SHA1	Message	Date
badbl0cks	8551c37e7a	integrate parallax into index and tidy up	2026-07-11 11:06:38 -07:00
badbl0cks	441056cabc	more dev work	2026-07-11 11:06:10 -07:00