fix: internal error page styling (#893)

Adds proper styling to the internal error page to bring it closer
to the boxo gateway.

Refs #875

Author: achingbrain

README.md

@@ -82,11 +82,12 @@ The main goals of this project are:
 You can build and run the project locally:
 
 ```console
-> npm ci
+> npm i
+> npm run build
 > npm start
 ```
 
-Now open your browser and go to `http://localhost:3333`
+Now open your browser and go to `http://localhost:3000`
 
 Below is an explanation of the different URLs and what they do:
 
@@ -137,4 +138,3 @@ This project is dual-licensed under
 `SPDX-License-Identifier: Apache-2.0 OR MIT`
 
 See [LICENSE](./LICENSE) for more details.
-

build.js

@@ -180,6 +180,56 @@ const renameSwPlugin = {
   }
 }
 
+/**
+ * Replaces strings with paths to built files, e.g. `'<%-- src/app.tsx --%>'`
+ * becomes `'./path/to/app-HASH.js'`
+ *
+ * @type {esbuild.Plugin}
+ */
+const replaceImports = {
+  name: 'modify-built-files',
+  setup (build) {
+    build.onEnd(async (result) => {
+      const metafile = result.metafile
+
+      // Replace '<%-- src --%>' with 'path/to/built/file'
+      const buildInfo = {}
+      const jsFiles = []
+
+      for (const [outputFile, meta] of Object.entries(metafile.outputs)) {
+        if (outputFile.endsWith('.css')) {
+          buildInfo[Object.keys(meta.inputs)[0]] = outputFile
+        } else if (outputFile.endsWith('.svg')) {
+          buildInfo[Object.keys(meta.inputs)[0]] = outputFile
+        } else if (outputFile.endsWith('.js') && meta.entryPoint != null) {
+          buildInfo[meta.entryPoint] = outputFile
+          jsFiles.push(outputFile)
+        } else if (outputFile.endsWith('.map')) {
+          // ignore
+        } else {
+          console.info('Unknown file type:', outputFile, meta)
+        }
+      }
+
+      const regex = /<%--\s(.*)\s--%>/g
+
+      for (const jsFile of jsFiles) {
+        let file = await fs.readFile(path.resolve(jsFile), 'utf-8')
+
+        for (const [target, source] of file.matchAll(regex)) {
+          const bundledFile = buildInfo[source].replace('dist', '')
+
+          console.info('Replace', target, 'with', bundledFile, 'in', jsFile)
+
+          file = file.replaceAll(target, bundledFile)
+        }
+
+        await fs.writeFile(path.resolve(jsFile), file)
+      }
+    })
+  }
+}
+
 /**
  * Plugin to modify built files by running post-build tasks.
  *
@@ -242,23 +292,30 @@ const excludeFilesPlugin = (extensions) => ({
  * @type {esbuild.BuildOptions}
  */
 export const buildOptions = {
-  entryPoints: ['src/index.tsx', 'src/sw.ts', 'src/app.tsx', 'src/ipfs-sw-*.ts', 'src/ipfs-sw-*.css'],
+  entryPoints: [
+    'src/index.tsx',
+    'src/sw.ts',
+    'src/app.tsx',
+    'src/internal-error.tsx',
+    'src/ipfs-sw-*.ts',
+    'src/ipfs-sw-*.css'
+  ],
   bundle: true,
   outdir: 'dist',
   loader: {
     '.js': 'jsx',
     '.css': 'css',
     '.svg': 'file'
   },
-  minify: true,
+  minify: false,
   sourcemap: true,
   metafile: true,
   splitting: false,
   target: ['es2020'],
   format: 'esm',
   entryNames: 'ipfs-sw-[name]-[hash]',
   assetNames: 'ipfs-sw-[name]-[hash]',
-  plugins: [renameSwPlugin, modifyBuiltFiles, excludeFilesPlugin(['.eot?#iefix', '.otf', '.woff', '.woff2'])]
+  plugins: [replaceImports, renameSwPlugin, modifyBuiltFiles, excludeFilesPlugin(['.eot?#iefix', '.otf', '.woff', '.woff2'])]
 }
 
 const ctx = await esbuild.context(buildOptions)

public/ipfs-sw-504.html

@@ -104,7 +104,8 @@ <h1 class="e2e-header-title f3 fw2 aqua ttu sans-serif">Service Worker Gateway <
             $anchor.classList.add('dib')
           }
         }
-        checkUrl()
+      }
+      checkUrl()
     </script>
 </body>
 

src/app.tsx

@@ -41,18 +41,19 @@ async function renderUi (): Promise<void> {
 
   const LazyConfig = React.lazy(async () => import('./pages/config.jsx'))
   const LazyHelperUi = React.lazy(async () => import('./pages/helper-ui.jsx'))
-  const LazyServiceWorkerErrorPage = React.lazy(async () => import('./pages/errors/no-service-worker.jsx'))
+  const LazyNoServiceWorkerErrorPage = React.lazy(async () => import('./pages/errors/no-service-worker.jsx'))
   const LazySubdomainWarningPage = React.lazy(async () => import('./pages/subdomain-warning.jsx'))
 
-  let ErrorPage: null | React.LazyExoticComponent<() => ReactElement> = LazyServiceWorkerErrorPage
+  let ErrorPage: null | React.LazyExoticComponent<() => ReactElement> = LazyNoServiceWorkerErrorPage
+
   if ('serviceWorker' in navigator) {
     ErrorPage = null
   }
 
   const routes: Route[] = [
     { default: true, component: ErrorPage ?? LazyHelperUi },
     { shouldRender: async () => renderChecks.shouldRenderConfigPage(), component: LazyConfig },
-    { shouldRender: async () => renderChecks.shouldRenderNoServiceWorkerError(), component: LazyServiceWorkerErrorPage },
+    { shouldRender: async () => renderChecks.shouldRenderNoServiceWorkerError(), component: LazyNoServiceWorkerErrorPage },
     { shouldRender: renderChecks.shouldRenderSubdomainWarningPage, component: LazySubdomainWarningPage }
   ]
 

src/button.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import type { PropsWithChildren, ReactElement } from 'react'
+
+export interface ButtonProps extends PropsWithChildren {
+  onClick: any
+  className?: string
+}
+
+export function Button ({ onClick, className, children }: ButtonProps): ReactElement {
+  return (
+    <>
+      <button className={`button bn br2 mr2 pa2 pl3 pr3 snow-muted ${className ?? ''}`} onClick={onClick}>{children}</button>
+    </>
+  )
+}

src/components/content-box.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import type { PropsWithChildren, ReactElement } from 'react'
+
+export interface ContentBoxProps extends PropsWithChildren {
+  title: string
+}
+
+export default function ContentBox ({ title, children }: ContentBoxProps): ReactElement {
+  return (
+    <main className='ma3 br2 ba sans-serif ba br2 b--gray-muted'>
+      <header className='pt2 pb2 pl3 pr3 bg-snow bb b--gray-muted'>
+        <strong>{title}</strong>
+      </header>
+      <section className='pt2 pb2 pl3 pr3 bg-white'>
+        {children}
+      </section>
+    </main>
+  )
+}

src/components/terminal.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import type { PropsWithChildren, ReactElement } from 'react'
+
+export default function Terminal ({ children }: PropsWithChildren): ReactElement {
+  return (
+    <pre className='terminal br2 ma2 pa3 snow-muted'>
+      {children}
+    </pre>
+  )
+}

src/internal-error.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { hydrateRoot } from 'react-dom/client'
+import { InternalErrorPage } from './pages/errors/internal-error.jsx'
+import { Page } from './pages/page.js'
+
+hydrateRoot(document, (
+  <>
+    <Page>
+      <InternalErrorPage />
+    </Page>
+  </>
+))

src/ipfs-sw-first-hit.ts

@@ -1,16 +1,19 @@
 /**
- * This script is injected into the ipfs-sw-first-hit.html file. This was added when addressing an issue with redirects not preserving query parameters.
+ * This script is injected into the ipfs-sw-first-hit.html file. This was added
+ * when addressing an issue with redirects not preserving query parameters.
  *
- * The solution we're moving forward with is, instead of using 302 redirects with ipfs _redirects file, we are
- * using 200 responses with the ipfs-sw-first-hit.html file. That file will include the ipfs-sw-first-hit.js script
- * which will be injected into the index.html file, and handle the redirect logic for us.
+ * The solution we're moving forward with is, instead of using 302 redirects
+ * with ipfs _redirects file, we are using 200 responses with the
+ * ipfs-sw-first-hit.html file. That file will include the ipfs-sw-first-hit.js
+ * script which will be injected into the index.html file, and handle the
+ * redirect logic for us.
  *
  * It handles the logic for the first hit to the service worker and should only
  * ever run when _redirects file redirects to ipfs-sw-first-hit.html for /ipns
  * or /ipfs paths when the service worker is not yet intercepting requests.
  *
- * Sometimes, redirect solutions do not support redirecting directly to this page, in which case it should be handled
- * by index.tsx instead.
+ * Sometimes, redirect solutions do not support redirecting directly to this
+ * page, in which case it should be handled by index.tsx instead.
  *
  * @see https://github.com/ipfs/service-worker-gateway/issues/628
  */

src/lib/path-or-subdomain.ts

@@ -36,7 +36,7 @@ export const findOriginIsolationRedirect = async (location: Pick<Location, 'prot
       log?.trace('subdomain support is disabled')
     }
   }
-  log?.trace('no need to check for subdomain support', isPathGatewayRequest(location), isSubdomainGatewayRequest(location))
+  log?.trace('no need to check for subdomain support - is path gateway request %s, is subdomain gateway request %s', isPathGatewayRequest(location), isSubdomainGatewayRequest(location))
   return null
 }