Janady13/thatdeveloperguy-website / app/root.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/thatdeveloperguy-website / app/root.tsx
Date	Not specified in source
Repository	Janady13/thatdeveloperguy-website
Revision	2bea2ebdff0e34494bff597d4fa9c8422a0c3a94
Branch	main
Path or archive member	app/root.tsx
Original SHA-256	8c573e829c4b0fc5d4028232766e2130a414477176e271f31498afce1ee9da03
Git blob SHA	51919be5fae046218492ad6e1c600407ac75042d
Reading-copy SHA-256	8c573e829c4b0fc5d4028232766e2130a414477176e271f31498afce1ee9da03

Original source ↗

Recovered source transcript

Download complete source text ↓69 lines · 2.6 KB

import { useEffect, useRef } from 'react';
import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration, useLocation, useRouteError } from 'react-router';
import { SkipLinks } from './components/layout/SkipLinks';
import { SiteHeader } from './components/layout/SiteHeader';
import { SiteFooter } from './components/layout/SiteFooter';
import { NotFoundContent } from './routes/not-found';
import './styles/tokens.css'; import './styles/reset.css'; import './styles/typography.css'; import './styles/layout.css';
import './styles/components.css'; import './styles/scenes.css'; import './styles/reduced-motion.css'; import './styles/print.css';

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#f4f1fa" />
        <meta name="color-scheme" content="light" />
        <link rel="preload" href="/fonts/public-sans-latin.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
        <link rel="preload" href="/fonts/archivo-black-400-latin.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
        <link rel="stylesheet" href="/fonts/fonts.css" />
        <link rel="icon" href="/brand/favicon.svg" type="image/svg+xml" />
        <Meta />
        <Links />
      </head>
      <body>
        <SkipLinks />
        <SiteHeader />
        {children}
        <SiteFooter />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

/** Client navigation moves focus to the page's main landmark so keyboard and screen-reader users land on the new content. */
function RouteFocusManager() {
  const location = useLocation();
  const first = useRef(true);
  useEffect(() => {
    if (first.current) { first.current = false; return; }
    if (location.hash) return;
    document.getElementById('content')?.focus({ preventScroll: true });
  }, [location.pathname, location.hash]);
  return null;
}

export default function App() {
  return (
    <>
      <RouteFocusManager />
      <main id="content" tabIndex={-1}><Outlet /></main>
    </>
  );
}

export function ErrorBoundary() {
  const error = useRouteError();
  const notFound = isRouteErrorResponse(error) && error.status === 404;
  return (
    <main id="content" tabIndex={-1}>
      {notFound ? <NotFoundContent /> : (
        <section className="page-body"><h1>Something went wrong</h1><p>The page could not be displayed. The navigation above still works.</p></section>
      )}
    </main>
  );
}