Redesign Architecture

Relevant source files

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

• redesign/README.md
• redesign/index.html
• redesign/styles.css
• redesign/jokes.html
• redesign/about.html
• redesign/videos.html
• redesign/transcripts.html

The Redesign Architecture represents a prototype for a modern, static version of The Norm Macdonald Archive. It is built using pure HTML, CSS, and JavaScript, intentionally avoiding frameworks to maintain simplicity and performance. The architecture is designed to be mobile-first and features a clean, modern aesthetic inspired by "Norm Macdonald Live".

The core of the redesign is a set of interconnected static pages that provide a consistent user experience for browsing different types of content, such as jokes, videos, and transcripts. Key architectural features include a CSS-based theming system for light/dark modes, real-time client-side search and filtering, and dynamic content rendering from local JSON data files.

Sources: redesign/README.md, redesign/index.html:2-10

Overall Architecture

The system is a classic static site architecture where HTML files define the structure, a single CSS file handles all styling, and multiple JavaScript files provide interactivity for each page. Data is decoupled from the presentation layer, being loaded asynchronously from JSON files.

This diagram shows the high-level relationship between the core file types.

Core Technologies

The redesign is intentionally built with a minimal technology stack to ensure it can be served statically without complex build tooling.

Technology	Purpose
HTML5	Provides the semantic structure for all pages, including accessibility features like skip-to-main links.
CSS3	Handles all styling, layout, and theming. It uses Custom Properties (variables) for a robust theme system.
ES6+ JavaScript	Powers all interactive functionality, including data fetching, DOM manipulation, search, filtering, and pagination.

This approach avoids reliance on external frameworks, making the project lightweight and maintainable.

Sources: redesign/README.md:28-32, redesign/index.html:12, redesign/styles.css:10-75

Styling and Theming

The visual presentation is managed by redesign/styles.css, which includes a comprehensive theming system.

CSS Custom Properties

Theming is achieved using CSS Custom Properties defined within the :root selector. This allows for easy switching between light and dark themes by changing a single data-theme attribute on the <html> element.

The system defines two full color palettes and defaults to the dark theme.

Variable Group	Description	Example
Dark Palette	Colors for the dark theme, inspired by "Google Stitch".	--studio-dark, --text-primary
Light Palette	Colors for the light theme.	--light-bg, --light-text-primary
Abstracted Variables	Generic variables that map to either the light or dark palette depending on the active theme.	--bg-primary, --text-1, --accent
Layout Variables	Variables for spacing, typography, border radius, and shadows.	--spacing-md, --font-sans, --radius-lg

Sources: redesign/styles.css:10-101

Theme Switching Logic

The theme is managed via JavaScript in each page's script, which listens for a click on the #theme-toggle button. It respects the user's system preference (prefers-color-scheme) as a default but allows overriding and persists the choice in localStorage.

This sequence diagram illustrates the theme switching flow initiated by a user.

HTML Structure

All pages in the redesign share a common, consistent HTML structure, promoting reusability and a unified user experience.

Common Layout

Each page is composed of three main sections:

1. <header class="header">: Contains the site logo and the main navigation menu (<nav class="nav">). The active page is denoted by the .active class on the corresponding nav link.
2. <main class="main">: The primary content area, which varies by page. It is the target for the skip-to-main accessibility link.
3. <footer class="footer">: Contains copyright information and a tagline.

This structure is consistent across index.html, jokes.html, videos.html, transcripts.html, and about.html.

Sources: redesign/index.html:32-51, 192-200, redesign/jokes.html:36-55, 230-238, redesign/about.html:36-55, 212-220

Page-Specific Components

While the layout is shared, each page has unique components within its <main> section.

Page	Key Components	Description
Home (index.html)	.hero, .featured-section, .quick-links	Displays a hero section with stats, a featured random joke, and cards linking to other archive sections.
Jokes (jokes.html)	.controls, .jokes-grid, .pagination, #random-modal	Provides controls for search/filter, a grid for displaying jokes, pagination, and a modal for a random joke.
Videos (videos.html)	.controls, .videos-grid, .pagination	A search input, a grid for video cards, and pagination controls.
Transcripts (transcripts.html)	.transcripts-list	A list of expandable cards, each containing a full transcript.

Sources: redesign/index.html:54, redesign/jokes.html:88, 142, 161, 169, redesign/videos.html:84, 114, 143, redesign/transcripts.html:75

Client-Side Logic

The interactive elements of the redesign are powered by vanilla JavaScript, with each page often having its own dedicated script file (e.g., videos.js, transcripts.js) or inline script (index.html). The jokes.html page uses script.js.

Page Initialization and Data Loading

On page load, scripts typically perform initialization tasks, including setting up the theme and fetching data from a corresponding JSON file.

This flowchart shows the typical initialization process for a data-driven page like jokes.html.

Random Joke Modal (jokes.html)

The "Random Joke" feature on the Jokes page uses a modal to display a joke fetched from the full dataset.

The flow is as follows:

1. User clicks the "Random Joke" button (#random-joke-btn).
2. The script selects a random joke from the loaded jokes array.
3. It populates the modal's content (#random-joke-text, #random-joke-meta).
4. The modal (#random-modal) gets the .active class, making it visible.
5. The "Another One" button inside the modal repeats steps 2-3 without closing it.
6. The close button or Escape key removes the .active class to hide the modal.

Sources: redesign/jokes.html:79, 169-228

Search and Filtering (jokes.html)

The search and filter functionality is handled in real-time on the client side.

1. An event listener is attached to the search input (#search-input) and the guest filter dropdown (#guest-filter).
2. On input or change, the filterJokes function is called.
3. This function filters the master jokes array based on the current search term and selected guest. The search is case-insensitive.
4. The renderJokes function is then called with the filtered array to update the DOM.
5. Pagination is recalculated and re-rendered based on the new result set.

Sources: redesign/jokes.html:100, 127

Data Model

The application relies on a simple data structure defined in jokes-data.json (for the Jokes and Home pages) and consolidated_youtube_data.json (for the Videos page).

jokes-data.json

This file contains an array of joke objects. The structure can be inferred from its usage in the scripts.

Field	Type	Description	Example
joke	String	The text of the joke. Can contain \n for line breaks.	"I'm not a fan of the new pound coin..."
guest	String	The guest associated with the joke on "Norm Macdonald Live".	"Super Dave Osborne"
episode	String	The episode number or title.	"S03E13"
video	Object	Contains a link to the video clip.	{"url": "...", "timestamp": "..."}

Sources: redesign/README.md:24, redesign/index.html:252-258

Summary

The Redesign Architecture is a well-structured, framework-free implementation of a static fan site. It prioritizes simplicity, performance, and a modern user experience. Its modular design, with separate HTML pages and a powerful CSS theming system, allows for easy expansion. The client-side logic for data handling, searching, and pagination demonstrates a robust approach to building interactive static sites.

Sources: redesign/README.md:34-38