Local Development Setup
Relevant source files
The following files were used as context for generating this wiki page:
This document outlines the local development setup for the various versions of the Norm Macdonald Archive website contained within this repository. The project is composed of several distinct static site implementations, each with its own technology stack and build process. The primary versions are an older React-based application, a "Codex" design, and a modern "Redesign" prototype, both of which use vanilla HTML, CSS, and JavaScript.
The development process for most versions is straightforward, involving serving static files. The older React application requires a build step. Additionally, a process for extracting and updating YouTube video data is documented for maintaining the video archive content.
Project Structure Overview
The repository contains multiple independent front-end applications. The following table summarizes the key versions and their characteristics.
| Directory | Description | Tech Stack | Local Setup |
|---|---|---|---|
old/site-src/ | The source code for the original React-based website. | React, pnpm | Requires a build step. |
site/ | Pre-generated static assets from the old/site-src/ React build. | HTML, CSS, JS | Serve as a static site. |
codex-design/ | An alternate, "Codex-inspired" interface for the joke archive. | Vanilla HTML, CSS, JS | Serve as a static site. |
redesign/ | A modern prototype redesign of the Jokes section. | Vanilla HTML, CSS, JS | Serve as a static site. |
Sources: README.md, old/site-src/TODO.txt, redesign/README.md
This diagram illustrates the relationship between the different source directories and their outputs.
Sources: README.md, old/site-src/TODO.txt
Static Site Development (redesign/ & codex-design/)
The redesign and codex-design versions are built with pure HTML, CSS, and JavaScript, requiring no build tools. Development involves running a local static server in their respective directories.
Sources: README.md:30-32, README.md:52-55
Running Locally
To run either of these sites, you can use any static server. For example, using npx serve:
# To run the redesign prototype
npx serve redesign/
# To run the codex-design
npx serve codex-design/
Source: README.md:41-42
Architecture
Both static sites follow a similar client-side data loading pattern. The index.html file contains the basic structure, which then executes a JavaScript file (script.js). This script fetches data from a local JSON file to dynamically render content.
The following diagram shows the data loading sequence for the redesign site.
React App Development (old/)
The original version of the site, located in old/site-src, is a React application. It requires a build process to generate the static files that can be served.
Sources: old/site-src/TODO.txt:4, old/site-src/App.jsx
Build Process
The build process is managed by pnpm and involves compiling the React application and copying necessary data files.
The following flowchart outlines the steps to build and deploy the React application.
Source: old/site-src/TODO.txt:10-14
Build Commands
The following commands are used to prepare the React application for deployment.
| Command | Description |
|---|---|
pnpm run build | Compiles the React application into static assets in the dist folder. |
cp /home/ubuntu/consolidated_youtube_data.json dist/ | Copies the video data into the build output directory. |
Source: old/site-src/TODO.txt:12-13
Pre-built site/ Directory
The root site/ directory contains a pre-generated build of the React application. For quick local viewing without performing a build, you can serve this directory directly.
npx serve site
Source: README.md:39-41
Data Management
A key part of local development can be updating the video data, which is consolidated into consolidated_youtube_data.json. The PLAYLIST_EXTRACTION_GUIDE.md provides several methods for extracting video information from a YouTube playlist.
Data Extraction Flow
The general process involves extracting data from a YouTube playlist into a temporary playlist_videos.json file and then merging it into the main consolidated_youtube_data.json.
Source: [PLAYLIST_EXTRACTION_GUIDE.md]
Extraction Methods
Three methods are provided for extracting playlist data.
| Method | Description | Requirements |
|---|---|---|
| Browser Console | Easiest method. A JS script is pasted into the browser console on the YouTube playlist page. | Web Browser |
| Python Script | Most reliable. A Python script automatically creates the JSON file. | Python, pytube library |
| Browser Tool | User-friendly. An HTML tool guides the user through the copy-paste process. | Web Browser |
Source: PLAYLIST_EXTRACTION_GUIDE.md:7-43
The browser console script is provided for convenience:
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!");