Transcripts Data Schema

Relevant source files

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

• redesign/transcripts.json
• redesign/transcripts.js
• redesign/transcripts.html
• redesign/styles.css
• old/site-src/TranscriptsSection.jsx
• transcripts.json

The Transcripts feature in the Norm Macdonald Archive is powered by a simple, structured JSON file, transcripts.json. This document outlines the schema of this data file, how it is fetched and processed by the frontend JavaScript, and how it is rendered into HTML to display expandable transcript cards for the user.

The system is designed to be entirely client-side, fetching the static JSON file and dynamically building the UI. This approach is used in both the current vanilla JavaScript implementation and a previous React-based version, demonstrating the schema's flexibility.

Data Schema

The core of the feature is the transcripts.json file, which contains an array of transcript objects. Each object represents a single, self-contained transcript, such as a comedy bit or an interview segment.

Sources: redesign/transcripts.json, old/site-src/TranscriptsSection.jsx:5

ER Diagram

This diagram illustrates the relationship between a Transcript and its DialogueLine entries. Each transcript can have one or more dialogue lines.

Field Definitions

The following tables describe the fields for each object within the transcripts.json array and its nested content array.

Transcript Object

Field	Type	Description	Example
id	String	A unique identifier for the transcript.	"moth_joke"
title	String	The display title for the transcript card.	"The Moth Joke"
type	String	A category for the transcript.	"Stand-up"
content	Array	An array of Dialogue Line objects.	[{ "speaker": "Norm", "text": "..." }]

Dialogue Line Object (content array items)

Field	Type	Description	Example
speaker	String	The name of the person speaking the line.	"Norm"
text	String	The dialogue text spoken by the speaker.	"A moth... "

Sources: redesign/transcripts.json, old/site-src/TranscriptsSection.jsx:26-31, redesign/transcripts.js:90-98

Example Snippet

This is an example of a single transcript object from transcripts.json.

[
  {
    "id": "moth_joke",
    "title": "The Moth Joke",
    "type": "Stand-up",
    "content": [
      {
        "speaker": "Norm",
        "text": "A moth goes into a podiatrist's office..."
      },
      {
        "speaker": "Podiatrist",
        "text": "What's the problem, moth?"
      }
    ]
  }
]

Sources: redesign/transcripts.json

Data Loading and Rendering

The transcripts.js file is responsible for fetching the JSON data and rendering it into the DOM. The process begins on page load and is fully asynchronous.

Sources: redesign/transcripts.js

Loading Sequence

This diagram shows the sequence of events from page load to the transcripts appearing on the screen.

Key Functions

• loadTranscripts(): Asynchronously fetches transcripts.json. On success, it hides the loading indicator, updates the total transcript count, and calls renderTranscripts.
• renderTranscripts(transcripts): Clears the main container and iterates through the array of transcript objects, calling createTranscriptCard for each one and appending the result to the DOM.
• createTranscriptCard(transcript): Creates the HTML elements for a single transcript card, including the header, title, toggle button, and the hidden content area which is populated with dialogue lines. It also attaches the click event listener to the toggle button.

Sources: redesign/transcripts.js:37-70

UI Components and Interaction

The user interface for the transcripts is composed of a list of expandable cards. Each card's structure is defined in transcripts.html and styled by styles.css, with its content and behavior managed by transcripts.js.

HTML Structure

The main container for the transcripts is a div with the ID transcripts-container.

<!-- Transcripts List -->
<section class="transcripts-section">
    <div id="transcripts-container" class="transcripts-list">
        <!-- Transcripts will be inserted here by JavaScript -->
    </div>
    <!-- Loading State -->
    <div id="loading-state" class="empty-state">
        ...
    </div>
</section>

Sources: redesign/transcripts.html:72-82

Each transcript is rendered as a .transcript-card element. Within each card, dialogue lines are structured using .dialogue-line, which contains a .speaker and a .dialogue-text element.

Sources: redesign/styles.css:1270-1323, redesign/transcripts.js:90-100

Expand/Collapse Logic

User interaction is handled by a click event listener on the .transcript-toggle button within each card.

This flowchart shows the logic executed when a user clicks the toggle button.

Legacy Implementation (React)

An older version of the site used React to render the transcripts. The component TranscriptsSection.jsx demonstrates a similar pattern, importing the same transcripts.json data.

• It uses a state variable selectedTranscript to control whether the list view or a detailed view is shown.
• When a transcript is selected, it maps over the selectedTranscript.content array to render the dialogue lines.
• This shows that the JSON schema is robust enough to be consumed by different frontend frameworks and rendering strategies.

Sources: old/site-src/TranscriptsSection.jsx:5, 12, 25-33