Frontend Implementations Overview

Relevant source files

The following files were used as context for generating this wiki page:

• redesign/index.html
• codex-design/index.html
• old/site-src/App.jsx
• redesign/script.js
• redesign/styles.css
• videos.js
• README.md

The norm repository contains several distinct frontend implementations for "The Norm Macdonald Archive," a fan-made tribute site. These implementations showcase an evolution in design and technology, moving from a framework-based approach to modern, vanilla HTML, CSS, and JavaScript. The primary goal of each is to provide an interface for users to browse, search, and enjoy a collection of Norm Macdonald's jokes, videos, and transcripts.

This document provides a technical overview of the three main frontend versions found in the repository: the old React application, the redesign prototype, and the codex-design variant. It details their architecture, features, and underlying technology choices.

Implementations at a Glance

The repository hosts three different frontend applications, each with a unique technology stack and design philosophy.

Implementation	Directory	Technology Stack	Key Characteristics
Old React App	old/site-src/	React, JSX, CSS	Single-page application (SPA) with component-based architecture.
Redesign Prototype	redesign/	Vanilla JS (ES6+), CSS Custom Properties, HTML	Modern, multi-page static site with advanced features like theming, search, and pagination.
Codex Design	codex-design/	Vanilla JS, CSS, HTML	A single-page, data-driven interface with a unique "Codex-inspired" design and combined filters.

Sources: README.md:1-51, old/site-src/App.jsx, redesign/README.md, codex-design/index.html

The following diagram illustrates the different technology stacks used across the implementations.

redesign Prototype

The redesign is a modern prototype for the Jokes, Videos, and Transcripts sections, built with pure HTML, CSS, and JavaScript. It emphasizes a clean aesthetic, enhanced user experience, and performance without relying on any external frameworks.

Sources: redesign/README.md

Architecture and State Management

The application logic is primarily managed within redesign/script.js and videos.js. It uses a global state object to manage the application's data and UI status, including jokes, filtered results, and pagination.

The core data flow is as follows:

1. Initialization: On page load, the init() function is called.
2. Data Fetching: loadJokes() or loadVideos() fetches data from a local JSON file (jokes-data.json or consolidated_youtube_data.json).
3. State Update: The fetched data populates the state.jokes or state.videos array.
4. Rendering: renderJokes() or renderVideos() is called to display the initial data.
5. User Interaction: Event listeners for search, filtering, and pagination trigger the applyFilters() function, which updates state.filteredJokes/state.filteredVideos and re-renders the view.

Sources: redesign/script.js:5-20, videos.js:5-15

This diagram shows the application initialization and data loading sequence for the jokes page.

Key Features

Theming

A light/dark theme toggle is implemented using CSS Custom Properties (Variables) and JavaScript. The user's preference is stored in localStorage.

• The data-theme attribute on the <html> element is toggled between light and dark.
• styles.css defines two sets of color variables within the :root and :root[data-theme="light"] selectors.

/* redesign/styles.css:10-48 */
:root {
    /* Modern Dark Color Palette - Stitch Inspired */
    --studio-dark: #0D1117;
    --studio-surface: #161B22;
    --text-primary: #E6EDF3;
    --accent-blue: #3882F6;

    /* ... other dark theme variables */

    /* Light Theme */
    --light-bg: #FFFFFF;
    --light-surface: #F6F8FA;
    --light-text-primary: #1F2328;

    /* Default to dark */
    --bg-primary: var(--studio-dark);
    --text-1: var(--text-primary);
    /* ... */
}

/* redesign/styles.css:102-112 */
:root[data-theme="light"] {
    --bg-primary: var(--light-bg);
    --bg-secondary: var(--light-surface);
    --text-1: var(--light-text-primary);
    /* ... */
}

The theme is initialized and managed by the initTheme() function in the script files.
Sources: redesign/script.js:22-51, redesign/styles.css:10-112, redesign/index.html:20-33

Search, Filter, and Pagination

The redesign prototype includes real-time search and filtering capabilities.

• Search: An event listener on the search input (#search-input) updates state.searchTerm and calls applyFilters().
• Filter: A dropdown (#guest-filter) updates state.selectedGuest and also calls applyFilters().
• Pagination: The renderJokes() function slices the state.filteredJokes array based on state.currentPage and state.jokesPerPage. The renderPagination() function dynamically creates the pagination controls.

This flowchart illustrates the filtering and rendering logic.

Random Joke Modal

A prominent "Random Joke" button triggers a modal window displaying a randomly selected joke.

• showRandomJoke() selects a joke, populates the modal's content, and adds an active class to the modal element.
• Keyboard shortcuts are supported: 'R' to open the modal and 'Esc' to close it.

Sources: redesign/script.js:311-338, 450-458, redesign/jokes.html:100-112, 222-261

old React Implementation

Located in old/site-src/, this version is a single-page application built with React. It uses functional components with hooks (useState, useEffect) for state management and rendering.

Sources: old/site-src/App.jsx, old/site-src/TODO.txt

Architecture and Components

The main application component is App.jsx. It manages the active section (e.g., 'home', 'jokes', 'videos') and renders child components accordingly.

The component hierarchy is structured as follows:

This diagram shows the main components rendered by App.jsx and how content is conditionally displayed based on the activeSection state.
Sources: old/site-src/App.jsx:29, 71-155, 192-198

State Management and Navigation

State is managed within the App component using useState hooks:

• activeSection: A string that determines which main content section is visible.
• mobileMenuOpen: A boolean to toggle the mobile navigation menu.
• randomJoke: Stores a featured joke that changes periodically.

Navigation is handled by the handleNavigation function, which updates the activeSection state, causing React to re-render and display the corresponding component.

// old/site-src/App.jsx:29-31
const [activeSection, setActiveSection] = useState('home')
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const [randomJoke, setRandomJoke] = useState('')

// old/site-src/App.jsx:63-67
const handleNavigation = (section) => {
    setActiveSection(section)
    setMobileMenuOpen(false)
    window.scrollTo({ top: 0, behavior: 'smooth' })
}

Sources: old/site-src/App.jsx:29-31, 63-67

A useEffect hook is used to power the "Random Norm Wisdom" section, which cycles through a hardcoded array of jokes every 10 seconds.
Sources: old/site-src/App.jsx:55-61

codex-design Variant

This implementation, found in codex-design/, is another vanilla JavaScript approach, described as a "Codex-inspired interface." It presents the joke archive as a single-page, interactive library.

Sources: README.md:32-40, codex-design/index.html

Key Features

• Spotlight Joke: A section at the top highlights a random joke, which can be reshuffled by the user.
• Combined Filters: Search, guest, and source filters work together to refine the list of jokes in real-time.
• Dynamic Rendering: The list of jokes is rendered dynamically into the .joke-grid element using a <template> tag (#joke-card).
• Theme Toggle: Like the redesign, it includes a light/dark theme toggle that persists the user's choice.

The UI structure is defined in codex-design/index.html and consists of a header, a "highlight" section for the random joke, a "filters" section, and a "results" section for the main list.

<!-- codex-design/index.html:43-50 -->
<section class="results" aria-live="polite">
    <header class="results-header">
      <h2>Joke Catalog</h2>
      <p class="count"><span data-count>0</span> jokes shown</p>
    </header>
    <ul class="joke-grid" data-results></ul>
</section>

<!-- codex-design/index.html:52-69 -->
<template id="joke-card">
  <li class="card">
    <blockquote class="joke-text"></blockquote>
    <dl class="meta">
      <!-- ... meta fields ... -->
    </dl>
    <a class="jump-link" target="_blank" rel="noopener" hidden>Watch clip</a>
  </li>
</template>

Sources: codex-design/index.html:26-77

Conclusion

The norm repository provides a fascinating case study in frontend development, showcasing three different approaches to building a data-driven user interface. The progression from the old React SPA to the framework-less redesign and codex-design prototypes reflects a trend towards leveraging modern browser capabilities (ES6+, CSS Custom Properties) to create performant, maintainable, and feature-rich static websites. While the React version offers the structural benefits of a framework, the newer vanilla JS implementations demonstrate that a sophisticated user experience—including dynamic filtering, theming, and interactivity—can be achieved without such dependencies.

Sources: README.md, redesign/README.md, old/site-src/TODO.txt