Adding New Content

Relevant source files

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

• PLAYLIST_EXTRACTION_GUIDE.md
• redesign/script.js
• README.md
• old/site-src/TODO.txt
• redesign/jokes.html
• redesign/videos.html
• redesign/transcripts.html

Introduction

The Norm Macdonald Archive is a static website built with vanilla HTML, CSS, and JavaScript. Its content—including jokes, videos, and transcripts—is data-driven, loaded dynamically from local JSON files. Adding new content to the archive involves manually editing these JSON files and, in the case of videos, following a specific extraction and merging process.

The primary content data sources are jokes-data.json, consolidated_youtube_data.json, and transcripts.json. Once these files are updated and committed to the repository, the changes will be reflected on the live site.

Sources: README.md, redesign/script.js:56-68, PLAYLIST_EXTRACTION_GUIDE.md

Data-Driven Architecture

The website's pages fetch and render data from corresponding JSON files upon loading. This architecture separates content from presentation, allowing for updates without changing the core HTML or JavaScript logic.

This diagram illustrates the general flow of how content is loaded on the site.

Adding Jokes

Jokes are stored in jokes-data.json. To add a new joke, you must add a new JSON object to the array in this file. The structure of a joke object is consumed by the front-end JavaScript to render joke cards.

Sources: redesign/script.js:56-68, README.md:23-24

Joke Data Schema

Each joke object in the jokes-data.json array should conform to the following structure. While some fields like guest or url can be null, joke is essential.

Field	Type	Description	Example
joke	String	The text of the joke. Supports \n for line breaks.	"I was in my kitchen..."
episode	String	The source episode or show.	"Norm Macdonald Live - S01E01"
guest	String	The guest associated with the joke, if any.	"Super Dave Osborne"
time	String	The timestamp in the video where the joke occurs.	"15:22"
url	String	The YouTube video ID (not the full URL).	"p3155F_ALzU"

Sources: redesign/script.js:142-181

This entity-relationship diagram shows the structure of a joke entry.

Example Joke Entry

{
  "joke": "The more I learn about this Hitler guy, the more I don't care for him.",
  "episode": "Norm Macdonald Live - S01E01",
  "guest": "Super Dave Osborne",
  "time": "45:12",
  "url": "p3155F_ALzU"
}

Source: Inferred from redesign/script.js:142-181.

Adding Videos

Adding videos is a more involved process that requires extracting data from a YouTube playlist and merging it into the main consolidated_youtube_data.json file. The PLAYLIST_EXTRACTION_GUIDE.md provides detailed instructions for this workflow.

Sources: PLAYLIST_EXTRACTION_GUIDE.md, old/site-src/TODO.txt:5, README.md:40-41, redesign/videos.html:43-46

Video Extraction and Merging Flow

The following diagram outlines the complete process for adding new videos from a YouTube playlist.

Method 1: Browser Console Script

This is the easiest method and does not require any installation. The provided script is executed in the browser's developer console on the YouTube playlist page.

1. Navigate to the YouTube playlist (e.g., https://youtube.com/playlist?list=PLxTIDernmMHuIsNqSMOhKR1jlWimaLklk).
2. Scroll down until all videos in the playlist are visible.
3. Open the developer console (F12 or Ctrl+Shift+J).
4. Paste and run the following script:

const videos = [];
const videoElements = document.querySelectorAll('ytd-playlist-video-renderer');

videoElements.forEach(video => {
    try {
        const titleElement = video.querySelector('#video-title');
        const linkElement = video.querySelector('a#thumbnail');
        if (titleElement && linkElement) {
            const url = linkElement.href;
            const videoId = new URL(url).searchParams.get('v');
            const title = titleElement.textContent.trim();
            videos.push({
                "Video url": `https://www.youtube.com/watch?v=${videoId}`,
                "Title": title,
                "Description": "Video url:",
                "Channel name": "N/A",
                "Duration": "N/A",
                "Views": "N/A",
                "Thumbnail url": "N/A"
            });
        }
    } catch (e) { console.error('Error:', e); }
});

console.log(JSON.stringify(videos, null, 2));
console.log(`Extracted ${videos.length} videos`);
copy(JSON.stringify(videos, null, 2));
console.log("✅ JSON copied to clipboard!");

Source: PLAYLIST_EXTRACTION_GUIDE.md:15-42

The script extracts the video title and URL for each video, formats it as a JSON object, and copies the resulting array to the clipboard. This output must be saved as playlist_videos.json.

Video Data Schema

The extraction script generates a JSON object for each video with a specific structure. The merge_playlist_data.py script presumably uses this structure to add to the main consolidated_youtube_data.json file.

Field	Type	Description
Video url	String	The full YouTube watch URL.
Title	String	The title of the video.
Description	String	A placeholder description.
Channel name	String	Placeholder, "N/A".
Duration	String	Placeholder, "N/A".
Views	String	Placeholder, "N/A".
Thumbnail url	String	Placeholder, "N/A".

Source: PLAYLIST_EXTRACTION_GUIDE.md:25-33

Merging and Deployment

After creating playlist_videos.json, run the merge_playlist_data.py script. This script loads the new videos, checks for duplicates, and adds the new entries to consolidated_youtube_data.json.

Finally, commit the updated consolidated_youtube_data.json file to the repository to make the changes live.

git add consolidated_youtube_data.json
git commit -m "Add videos from playlist <PLAYLIST_ID>"
git push

Source: PLAYLIST_EXTRACTION_GUIDE.md:73-86

Adding Transcripts

Transcripts are stored in transcripts.json and displayed on the transcripts page. Based on the site's structure, adding a new transcript involves adding a new JSON object to the array in this file.

Sources: redesign/transcripts.html, old/site-src/App.jsx:326-328

Transcript Data Schema

The exact schema for transcripts.json is not explicitly defined in the provided files. However, a logical structure can be inferred, likely containing a title for the transcript and the content itself.

Summary

Adding new content to the Norm Macdonald Archive is a manual process centered around updating JSON files. While adding jokes and transcripts is a straightforward matter of editing the respective JSON array, adding videos requires a multi-step workflow involving data extraction from YouTube, merging via a Python script, and committing the final consolidated data file. All content updates are finalized by committing the changed files to the Git repository.

Sources: README.md, PLAYLIST_EXTRACTION_GUIDE.md