Gulu-Gulu Cafe & Bar • System Showcase

The Mixtape Engine

A state manager, dynamic curator, and zine-staging operating system built for WordPress. Modulates aesthetics to the beat of real-world time, live weather, and in-venue culture.

18 Core Modules

29 Shortcodes

Real-Time Weather Parallax

Dynamic /llms.txt AI Feed

Omnichannel Syndication

⛅

Weather Hero Overlay

Universal background parser detects photograph layers and dynamically shifts parallax scroll and ambient color filters to match live outdoor weather.

🌧️

Rainy: Moody Tint (0.7 Sat / 0.8 Bright)

Backdrop filter: saturate(0.8)

📱

Table Tent QR Cop

Printed QR codes on tables point to /now. The shortcode calculates the exact current minute and renders one of three smart views.

🎸

Tier 1: Live Band Playing

Band Photo + Spotify Player + Venmo Tip Button

🧭

Environmental Messages

Multi-dimensional logic matrix evaluating time, weather, temperature, kitchen open/closed, and upcoming events to dynamically greet visitors.

SALEM, MA • 8:42 AM • 74°F

"It's 74°F out there! Cool off with an iced coffee and breakfast."

The Tape Deck (Theme Engine & Aesthetics)

Aesthetic Core

📼 Side A / Side B Automated Vibe Flipping

Evaluates server time against a configured Pivot Hour (e.g. 5:00 PM). Automatically injects Side A CSS variables (daytime coffeehouse) before 5 PM, and Side B CSS variables (nighttime bar & live venue) after 5 PM without any manual intervention.

CSS Variables Time-Aware Builder-Agnostic

var(--mixtape-bg-color) Copy

🎃 Special Editions (Event Tag Theme Hijacking)

Allows management to create custom color schemes (e.g., Halloween Orange & Black, Pride Rainbow) tied to specific event tags. For the exact duration of that event, the site’s entire color scheme snaps to that palette, returning to normal schedule immediately after.

Event Tagging Automated Overrides

Dashboard -> Special Editions Copy

☀️ Atmospheric Sunlight Tracking

Uses a parabolic mathematical equation mapped to real-time astronomical sunrise and sunset data from Open-Meteo, casting a moving digital radial sunlight gradient across the background of the website that traces the real sun.

Astronomy Math Open-Meteo

🖼️ Dynamic Risograph Hero Effect

Intercepts images tagged with .mixtape-hero-riso, strips their natural colors, and applies a gritty two-tone risograph ink blend mode matching the current theme palette. Hovering or tapping bleeds the ink away to reveal full-color photography.

Mix-Blend-Mode Risograph

class="mixtape-hero-riso" Copy

📻 Retro Cassette Player with Spinning Spools

An animated physical cassette frame with rotating magnetic tape spools (@keyframes spinSpool) that floats at the bottom of the screen, wrapping a live cafe Spotify playlist embed.

CSS Animation Spotify Embed

📶 In-Venue Location Awareness

Inspects patron IP addresses against the cafe's registered Wi-Fi router IP. When matched, it dynamically injects the is-in-venue class into the HTML body, allowing builders to unlock secret in-house promotions, fast tipping, or table menus.

IP Verification Body Class

✂️ Zine Typography & Paper Accents

Complete CSS design kit providing block classes for ransom-note tilted headings (zine-heading), masking tape corners (zine-tape-corners), torn newspaper scraps with 3D drop shadows (zine-news-scrap), and text cutouts (zine-text-cutout).

Brutalist Zine Colibri/Gutenberg

zine-heading zine-bg-accent zine-tilt-left Copy

Auto-Generated Graphics & Interactive Aesthetics

Visual Automation

🎯 Auto-Generated Sticker Margin Placement

JavaScript engine divides the document into 800px vertical zones, shuffling transparent stickers from the media library. Alternates left/right gutters (-5% to 5%), randomizes rotation (-40° to +40°) and dimensions (250px to 450px), preserves hero/footer safety buffers, applies multiply blend modes, and utilizes a ResizeObserver to recalculate on accordion expands.

Algorithmic Layout ResizeObserver Responsive Check

💥 Interactive "Sticker Slap" Feature

Allows visitors to double-click on desktop or double-tap on mobile to "slap" a physical sticker onto the screen. Stickers appear with random rotation, scale, drop shadows, and automatic avoidance of buttons, links, inputs, and interactive menus.

Double-Tap Anti-Repeat Touch-Supported

mixtape_enable_sticker_slap Copy

✏️ Napkin Sketches & Approval Board

Floating drawing button (✏️) opens an HTML5 canvas digital napkin. Patrons sketch doodles with mouse or touch, and click "Toss on the Wall". Managers review submissions in the "Napkin Sketch Approval Board", approving them to appear on the public polaroid wall.

HTML5 Canvas Admin Moderation Custom CPT

[mixtape_napkin_gallery] Copy

🎨 Patron Vibe Customizer

Front-end floating palette switcher (🎨) letting patrons select their preferred vibe (*Cafe Default*, *Neon Nights*, *Midnight Coffee*, *High Contrast*), persisted in browser localStorage with an inline <head> script preventing FOUC.

localStorage FOUC Prevention

🖋️ Random Heading Marker Scribbles

Scans for headings marked with .zine-marker-header and dynamically injects randomized authentic marker doodle PNGs stretched behind the text with pure white typography.

Hand-Drawn CSS Stretch

📄 Ripped Paper Section Edges

Targets .zine-ripped-section containers and automatically attaches ripped paper edge PNGs across the top and bottom borders (bottom edge inverted 180°), creating a natural collage transition between sections.

Dynamic Borders Multiply Blend

Weather-Driven Hero Image Overlay & Environmental EQ

Real-Time Sync

🌧️ Weather Hero Parallax & Adaptive Filters

Universal background parser inspects the hero section, anchoring photographs from the bottom with scroll-driven parallax. Applies real-time visual CSS filters based on live weather: Rain (moody/desaturated), Snow (frosted/bright), Clear (warm golden amber), and Clouds (overcast grayscale).

Parallax CSS Filters Open-Meteo

🌈 Hero Backdrop-Filter Tint Layers

Directly targets builder background overlays (.overlay-image-layer) with custom weather tints: deep navy slate blue for rain, pale icy cyan for snow, warm golden amber for clear sun, and cool gray for overcast skies.

Backdrop-Filter RGBA Tints

💬 Intelligent Environmental Messaging Matrix

Evaluates time of day (morning, afternoon, evening, night, before_event), season (spring, summer, fall, winter, October!), weather, temperature ranges, and store/kitchen status to deliver human, context-aware greetings.

Context Engine Rule Matrix

[mixtape_environmental_widget mode="full"] Copy

🏷️ Dynamic Text Replacement Tokens

Environmental messages support live placeholder tags: {temp}, {weather}, {time} (live ticking clock), {event_title}, {event_time}, and {featured_artist}. Includes smart First-Monday rules replacing "open tomorrow" with "open Tuesday".

Token Engine Live Ticking Time

🌕 Astronomical Moon Phase Engine

Calculates exact synodic lunar cycles (29.53 days) using modular arithmetic from a known new moon epoch, dynamically outputting phase names and accurate lunar icons (🌑 to 🌕).

Lunar Math Salem Vibe

[mixtape_moon_phase show_text="true"] Copy

⚡ Dynamic Custom Footer

Outputs agency accreditation (Witch City Websites & Cup O Code) with live moon phase icons, automated copyright year rollover, and customizable accent colors.

Dynamic Copyright Agency Badge

[mixtape_custom_footer] Copy

The SEO Engine & AI Discoverability

Search & LLMs

🤖 Live Dynamic /llms.txt and /llms-full.txt

Intercepts requests for /llms.txt to deliver clean, authoritative, live Markdown feeds directly to AI search engines (ChatGPT, Perplexity, Claude, Gemini) with real-time hours, operating status, today's events, and menu highlights.

AI Optimization Markdown Feed Rewrite Rules

https://gulugulucafe.com/llms.txt Copy

📍 Multi-Type LocalBusiness Schema.org

Simultaneously declares the venue under multiple Schema classifications: Restaurant, CafeOrCoffeeShop, MusicVenue, and BarOrPub with coordinates, price range ($$), cuisines, and accessibility amenities.

JSON-LD Google Rich Results

📅 Real-Time Event & Performer Schema

Generates rich structured data for upcoming shows, open mics, and karaoke with MusicEvent, MusicGroup performers, ticket links, and a 45-day ItemList schema for Google Event carousel inclusion.

MusicEvent ItemList 45-Day

🎨 Visual Art Exhibition Schema

Generates structured ExhibitionEvent and Person schemas for monthly Centerfold Gallery artists, detailing artist names, solo exhibition dates, and gallery imagery.

ExhibitionEvent Local Art Schema

🍽️ Structured Menu & Section Schema

Exposes hasMenu and hasMenuSection schemas covering artisan coffee, breakfast crepes, pressed paninis, and craft draft beer with descriptions and price tiers.

hasMenu Schema.org

⏰ ISO-8601 Dynamic Opening Hours

Reads live store hours across all 7 days and outputs Google-standardized opening hours specifications, dynamically adjusting for maintenance closures.

ISO-8601 StoreHours Sync

Visitor Map & Downtown Salem Guide

Tourist Utility

🗺️ Interactive Restroom & Parking Map

A mobile-responsive interactive map of downtown Salem designed specifically to highlight public restrooms and parking garages for visitors, styled in brutalist zine aesthetics.

Brutalist Map Public Amenities

[mixtape_visitor_map] Copy

🔗 URL Hash Deep-Linking & Two-Way Sync

Navigating to /map#restrooms or /map#parking auto-activates that filter. Clicking filter buttons directly on the map updates the browser URL bar in real time without refreshing, making it easy to copy and share filtered directions!

Hash Navigation Deep Linking

📍 Visitor Location Post Type (`mt_visitor_loc`)

Manage map pins with custom metadata for location type (Parking / Restroom), street address, precise latitude and longitude, operating hours, and custom Google Maps directions URLs.

Location CPT Directions Fallback

The Setlist: Event Engine & Syndication

Scheduling & Sync

🎸 Lightweight Event Management & Recurrence

Custom event engine (mixtape_events) replacing bloated third-party calendar plugins. Supports one-off, weekly, and monthly recurrences with dynamic math calculating upcoming instances without database bloat.

Zero Bloat Recurrence Math

[mixtape_tour_schedule] Copy

🔄 Multi-Platform Event Syndication

Automatically pushes upcoming events to Google Calendar (two-way sync), Eventbrite API, and 7shifts (notifying kitchen and bar managers to staff up for high-traffic shows), plus custom outbound webhooks for Zapier, Make, Slack, or Discord.

7shifts API Google Calendar Webhooks

📅 Interactive Month Calendar & Stacked Lists

Clean responsive calendar with jump-to-date and next/previous month controls ([mixtape_event_calendar]) alongside stacked compact lists for sidebars ([mixtape_upcoming_events limit="5"]).

Month Grid List View

[mixtape_event_calendar] Copy

✏️ Specific Occurrence Overrides

Allows managers to modify titles, descriptions, custom flyer artwork, or cancellation status for an individual instance of a recurring event without breaking the recurring series.

Instance Control Flyer Swapping

The Live Experience: Bands, EPKs & Table Tents

Live Music Hub

🏷️ 3-Tier "Happening Now" Table Tent Hub

Designed for static QR codes printed on cafe tables. Evaluates real-time server minutes: Tier 1 displays active band EPK + Venmo tipping button; Tier 2 displays active event flyer (e.g. Trivia); Tier 3 displays a ticking countdown timer that auto-refreshes to Tier 1 when it hits 00:00:00!

Static QR Target 3-Tier Logic Auto-Refresh

[mixtape_happening_now] Copy

🚪 The "Green Room" Artist Portal & Forminator Sync

Intercepts Forminator "Play at Gulu" applications, automatically provisions a WordPress subscriber account with the custom "Green Room" role, auto-generates a draft band EPK, and emails login details to the band while hiding all other admin menus.

Forminator Hook Auto Provisioning Restricted Role

📺 Digital Signage TV Bar Screens

Full-screen auto-refreshing monitor view designed for the TVs behind the bar, dynamically pulling in live show posters, band details, and countdown timers.

TV Signage Bar Screens

[mixtape_live_screen] Copy

📱 Instant SVG QR Code Generator

Generates a clean SVG QR code linking straight to the active band's EPK and tipping page, perfect for placement on TV bar displays or digital signage.

SVG QR Fast Tipping

[mixtape_live_qr] Copy

The Centerfold: Visual Arts & Gallery Wall

Art Gallery Hub

🖼️ The Centerfold: Solo Exhibition Showcase

Digitizes the cafe's physical "Artist of the Month" wall. The shortcode automatically identifies the visual artist scheduled for the active calendar month and renders a full-bleed masonry gallery, bio, artist statement, and purchase links.

Masonry Wall Auto-Month Match

[centerfold] Copy

🔒 Future Feature Leak Prevention

Visual artists scheduled for future months are strictly embargoed and automatically hidden from public archives until the first day of their scheduled month.

Embargo Engine Date Protection

📚 Historical Artist Archive

Outputs a complete catalog of past and present featured artists, filterable by year with artist badges and exhibition months.

Archive Grid Year Filter

[mixtape_artist_archive year="2026"] Copy

🎨 Artwork Catalog & "Gallery Artist" Role

Tracks individual pieces with title, medium, dimensions, price, and sales status (Available, Sold, NFS). Visual artists receive the "Gallery Artist" role to update their profile without touching cafe settings.

Sales Tracker Artist Role

Food, Kitchen & Untappd Menu Engine

Culinary & Drafts

🍺 Untappd Business API Sync & Sanitizer

Connects directly to Untappd Business to pull real-time craft beer taps (24 lines), cans, cocktails, and wine. Automatically sanitizes brewery names (stripping "Brewing Company", "Brouwerij", "Beer Co.") to keep menus compact and readable.

Untappd API Text Sanitizer Real-Time

[mixtape_untappd_menu id="menu_id"] Copy

🖨️ High-Density Print-Ready Menu Endpoint

Formats live Untappd beer data into an 8.5x11 printable layout at /untappd-print/ with configurable font sizing, multi-column balancing, and print stylesheets engineered specifically for physical clipboard menus behind the bar!

Print Stylesheet Clipboard Menus

/untappd-print/ Copy

🥪 Dynamic Kitchen Menu & Dietary Badging

Native CPT for sandwiches, crepes, paninis, and bowls with instant real-time search, category tabs, and interactive dietary filter toggles (*Filter Vegan*, *Filter Vegetarian*, *Filter Gluten-Free*).

Live Search Dietary Badges

[gulu_dynamic_menu] Copy

📑 Physical Menu Sheet Image Fallback

Renders full-bleed images or PDFs of physical print menus for sub-pages or sub-sections with responsive scaling and lightbox zooming.

Physical Menu PDF/Image

[mixtape_menu_sheet] Copy

💻 SaaS Menu Manager in WP Admin

Full-screen web application interface inside WordPress admin for adding, editing, reordering, deleting menu items, updating prices, and toggling dietary flags with instant AJAX saves.

SaaS UI AJAX CRUD

Store Hours & Online Ordering Management

Daily Operations

⏰ Dynamic 7-Day Rolling Window Hours

Evaluates local venue timezone, elevates "Today" to the very top in a high-contrast Zine banner, appends exact calendar dates (e.g. "Monday, Oct 20") to each day in the rolling 7-day schedule, and cleanly displays kitchen closing times.

Rolling 7-Day Today Elevated

[mixtape_store_hours] Copy

🛑 Toast POS & Peak-Hour Rush Killswitch

Connects ordering buttons directly to Toast POS. Features a 1-click admin emergency toggle that instantly pauses online ordering site-wide during severe kitchen rushes, automatically swapping buttons for a styled zine notice inviting guests to order at the counter.

Toast Integration Emergency Toggle

[mixtape_order_online] Copy

🧹 "First Monday" Maintenance Closure Rule

Automates the cafe's recurring policy of closing on the first Monday of every month for deep cleaning and staff development, automatically overriding normal Monday schedules and environmental banners across the site.

Automated Policy Maintenance Rule

🛍️ Floating Mobile Takeout Pill

Optional floating action pill anchored to the bottom-right on mobile devices with takeout bag iconography that respects the online ordering emergency killswitch.

Mobile Pill Toast POS

Brand Hub, Merchandise & Press Engine

Identity & Media

🎨 Interactive Brand Palette & Asset Library

Documents official brand guidelines from the Gulu-Gulu Brand Guide v1. Renders interactive color swatch cards with HEX, RGB, and CMYK values (featuring 1-click clipboard copying), typography spec sheets, brand strategy, and downloadable logo assets.

Brand Guide v1 Click to Copy

[mixtape_brand_colors] Copy

📰 Press Mentions & Smart Link Detection

CPT organizing media mentions and reviews in tilted newspaper clipping cards (+1° / -1°). Intelligently labels action buttons based on target URLs (*"Watch Here"* for video, *"Listen Here"* for audio/podcasts, *"Read Article"* for blogs).

Smart Media Press CPT

[mixtape_press] Copy

💼 Careers & Hiring Board

Manage job postings with clean root-level URL rewrites (removes /career/ slug), active/closed hiring toggles, and brutalist job listing cards with direct application links.

Clean URLs Hiring Board

[mixtape_careers_board] Copy

🛍️ WooCommerce Zine Store Integration

Strips default bloated WooCommerce stylesheets, injecting custom hand-drawn borders and cardstock textures for merchandise, backed by a 1-click inventory management and order fulfillment hub in the dashboard.

WooCommerce Zine Merch

★

Master Shortcode Cheatsheet