Home

Relevant source files

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

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

The Home page serves as the main entry point for "The Norm Macdonald Archive," a fan-made tribute site. It provides a high-level overview of the archive's content, key statistics, and primary navigation to other sections of the site, such as Jokes, Videos, and Transcripts. The repository contains multiple implementations of the home page, including a modern, static HTML version and an older version built with React.

The primary goal of the home page is to welcome users, celebrate the legacy of Norm Macdonald, and guide them toward the different collections of content available in the archive. It features a clean, modern aesthetic inspired by "Norm Macdonald Live" and includes dynamic elements like a featured joke and a theme toggle.

Sources: README.md:3-4, index.html:5-6, old/site-src/App.jsx:180-186

Redesigned Static Home Page (index.html)

The current primary home page is a static site built with pure HTML, CSS, and JavaScript, with no frameworks. It is designed to be responsive and performant, with a focus on user experience. It includes a light/dark theme system and dynamically loaded content for the featured joke.

Sources: README.md:21-25, index.html

Page Structure

The page is organized into several distinct semantic sections, styled with CSS classes defined in styles.css.

The following diagram illustrates the high-level structure of index.html.

The main components of the home page are summarized below:

Component	HTML Element/Class	Description	Source File
Header	<header class="header">	Contains the site logo and main navigation links. It is sticky to the top of the viewport.	index.html:36-51
Theme Toggle	<button id="theme-toggle">	A fixed-position button to switch between light and dark themes.	index.html:12-26
Hero Section	<section class="hero">	The main landing banner with the site title, subtitle, statistics, and call-to-action buttons.	index.html:54-99
Featured Joke	<section class="featured-section">	Displays a randomly selected joke fetched from jokes-data.json.	index.html:103-128
Quick Links	<section class="quick-links">	A grid of cards that link to the main archive sections (Jokes, Videos, About).	index.html:131-167
Footer	<footer class="footer">	Contains copyright information and a tagline.	index.html:170-177

Hero Section

The hero section introduces the archive and presents key statistics about its contents.

Statistic	Value	Description
Videos	939	Total number of videos in the archive.
Jokes	76	Total number of curated jokes.
Laughs	∞	An infinite number of laughs.

This section also contains two primary call-to-action buttons: "Browse Jokes" and "Watch Videos", which direct users to the respective pages.

Sources: index.html:65-81, index.html:82-97

Featured Joke

A key feature of the home page is the "Featured Joke" section, which dynamically loads and displays a random joke from the jokes-data.json file. This process is handled by the loadFeaturedJoke JavaScript function embedded within index.html.

The joke display is interactive:

• A new joke is automatically loaded every 15 seconds.
• Users can manually request a new joke by clicking the "Another Joke" button or the joke card itself.
• Manually refreshing the joke resets the 15-second auto-rotation timer.

Sources: index.html:203-205, index.html:252-256, index.html:261-264

The following sequence diagram shows the process of loading and displaying a featured joke.

Theme Management

The site supports both light and dark themes, respecting the user's system preference by default while also allowing manual override. The initTheme function manages this functionality.

The theme logic is as follows:

1. Check localStorage for a user-saved theme. If found, apply it.
2. If no saved theme exists, check the system's prefers-color-scheme media query and set the theme accordingly.
3. The theme toggle button switches between 'light' and 'dark' themes, saving the choice to localStorage.
4. A listener on the prefers-color-scheme media query will update the theme if the system preference changes, but only if the user has not manually set a theme.

Sources: index.html:181-205

This flowchart visualizes the theme initialization process.

Legacy React Home Page (old/site-src/App.jsx)

An older version of the website was built as a single-page application using React. The App.jsx file contains the main component that conditionally renders different sections, including the home page content.

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

Component Structure and State

The home page is displayed when the activeSection state variable is set to 'home'. The App component manages the active section and other states like mobileMenuOpen and randomJoke.

Sources: old/site-src/App.jsx:24-26, old/site-src/App.jsx:177

The diagram below shows the structure of the home view within the React app.

Feature Comparison

The legacy React home page had a different set of features and content compared to the modern static version.

Feature	Legacy React Version (App.jsx)	Redesigned Static Version (index.html)
Framework	React	Vanilla JS/HTML/CSS
Random Joke	Cycles through a hardcoded array of 6 jokes every 10 seconds.	Fetches from a jokes-data.json file and rotates every 15 seconds.
Stats	400+ Jokes, 900+ Videos, 25+ Transcripts	76 Jokes, 939 Videos, ∞ Laughs
Navigation	State-driven rendering of components within a single page.	Standard anchor links to separate HTML files.
Extra Sections	Photo Gallery Preview, detailed featured content cards.	"Quick Links" grid.

Sources: old/site-src/App.jsx:28-44, old/site-src/App.jsx:62-66, index.html:65-81, index.html:207-209

Random Quote Showcase

Unlike the redesigned page that fetches jokes from a JSON file, the React version uses a useEffect hook to cycle through a hardcoded array of six featuredJokes every 10 seconds. The randomJoke state is updated within the interval.

// old/site-src/App.jsx:56-66
  useEffect(() => {
    const getRandomJoke = () => {
      const randomIndex = Math.floor(Math.random() * featuredJokes.length)
      setRandomJoke(featuredJokes[randomIndex])
    }
    getRandomJoke()
    const interval = setInterval(getRandomJoke, 10000) // Change every 10 seconds
    return () => clearInterval(interval)
  }, [])

Sources: old/site-src/App.jsx:28-35, old/site-src/App.jsx:56-66

Conclusion

The home page is a critical component of The Norm Macdonald Archive, acting as the central landing and navigation hub. The project has evolved from a React-based single-page application to a more streamlined, performant static site. Both versions prioritize celebrating Norm Macdonald's work by immediately presenting users with statistics, featured content, and clear pathways to explore the joke, video, and transcript collections. The modern implementation in index.html leverages vanilla JavaScript for dynamic features like theme switching and random joke fetching, demonstrating a commitment to a lightweight and maintainable architecture.

Sources: README.md:21-25, old/site-src/App.jsx:4