chore: update staging (#295)

* chore(main): release 1.2.0 (#216) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * 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 <[email protected]> * fix: remove fonts except woff2 (#282) * fix: add purgecss webpack plugin * fix: keep only woff2 font, remove purgeCss * chore: improve LCP performance (#293) --------- Co-authored-by: Marcin Rataj <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Daniel Norman <[email protected]>
ipfs · Jun 14, 2024 · a4852e1 · a4852e1
1 parent c815a25
commit a4852e1
Show file tree

Hide file tree

Showing 14 changed files with 80 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,24 @@
 # Changelog
 
+## [1.2.0](https://github.com/ipfs/service-worker-gateway/compare/v1.1.0...v1.2.0) (2024-05-17)
+
+
+### Features
+
+* _redirects only for /ipns and /ipfs ([#233](https://github.com/ipfs/service-worker-gateway/issues/233)) ([89faa58](https://github.com/ipfs/service-worker-gateway/commit/89faa588ee0c033f3d2631d5c2823c005f17ead5))
+* add content-loading indication page ([#258](https://github.com/ipfs/service-worker-gateway/issues/258)) ([c815a25](https://github.com/ipfs/service-worker-gateway/commit/c815a25d2657244cde5cea95cf535dd1bc728675))
+* cache sw assets with service worker ([#234](https://github.com/ipfs/service-worker-gateway/issues/234)) ([20a8f32](https://github.com/ipfs/service-worker-gateway/commit/20a8f329402dac4cba53fec55bd059eeb7f7137d))
+* landing & config page UX improvements ([#235](https://github.com/ipfs/service-worker-gateway/issues/235)) ([fb9b04e](https://github.com/ipfs/service-worker-gateway/commit/fb9b04e06b6b3670728c243838ee86f3d6b55067))
+* meaningful error pages ([#195](https://github.com/ipfs/service-worker-gateway/issues/195)) ([80774f5](https://github.com/ipfs/service-worker-gateway/commit/80774f50760e4b757dfacfb7d5df79f3fb020012))
+
+
+### Bug Fixes
+
+* ipfs-hosted redirects are not infinite ([#215](https://github.com/ipfs/service-worker-gateway/issues/215)) ([40cc8c7](https://github.com/ipfs/service-worker-gateway/commit/40cc8c7612302e60a2be2c9372e22e95fa10a799))
+* multiple bugs ([#220](https://github.com/ipfs/service-worker-gateway/issues/220)) ([75aa0b8](https://github.com/ipfs/service-worker-gateway/commit/75aa0b8773c8f1ab484ac110fe607404303e2e8c))
+* revert "feat: migrate to preact/compat ([#190](https://github.com/ipfs/service-worker-gateway/issues/190))" ([#219](https://github.com/ipfs/service-worker-gateway/issues/219)) ([4443174](https://github.com/ipfs/service-worker-gateway/commit/44431745be1f5638fb47969326865c8825ade141))
+* use separate logger for ui/sw ([#217](https://github.com/ipfs/service-worker-gateway/issues/217)) ([a96837b](https://github.com/ipfs/service-worker-gateway/commit/a96837b9cf753fa71dcf5a393686fe4d21c7036f))
+
 ## [1.1.0](https://github.com/ipfs-shipyard/service-worker-gateway/compare/v1.0.0...v1.1.0) (2024-04-19)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "helia-service-worker-gateway",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "type": "module",
   "description": "Bundle Helia with Webpack",

diff --git a/public/index.html b/public/index.html
@@ -25,6 +25,6 @@
     <meta name="robots" content="noindex" />
   </head>
   <body>
-    <div id="root" class="montserrat f5"></div>
+    <div id="root" class="sans-serif f5"></div>
   </body>
 </html>
diff --git a/src/components/About.tsx b/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 pa2'>
+          <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>
+  )
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -6,14 +6,14 @@ import ipfsLogo from '../ipfs-logo.svg'
 export default function Header (): JSX.Element {
   const { gotoPage } = React.useContext(RouteContext)
   return (
-    <header className='e2e-header flex items-center pa3 bg-navy bb bw3 b--aqua tc justify-between'>
+    <header className='e2e-header flex items-center pa2 bg-navy bb bw3 b--aqua tc justify-between'>
       <div>
         <a href='https://ipfs.tech' title='IPFS Project' target="_blank" rel="noopener noreferrer" aria-label="Open IPFS Project's website">
             <img alt='IPFS logo' src={ipfsLogo} style={{ height: 50 }} className='v-top' />
         </a>
       </div>
       <div className='pb1 ma0 inline-flex items-center'>
-        <h1 className='e2e-header-title f3 fw2 montserrat aqua ttu'>Service Worker Gateway <small className="gray">(beta)</small></h1>
+        <h1 className='e2e-header-title f3 fw2 aqua ttu sans-serif'>Service Worker Gateway <small className="gray">(beta)</small></h1>
         <button className='e2e-header-config-button pl3'
             onClick={() => {
               gotoPage('/ipfs-sw-config')

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOMClient from 'react-dom/client'
 import App from './app.jsx'
 import { RouterProvider, type Route } from './context/router-context.jsx'
+import * as renderChecks from './lib/routing-render-checks.js'
 
 // SW did not trigger for this request
 const container = document.getElementById('root')
@@ -15,13 +16,10 @@ const LazyInterstitial = React.lazy(async () => import('./pages/redirects-inters
 
 const routes: Route[] = [
   { default: true, component: LazyHelperUi },
-  { shouldRender: async () => (await import('./lib/routing-render-checks.js')).shouldRenderRedirectsInterstitial(), component: LazyInterstitial },
-  { path: '#/ipfs-sw-config', shouldRender: async () => (await import('./lib/routing-render-checks.js')).shouldRenderConfigPage(), component: LazyConfig },
+  { shouldRender: async () => renderChecks.shouldRenderRedirectsInterstitial(), component: LazyInterstitial },
+  { path: '#/ipfs-sw-config', shouldRender: async () => renderChecks.shouldRenderConfigPage(), component: LazyConfig },
   {
-    shouldRender: async () => {
-      const renderChecks = await import('./lib/routing-render-checks.js')
-      return renderChecks.shouldRenderRedirectPage()
-    },
+    shouldRender: async () => renderChecks.shouldRenderRedirectPage(),
     component: LazyRedirectPage
   }
 ]

diff --git a/src/pages/config.tsx b/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">

diff --git a/src/pages/default-page-styles.css b/src/pages/default-page-styles.css
@@ -1,2 +1,5 @@
 @import 'tachyons';
 @import 'ipfs-css';
+
+/* ensure we don't fetch any external fonts */
+.sans-serif { font-family: system-ui, sans-serif; }
diff --git a/src/pages/helper-ui.tsx b/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'
@@ -21,7 +22,7 @@ function HelperUi (): React.JSX.Element {
   return (
     <>
       <Header />
-      <main className='pa4-l bg-snow mw7 mv5 center pa4'>
+      <main className='pa2 pa4-l bg-snow mw7 mv5-l center'>
         <h1 className='pa0 f3 ma0 mb4 teal tc'>Fetch & Verify IPFS Content in Browser</h1>
         <Form
           handleSubmit={handleSubmit}
@@ -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 />
     </>
   )
 }

diff --git a/src/pages/redirect-page.tsx b/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 />}

diff --git a/test-e2e/first-hit.test.ts b/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 })

diff --git a/test-e2e/subdomain-detection.test.ts b/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()
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -60,7 +60,7 @@ const paths = {
  */
 const prod = {
   mode: 'production',
-  devtool: 'inline-source-map',
+  devtool: 'source-map',
   performance: {
     hints: false,
     maxEntrypointSize: 512000,
@@ -266,13 +266,29 @@ const common = {
       // Images: Copy image files to build folder
       { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' },
 
-      // Fonts and SVGs: Inline files
-      { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' },
+      // Inline SVGs
+      { test: /\.(svg|)$/, type: 'asset/inline' },
       {
         test: /\.(sa|sc|c)ss$/i,
         use: [
           MiniCssExtractPlugin.loader,
-          'css-loader'
+          {
+            loader: 'css-loader',
+            options: {
+              url: {
+                // Exclude fonts from build
+                filter: (url, resourcePath) => {
+                  const fontRegex = /\.(otf|woff|woff2)/
+
+                  if (url.search(fontRegex)) {
+                    return false
+                  }
+
+                  return true
+                }
+              }
+            }
+          }
         ]
       }
     ]