Make logo customizable

Dockerfile

@@ -51,7 +51,8 @@ COPY frontend ./
 
 ENV VITE_API_URL=__VITE_API_URL__ \
     VITE_RELAY_DOMAIN=__VITE_RELAY_DOMAIN__ \
-    VITE_PLATFORM_NAME=__VITE_PLATFORM_NAME__
+    VITE_PLATFORM_NAME=__VITE_PLATFORM_NAME__ \
+    VITE_PLATFORM_LOGO=__VITE_PLATFORM_LOGO__
 RUN bun run build
 
 # ---------- Runtime ----------

README.md

@@ -17,6 +17,7 @@ docker run -d \
   -p 3000:3000 \
   -v my-caravel-data:/app/data \
   -e PLATFORM_NAME=Caravel \
+  -e PLATFORM_LOGO=/caravel.png \
   -e RELAY_DOMAIN=example.com \
   -e APP_URL=https://example.com \
   -e ZOOID_API_URL=http://zooid:3334 \

entrypoint.sh

@@ -8,6 +8,7 @@ set -euo pipefail
 VITE_API_URL="${SERVER_URL:-}"
 VITE_RELAY_DOMAIN="${RELAY_DOMAIN:-}"
 VITE_PLATFORM_NAME="${PLATFORM_NAME:-}"
+VITE_PLATFORM_LOGO="${PLATFORM_LOGO:-/caravel.png}"
 
 # Escape characters that are special in a sed replacement.
 esc() { printf '%s' "$1" | sed -e 's/[&|\\]/\\&/g'; }
@@ -18,6 +19,7 @@ while IFS= read -r -d '' f; do
     -e "s|__VITE_API_URL__|$(esc "$VITE_API_URL")|g" \
     -e "s|__VITE_RELAY_DOMAIN__|$(esc "$VITE_RELAY_DOMAIN")|g" \
     -e "s|__VITE_PLATFORM_NAME__|$(esc "$VITE_PLATFORM_NAME")|g" \
+    -e "s|__VITE_PLATFORM_LOGO__|$(esc "$VITE_PLATFORM_LOGO")|g" \
     "$f"
 done < <(find /app/dist -type f \( -name '*.js' -o -name '*.html' \) -print0)
 

frontend/.env.template

@@ -6,3 +6,6 @@ VITE_RELAY_DOMAIN=spaces.coracle.social
 
 # Platform display name shown in UI
 VITE_PLATFORM_NAME=Caravel
+
+# Platform logo shown in UI (path under public/, or an absolute URL)
+VITE_PLATFORM_LOGO=/caravel.png

frontend/src/global.d.ts

@@ -24,6 +24,7 @@ interface ImportMetaEnv {
   readonly VITE_API_URL: string
   readonly VITE_RELAY_DOMAIN: string
   readonly VITE_PLATFORM_NAME?: string
+  readonly VITE_PLATFORM_LOGO?: string
 }
 
 interface ImportMeta {

frontend/src/lib/state.ts

@@ -27,6 +27,7 @@ export type EventSigner = {
 }
 
 export const PLATFORM_NAME = import.meta.env.VITE_PLATFORM_NAME
+export const PLATFORM_LOGO = import.meta.env.VITE_PLATFORM_LOGO
 
 export const eventStore = new EventStore()
 export const pool = new RelayPool()

frontend/src/pages/Home.tsx

@@ -10,7 +10,7 @@ import PaymentSetup from "@/components/PaymentSetup"
 import Login from "@/views/Login"
 import { createRelayForActiveTenant, resolvePostPaidFlow } from "@/lib/hooks"
 import type { Invoice } from "@/lib/api"
-import { account, refetchBilling, setToastMessage } from "@/lib/state"
+import { account, PLATFORM_LOGO, PLATFORM_NAME, refetchBilling, setToastMessage } from "@/lib/state"
 import FlotillaLogo from "@/assets/flotilla-logo.svg"
 import NostordLogo from "@/assets/nostord-logo.svg"
 
@@ -100,8 +100,8 @@ export default function Home() {
       <nav class="sticky top-0 z-20 bg-white/80 backdrop-blur border-b border-gray-100">
         <div class="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
           <div class="flex items-center gap-2 font-bold text-gray-900">
-            <img src="/caravel.png" alt="Caravel" class="w-7 h-7 rounded" />
-            Caravel
+            <img src={PLATFORM_LOGO} alt={PLATFORM_NAME} class="w-7 h-7 rounded" />
+            {PLATFORM_NAME}
           </div>
           <Show
             when={account()}
@@ -177,7 +177,7 @@ export default function Home() {
         <div class="max-w-5xl mx-auto px-6 py-20">
           <h2 class="text-3xl font-bold text-center text-gray-900 mb-4">Everything you need</h2>
           <p class="text-center text-gray-500 mb-14 max-w-xl mx-auto">
-            Caravel takes care of the infrastructure so you can focus on building your community.
+            {PLATFORM_NAME} takes care of the infrastructure so you can focus on building your community.
           </p>
           <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
             {[
@@ -361,7 +361,7 @@ export default function Home() {
         <div class="relative max-w-5xl mx-auto px-6 py-28 text-center">
           <h2 class="text-4xl font-extrabold text-gray-900 mb-4">Ready to launch your relay?</h2>
           <p class="text-gray-500 mb-10 max-w-lg mx-auto text-lg">
-            Join communities already running on Caravel. Set up in minutes.
+            Join communities already running on {PLATFORM_NAME}. Set up in minutes.
           </p>
           <button
             type="button"
@@ -378,10 +378,10 @@ export default function Home() {
       <footer class="border-t border-gray-100 bg-gray-50">
         <div class="max-w-5xl mx-auto px-6 py-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-gray-400">
           <div class="flex items-center gap-2 font-semibold text-gray-500">
-            <img src="/caravel.png" alt="Caravel" class="w-5 h-5 rounded" />
-            Caravel
+            <img src={PLATFORM_LOGO} alt={PLATFORM_NAME} class="w-5 h-5 rounded" />
+            {PLATFORM_NAME}
           </div>
-          <p>© {new Date().getFullYear()} Caravel. Built on Nostr.</p>
+          <p>© {new Date().getFullYear()} {PLATFORM_NAME}. Built on Nostr.</p>
           <div class="flex gap-4">
             <a href="https://flotilla.social" target="_blank" rel="noopener noreferrer" class="hover:text-gray-600 transition-colors">Flotilla</a>
             <a href="https://chachi.chat" target="_blank" rel="noopener noreferrer" class="hover:text-gray-600 transition-colors">Chachi</a>