wip: more preparation for v2

jupyter-book · Jun 20, 2024 · a3ed2f1 · a3ed2f1
1 parent ec6cd2b
commit a3ed2f1
Show file tree

Hide file tree

Showing 14 changed files with 62 additions and 33 deletions.
diff --git a/packages/site/src/pages/Article.tsx b/packages/site/src/pages/Article.tsx
@@ -7,8 +7,6 @@ import {
   FrontmatterParts,
   BackmatterParts,
 } from '../components/index.js';
-import { ErrorDocumentNotFound } from './ErrorDocumentNotFound.js';
-import { ErrorProjectNotFound } from './ErrorProjectNotFound.js';
 import type { PageLoader } from '@myst-theme/common';
 import { copyNode, type GenericParent } from 'myst-common';
 import { SourceFileKind } from 'myst-spec-ext';
@@ -98,11 +96,3 @@ export const ArticlePage = React.memo(function ({
     </ReferencesProvider>
   );
 });
-
-export function ProjectPageCatchBoundary() {
-  return <ErrorProjectNotFound />;
-}
-
-export function ArticlePageCatchBoundary() {
-  return <ErrorDocumentNotFound />;
-}
diff --git a/packages/site/src/pages/ErrorUnhandled.tsx b/packages/site/src/pages/ErrorUnhandled.tsx
@@ -0,0 +1,14 @@
+export type ErrorResponse = {
+  status: number;
+  statusText: string;
+  data: any;
+};
+export function ErrorUnhandled({ error }: { error: ErrorResponse }) {
+  return (
+    <>
+      <h1>Unexpected Error Occurred</h1>
+      <p>Status: {error.status}</p>
+      <p>{error.data.message}</p>
+    </>
+  );
+}
diff --git a/packages/site/src/pages/Root.tsx b/packages/site/src/pages/Root.tsx
@@ -16,7 +16,12 @@ import {
 import { DEFAULT_NAV_HEIGHT, renderers as defaultRenderers } from '../components/index.js';
 import { Analytics } from '../seo/index.js';
 import { Error404 } from './Error404.js';
+import { ErrorUnhandled } from './ErrorUnhandled.js';
 import classNames from 'classnames';
+import {
+  useRouteError,
+  isRouteErrorResponse,
+} from '@remix-run/react';
 
 export function Document({
   children,
@@ -86,12 +91,13 @@ export function App() {
   );
 }
 
-export function AppCatchBoundary() {
+export function AppErrorBoundary() {
+  const error = useRouteError();
   return (
     <Document theme={Theme.light}>
       <article className="article">
         <main className="article-grid subgrid-gap col-screen">
-          <Error404 />
+          { isRouteErrorResponse(error) ? <ErrorUnhandled error={ error as any }/>: <Error404 /> }
         </main>
       </article>
     </Document>

diff --git a/packages/site/src/pages/index.ts b/packages/site/src/pages/index.ts
@@ -1,5 +1,6 @@
 export { ErrorProjectNotFound } from './ErrorProjectNotFound.js';
 export { ErrorDocumentNotFound } from './ErrorDocumentNotFound.js';
 export { Error404 } from './Error404.js';
-export { ArticlePage, ArticlePageCatchBoundary, ProjectPageCatchBoundary } from './Article.js';
-export { App, Document, AppCatchBoundary } from './Root.js';
+export { ErrorUnhandled } from './ErrorUnhandled.js';
+export { ArticlePage } from './Article.js';
+export { App, Document, AppErrorBoundary } from './Root.js';
diff --git a/packages/site/src/seo/meta.ts b/packages/site/src/seo/meta.ts
@@ -1,4 +1,4 @@
-import type { HtmlMetaDescriptor, V2_MetaDescriptor } from '@remix-run/react';
+import type { V2_MetaDescriptor } from '@remix-run/react';
 
 type SocialSite = {
   title: string;
@@ -17,15 +17,15 @@ type SocialArticle = {
   keywords?: string[];
 };
 
-function allDefined(meta: Record<string, string | null | undefined>): HtmlMetaDescriptor {
-  return Object.fromEntries(Object.entries(meta).filter(([, v]) => v)) as HtmlMetaDescriptor;
+function allDefined(meta: Record<string, string | null | undefined>): V2_MetaDescriptor {
+  return Object.fromEntries(Object.entries(meta).filter(([, v]) => v)) as V2_MetaDescriptor;
 }
 
 export function getMetaTagsForSite_V1({
   title,
   description,
   twitter,
-}: SocialSite): HtmlMetaDescriptor {
+}: SocialSite): V2_MetaDescriptor {
   const meta = {
     title,
     description,
@@ -60,7 +60,7 @@ export function getMetaTagsForArticle_V1({
   image,
   twitter,
   keywords,
-}: SocialArticle): HtmlMetaDescriptor {
+}: SocialArticle): V2_MetaDescriptor {
   const meta = {
     title,
     description,

diff --git a/themes/article/app/root.tsx b/themes/article/app/root.tsx
@@ -1,4 +1,4 @@
-import type { LinksFunction, MetaFunction, LoaderFunction, V2_MetaFunction } from '@remix-run/node';
+import type { LinksFunction, LoaderFunction, V2_MetaFunction } from '@remix-run/node';
 import tailwind from '~/styles/app.css';
 import thebeCoreCss from 'thebe-core/dist/lib/thebe-core.css';
 import { getConfig } from '~/utils/loaders.server';
@@ -10,9 +10,9 @@ import {
   getThemeSession,
   ContentReload,
   SkipToArticle,
+  AppErrorBoundary as ErrorBoundary,
 } from '@myst-theme/site';
 import { Outlet, useLoaderData } from '@remix-run/react';
-export { AppCatchBoundary as CatchBoundary } from '@myst-theme/site';
 
 export const meta: V2_MetaFunction = ({ data }) => {
   return getMetaTagsForSite({

diff --git a/themes/article/app/routes/$.tsx b/themes/article/app/routes/$.tsx
@@ -5,7 +5,7 @@ import {
   type LoaderFunction,
   type V2_MetaFunction,
 } from '@remix-run/node';
-import { getMetaTagsForArticle, KatexCSS, ArticlePageCatchBoundary } from '@myst-theme/site';
+import { getMetaTagsForArticle, KatexCSS, ErrorDocumentNotFound, ErrorUnhandled } from '@myst-theme/site';
 import { getConfig, getPage } from '~/utils/loaders.server';
 import { useLoaderData } from '@remix-run/react';
 import type { SiteManifest } from 'myst-config';
@@ -14,6 +14,10 @@ import { ArticlePage } from '../components/ArticlePage';
 import { ComputeOptionsProvider } from '@myst-theme/jupyter';
 import { ProjectProvider, useBaseurl } from '@myst-theme/providers';
 import { ThebeLoaderAndServer } from '@myst-theme/jupyter';
+import {
+  useRouteError,
+  isRouteErrorResponse,
+} from '@remix-run/react';
 
 type ManifestProject = Required<SiteManifest>['projects'][0];
 
@@ -77,11 +81,12 @@ export default function Page() {
   );
 }
 
-export function CatchBoundary() {
+export function ErrorBoundary() {
+  const error = useRouteError();
   return (
     <ArticlePageAndNavigation>
       <main className="article">
-        <ArticlePageCatchBoundary />
+        { isRouteErrorResponse(error) ? <ErrorUnhandled error={ error as any } /> : <ErrorDocumentNotFound /> }
       </main>
     </ArticlePageAndNavigation>
   );

diff --git a/themes/article/app/routes/_index.tsx b/themes/article/app/routes/_index.tsx
@@ -1,4 +1,4 @@
-import { getMetaTagsForArticle, responseNoArticle, responseNoSite, ProjectPageCatchBoundary} from '@myst-theme/site';
+import { getMetaTagsForArticle, responseNoArticle, responseNoSite, ErrorDocumentNotFound, ErrorUnhandled} from '@myst-theme/site';
 import Page from './$';
 import { ArticlePageAndNavigation } from '../components/ArticlePageAndNavigation';
 import { getConfig, getPage } from '../utils/loaders.server';
@@ -7,6 +7,10 @@ import { redirect } from '@remix-run/node';
 import { SiteManifest } from 'myst-config';
 import { getProject } from '@myst-theme/common';
 export { links } from './$';
+import {
+  useRouteError,
+  isRouteErrorResponse,
+} from '@remix-run/react';
 
 type ManifestProject = Required<SiteManifest>['projects'][0];
 
@@ -39,12 +43,12 @@ export const loader: LoaderFunction = async ({ params, request }) => {
 
 export default Page;
 
-export function CatchBoundary() {
+export function ErrorBoundary() {
+  const error = useRouteError();	
   return (
     <ArticlePageAndNavigation>
       <main className="article">
-        <ProjectPageCatchBoundary />
-      </main>
+        { isRouteErrorResponse(error) ? <ErrorUnhandled error={ error as any } /> : <ErrorDocumentNotFound /> }      </main>
     </ArticlePageAndNavigation>
   );
 }
diff --git a/themes/article/remix.config.dev.js b/themes/article/remix.config.dev.js
@@ -65,5 +65,6 @@ module.exports = {
     v2_normalizeFormMethod: true,
     v2_headers: true,
     v2_meta: true,
+    v2_errorBoundary:true,
   },
 };
diff --git a/themes/article/remix.config.prod.js b/themes/article/remix.config.prod.js
@@ -12,5 +12,6 @@ module.exports = {
     v2_normalizeFormMethod: true,
     v2_headers: true,
     v2_meta: true,
+    v2_errorBoundary:true,
   },
 };
diff --git a/themes/book/app/root.tsx b/themes/book/app/root.tsx
@@ -10,9 +10,9 @@ import {
   getThemeSession,
   ContentReload,
   SkipToArticle,
+  AppErrorBoundary as ErrorBoundary,
 } from '@myst-theme/site';
 import { Outlet, useLoaderData } from '@remix-run/react';
-export { AppCatchBoundary as CatchBoundary } from '@myst-theme/site';
 
 export const meta: V2_MetaFunction = ({ data }) => {
   return getMetaTagsForSite({

diff --git a/themes/book/app/routes/$.tsx b/themes/book/app/routes/$.tsx
@@ -12,7 +12,8 @@ import {
   Navigation,
   TopNav,
   getMetaTagsForArticle,
-  ArticlePageCatchBoundary,
+  ErrorDocumentNotFound,
+  ErrorUnhandled,
 } from '@myst-theme/site';
 import { getConfig, getPage } from '~/utils/loaders.server';
 import { useLoaderData } from '@remix-run/react';
@@ -29,6 +30,10 @@ import { MadeWithMyst } from '@myst-theme/icons';
 import { ComputeOptionsProvider, ThebeLoaderAndServer } from '@myst-theme/jupyter';
 import { ArticlePage } from '../components/ArticlePage.js';
 import type { TemplateOptions } from '../types.js';
+import {
+  useRouteError,
+  isRouteErrorResponse,
+} from '@remix-run/react';
 type ManifestProject = Required<SiteManifest>['projects'][0];
 
 export const meta: V2_MetaFunction = ({ data, matches, location }) => {
@@ -136,12 +141,12 @@ export default function Page() {
   );
 }
 
-export function CatchBoundary() {
+export function ErrorBoundary() {
+  const error = useRouteError();
   return (
     <ArticlePageAndNavigation>
       <main className="article">
-        <ArticlePageCatchBoundary />
-      </main>
+        { isRouteErrorResponse(error) ? <ErrorUnhandled error={error as any} /> : <ErrorDocumentNotFound /> }      </main>
     </ArticlePageAndNavigation>
   );
 }
diff --git a/themes/book/remix.config.dev.js b/themes/book/remix.config.dev.js
@@ -65,5 +65,6 @@ module.exports = {
     v2_normalizeFormMethod: true,
     v2_headers: true,
     v2_meta: true,
+    v2_errorBoundary:true,
   },
 };
diff --git a/themes/book/remix.config.prod.js b/themes/book/remix.config.prod.js
@@ -12,5 +12,6 @@ module.exports = {
     v2_normalizeFormMethod: true,
     v2_headers: true,
     v2_meta: true,
+    v2_errorBoundary:true,
   },
 };