Jokes Data Schema

Relevant source files

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

• redesign/jokes-data.json
• redesign/script.js
• codex-design/script.js
• old/site-src/JokesSection.jsx
• redesign/jokes.html
• codex-design/index.html

The Jokes Data Schema defines the structure for individual joke entries used throughout the Norm Macdonald Archive project. This data is stored in a static JSON file, jokes-data.json, and is consumed by various front-end components to display, filter, and search for jokes. The schema is designed to be simple and flexible, accommodating different pieces of metadata for each joke.

The core of the system is loading an array of these joke objects and rendering them in different UI contexts, such as the main "Jokes" page, a "Codex" design, and older React-based components. Each implementation may use a slightly different subset of the available fields.

Data Loading and Processing

The application loads joke data asynchronously from a static JSON file. This process is initiated on page load.

Sources: redesign/script.js:61-75, codex-design/script.js:213-228

The following diagram illustrates the data loading sequence for the redesign and codex-design interfaces.

This diagram shows the application using the browser's Fetch API to retrieve the static jokes-data.json file and populate its internal state.
Sources: redesign/script.js:62-68, codex-design/script.js:214-218

Schema Definition

The jokes-data.json file contains an array of joke objects. Each object represents a single joke and its associated metadata. While there are common fields, some are optional or specific to certain application versions.

The following diagram shows the entity relationship for a Joke object.

This ER diagram outlines the fields that constitute a single joke entry. Most metadata fields are optional.
Sources: redesign/script.js:180-208, codex-design/script.js:159-175, old/site-src/JokesSection.jsx:117-146

Field Reference

The table below details the fields found across the different implementations that consume the joke data.

Field	Type	Description	Used In
joke	string	Required. The full text of the joke. Newlines (\n) are used for line breaks and double newlines (\n\n) for paragraph breaks within the UI.	redesign, codex-design, old
guest	string	Optional. The name of the guest present during the joke. Used for filtering.	redesign, codex-design, old
episode	string	Optional. The episode name or number (e.g., "S03E12").	redesign, codex-design, old
time	string	Optional. The timestamp in the video where the joke occurs (e.g., "1:05:12").	redesign, codex-design, old
url	string	Optional. The YouTube video ID. Used to generate a "Watch" link.	redesign, codex-design, old
source	string	Optional. The source of the joke, such as the name of the show. Primarily used for filtering in the codex-design interface.	codex-design
id	number	Optional. A unique identifier for the joke object, used as a key in the old/site-src React component. This field is not present in the main jokes-data.json file.	old

Sources: redesign/script.js:110-123, 180-208, codex-design/script.js:100-112, 159-175, old/site-src/JokesSection.jsx:29-34, 117-146

Example Joke Object

Here is an example of a single joke object from the data source.

{
  "joke": "You know, with Hitler, the more I learn about that guy, the more I don't care for him.",
  "guest": "Super Dave Osborne",
  "episode": "S01E01",
  "time": "1:05:12",
  "url": "v2ddLq_f_3w",
  "source": "Norm Macdonald Live"
}

Source: This is a representative example based on the structure defined in redesign/jokes-data.json and consumed by the application scripts.

Data Consumption and Rendering

Different parts of the application consume the joke data to render UI components.

Redesign Interface (redesign/)

The main redesigned interface loads all jokes and provides real-time search and filtering.

• Filtering: Users can filter by a search term (matching joke, guest, or episode) and by a selected guest.
  Sources: redesign/script.js:110-118
• Rendering: The createJokeCard function dynamically builds HTML for each joke, displaying the joke text and any available metadata (episode, guest, time) as badges. A "Watch" button is shown if a url is present.
  Sources: redesign/script.js:180-221, redesign/jokes.html:145-147
• Text Parsing: The renderJokeText helper function specifically handles newlines in the joke field to create paragraph breaks in the HTML output.
  Sources: redesign/script.js:161-178

Codex Design Interface (codex-design/)

The "Codex" interface offers a different layout and filtering capabilities.

• Filtering: This version allows filtering by a search term, guest, and source.
  Sources: codex-design/script.js:100-112
• Rendering: A <template> element is used to clone and populate joke cards. It displays joke, guest, source, episode, and time. It also constructs a YouTube link with a timestamp if time is available.
  Sources: codex-design/index.html:70-88, codex-design/script.js:157-180

Old React Component (old/site-src/)

An older implementation using React also consumes the joke data.

• Filtering: Supports searching the joke text and filtering by guest.
  Sources: old/site-src/JokesSection.jsx:29-34
• Rendering: Maps over the filtered jokes to render Card components, displaying joke, episode, guest, time, and a "Watch" link from the url. It uses a joke's id or index as the React key.
  Sources: old/site-src/JokesSection.jsx:117-146

Summary

The Jokes Data Schema is a straightforward yet effective structure for managing a collection of jokes. It is stored in a static jokes-data.json file, which acts as a simple, file-based database for the entire application. The schema's use of optional fields allows for flexibility, and different front-end implementations consume this data to provide rich, interactive user experiences for browsing and searching Norm Macdonald's comedy.