feat: publish console to IPFS & Cloudflare from CI (#287)

Adds CI workflow to publish console to IPFS via web3.storage and
Cloudflare Pages.

- fixes #291 
- PRs get a comment with the cloudflare dev url and an ipfs gateway url
on.
- merging PR to main updated dnslink for console.web3.storage and
creates a prod deploy for the w3console project in cloudflare pages
which should be configured to update the deployed site at
console.web3.storage

This is an iteration on the way we deploy the website in the
web3.storage repo, see:
https://github.com/web3-storage/web3.storage/blob/c973e7e0b29bc2f1bc6da348cdd2f66b0e00b1a3/.github/workflows/website.yml#L197-L243

License: MIT
Signed-off-by: Oli Evans <oli@protocol.ai>

.github/actions/preview/action.yml

@@ -0,0 +1,81 @@
+name: publish
+description: 'Add to w3 and update dns'
+
+inputs:
+  path_to_add:
+    description: 'Path to directory to publish'
+    required: true
+  web3_token:
+    description: 'API Key for web3.storage'
+    required: true
+  dnslink_record:
+    description: 'subdomain to publish DNSLink TXT record under e.g console'
+    required: false
+  dnslink_domain:
+    description: 'domain to publish DNSLink TXT record under e.g web3.storage'
+    required: false
+  cf_pages_project:
+    description: 'Pages project name to publish to'
+    required: true
+  cf_account_id:
+    description: 'Account id for Cloudflare'
+    required: true
+  cf_token:
+    description: 'API Key for Cloudflare'
+    required: true
+
+outputs:
+  cid:
+    description: 'The IPFS Content ID for the directory e.g. bafkreihc7sejzq4ab4kygfyjvs4ye7bxyzgfdpzt7caqkizqnzgf6zgogi'
+    value: ${{ steps.ipfs.outputs.cid }}
+  url:
+    description: 'The IPFS gateway URL for the directory e.g https://w3s.link/ipfs/bafkreihc7sejzq4ab4kygfyjvs4ye7bxyzgfdpzt7caqkizqnzgf6zgogi'
+    value: https://${{ steps.ipfs.outputs.cid }}.ipfs.w3s.link
+  cloudflare_url:
+    description: 'The Cloudflare URL for the directory e.g https://dweb.link/ipfs/bafkreihc7sejzq4ab4kygfyjvs4ye7bxyzgfdpzt7caqkizqnzgf6zgogi'
+    value: ${{ steps.get_url.outputs.url }}
+  summary:
+    description: 'Text summary of the published urls'
+    value: ${{ steps.set_summary.outputs.summary }}
+
+runs:
+  using: "composite"
+  steps:
+    - name: Add to web3.storage
+      uses: web3-storage/add-to-web3@v2
+      id: ipfs
+      with:
+        path_to_add: ${{ inputs.path_to_add }}
+        web3_token: ${{ inputs.web3_token }}
+
+    - name: Update IPFS DNSLink
+      if: inputs.dnslink_domain != '' && github.event_name == 'push' && github.ref == 'refs/heads/main'
+      run: npx dnslink-cloudflare --record ${{ inputs.dnslink_record }} --domain ${{ inputs.dnslink_domain }} --link /ipfs/${{ steps.ipfs.outputs.cid }}
+      shell: bash
+      env:
+        CF_API_TOKEN: ${{ inputs.cf_token }}
+
+    - name: Deploy preview build to Cloudflare Pages
+      uses: mathiasvr/command-output@v1.1.0
+      id: cloudflare
+      with:
+        run: npx wrangler pages publish --project-name ${{ inputs.cf_pages_project }} --branch "$GITHUB_REF_NAME" --commit-hash "$GITHUB_SHA" ${{ inputs.path_to_add }}
+      env:
+        CLOUDFLARE_API_TOKEN: ${{ inputs.cf_token }}
+        CLOUDFLARE_ACCOUNT_ID: ${{ inputs.cf_account_id }}
+
+    - name: Find Cloudflare Pages preview URL
+      uses: mathiasvr/command-output@v1.1.0
+      id: cloudflare_url
+      with:
+        run: egrep -o 'https?://[^ ]+' <(echo "${{ steps.cloudflare.outputs.stdout }}")
+
+    - name: Set Job Summary
+      uses: actions/github-script@v5
+      id: set_summary
+      with:
+        script: |
+          core.setOutput('summary', `### Website preview 🔗✨
+          - 🙂 https://w3s.link/ipfs/${{ steps.ipfs.outputs.cid }}
+          - ⛅️ ${{ steps.cloudflare_url.outputs.stdout }}`)
+        

.github/workflows/w3console.yaml

@@ -0,0 +1,51 @@
+name: w3console
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths:
+      - 'examples/react/w3console/**'
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'examples/react/w3console/**'
+jobs:
+  publish:
+    name: Publish
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: ./.github/actions/pnpm
+
+      - name: Build w3console
+        run: pnpm build
+        working-directory: examples/react/w3console
+
+      - name: Publish static site
+        uses: ./.github/actions/preview
+        id: preview
+        with:
+          path_to_add: examples/react/w3console/dist
+          web3_token: ${{ secrets.WEB3_TOKEN }}
+          # Enable to publish dnslink on merge to main
+          # dnslink_record: console
+          # dnslink_domain: web3.storage
+          cf_pages_project: w3console
+          cf_account_id: ${{ secrets.CF_ACCOUNT_ID }}
+          cf_token: ${{ secrets.CF_TOKEN }}
+
+      - name: Add Preview URLs as Job Summary
+        run: echo "${{ steps.preview.outputs.summary }}" >> $GITHUB_STEP_SUMMARY
+
+      - name: Find Current Pull Request
+        uses: jwalton/gh-find-current-pr@v1.3.0
+        id: finder
+
+      - name: Update Preview URLs PR Comment
+        uses: marocchino/sticky-pull-request-comment@v2.2.0
+        with:
+          number: ${{ steps.finder.outputs.pr }}
+          message: ${{ steps.preview.outputs.summary }}

examples/react/w3console/package.json

@@ -6,15 +6,15 @@
   "scripts": {
     "start": "vite",
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.13",
-    "@w3ui/keyring-core": "workspace:^2.0.1",
+    "@w3ui/keyring-core": "workspace:^",
     "@w3ui/react": "workspace:^",
     "@w3ui/react-keyring": "workspace:^",
-    "@w3ui/react-uploads-list": "workspace:^2.0.1",
+    "@w3ui/react-uploads-list": "workspace:^",
     "blueimp-md5": "^2.19.0",
     "preact": "^10.11.3"
   },

examples/react/w3console/vite.config.ts

@@ -1,9 +1,25 @@
 import { defineConfig } from 'vite'
 import preact from '@preact/preset-vite'
+import path from 'path'
+
+// modified fix from https://github.com/preactjs/preset-vite/issues/56
+// also includes `preact/jsx-runtime` alias, as rollup build fails without it.
+const patchedPreactPlugin = preact()
+patchedPreactPlugin[0].config = () => ({
+  resolve: {
+    alias: {
+      'react-dom/test-utils': path.resolve(__dirname, './node_modules/preact/test-utils'),
+      'react-dom': path.resolve(__dirname, './node_modules/preact/compat'),
+      react: path.resolve(__dirname, './node_modules/preact/compat'),
+      'preact/jsx-runtime': path.resolve(__dirname, './node_modules/preact/jsx-runtime')
+    }
+  }
+})
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact()],
+  base: '',
+  plugins: [patchedPreactPlugin],
   server: {
     port: 3000
   }