1 2import { useEffect, useMemo, useState } from 'react'; 3import { html } from '../html.js?v=3.8.36'; 4import { ArrowLeft, ArrowRight, Archive, BookOpen, Network, Search, Github, Mail } from 'lucide-react'; 5import ArchiveRouteHeader from './ArchiveRouteHeader.js?v=3.8.36'; 6import { IDLE_LINE, IDLE_REVEAL_MS } from '../utils/easterEggs.js?v=3.8.36'; 7 8const IDLE_RESET_EVENTS = ['pointerdown', 'keydown', 'wheel', 'scroll', 'touchstart']; 9 10const AboutPage = ({ onBack, onStart, onParticipate, records }) => { 11 // Still here? (#754) One line appears after two quiet minutes on this page. 12 // It is plain text at the end of the page: no dialog, no live region, and no 13 // focus change, so a reader who stays put is never interrupted. 14 const [idleLineShown, setIdleLineShown] = useState(false); 15 16 useEffect(() => { 17 if (idleLineShown) return undefined; 18 19 let timer = null; 20 const restart = () => { 21 if (timer !== null) clearTimeout(timer); 22 timer = setTimeout(() => setIdleLineShown(true), IDLE_REVEAL_MS); 23 }; 24 25 restart(); 26 for (const name of IDLE_RESET_EVENTS) { 27 window.addEventListener(name, restart, { passive: true }); 28 } 29 30 return () => { 31 if (timer !== null) clearTimeout(timer); 32 for (const name of IDLE_RESET_EVENTS) window.removeEventListener(name, restart); 33 }; 34 }, [idleLineShown]); 35 36 // Calculate live stats from records 37 const stats = useMemo(() => { 38 if (!records || records.length === 0) return null; 39 const years = records.map(r => r.year).filter(Boolean); 40 const pubs = new Set(records.map(r => r.pub).filter(Boolean)); 41 const cats = new Set(records.flatMap(r => r.categories || []).filter(Boolean)); 42 const articles = records.filter(r => r.type !== 'social'); 43 const social = records.filter(r => r.type === 'social'); 44 return { 45 total: records.length, 46 articles: articles.length, 47 social: social.length, 48 minYear: Math.min(...years), 49 maxYear: Math.max(...years), 50 publications: pubs.size, 51 categories: cats.size 52 }; 53 }, [records]); 54 55 return html` 56 <div className="min-h-screen archive-canvas"> 57 <${ArchiveRouteHeader} onBack=${onBack} sectionTitle="About this archive" /> 58 59 <main className="container mx-auto px-4 py-12 max-w-3xl"> 60 61 <div className="archive-panel archive-panel--accent archive-density--spacious mb-12"> 62 <div className="flex items-center gap-3 mb-4"> 63 <div className="bg-stone-900 text-white p-2"> 64 <${Archive} className="w-6 h-6" aria-hidden="true" /> 65 </div> 66 <h1 67 data-route-entry-focus 68 tabIndex="-1" 69 className="text-3xl md:text-5xl font-display font-bold text-stone-900 outline-none" 70 >About this archive</h1> 71 </div> 72 <p className="text-lg text-stone-600 leading-relaxed font-body"> 73 Jay Rosen's Internet Archive is a curated public collection of the works, critiques, and teachings of Jay Rosen, professor of journalism at New York University. It preserves four decades of writing about journalism, democracy, and public life. 74 </p> 75 ${onStart && html` 76 <button 77 type="button" 78 onClick=${onStart} 79 className="archive-action archive-action--primary group mt-6" 80 > 81 Start here 82 <${ArrowRight} className="w-4 h-4 transition-transform group-hover:translate-x-1" aria-hidden="true" /> 83 </button> 84 `} 85 ${onParticipate && html` 86 <button 87 type="button" 88 onClick=${onParticipate} 89 className="archive-action archive-action--secondary group ml-0 mt-3 sm:ml-3 sm:mt-6" 90 > 91 Ways to participate 92 <${ArrowRight} className="w-4 h-4 transition-transform group-hover:translate-x-1" aria-hidden="true" /> 93 </button> 94 `} 95 </div> 96 97 <section 98 id="privacy-and-browser-storage" 99 aria-labelledby="privacy-and-browser-storage-title" 100 tabIndex="-1" 101 className="mb-12 scroll-mt-24" 102 > 103 <h2 id="privacy-and-browser-storage-title" className="text-2xl font-display font-bold text-stone-900 mb
103-4">Privacy and browser storage</h2> 104 <div className="text-stone-700 leading-relaxed font-body space-y-4"> 105 <p> 106 This archive does not use advertising or analytics cookies. It uses local storage, session storage, IndexedDB, and cache storage to cache archive data and remember choices such as the welcome tour, reader settings, and desktop layout. 107 </p> 108 <p> 109 That browser storage stays on your device and can be cleared through your browser's site-data controls. Some fonts, code, and images come from third parties, including Google Fonts, esm.sh, and Unsplash; those services receive ordinary connection data such as your IP address. Embedded YouTube videos use YouTube's privacy-enhanced mode. 110 </p> 111 </div> 112 </section> 113 114 <section className="mb-12"> 115 <h2 className="text-2xl font-display font-bold text-stone-900 mb-4">About Jay Rosen</h2> 116 <div className="max-w-none text-stone-700 leading-relaxed font-body space-y-4"> 117 <p> 118 Jay Rosen has been a professor of journalism at New York University since 1986, when he completed his PhD dissertation, "The Impossible Press: American Journalism and the Decline of Public Life," under the supervision of Neil Postman. That dissertation argued that the phrase "the press informs the public" obscures more than it reveals, and that journalism's structural problems cannot be solved by professional standards alone. 119 </p> 120 <p> 121 In the 1990s, Rosen became one of the leading advocates of public journalism (also called civic journalism), a movement that argued the press should help communities participate in democratic life rather than simply report on events. His 1999 book <em>What Are Journalists For?</em> remains the definitive account of that movement. 122 </p> 123 <p> 124 Since 2003, Rosen has written the blog <a href="https://pressthink.org" target="_blank" rel="noreferrer" className="text-blue-700 hover:underline font-bold focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2">PressThink</a>, where he has developed a body of criticism that includes key concepts like "the view from nowhere," "the people formerly known as the audience," "the church of the savvy," and "not the odds, but the stakes." These ideas have shaped how journalists, scholars, and the public think about the role of the press in democracy. 125 </p> 126 <p> 127 His work spans articles, books, blog posts, lectures, interviews, and social media commentary across platforms including Twitter/X and Bluesky. 128 </p> 129 </div> 130 </section> 131 132 ${stats && html` 133 <section className="mb-12"> 134 <h2 className="text-2xl font-display font-bold text-stone-900 mb-4">Archive stats</h2> 135 <div className="grid grid-cols-2 lg:grid-cols-4 gap-4"> 136 <div className="archive-stat text-center"> 137 <div className="archive-stat__value">${stats.total.toLocaleString()}</div> 138 <div className="archive-stat__label mt-1">Total records</div> 139 </div> 140 <div className="archive-stat text-center"> 141 <div className="archive-stat__value">${stats.articles.toLocaleString()}</div> 142 <div className="archive-stat__label mt-1">Articles</div> 143 </div> 144 <div className="archive-stat text-center"> 145 <div className="archive-stat__value">${stats.social.toLocaleString()}</div> 146 <div className="archive-stat__label mt-1">Social posts</div> 147 </div> 148 <div className="archive-stat text-center"> 149 <div className="archive-stat__value">${stats.minYear}â${stats.maxYear}</div> 150 <div className="archive-stat__label mt-1">Date range</div> 151 </div> 152 </div> 153 <p className="text-xs text-stone-500 mt-2">Stats are calculated live from the loaded archive data.</p> 154 </section> 155 `} 156 157 <section className="mb-12"> 158 <h2 className="text-2xl font-display font-bold text-stone-900 mb
158-4">What you can do here</h2> 159 <div className="space-y-4"> 160 <div className="flex gap-4 items-start"> 161 <div className="archive-orientation-icon"> 162 <${Search} className="w-5 h-5 text-stone-600" aria-hidden="true" /> 163 </div> 164 <div> 165 <h3 className="font-bold text-stone-900 mb-1">Browse and search records</h3> 166 <p className="text-sm text-stone-600">Filter by category, era, content type, or keyword. Every record includes a summary, source link, and thematic tags.</p> 167 </div> 168 </div> 169 <div className="flex gap-4 items-start"> 170 <div className="archive-orientation-icon"> 171 <${Network} className="w-5 h-5 text-stone-600" aria-hidden="true" /> 172 </div> 173 <div> 174 <h3 className="font-bold text-stone-900 mb-1">Explore connections</h3> 175 <p className="text-sm text-stone-600">The entity browser shows how records connect through shared people, organizations, and concepts, and lets you search by specific names and institutions.</p> 176 </div> 177 </div> 178 <div className="flex gap-4 items-start"> 179 <div className="archive-orientation-icon"> 180 <${BookOpen} className="w-5 h-5 text-stone-600" aria-hidden="true" /> 181 </div> 182 <div> 183 <h3 className="font-bold text-stone-900 mb-1">Read the dissertation</h3> 184 <p className="text-sm text-stone-600">Jay Rosen's 1986 PhD dissertation, "The Impossible Press," is available in full through the archive's dissertation reader, mind map, and FAQ.</p> 185 </div> 186 </div> 187 </div> 188 </section> 189 190 <section className="mb-12"> 191 <h2 className="text-2xl font-display font-bold text-stone-900 mb-4">Methodology and sources</h2> 192 <div className="text-stone-700 leading-relaxed font-body space-y-4"> 193 <p> 194 Records were collected from public sources including PressThink, academic databases, the Wayback Machine, Twitter/X, Bluesky, and Tumblr. Each record was processed through a data pipeline that extracts metadata, generates summaries, assigns thematic categories, and identifies entities (people, organizations, and concepts). 195 </p> 196 <p> 197 Entity extraction and relationship mapping were performed using the Gemini API, with results validated through automated quality checks and manual review. Categories and eras follow a controlled taxonomy designed to reflect the major themes and periods of Rosen's career. 198 </p> 199 <p> 200 The archive is a static site with no server-side processing. All data is pre-generated and served as JSON files, making it fast and portable. 201 </p> 202 </div> 203 </section> 204 205 <section className="mb-12"> 206 <h2 className="text-2xl font-display font-bold text-stone-900 mb-4">Frequently asked questions</h2> 207 <div className="space-y-6"> 208 <div> 209 <h3 className="font-bold text-stone-900 mb-1">Who created this archive?</h3> 210 <p className="text-sm text-stone-600">This archive was curated by <a href="https://github.com/jamditis" target="_blank" rel="noreferrer" className="text-blue-700 hover:underline font-bold focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2">Joe Amditis</a>, associate director of operations at the Center for Cooperative Media at Montclair State University.</p> 211 </div> 212 <div> 213 <h3 className="font-bold text-stone-900 mb-1">Is this an official NYU project?</h3> 214 <p className="text-sm text-stone-600">No. This is an independent project created to preserve and make accessible the public works of Jay Rosen.</p> 215 </div> 216 <div> 217 <h3 className="font-bold text-stone-900 mb-1">How can I report an error or suggest a correction?</h3> 218 <p className="text-sm text-stone-600">Open an issue on the <a href="https://github.com/jamditis/rosen-frontend/issues" target="_blank" rel="noreferrer" className="text-blue-700 hover:underline font-bold focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2">GitHub repository</a> or contact the curator directly.</p> 219 </div> 220 <div>
221 <h3 className="font-bold text-stone-900 mb-1">Can I cite records from this archive?</h3> 222 <p className="text-sm text-stone-600">Yes. Each record modal includes a citation copy button. The preferred format is: Author (Year). "Title". Publication. Retrieved from [archive URL].</p> 223 </div> 224 <div> 225 <h3 className="font-bold text-stone-900 mb-1">Is the source code available?</h3> 226 <p className="text-sm text-stone-600">Yes. The full codebase is open source at <a href="https://github.com/jamditis/rosen-frontend" target="_blank" rel="noreferrer" className="text-blue-700 hover:underline font-bold focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2">github.com/jamditis/rosen-frontend</a>.</p> 227 </div> 228 </div> 229 </section> 230 231 <section className="mb-12"> 232 <h2 className="text-2xl font-display font-bold text-stone-900 mb-4">Credits and contact</h2> 233 <div className="archive-panel"> 234 <div className="space-y-3 text-sm text-stone-700"> 235 <p><strong>Archive curator:</strong> Joe Amditis</p> 236 <p><strong>Subject:</strong> Jay Rosen, NYU Professor of Journalism</p> 237 <p><strong>Hosted at:</strong> <a href="https://pressthink.org/j/rosen-archive/" target="_blank" rel="noreferrer" className="text-blue-700 hover:underline focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2">pressthink.org/j/rosen-archive/</a></p> 238 <div className="flex gap-4 pt-2"> 239 <a href="https://github.com/jamditis/rosen-frontend" target="_blank" rel="noreferrer" className="inline-flex items-center gap-1.5 text-stone-600 hover:text-stone-900 transition-colors focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"> 240 <${Github} className="w-4 h-4" aria-hidden="true" /> 241 <span>GitHub</span> 242 </a> 243 <a href="mailto:[email protected]" className="inline-flex items-center gap-1.5 text-stone-600 hover:text-stone-900 transition-colors focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"> 244 <${Mail} className="w-4 h-4" aria-hidden="true" /> 245 <span>Contact</span> 246 </a> 247 </div> 248 </div> 249 </div> 250 </section> 251 252 <div className="text-center pb-8"> 253 <button 254 type="button" 255 onClick=${onBack} 256 className="archive-action archive-action--primary" 257 > 258 <${ArrowLeft} className="w-4 h-4" aria-hidden="true" /> 259 Back to archive 260 </button> 261 </div> 262 263 ${idleLineShown && html` 264 <p className="archive-idle-line">${IDLE_LINE}</p> 265 `} 266 267 </main> 268 </div> 269 `; 270}; 271 272export default AboutPage;
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.