feat: about section on subdomain loads (#263)

Without this people see  confusing button to click, and some
configuration, but have no idea what is happening.

Co-authored-by: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com>

src/components/About.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default function About (): JSX.Element {
+  return (
+        <aside className='mw7 lb-snow center w-100 lh-copy'>
+          <h1 className='pa0 f3 ma0 mb4 teal tc'>About the IPFS Gateway and Service Worker</h1>
+          <p>This page runs an IPFS gateway within a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank">Service Worker</a>. It uses <a href="https://github.com/ipfs/helia" target="_blank">Helia</a> (IPFS implementation in JS) and the <a href="https://github.com/ipfs/helia-verified-fetch" target="_blank">@helia/verified-fetch</a> library (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank">Fetch API</a> for IPFS) to facilitate direct verified retrieval of <a href="https://docs.ipfs.tech/concepts/content-addressing/" target="_blank">content-addressed</a> data.</p>
+          <p><strong>Why?</strong> It improves decentralization, offers enhanced security (CID verification happens on end user's machine) and reliability (ability to do retrieval from multiple sources without reliance on a single HTTP server).</p>
+          <p><strong>How does it work?</strong> A Service Worker is registered on the initial page load, and then intercepts HTTP requests for content stored on <a href="https://docs.ipfs.tech/how-to/address-ipfs-on-web/" target="_blank">IPFS paths</a> such as <code>/ipfs/*</code> (immutable) and <code>/ipns/*</code> (mutable), takes care of IPFS retrieval, verification, UnixFS deserialization, and returns Response objects to the browser.</p>
+          <p><strong>Is this production ready?</strong> This project is under heavy development and is not yet fully compliant with <a href="https://specs.ipfs.tech/http-gateways/" target="_blank">IPFS Gateway Specfications</a>. Track our efforts  <a href="https://github.com/ipfs/service-worker-gateway/milestones" target="_blank">here</a>.</p>
+          <p><strong>Found a bug?</strong> We welcome you to report it by <a href="https://github.com/ipfs/service-worker-gateway/issues/new" target="_blank">opening an issue</a> with details like an address and a screenshot.</p>
+        </aside>
+  )
+}

src/pages/config.tsx

@@ -124,7 +124,7 @@ function ConfigPage (): React.JSX.Element | null {
       <Collapsible collapsedLabel="View config" expandedLabel='Hide config' collapsed={isLoadedInIframe}>
         <LocalStorageInput className="e2e-config-page-input e2e-config-page-input-gateways" localStorageKey={LOCAL_STORAGE_KEYS.config.gateways} label='Gateways' validationFn={urlValidationFn} defaultValue={JSON.stringify(defaultGateways)} resetKey={resetKey} />
         <LocalStorageInput className="e2e-config-page-input e2e-config-page-input-routers" localStorageKey={LOCAL_STORAGE_KEYS.config.routers} label='Routers' validationFn={urlValidationFn} defaultValue={JSON.stringify(defaultRouters)} resetKey={resetKey} />
-        <LocalStorageInput className="e2e-config-page-input e2e-config-page-input-dnsJsonResolvers" localStorageKey={LOCAL_STORAGE_KEYS.config.dnsJsonResolvers} label='DNS Json resolvers' validationFn={dnsJsonValidationFn} defaultValue={JSON.stringify(defaultDnsJsonResolvers)} resetKey={resetKey} />
+        <LocalStorageInput className="e2e-config-page-input e2e-config-page-input-dnsJsonResolvers" localStorageKey={LOCAL_STORAGE_KEYS.config.dnsJsonResolvers} label='DNS (application/dns-json) resolvers' validationFn={dnsJsonValidationFn} defaultValue={JSON.stringify(defaultDnsJsonResolvers)} resetKey={resetKey} />
         <LocalStorageToggle className="e2e-config-page-input e2e-config-page-input-autoreload" localStorageKey={LOCAL_STORAGE_KEYS.config.autoReload} onLabel='Auto Reload' offLabel='Show Config' resetKey={resetKey} />
         <LocalStorageInput className="e2e-config-page-input" localStorageKey={LOCAL_STORAGE_KEYS.config.debug} label='Debug logging' validationFn={stringValidationFn} defaultValue='' resetKey={resetKey} />
         <div className="w-100 inline-flex flex-row justify-between">

src/pages/helper-ui.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import About from '../components/About.jsx'
 import Form from '../components/Form.jsx'
 import Header from '../components/Header.jsx'
 import CidRenderer from '../components/input-validator.jsx'
@@ -35,14 +36,7 @@ function HelperUi (): React.JSX.Element {
 
       </main>
 
-        <aside className='mw7 lb-snow center w-100 lh-copy'>
-          <h1 className='pa0 f3 ma0 mb4 teal tc'>About the IPFS Gateway and Service Worker</h1>
-          <p>This page runs an IPFS gateway within a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank">Service Worker</a>. It uses <a href="https://github.com/ipfs/helia" target="_blank">Helia</a> (IPFS implementation in JS) and the <a href="https://github.com/ipfs/helia-verified-fetch" target="_blank">@helia/verified-fetch</a> library (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank">Fetch API</a> for IPFS) to facilitate direct verified retrieval of <a href="https://docs.ipfs.tech/concepts/content-addressing/" target="_blank">content-addressed</a> data.</p>
-          <p><strong>Why?</strong> It improves decentralization, offers enhanced security (CID verification happens on end user's machine) and reliability (ability to do retrieval from multiple sources without reliance on a single HTTP server).</p>
-          <p><strong>How does it work?</strong> A Service Worker is registered on the initial page load, and then intercepts HTTP requests for content stored on <a href="https://docs.ipfs.tech/how-to/address-ipfs-on-web/" target="_blank">IPFS paths</a> such as <code>/ipfs/*</code> (immutable) and <code>/ipns/*</code> (mutable), takes care of IPFS retrieval, verification, UnixFS deserialization, and returns Response objects to the browser.</p>
-          <p><strong>Is this production ready?</strong> This project is under heavy development and is not yet fully compliant with <a href="https://specs.ipfs.tech/http-gateways/" target="_blank">IPFS Gateway Specfications</a>. Track our efforts  <a href="https://github.com/ipfs/service-worker-gateway/milestones" target="_blank">here</a>.</p>
-          <p><strong>Found a bug?</strong> We welcome you to report it by <a href="https://github.com/ipfs/service-worker-gateway/issues/new" target="_blank">opening an issue</a> with details like an address and a screenshot.</p>
-        </aside>
+      <About />
     </>
   )
 }

src/pages/redirect-page.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import About from '../components/About.jsx'
 import { ServiceWorkerReadyButton } from '../components/sw-ready-button.jsx'
 import { ConfigProvider } from '../context/config-context.jsx'
 import { ServiceWorkerContext, ServiceWorkerProvider } from '../context/service-worker-context.jsx'
@@ -84,7 +85,7 @@ function RedirectPage ({ showConfigIframe = true }: { showConfigIframe?: boolean
       return 'Redirecting you because Auto Reload is enabled.'
     }
 
-    return 'Please save your changes to the config to apply them. You can then refresh the page to load your content.'
+    return 'Click below to load the content with the specified config.'
   }, [isAutoReloadEnabled, isServiceWorkerRegistered])
 
   useEffect(() => {
@@ -105,7 +106,9 @@ function RedirectPage ({ showConfigIframe = true }: { showConfigIframe?: boolean
   return (
     <div className="redirect-page">
       <div className="pa4-l mw7 mv5 center pa4">
-        <h3 className="">{displayString}</h3>
+        <About />
+
+        <h3 className="mt5">{displayString}</h3>
         <ServiceWorkerReadyButton className="w-100" id="load-content" label='Load content' waitingLabel='Waiting for service worker registration...' onClick={loadContent} />
       </div>
       {showConfigIframe && <ConfigIframe />}

test-e2e/first-hit.test.ts

@@ -24,7 +24,7 @@ test.describe('first-hit ipfs-hosted', () => {
 
       // then we should be redirected to the IPFS path
       const bodyTextLocator = page.locator('body')
-      await expect(bodyTextLocator).toContainText('Please save your changes to the config to apply them')
+      await expect(bodyTextLocator).toContainText('Click below to load the content with the specified config')
       // and then the normal redirectPage logic:
       await waitForServiceWorker(page)
 
@@ -58,7 +58,7 @@ test.describe('first-hit ipfs-hosted', () => {
       await page.waitForURL('http://bafkqablimvwgy3y.ipfs.localhost:3334')
 
       await waitForServiceWorker(page)
-      await expect(bodyTextLocator).toContainText('Please save your changes to the config to apply them')
+      await expect(bodyTextLocator).toContainText('Click below to load the content with the specified config')
 
       // it should render the config iframe
       await expect(page.locator('#redirect-config-iframe')).toBeAttached({ timeout: 1 })
@@ -95,7 +95,7 @@ test.describe('first-hit direct-hosted', () => {
 
       await waitForServiceWorker(page)
       const bodyTextLocator = page.locator('body')
-      await expect(bodyTextLocator).toContainText('Please save your changes to the config to apply them')
+      await expect(bodyTextLocator).toContainText('Click below to load the content with the specified config')
 
       // it should render the config iframe
       await expect(page.locator('#redirect-config-iframe')).toBeAttached({ timeout: 1 })
@@ -126,7 +126,7 @@ test.describe('first-hit direct-hosted', () => {
       const bodyTextLocator = page.locator('body')
 
       await waitForServiceWorker(page)
-      await expect(bodyTextLocator).toContainText('Please save your changes to the config to apply them')
+      await expect(bodyTextLocator).toContainText('Click below to load the content with the specified config')
 
       // it should render the config iframe
       await expect(page.locator('#redirect-config-iframe')).toBeAttached({ timeout: 1 })

test-e2e/subdomain-detection.test.ts

@@ -26,7 +26,7 @@ test.describe('subdomain-detection', () => {
     const bodyTextLocator = page.locator('body')
 
     await waitForServiceWorker(page)
-    await expect(bodyTextLocator).toContainText('Please save your changes to the config to apply them')
+    await expect(bodyTextLocator).toContainText('Click below to load the content with the specified config')
 
     await page.reload()