From df4715aa836fcdd5592efa96dba0df90fa377944 Mon Sep 17 00:00:00 2001 From: Oli Evans Date: Wed, 25 Jan 2023 10:10:51 +0000 Subject: [PATCH] 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 --- .../w3ui/.github/actions/preview/action.yml | 81 +++++++++++++++++++ .../w3ui/.github/workflows/w3console.yaml | 51 ++++++++++++ .../examples/react/w3console/package.json | 6 +- .../examples/react/w3console/vite.config.ts | 18 ++++- packages/w3ui/pnpm-lock.yaml | 46 +++++++---- 5 files changed, 182 insertions(+), 20 deletions(-) create mode 100644 packages/w3ui/.github/actions/preview/action.yml create mode 100644 packages/w3ui/.github/workflows/w3console.yaml diff --git a/packages/w3ui/.github/actions/preview/action.yml b/packages/w3ui/.github/actions/preview/action.yml new file mode 100644 index 000000000..ba5529ac0 --- /dev/null +++ b/packages/w3ui/.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 }}`) + diff --git a/packages/w3ui/.github/workflows/w3console.yaml b/packages/w3ui/.github/workflows/w3console.yaml new file mode 100644 index 000000000..1965476a1 --- /dev/null +++ b/packages/w3ui/.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 }} diff --git a/packages/w3ui/examples/react/w3console/package.json b/packages/w3ui/examples/react/w3console/package.json index 5c213806f..c4bd8a292 100644 --- a/packages/w3ui/examples/react/w3console/package.json +++ b/packages/w3ui/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" }, diff --git a/packages/w3ui/examples/react/w3console/vite.config.ts b/packages/w3ui/examples/react/w3console/vite.config.ts index 92dcc325c..74256077f 100644 --- a/packages/w3ui/examples/react/w3console/vite.config.ts +++ b/packages/w3ui/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 } diff --git a/packages/w3ui/pnpm-lock.yaml b/packages/w3ui/pnpm-lock.yaml index 44590e418..62f6ab921 100644 --- a/packages/w3ui/pnpm-lock.yaml +++ b/packages/w3ui/pnpm-lock.yaml @@ -237,10 +237,10 @@ importers: '@heroicons/react': ^2.0.13 '@preact/preset-vite': ^2.4.0 '@types/blueimp-md5': ^2.18.0 - '@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:^ autoprefixer: ^10.4.13 blueimp-md5: ^2.19.0 postcss: ^8.4.21 @@ -750,6 +750,20 @@ packages: semver: 6.3.0 dev: true + /@babel/helper-compilation-targets/7.20.7_@babel+core@7.20.5: + resolution: {integrity: sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/compat-data': 7.20.5 + '@babel/core': 7.20.5 + '@babel/helper-validator-option': 7.18.6 + browserslist: 4.21.4 + lru-cache: 5.1.1 + semver: 6.3.0 + dev: true + /@babel/helper-create-class-features-plugin/7.20.5_@babel+core@7.20.12: resolution: {integrity: sha512-3RCdA/EmEaikrhayahwToF0fpweU/8o2p8vhc1c/1kftHOdTKuC65kik/TLc+qfbS8JKw4qqJbne4ovICDhmww==} engines: {node: '>=6.9.0'} @@ -830,7 +844,7 @@ packages: '@babel/core': ^7.4.0-0 dependencies: '@babel/core': 7.20.5 - '@babel/helper-compilation-targets': 7.20.0_@babel+core@7.20.5 + '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.5 '@babel/helper-plugin-utils': 7.20.2 debug: 4.3.4 lodash.debounce: 4.0.8 @@ -1341,7 +1355,7 @@ packages: dependencies: '@babel/compat-data': 7.20.5 '@babel/core': 7.20.5 - '@babel/helper-compilation-targets': 7.20.0_@babel+core@7.20.5 + '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.5 '@babel/helper-plugin-utils': 7.20.2 '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.20.5 '@babel/plugin-transform-parameters': 7.20.5_@babel+core@7.20.5 @@ -1924,7 +1938,7 @@ packages: dependencies: '@babel/core': 7.20.5 '@babel/helper-annotate-as-pure': 7.18.6 - '@babel/helper-compilation-targets': 7.20.0_@babel+core@7.20.5 + '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.5 '@babel/helper-environment-visitor': 7.18.9 '@babel/helper-function-name': 7.19.0 '@babel/helper-optimise-call-expression': 7.18.6 @@ -2090,7 +2104,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.20.5 - '@babel/helper-compilation-targets': 7.20.0_@babel+core@7.20.5 + '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.5 '@babel/helper-function-name': 7.19.0 '@babel/helper-plugin-utils': 7.20.2 dev: true @@ -2155,7 +2169,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.20.5 - '@babel/helper-module-transforms': 7.20.2 + '@babel/helper-module-transforms': 7.20.11 '@babel/helper-plugin-utils': 7.20.2 transitivePeerDependencies: - supports-color @@ -2212,7 +2226,7 @@ packages: dependencies: '@babel/core': 7.20.5 '@babel/helper-hoist-variables': 7.18.6 - '@babel/helper-module-transforms': 7.20.2 + '@babel/helper-module-transforms': 7.20.11 '@babel/helper-plugin-utils': 7.20.2 '@babel/helper-validator-identifier': 7.19.1 transitivePeerDependencies: @@ -2239,7 +2253,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.20.5 - '@babel/helper-module-transforms': 7.20.2 + '@babel/helper-module-transforms': 7.20.11 '@babel/helper-plugin-utils': 7.20.2 transitivePeerDependencies: - supports-color @@ -3844,7 +3858,7 @@ packages: '@storybook/csf-plugin': 7.0.0-beta.29 '@storybook/csf-tools': 7.0.0-beta.29 '@storybook/global': 5.0.0 - '@storybook/mdx2-csf': 1.0.0-next.4 + '@storybook/mdx2-csf': 1.0.0-next.5 '@storybook/node-logger': 7.0.0-beta.29 '@storybook/postinstall': 7.0.0-beta.29 '@storybook/preview-api': 7.0.0-beta.29 @@ -4173,7 +4187,7 @@ packages: '@storybook/client-logger': 7.0.0-beta.29 '@storybook/core-common': 7.0.0-beta.29 '@storybook/csf-plugin': 7.0.0-beta.29 - '@storybook/mdx2-csf': 1.0.0-next.4 + '@storybook/mdx2-csf': 1.0.0-next.5 '@storybook/node-logger': 7.0.0-beta.29 '@storybook/preview': 7.0.0-beta.29 '@storybook/preview-api': 7.0.0-beta.29 @@ -4392,7 +4406,7 @@ packages: '@storybook/core-events': 7.0.0-beta.29 '@storybook/csf': 0.0.2-next.8 '@storybook/csf-tools': 7.0.0-beta.29 - '@storybook/docs-mdx': 0.0.1-next.5 + '@storybook/docs-mdx': 0.0.1-next.6 '@storybook/global': 5.0.0 '@storybook/node-logger': 7.0.0-beta.29 '@storybook/preview-api': 7.0.0-beta.29 @@ -4470,8 +4484,8 @@ packages: type-fest: 2.19.0 dev: true - /@storybook/docs-mdx/0.0.1-next.5: - resolution: {integrity: sha512-EowXFPq4TBZQguKCdU8y7EzpuSv2vSu5gy7pgF/1P5mq7LG9h8YIrerOW9DL4zfp9E0GHIWlSXR5KuFIqqKc/Q==} + /@storybook/docs-mdx/0.0.1-next.6: + resolution: {integrity: sha512-DjoSIXADmLJtdroXAjUotFiZlcZ2usWhqrS7aeOtZs0DVR0Ws5WQjnwtpDUXt8gryTSd+OZJ0cNsDcqg4JDEvQ==} dev: true /@storybook/docs-tools/7.0.0-beta.29: @@ -4549,8 +4563,8 @@ packages: resolution: {integrity: sha512-Ha6GJXxEjqP9Z03iV7ehBKgsij0enB7GRcFstJOHjnV8WEDKfF8uPg3SHh2yfueww7P8SWS3Xc3Rzud80fJctQ==} dev: true - /@storybook/mdx2-csf/1.0.0-next.4: - resolution: {integrity: sha512-nvRgYdpYvXsvSgCzKc4LQA1JxtJzmv47IsFAsh1rTz5FoHyK8watLU2WqX9T4w52fpFXBHx7RwGEsCRt0XgZlQ==} + /@storybook/mdx2-csf/1.0.0-next.5: + resolution: {integrity: sha512-02w0sgGZaK1agT050yCVhJ+o4rLHANWvLKWjQjeAsYbjneLC5ITt+3GDB4jRiWwJboZ8dHW1fGSK1Vg5fA34aQ==} dev: true /@storybook/node-logger/7.0.0-beta.29: