diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx index 9d56ec15..665246c8 100644 --- a/src/AppRouter.tsx +++ b/src/AppRouter.tsx @@ -52,6 +52,7 @@ import { VinesFeedPage } from "./pages/VinesFeedPage"; import { WalletSettingsPage } from "./pages/WalletSettingsPage"; import { WebxdcFeedPage } from "./pages/WebxdcFeedPage"; import { WorldPage } from "./pages/WorldPage"; +import { ArchivePage } from "./pages/ArchivePage"; const pollsDef = getExtraKindDef("polls")!; const colorsDef = getExtraKindDef("colors")!; @@ -206,6 +207,7 @@ export function AppRouter() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/pages/ArchivePage.tsx b/src/pages/ArchivePage.tsx new file mode 100644 index 00000000..088f5381 --- /dev/null +++ b/src/pages/ArchivePage.tsx @@ -0,0 +1,624 @@ +import { useMemo, useState } from 'react'; +import { Link } from 'react-router-dom'; +import { useSeoMeta } from '@unhead/react'; +import { ArrowLeft, Gamepad2, Film, Mic, BookOpen, Monitor, Sparkles, Play, ExternalLink, Clock } from 'lucide-react'; + +import { useAppContext } from '@/hooks/useAppContext'; +import { cn } from '@/lib/utils'; + +// --------------------------------------------------------------------------- +// Types +// --------------------------------------------------------------------------- + +interface ArchiveItem { + /** archive.org item identifier */ + identifier: string; + /** Display title */ + title: string; + /** Year (optional) */ + year?: string; + /** Brief one-liner */ + tagline: string; + /** Category for filtering */ + category: Category; +} + +type Category = 'games' | 'films' | 'audio' | 'software' | 'animation' | 'tv'; + +interface CategoryMeta { + label: string; + icon: React.ReactNode; + gradient: string; + accent: string; +} + +// --------------------------------------------------------------------------- +// Data +// --------------------------------------------------------------------------- + +const CATEGORIES: Record = { + games: { + label: 'Classic Games', + icon: , + gradient: 'from-violet-500/20 to-fuchsia-500/20', + accent: 'text-violet-500 dark:text-violet-400', + }, + films: { + label: 'Public Domain Films', + icon: , + gradient: 'from-amber-500/20 to-orange-500/20', + accent: 'text-amber-600 dark:text-amber-400', + }, + audio: { + label: 'Audio Treasures', + icon: , + gradient: 'from-emerald-500/20 to-teal-500/20', + accent: 'text-emerald-600 dark:text-emerald-400', + }, + tv: { + label: 'Classic Television', + icon: , + gradient: 'from-sky-500/20 to-cyan-500/20', + accent: 'text-sky-600 dark:text-sky-400', + }, + animation: { + label: 'Classic Cartoons', + icon: , + gradient: 'from-pink-500/20 to-rose-500/20', + accent: 'text-pink-500 dark:text-pink-400', + }, + software: { + label: 'Software History', + icon: , + gradient: 'from-blue-500/20 to-indigo-500/20', + accent: 'text-blue-600 dark:text-blue-400', + }, +}; + +const ITEMS: ArchiveItem[] = [ + // ── Classic Games ──────────────────────────────────────────── + { + identifier: 'msdos_Oregon_Trail_The_1990', + title: 'The Oregon Trail', + year: '1990', + tagline: 'You have died of dysentery. The game that traumatized a generation.', + category: 'games', + }, + { + identifier: 'msdos_Prince_of_Persia_1990', + title: 'Prince of Persia', + year: '1990', + tagline: 'Rotoscoped beauty. 60 minutes to save the princess.', + category: 'games', + }, + { + identifier: 'msdos_Wolfenstein_3D_1992', + title: 'Wolfenstein 3D', + year: '1992', + tagline: 'The grandfather of first-person shooters.', + category: 'games', + }, + { + identifier: 'msdos_SimCity_1989', + title: 'SimCity', + year: '1989', + tagline: 'Build your dream city. Watch it get destroyed by Godzilla.', + category: 'games', + }, + { + identifier: 'msdos_Pac-Man_1983', + title: 'Pac-Man', + year: '1983', + tagline: 'Waka waka waka waka waka.', + category: 'games', + }, + { + identifier: 'Doom-2', + title: 'Doom II', + year: '1994', + tagline: 'Rip and tear, until it is done.', + category: 'games', + }, + { + identifier: 'msdos_Donkey_Kong_1983', + title: 'Donkey Kong', + year: '1983', + tagline: 'The game that introduced the world to Mario.', + category: 'games', + }, + { + identifier: 'msdos_Where_in_the_World_is_Carmen_Sandiego_Enhanced_1989', + title: 'Where in the World is Carmen Sandiego?', + year: '1989', + tagline: 'Geography class never felt this cool.', + category: 'games', + }, + { + identifier: 'msdos_Golden_Axe_1990', + title: 'Golden Axe', + year: '1990', + tagline: 'Hack, slash, and ride dragons through a fantasy realm.', + category: 'games', + }, + { + identifier: 'msdos_Scorched_Earth_1991', + title: 'Scorched Earth', + year: '1991', + tagline: 'The mother of all games. Nuclear tanks on pixel hills.', + category: 'games', + }, + { + identifier: 'msdos_Dune_2_-_The_Building_of_a_Dynasty_1992', + title: 'Dune II', + year: '1992', + tagline: 'The game that invented real-time strategy.', + category: 'games', + }, + { + identifier: 'msdos_Leisure_Suit_Larry_1_-_Land_of_the_Lounge_Lizards_1987', + title: 'Leisure Suit Larry', + year: '1987', + tagline: 'The most awkward adventure in gaming history.', + category: 'games', + }, + + // ── Flash Games ────────────────────────────────────────────── + { + identifier: 'stick-rpg-complete', + title: 'Stick RPG Complete', + tagline: 'The Flash game that consumed entire afternoons.', + category: 'games', + }, + { + identifier: 'the-binding-of-isaac_202111', + title: 'The Binding of Isaac (Flash)', + tagline: 'Edmund McMillen\'s dark roguelike masterpiece, original Flash version.', + category: 'games', + }, + + // ── Public Domain Films ────────────────────────────────────── + { + identifier: 'Nosferatu_most_complete_version_93_mins.', + title: 'Nosferatu', + year: '1922', + tagline: 'The unauthorized Dracula adaptation that became an immortal classic.', + category: 'films', + }, + { + identifier: 'Night.Of.The.Living.Dead_1080p', + title: 'Night of the Living Dead', + year: '1968', + tagline: 'George Romero invented an entire genre in one night.', + category: 'films', + }, + { + identifier: 'his_girl_friday', + title: 'His Girl Friday', + year: '1940', + tagline: 'Rapid-fire dialogue. Cary Grant at his most charming.', + category: 'films', + }, + { + identifier: 'house_on_haunted_hill_ipod', + title: 'House on Haunted Hill', + year: '1959', + tagline: 'Vincent Price offers $10,000 to anyone who survives the night.', + category: 'films', + }, + { + identifier: 'Sita_Sings_the_Blues', + title: 'Sita Sings the Blues', + year: '2008', + tagline: 'Ancient Indian epic meets 1920s jazz. A creative commons triumph.', + category: 'films', + }, + { + identifier: '774-plan-9-from-outer-space', + title: 'Plan 9 from Outer Space', + year: '1957', + tagline: 'The "worst movie ever made" is the best movie ever made.', + category: 'films', + }, + + // ── Classic TV ─────────────────────────────────────────────── + { + identifier: 'theloneranger_201705', + title: 'The Lone Ranger', + tagline: 'Hi-yo, Silver! Away! Justice rides on horseback.', + category: 'tv', + }, + { + identifier: 'get-smart', + title: 'Get Smart', + tagline: 'Would you believe... the funniest spy show ever made?', + category: 'tv', + }, + { + identifier: 'GreenAcresCompleteSeries', + title: 'Green Acres', + tagline: 'A New York lawyer moves to the country. Chaos follows.', + category: 'tv', + }, + + // ── Audio Treasures ────────────────────────────────────────── + { + identifier: 'gd77-05-08.sbd.hicks.4982.sbeok.shnf', + title: 'Grateful Dead - Cornell \'77', + year: '1977', + tagline: 'The greatest live concert recording of all time. No debate.', + category: 'audio', + }, + { + identifier: 'alice_in_wonderland_librivox', + title: 'Alice\'s Adventures in Wonderland', + tagline: 'Lewis Carroll\'s masterpiece, read aloud for free. Down the rabbit hole.', + category: 'audio', + }, + { + identifier: 'art_of_war_librivox', + title: 'The Art of War', + tagline: 'Sun Tzu\'s timeless strategy treatise. The most downloaded audiobook on the internet.', + category: 'audio', + }, + { + identifier: 'ird059', + title: 'The Conet Project', + tagline: 'Recordings of mysterious shortwave numbers stations. Pure Cold War eeriness.', + category: 'audio', + }, + { + identifier: 'adventures_holmes', + title: 'The Adventures of Sherlock Holmes', + tagline: 'Elementary, my dear Watson. 12 stories of deduction.', + category: 'audio', + }, + + // ── Classic Cartoons ───────────────────────────────────────── + { + identifier: 'BettyBoopCartoons', + title: 'Betty Boop Cartoons', + tagline: 'Boop-Oop-a-Doop! Pre-code animation at its most daring.', + category: 'animation', + }, + { + identifier: 'superman_the_mechanical_monsters', + title: 'Superman: The Mechanical Monsters', + year: '1941', + tagline: 'Fleischer Studios\' gorgeous Art Deco Superman. Still jaw-dropping.', + category: 'animation', + }, + { + identifier: 'popeye_patriotic_popeye', + title: 'Patriotic Popeye', + tagline: 'I yam what I yam! Spinach-fueled heroics.', + category: 'animation', + }, + { + identifier: 'bb_minnie_the_moocher', + title: 'Betty Boop: Minnie the Moocher', + tagline: 'Cab Calloway rotoscoped into a ghost walrus. Peak surrealism.', + category: 'animation', + }, + { + identifier: 'woody_woodpecker_pantry_panic', + title: 'Woody Woodpecker: Pantry Panic', + tagline: 'Ha-ha-ha-HA-ha! The bird who drove everyone insane.', + category: 'animation', + }, + + // ── Flash Animations ───────────────────────────────────────── + { + identifier: 'flash_badger', + title: 'Badger Badger Badger', + tagline: 'Mushroom! MUSHROOM! A snake! Peak early internet.', + category: 'animation', + }, + { + identifier: 'peanut-butter-jelly-time', + title: 'Peanut Butter Jelly Time', + tagline: 'A dancing banana changed the internet forever.', + category: 'animation', + }, + + // ── Prelinger Archives / Educational Films ─────────────────── + { + identifier: 'DuckandC1951', + title: 'Duck and Cover', + year: '1951', + tagline: 'Bert the Turtle taught kids to survive nuclear war. (Spoiler: no.)', + category: 'films', + }, + + // ── Software History ───────────────────────────────────────── + { + identifier: 'win95_in_dosbox', + title: 'Windows 95 in Your Browser', + tagline: 'The startup sound that changed personal computing. Press Start.', + category: 'software', + }, + { + identifier: 'win3_stock', + title: 'Windows 3.11', + tagline: 'Program Manager, File Manager, Solitaire. The holy trinity.', + category: 'software', + }, +]; + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function thumbnailUrl(identifier: string): string { + return `https://archive.org/services/img/${identifier}`; +} + +function archiveUrl(identifier: string): string { + return `https://archive.org/details/${identifier}`; +} + +function dittoUrl(identifier: string): string { + return `/i/${encodeURIComponent(archiveUrl(identifier))}`; +} + +// --------------------------------------------------------------------------- +// Components +// --------------------------------------------------------------------------- + +function CategoryPill({ category, active, onClick }: { + category: Category | 'all'; + active: boolean; + onClick: () => void; +}) { + const meta = category === 'all' + ? { label: 'All', icon: , accent: 'text-primary' } + : CATEGORIES[category]; + + return ( + + ); +} + +function ArchiveCard({ item }: { item: ArchiveItem }) { + const meta = CATEGORIES[item.category]; + + return ( + + {/* Thumbnail */} +
+ {item.title} { + e.currentTarget.style.display = 'none'; + }} + /> + + {/* Hover play overlay */} +
+
+ +
+
+ + {/* Year badge */} + {item.year && ( +
+ + {item.year} +
+ )} + + {/* Category badge */} +
+ {meta.icon} + {meta.label} +
+
+ + {/* Content */} +
+

+ {item.title} +

+

+ {item.tagline} +

+
+ + ); +} + +/** A single featured "hero" item rendered larger. */ +function FeaturedCard({ item }: { item: ArchiveItem }) { + const meta = CATEGORIES[item.category]; + + return ( + +
+ {item.title} { + e.currentTarget.style.display = 'none'; + }} + /> + + {/* Gradient overlay */} +
+ + {/* Hover play */} +
+
+ +
+
+ + {/* Bottom info */} +
+
+ + {meta.icon} + {meta.label} + + {item.year && ( + + + {item.year} + + )} +
+

+ {item.title} +

+

+ {item.tagline} +

+
+
+ + ); +} + +// --------------------------------------------------------------------------- +// Page +// --------------------------------------------------------------------------- + +const CATEGORY_ORDER: (Category | 'all')[] = ['all', 'games', 'films', 'animation', 'audio', 'tv', 'software']; + +/** The featured items shown as hero cards at the top. */ +const FEATURED_IDS = [ + 'msdos_Oregon_Trail_The_1990', + 'Nosferatu_most_complete_version_93_mins.', + 'gd77-05-08.sbd.hicks.4982.sbeok.shnf', +]; + +export function ArchivePage() { + const { config } = useAppContext(); + const [activeCategory, setActiveCategory] = useState('all'); + + useSeoMeta({ + title: `Archive | ${config.appName}`, + description: 'Explore the best of the Internet Archive — classic games, films, music, and more.', + }); + + const featured = useMemo( + () => ITEMS.filter((item) => FEATURED_IDS.includes(item.identifier)), + [], + ); + + const filtered = useMemo(() => { + const base = ITEMS.filter((item) => !FEATURED_IDS.includes(item.identifier)); + if (activeCategory === 'all') return base; + return base.filter((item) => item.category === activeCategory); + }, [activeCategory]); + + return ( +
+ {/* Header */} +
+ + + +
+
+ +
+
+

Archive

+

Treasures from the Internet Archive

+
+
+ + + +
+ + {/* Featured hero row */} +
+
+ {featured.map((item) => ( + + ))} +
+
+ + {/* Category filter pills */} +
+
+ {CATEGORY_ORDER.map((cat) => ( + setActiveCategory(cat)} + /> + ))} +
+
+ + {/* Grid of items */} +
+
+ {filtered.map((item) => ( + + ))} +
+ + {filtered.length === 0 && ( +
+ +

No items in this category yet.

+
+ )} +
+ + {/* Attribution footer */} +
+
+

+ Content provided by the{' '} + + Internet Archive + + , a non-profit digital library. All items are in the public domain or freely available. +

+
+
+
+ ); +}