HTML Export

What Gets Exported

Each processed lecture exports to a folder containing four items:

• index.html — The study document. Self-contained; works offline once exported.
• styles.css — The stylesheet. Must remain in the same folder as index.html.
• audio.m4a — The audio track, extracted from the source video using AVAssetExportSession. Used by the in-page audio player.
• images/ — A directory of JPEG screenshots, named {index}_{timestamp}.jpg (e.g., 0001_30.50.jpg).

The folder is fully portable. You can zip it, email it, put it on a USB drive, or host it on any web server. No external resources are required.

Export Location

By default, exports go to ~/HarvestryLibrary/YYYY-MM-DD Title/. The date prefix ensures lectures are sorted chronologically when browsed in Finder.

To change the export root folder, go to Settings → Export Location and click Choose Folder. Once set, all future exports use the new location. Existing exports are not moved.

Opening Your Export

From the lecture detail view, two buttons appear after processing completes:

• Open in Browser — Opens index.html directly in your default browser.
• Show in Finder — Reveals the export folder in Finder so you can navigate its contents, share the folder, or open it in a different browser.

The HTML Page Layout

The exported page uses a typography-focused editorial design:

• Page header — Full-bleed warm-gray background (#767670) with the lecture title, date, and audio player.
• Content column — Centered at 940px max-width on a warm-white background. No card gutter — the content area blends with the page background.
• Typography — Instrument Sans for headings and UI chrome; Newsreader (with font-optical-sizing: auto) for body text. Font size is user-adjustable.
• Tab control (if consolidated notes exist) — A two-tab switcher at the top of the content column: Transcript and Consolidated Notes.

Audio Sync

The exported page includes a standalone audio player in the page header. Each word in the transcript is wrapped in a <span data-s data-e> element containing its start and end timestamp. A small JavaScript snippet advances through these spans as the audio plays, applying a highlight class to the currently playing word.

You can also click any word in the transcript to seek the audio player to that exact moment. This makes the exported page function as an interactive study tool — you can read a section, hear it spoken in context, and jump around at will.

Screenshots in the Export

Screenshots are embedded inline in the transcript flow, positioned at the timestamp they were captured. Layout rules:

• Single screenshot — Floats right with text wrapping around it (.shot--float).
• Two or more consecutive screenshots — Rendered as a horizontal flex strip (.shot-row) at full column width.
• Click to lightbox — Clicking any screenshot in the exported page opens it in a full-screen lightbox with previous/next navigation.

Screenshots are saved as JPEG at 95% quality using CGImageDestination. This preserves full Retina resolution. Using NSBitmapImageRep (the older approach) would halve Retina dimensions, which is why Harvestry specifically avoids it.

Your Annotations in the Export

All annotations added in the transcript panel are included in the export:

• Highlights — Rendered as <mark data-hl="color"> elements. State (which highlights are active/toggled) is persisted in localStorage keyed by the document title.
• Margin notes — Rendered as <aside class="margin-note"> elements floating in the page gutter, vertically aligned with their anchor phrase.
• Inline notes — Rendered as <div class="user-note"> callout cards between content blocks.

Font Size Control

The exported page includes a font-size slider in the top-right corner of the content column. The range is 14–24px with a default of 19px. The selected size is persisted to localStorage and restored on every subsequent visit to that page.

Dark Mode

A dark mode toggle is available in the page header. Activating it switches the page to a dark color scheme. The preference is persisted in localStorage. A small inline script restores the theme before first paint to prevent a flash of unstyled content.

Re-exporting

Whenever you modify a completed lecture — by adding annotations, manually adding a screenshot, editing consolidated notes, or changing export settings — a "Modified, re-export needed" badge appears on the lecture in the sidebar and on the detail view toolbar.

Click the Reexport button to regenerate the HTML folder. Only Step 4 of the pipeline runs during a reexport. Transcription and screenshot capture are not repeated.

Reexport is always safe to run. All annotations are preserved — they are stored in Harvestry's database and written into the HTML fresh each time you export.

Finding Old Exports

If you need to locate an export from a lecture that's no longer in the Harvestry library, or if you've forgotten where exports go:

• Use the Show in Finder button on any lecture to reveal its export folder.
• Navigate directly to ~/HarvestryLibrary/ (or your custom export root) in Finder.
• In Finder, use ⌘ Space → Spotlight and search for index.html filtered to the export location.