Janady13/thatstupidcomputer / apps/web/src/App.tsx

1import { useEffect, useRef, useState, type MouseEvent } from 'react'; 2import { Link, useLocation, useNavigate } from 'react-router'; 3import { getPage, NAVIGATION } from '../../../packages/site/content'; 4import { breadcrumbsForPage } from '../../../packages/site/search'; 5import type { PublicSiteConfig } from '../../../packages/site/truth'; 6import { AnimationProvider, useAnimation } from './animation/orchestration/AnimationProvider'; 7import { Workshop } from './components/Workshop'; 8import { ServiceBoardScenery } from './components/ServiceBoardScenery'; 9import { DemoForm } from './components/DemoForm'; 10import { ContentSections, LiveWorkSample, RelatedPages } from './components/PageContent'; 11import { Icon } from './components/Icons'; 12import { analytics, ConsentControls, type SceneAction } from './measurement'; 13import './animation/animation.css'; 14import './styles/site.css'; 15 16export interface AppProps { path?: string; config: PublicSiteConfig; submissionId?: string } 17 18export function App(props: AppProps) { 19 return <AnimationProvider><Website {...props} /></AnimationProvider>; 20} 21 22function Website({ config, submissionId }: AppProps) { 23 const location = useLocation(); 24 const navigate = useNavigate(); 25 const page = getPage(location.pathname); 26 const path = page?.path ?? location.pathname; 27 const home = path === '/'; 28 const contact = path === '/contact/'; 29 const serviceBoard = path.startsWith('/services/') && !!page; 30 const { state, send, cue } = useAnimation(); 31 const [reduced, setReduced] = useState(true); 32 const [ready, setReady] = useState(false); 33 const heading = useRef<HTMLHeadingElement>(null); 34 const mobileMenu = useRef<HTMLDetailsElement>(null); 35 const previousPath = useRef(path); 36 const trigger = useRef<HTMLElement | SVGElement | null>(null); 37 const triggerIdentity = useRef<{ href: string; className: string } | null>(null); 38 const panel = useRef<HTMLElement>(null); 39 const paused = state.paused || reduced; 40 41 useEffect(() => { 42 analytics.configure({ ga4MeasurementId: config.ga4MeasurementId, canonicalOrigin: config.canonicalOrigin }); 43 }, [config.ga4MeasurementId, config.canonicalOrigin]); 44 45 useEffect(() => { 46 setReady(true); 47 const media = window.matchMedia('(prefers-reduced-motion: reduce)'); 48 const update = () => setReduced(media.matches); 49 update(); media.addEventListener('change', update); 50 cue('visitor.arrived'); 51 return () => media.removeEventListener('change', update); 52 // The animation cue is an event dispatcher; this entrance fires once per mount. 53 // eslint-disable-next-line react-hooks/exhaustive-deps 54 }, []); 55 56 useEffect(() => { 57 analytics.pageView(path); 58 if (mobileMenu.current) mobileMenu.current.open = false; 59 if (previousPath.current !== path) { 60 // Reset the reading page first, then let focus reveal the original workshop link. 61 if (serviceBoard || previousPath.current.startsWith('/services/')) window.scrollTo({ top: 0, behavior: 'instant' }); 62 // Room hotspots are SVG anchors, so compare the class attribute rather than className (an SVGAnimatedString there). 63 const restoredTrigger = home && triggerIdentity.current ? Array.from(document.querySelectorAll<HTMLAnchorElement | SVGAElement>('a[href]')).find(anchor => anchor.getAttribute('href') === triggerIdentity.current?.href && (anchor.getAttribute('class') ?? '') === triggerIdentity.current?.className) : undefined; 64 if (home && trigger.current?.isConnected) trigger.current.focus(); 65 else if (restoredTrigger) restoredTrigger.focus(); 66 else heading.current?.focus({ preventScroll: true }); 67 panel.current?.scrollTo({ top: 0 }); 68 previousPath.current = path; 69 } 70 }, [path, home, serviceBoard]); 71 72 useEffect(() => { 73 const keydown = (event: KeyboardEvent) => { 74 if (event.key !== 'Escape' || event.defaultPrevented) return; 75 if (mobileMenu.current?.open) { mobileMenu.current.open = false; mobileMenu.current.querySelector('summary')?.focus(); return; } 76 if (!home) { event.preventDefault(); navigate('/'); } 77 }; 78 document.addEventListener('keydown', keydown); 79 return () => document.removeEventListener('keydown', keydown); 80 }, [home, navigate]); 81 82 const rememberTrigger = (event: MouseEvent<HTMLDivElement>) => { 83 const anchor = (event.target as HTMLElement).closest('a'); 84 if (home && anchor && anchor.getAttribute('href') !== '/') { trigger.current = anchor; triggerIdentity.current = { href: anchor.getAttribute('href') ?? '/', className: anchor.getAttribute('class') ?? '' }; } 85 }; 86 const interaction = (action: SceneAction) => analytics.sceneInteraction(window.matchMedia('(max-width: 767px)').matches ? 'mobile-workshop' : 'desktop-office', action); 87 const startDemo = (source: 'hero' | 'navigation' | 'footer' | 'contact') => { analytics.demoStart(source); cue('project.started'); }; 88 const navigation = <>{NAVIGATION.filter(item => item.path !== '/' && item.path !== '/contact/').map(item => <Link key={item.path} to={item.path} aria-current={path === item.path ? 'page' : undefined}>{item.navLabel}</Link>)}</>; 89 90 return <div className={`site-shell ${home ? 'is-home' : 'has-page'} ${serviceBoard ? 'has-board' : ''} ${paused ? 'motion-paused' : ''}`} onClickCapture={rememberTrigger}> 91 <a className="skip-link" href="#main-content">Skip to content</a> 92 {!home && <Workshop path={path} paused={paused} onInteraction={interaction} readingBoard={serviceBoard} />} 93 <header className="site-header"> 94 <Link className="wordmark" to="/" aria-label="That Stupid Computer — home"><span>that stupid</span><span>computer<span className="wordmark-period">.</span></span></Link> 95 <nav className="desktop-navigation" aria-label="Main navigation">{navigation}</nav> 96 <div className="header-actions"><Link className="button button-dark header-demo" to="/contact/" onClick={() => startDemo('navigation')}>Get my demo<Icon name="arrow" /></Link><details className="mobile-navigation" ref={mobileMenu}><summary aria-label="Open navigation"><Icon name="menu" /><span>Menu</span></summary><nav aria-label="Mobile navigation">{navigation}<Link to="/contact/" onClick={() => startDemo('navigation')}>Get my demo <Icon name="arrow" /></Link></nav></details></div> 97 </header> 98 99 {home ? <main id="main-content" className="home-content" tabIndex={-1}> 100 <div className="hero-copy"><p className="eyebrow"><span className="status-dot" />Websites with a little more human</p><h1 ref={heading} tabIndex={-1}>{page?.heading ?? 'Less stupid. More business.'}</h1><p className="hero-intro">{page?.intro}</p><Link className="button button-rust hero-demo" to="/contact/" onClick={() => startDemo('hero')}>Get my demo<Icon name="arrow" /></Link><p className="hero-footnote">Good websites start with a conversation.</p></div> 101 <Workshop path={path} paused={paused} onInteraction={interaction} /> 102 <section className="home-overview" aria-label="Website services and next steps"><ContentSections sections={page?.sections ?? []} type="guide" /></section> 103 </main> : <> 104 {!serviceBoard && <div className="panel-scene-note" aria-hidden="true"><span>Less frustration.</span><strong>More possibility.</strong><span className="scene-note-rule" /><p>The computer has opinions.<br />Your website should have a purpose.</p></div>} 105 <main id="main-content" ref={panel} className={serviceBoard ? 'service-board' : `page-panel ${contact ? 'page-panel-contact' : ''}`} data-testid={serviceBoard ? 'service-board' : undefined} tabIndex={-1}> 106 {serviceBoard && <ServiceBoardScenery paused={paused} />} 107 <div className="panel-topline"><Link to={page?.parent && page.parent !== '/' ? page.parent : '/'} className="back-link"><span aria-hidden="true">←</span>{page?.parent === '/services/' ? 'All services' : 'Back to the workshop'}</Link>{!serviceBoard && <Link to="/" className="close-panel" aria-label="Close page and return to the workshop"><Icon name="close" /></Link>}</div> 108 {page ? <article> 109 <nav className="breadcrumb" aria-label="Breadcrumb"><ol>{breadcrumbsForPage(page).map((crumb, index, items) => <li key={crumb.path}>{index > 0 && <span aria-hidden="true">/</span>}{index === items.length - 1 ? <span aria-current="page">{crumb.label}</span> : <Link to={crumb.path}>{crumb.label}</Link>}</li>)}</ol></nav> 110 <header className="page-heading"><p className="eyebrow">{page.eyebrow}</p><h1 ref={heading} tabIndex={-1}>{page.heading}</h1><p className="page-intro">{page.intro}</p></header> 111 {path === '/work/' && <LiveWorkSample />} 112 {path === '/about/' && (config.publisher || config.provider || config.brand) && <section className="approved-identity content-section"><h2>The people behind the work</h2>{config.brand && <p>Explore the <a href={config.brand.url}>{config.brand.name}</a> brand.</p>}{config.provider && <p>Website services are provided by <a href={config.provider.url}>{config.provider.name}</a>.</p>}{config.publisher && <p>This website is published by <a href={config.publisher.url}>{config.publisher.name}</a>.</p>}</section>} 113 {page.service && config.provider && <p className="provider-credit">A service from <a href={config.provider.url}>{config.provider.name}</a>.</p>} 114 {contact && <DemoForm key={path} submissionId={submissionId} email={config.contact?.email} intentSearch={location.search} />} 115 <ContentSections sections={page.sections} type={path === '/services/' ? 'services' : path === '/process/' ? 'process' : contact ? 'contact' : undefined} /> 116 {!contact && <aside className="page-callout"><Icon name="spark" width="32" height="32" /><h2>{path === '/privacy/' ? 'Have a question?' : 'Your business deserves a good website.'}</h2><p>{path === '/privacy/' ? 'Let’s talk about how your information is handled.' : 'Tell us what you have in mind. We’ll start with the useful questions.'}</p><Link className="button button-rust" to={page.cta.href} onClick={() => startDemo('contact')}>{path === '/privacy/' ? page.cta.label : 'Get my demo'}<Icon name="arrow" /></Link></aside>} 117 <RelatedPages page={page} /> 118 </article> : <article><header className="page-heading"><p className="eyebrow">Well, this is awkward</p><h1 ref={heading} tabIndex={-1}>The computer misplaced that page.</h1><p className="page-intro">That address doesn’t lead to a page here. The workshop is still open.</p></header><Link className="button button-rust" to="/">Back to the workshop<Icon name="arrow" /></Link><Link className="text-link" to="/services/">See what we do<Icon name="arrow" /></Link></article>} 119 <footer className="panel-footer"><span>That Stupid Computer</span><Link to="/privacy/">Privacy</Link></footer> 120 </main> 121 </>} 122 <footer className="site-footer"><div className="footer-left"><span className="footer-credit">Serious about websites.<br /><strong>Less serious about ourselves.</strong></span><Link to="/privacy/">Privacy</Link></div><div className="footer-right"><ConsentControls /><button className="motion-control" type="button" disabled={!ready || reduced} aria-pressed={paused} onClick={() => { send({ type: state.paused ? 'PLAY' : 'PAUSE' }); interaction(state.paused ? 'motion_play' : 'motion_pause'); }}><Icon name={paused ? 'play' : 'pause'} /><span>{reduced ? 'Reduced motion' : state.paused ? 'Play motion' : 'Pause motion'}</span></button></div></footer> 123 </div>; 124} 125 126export default App; 127