Random Site Summary — Story Explorer

Loaded SRC_URL

https://producingtechnology.com/65-apps/huangxinyi_183473_15200446_story_explorer.html

Summary of Behavior

Story Explorer is a single-file HTML app that fetches a JSON file (from producingtechnology.com/a1/15-json/) and re-renders its content as a magazine-style article. It expects a Wikipedia-style parse response — it reads data.parse.text["*"], parses the embedded HTML with DOMParser, and scrapes the .mw-parser-output subtree for paragraphs, h2/h3 headings, and table.infobox rows.

The interface has two panels:

• Featured Reading View — story title, a "Story ID" and "Chapters" pill row, a lead paragraph, an auto-selected pull quote (first paragraph between 140–260 characters), a live search box that filters chapter cards by substring, and up to ten chapter preview cards (each capped at 420 chars).
• Reading Guide sidebar — "Highlights" (infobox facts plus diagnostic counts), a numbered "Reading Path" of the first five sections, "Jump to Chapter" buttons that scrollIntoView on their card, and the raw source URL.

Extra niceties: pressing Enter in the URL field triggers loading, and a ?json= query parameter auto-loads on page open. The visual style is warm and editorial — cream background, serif Georgia body, burnt-orange accent.

Things That Didn't Work as Expected

• The default URL is the literal placeholder https://producingtechnology.com/a1/15-json/yourname.json. Clicking Load Story without editing it returns a 404 and shows a red error.
• The "Use My Link Later" button is misleading — the label suggests save-for-later behavior, but it only focuses and selects the input field and prints a hint. There is no sample data and no persistence.
• The app is hard-coded to the MediaWiki shape. A JSON file that doesn't expose parse.text["*"] (or a top-level html key) fails with "This JSON does not contain usable article HTML," even if the file is perfectly valid JSON.
• The sidebar section titled "Highlights" often shows only "Paragraphs found: N / Sections found: M" when there's no infobox — those are diagnostics, not highlights, so the label oversells what's there.
• Nothing is persisted in localStorage. Reloading the page or navigating away via browser.html's Prev/Next loses the URL.
• Embedded inside browser.html's iframe, the chapter "Jump to" buttons scroll the iframe's own document rather than the outer frame, so the header controls stay pinned while the content below scrolls — fine, but can feel disorienting.

Prompt to Improve the App

Refactor Story Explorer so it's format-agnostic and friendlier on first use. Specifically:

1. Replace the misnamed "Use My Link Later" button with "Try Sample", wired to a known-good JSON URL so a new visitor can see the full UI in one click.
2. Add a drag-and-drop / file-picker zone next to the URL input so users can load a local .json file without hosting it.
3. Generalize getHtmlFromJson and getParagraphs: if no MediaWiki parse.text["*"] is present, walk arbitrary JSON and render string leaves as paragraphs, with object keys as section headings. Show a small "detected format" badge (Wikipedia / Generic JSON / Plain HTML).
4. Rename "Highlights" to "At a glance" and compute real highlights when no infobox exists — top-five most frequent proper nouns or capitalized bigrams, plus an estimated reading time (words / 225).
5. Persist the last-used URL and a recent-URLs dropdown in localStorage, and update history.replaceState with ?json= after each successful load so the URL can be shared.
6. Add an "Export as Markdown" button that downloads the rendered story (title, intro, pull quote, chapter previews) as a .md file.
7. On fetch failure, distinguish the error: CORS / 404 / invalid JSON / wrong shape — currently they all collapse to the same red message.
8. Keep the single-file, no-dependency constraint, and preserve the current typographic palette.