myst-theme/packages/site/src/pages/Root.tsx at bd8556fc7f63e1933b01e5125e74ff2c503ed031 · jupyter-book/myst-theme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import type { SiteManifest } from 'myst-config';
import type { SiteLoader } from '../types';
import { SiteProvider, Theme, ThemeProvider } from '@myst-theme/providers';
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useCatch,
  useLoaderData,
  Link as RemixLink,
} from '@remix-run/react';
import { ContentReload, renderers } from '../components';
import { Analytics } from '../seo';
import { ErrorSiteNotFound } from './ErrorSiteNotFound';
import classNames from 'classnames';

export function Document({
  children,
  theme,
  config,
  title,
  CONTENT_CDN_PORT,
  scrollTopClass = 'scroll-p-20',
}: {
  children: React.ReactNode;
  theme: Theme;
  config?: SiteManifest;
  title?: string;
  CONTENT_CDN_PORT?: number | string;
  scrollTopClass?: string;
}) {
  return (
    <html lang="en" className={classNames(theme, scrollTopClass)}>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        {title && <title>{title}</title>}
        <Meta />
        <Links />
        <Analytics
          analytics_google={config?.analytics_google}
          analytics_plausible={config?.analytics_plausible}
        />
      </head>
      <body className="m-0 transition-colors duration-500 bg-white dark:bg-stone-900">
        <ThemeProvider theme={theme} renderers={renderers} Link={RemixLink as any}>
          <SiteProvider config={config}>{children}</SiteProvider>
        </ThemeProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
        <ContentReload port={CONTENT_CDN_PORT} />
      </body>
    </html>
  );
}

export function App() {
  const { theme, config, CONTENT_CDN_PORT } = useLoaderData<SiteLoader>();
  return (
    <Document theme={theme} config={config} CONTENT_CDN_PORT={CONTENT_CDN_PORT}>
      <Outlet />
    </Document>
  );
}

export function AppCatchBoundary() {
  const caught = useCatch();
  return (
    <Document theme={Theme.light} title={caught.statusText}>
      <article className="content">
        <main className="article-grid article-subgrid-gap col-screen">
          <ErrorSiteNotFound />
        </main>
      </article>
    </Document>
  );
}

export function AppDebugErrorBoundary({ error }: { error: { message: string; stack: string } }) {
  return (
    <Document theme={Theme.light} title="Error">
      <div className="mt-16">
        <main className="article-grid article-subgrid-gap col-screen">
          <h1>An Error Occurred</h1>
          <code>{error.message}</code>
          <pre>{error.stack}</pre>
        </main>
      </div>
    </Document>
  );
}