ci(js-peer): deploy static site to GitHub Pages

.github/workflows/js-peer.yml

@@ -2,8 +2,8 @@ name: js-peer build
 
 permissions:
   contents: read
-  pull-requests: write
-  statuses: write
+  pages: write
+  id-token: write
 
 on:
   push:
@@ -13,26 +13,56 @@ on:
     paths:
       - 'js-peer/**' # only run for PRs changing js-peer
 
+concurrency:
+  group: js-peer-pages
+  cancel-in-progress: true
+
 jobs:
-  build-and-deploy:
+  build:
     runs-on: ubuntu-latest
     defaults:
       run:
         working-directory: js-peer
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/configure-pages@v5
+        id: pages
       - uses: actions/setup-node@v4
         with:
           node-version: '20.x'
       - run: npm ci
       - run: npm run lint
-      - run: npm run build
-      - uses: ipfs/ipfs-deploy-action@v1
-        name: Deploy to IPFS
-        id: deploy
+      - name: Build static js-peer site
+        env:
+          GITHUB_PAGES: 'true'
+          PAGES_BASE_PATH: ${{ steps.pages.outputs.base_path }}
+        run: npm run build
+      - name: Upload GitHub Pages artifact
+        if: github.event_name == 'push'
+        uses: actions/upload-pages-artifact@v3
         with:
-          # 👇 note that working-directory doesn't apply to action steps with `uses`, so we need to specify the full path
-          path-to-deploy: js-peer/out
-          storacha-key: ${{ secrets.STORACHA_KEY }}
-          storacha-proof: ${{ secrets.STORACHA_PROOF }}
-          github-token: ${{ github.token }}
+          path: js-peer/out
+      - name: Summarize GitHub Pages build
+        run: |
+          {
+            echo '## GitHub Pages Build'
+            echo
+            echo "- Pages base path: \`${{ steps.pages.outputs.base_path }}\`"
+            if [[ "${{ github.event_name }}" == "push" ]]; then
+              echo '- Deployment target: GitHub Pages'
+            else
+              echo '- Pull requests build the static site but do not deploy it.'
+            fi
+          } >> "$GITHUB_STEP_SUMMARY"
+
+  deploy:
+    if: github.event_name == 'push'
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

js-peer/next.config.js

@@ -1,8 +1,19 @@
 /** @type {import('next').NextConfig} */
+const isGitHubPages = process.env.GITHUB_PAGES === 'true'
+const rawBasePath = process.env.PAGES_BASE_PATH || ''
+const basePath =
+  isGitHubPages && rawBasePath && rawBasePath !== '/'
+    ? rawBasePath.startsWith('/')
+      ? rawBasePath
+      : `/${rawBasePath}`
+    : ''
+
 const nextConfig = {
   output: 'export',
   reactStrictMode: true,
   productionBrowserSourceMaps: true,
+  basePath,
+  assetPrefix: basePath || undefined,
   images: {
     unoptimized: true,
   },

js-peer/src/components/booting.tsx

@@ -1,16 +1,19 @@
 import React from 'react'
-import Image from 'next/image'
+import { useRouter } from 'next/router'
 import Spinner from './spinner'
 
 interface Props {
   error?: string
 }
 
 export function Booting({ error }: Props) {
+  const router = useRouter()
+  const logoSrc = `${router.basePath || ''}/libp2p-logo.svg`
+
   return (
     <div className="grid h-screen place-items-center">
       <div className="text-center">
-        <Image src="/libp2p-logo.svg" alt="libp2p logo" height="156" width="156" className="text-white mx-auto mb-5" />
+        <img src={logoSrc} alt="libp2p logo" height="156" width="156" className="text-white mx-auto mb-5" />
         <h2 className="text-3xl font-bold text-gray-900 mb-2">Initializing libp2p peer</h2>
         {!error && (
           <>

js-peer/src/components/nav.tsx

@@ -2,7 +2,6 @@ import { Fragment } from 'react'
 import { Disclosure, DisclosureButton, DisclosurePanel, Menu, Transition } from '@headlessui/react'
 import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
 import Link from 'next/link'
-import Image from 'next/image'
 import { useRouter } from 'next/router'
 
 const navigationItems = [{ name: 'Source', href: 'https://github.com/libp2p/universal-connectivity' }]
@@ -13,6 +12,8 @@ function classNames(...classes: string[]) {
 
 export default function Navigation({ connectionInfoButton }: { connectionInfoButton?: React.ReactNode }) {
   const router = useRouter()
+  const logoSrc = `${router.basePath || ''}/libp2p-logo.svg`
+  const heroSrc = `${router.basePath || ''}/libp2p-hero.svg`
 
   return (
     <Disclosure as="nav" className="border-b border-gray-200 bg-white">
@@ -22,16 +23,10 @@ export default function Navigation({ connectionInfoButton }: { connectionInfoBut
             <div className="flex h-16 justify-between items-center">
               <div className="flex items-center">
                 <div className="flex flex-shrink-0 items-center">
-                  <Image src="/libp2p-logo.svg" alt="libp2p logo" height="46" width="46" />
+                  <img src={logoSrc} alt="libp2p logo" height="46" width="46" />
                   <div className="ml-3 flex items-center">
                     <h1 className="text-xl font-semibold text-gray-900 hidden sm:block">Universal Connectivity</h1>
-                    <Image
-                      src="/libp2p-hero.svg"
-                      alt="libp2p hero"
-                      height="24"
-                      width="24"
-                      className="ml-2 hidden sm:block"
-                    />
+                    <img src={heroSrc} alt="libp2p hero" height="24" width="24" className="ml-2 hidden sm:block" />
                   </div>
                 </div>
               </div>