/* global React */ /* ========================================================================= SHARED — data, theme, nav, footer, mascot Loaded BEFORE every page-specific script. All exports live on window for cross-script access. ========================================================================= */ /* ----- Content ----- */ const BOOKING_EMAIL = "williampayne831@gmail.com"; const SOCIALS = [ { label: "Instagram", url: "https://www.instagram.com/itsjustwoodi", handle: "@itsjustwoodi" }, { label: "SoundCloud", url: "https://soundcloud.com/dj_woodi", handle: "@dj_woodi" }, { label: "YouTube", url: "https://www.youtube.com/@DJWoodi", handle: "@DJWoodi" }, ]; const SOCIAL_ICONS = { Instagram: , SoundCloud: , YouTube: , Email: , }; const MIXES = [ { id: "TX-003", title: "R&B at ETC.", sub: "Live set · all R&B", date: "2026", bpm: "95", tag: "R&B · Live", scUrl: "https://soundcloud.com/dj_woodi/etc_rnb_mix_2026" }, { id: "TX-002", title: "Truly G.O.M.D.", sub: "Spandau Ballet × J. Cole · house flip", date: "2025", bpm: "122", tag: "House · Flip", scUrl: "https://soundcloud.com/dj_woodi/truly-gomd-spandau-ballet-x-j-cole-house-flipdj-woodi" }, { id: "TX-001", title: "Loaded", sub: "Lil Uzi · techno edit", date: "2025", bpm: "128", tag: "Techno · Edit", scUrl: "https://soundcloud.com/dj_woodi/loaded-lil-uzi-techno-edit" }, ]; const VIDEOS = [ { kind: "youtube", id: "IhqKKuIWUtw", title: "Live transmission · 01", caption: "Live in the booth" }, { kind: "youtube", id: "jBMmpVA3F2s", title: "Live transmission · 02", caption: "Live in the booth" }, // Add Instagram clips like: // { kind: "instagram", id: "SHORTCODE", title: "...", caption: "Instagram reel" }, ]; const VENUES = [ "Everything Bar", "ETC.", "The Dime", "Hubbard Inn", "Penthouse", "The Loft", ]; const ALONGSIDE = [ { name: "Timmy V", role: "Played alongside" }, { name: "FourthCo.", role: "Support set" }, { name: "Vince Lazarus", role: "Played alongside" }, { name: "DJ Bern", role: "Support set" }, { name: "Midnight Grooves", role: "Played alongside" }, ]; const GIGS = [ { date: "Jun 06", city: "Chicago", venue: "South Shore Golf Club", status: "on-sale" }, { date: "TBA", city: "—", venue: "Next show loading…", status: "tba" }, { date: "TBA", city: "—", venue: "Next show loading…", status: "tba" }, ]; const GENRES = ["House", "Disco", "Hip-Hop", "R&B", "Club", "Miami Bass"]; /* ----- Theme presets (localStorage-backed) ----- */ const THEMES = { "Burnt Sienna": ["#b3471d", "#842f0f", "#f6dccc", "#842f0f"], "Forest": ["#2e6042", "#1c3f2a", "#d9e4dc", "#1c3f2a"], "Cobalt": ["#1f3ba8", "#102270", "#d4dbf2", "#102270"], "Wine": ["#7a1f2e", "#4d121d", "#f0d5da", "#4d121d"], "Plum": ["#6e1f4a", "#4a132e", "#f5dce4", "#9c1834"], "Charcoal": ["#2a2a2a", "#0d0d0d", "#dcdcdc", "#1a1a1a"], }; function getStoredAccent() { try { return localStorage.getItem("djw-accent") || "Burnt Sienna"; } catch { return "Burnt Sienna"; } } function setStoredAccent(name) { try { localStorage.setItem("djw-accent", name); } catch {} } function applyTheme(name) { const t = THEMES[name] || THEMES["Burnt Sienna"]; const r = document.documentElement; r.style.setProperty("--plum", t[0]); r.style.setProperty("--plum-deep", t[1]); r.style.setProperty("--plum-soft", t[2]); r.style.setProperty("--plum-text", t[3]); } function useAccent() { const { useState, useEffect } = React; const [accent, setAccent] = useState(getStoredAccent); useEffect(() => { applyTheme(accent); setStoredAccent(accent); }, [accent]); return [accent, setAccent]; } // Apply immediately on load (before React mounts) to avoid flash: applyTheme(getStoredAccent()); /* ========================================================================= PAGE SHELL — common nav + footer ========================================================================= */ function TopNav({ current }) { const items = [ ["/", "Home"], ["/about", "About"], ["/music", "Music"], ["/video", "Video"], ["/tour", "Tour"], ["/friends", "Friends"], ]; return ( ); } function Mascot() { return ( ); } function Footer() { return ( ); } /* ========================================================================= THEME PICKER (small bottom-right widget) ========================================================================= */ function ThemePicker() { const { useState } = React; const [accent, setAccent] = useAccent(); const [open, setOpen] = useState(false); return (
{open && (
Accent
{Object.keys(THEMES).map(name => (
)}
); } /* ========================================================================= PAGE WRAPPER — convenience for page jsx files ========================================================================= */ function Page({ current, children }) { return (
{children}
); } /* expose to window for per-page scripts */ Object.assign(window, { // data BOOKING_EMAIL, SOCIALS, SOCIAL_ICONS, MIXES, VIDEOS, VENUES, ALONGSIDE, GIGS, GENRES, THEMES, // utilities applyTheme, useAccent, // components TopNav, Footer, Mascot, ThemePicker, Page, });