👷 Add CI Deployment Script for GitHub Pages (#53)

pcaversaccio · web-flow · commit 6192e302ec97 · 2023-12-18T14:48:01.000-08:00
Signed-off-by: Pascal Marco Caversaccio &lt;pascal.caversaccio@hotmail.ch&gt;
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
@@ -95,4 +95,4 @@ jobs:
         run: |
           awesome_bot ./*.md src/*.sol test/**/*.sol test/public/**/*.sol interface/*.md interface/public/*.css interface/src/**/*.css interface/src/**/*.tsx interface/src/**/*.ts interface/src/components/**/*.tsx \
           --allow-dupe --request-delay 0.4 \
-          --white-list "https://github.com/pcaversaccio/createx/issues/new?assignees=pcaversaccio&labels=new+deployment+%E2%9E%95&projects=&template=deployment_request.yml&title=%5BNew-Deployment-Request%5D%3A+",https://twitter.com/PaulRBerg/status/1682346315806539776,https://www.createx.rocks,https://foundry.paradigm.xyz,https://github.com/pcaversaccio/createx.git
+          --white-list "https://github.com/pcaversaccio/createx/issues/new?assignees=pcaversaccio&labels=new+deployment+%E2%9E%95&projects=&template=deployment_request.yml&title=%5BNew-Deployment-Request%5D%3A+",https://twitter.com/PaulRBerg/status/1682346315806539776,https://foundry.paradigm.xyz,https://github.com/pcaversaccio/createx.git
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,82 @@
+name: 🚀 UI deployment
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+# Allows only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, we do not cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+        node_version:
+          - 20
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+          run_install: false
+
+      - name: Get pnpm cache directory path
+        id: pnpm-cache-dir-path
+        run: echo "dir=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+      - name: Restore pnpm cache
+        uses: actions/cache@v3
+        id: pnpm-cache
+        with:
+          path: |
+            ${{ steps.pnpm-cache-dir-path.outputs.dir }}
+            ${{ github.workspace }}/interface/.next/cache
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('interface/**/*.js', 'interface/**/*.jsx', 'interface/**/*.ts', 'interface/**/*.tsx') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node_version }}
+
+      - name: Install pnpm project with a clean slate
+        run: pnpm install --prefer-offline --frozen-lockfile
+
+      - name: Build with Next.js
+        run: pnpm build:interface
+
+      - name: Upload artifacts
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: "interface/dist"
+
+  deploy:
+    runs-on: ${{ matrix.os }}
+    needs: build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    permissions:
+      pages: write
+      id-token: write
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v3
diff --git a/.github/workflows/test-createx.yml b/.github/workflows/test-createx.yml
@@ -19,7 +19,7 @@ jobs:
         node_version:
           - 20
         go_version:
-          - 1.21.3
+          - 1.21.5
 
     steps:
       - name: Checkout
diff --git a/CNAME b/CNAME
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 [![🕵️‍♂️ Test CreateX](https://github.com/pcaversaccio/createx/actions/workflows/test-createx.yml/badge.svg)](https://github.com/pcaversaccio/createx/actions/workflows/test-createx.yml)
 [![Test Coverage](https://img.shields.io/badge/Coverage-100%25-green)](#test-coverage)
+[![👮‍♂️ Sanity checks](https://github.com/pcaversaccio/createx/actions/workflows/checks.yml/badge.svg)](https://github.com/pcaversaccio/createx/actions/workflows/checks.yml)
+[![🚀 UI deployment](https://github.com/pcaversaccio/createx/actions/workflows/deploy.yml/badge.svg)](https://github.com/pcaversaccio/createx/actions/workflows/deploy.yml)
 [![License: AGPL-3.0-only](https://img.shields.io/badge/License-AGPL--3.0--only-blue)](https://www.gnu.org/licenses/agpl-3.0)
 
 <img src=https://github-production-user-asset-6210df.s3.amazonaws.com/25297591/272914952-38a5989c-0113-427d-9158-47646971b7d8.png  width="1050"/>
@@ -2158,7 +2160,7 @@ To verify a deployed [`CreateX`](./src/CreateX.sol) contract on a block explorer
 ## [`CreateX`](./src/CreateX.sol) Deployments
 
 > [!TIP]
-> The complete list with additional chain information per deployment can be retrieved via [createx.rocks](https://www.createx.rocks).
+> The complete list with additional chain information per deployment can be retrieved via [createx.rocks](https://createx.rocks).
 
 - EVM-Based Production Networks:
   - Ethereum: [`0xba5Ed099633D3B313e4D5F7bdc1305d3c28ba5Ed`](https://etherscan.io/address/0xba5Ed099633D3B313e4D5F7bdc1305d3c28ba5Ed)
diff --git a/hardhat.config.ts b/hardhat.config.ts
@@ -126,14 +126,6 @@ const config: HardhatUserConfig = {
       url: vars.get("OPTIMISM_MAINNET_URL", "https://mainnet.optimism.io"),
       accounts,
     },
-    arbitrumTestnet: {
-      chainId: 421613,
-      url: vars.get(
-        "ARBITRUM_TESTNET_URL",
-        "https://goerli-rollup.arbitrum.io/rpc",
-      ),
-      accounts,
-    },
     arbitrumSepolia: {
       chainId: 421614,
       url: vars.get(
@@ -484,10 +476,9 @@ const config: HardhatUserConfig = {
       polygonZkEVM: vars.get("POLYGON_ZKEVM_API_KEY", ""),
       polygonMumbai: vars.get("POLYGON_API_KEY", ""),
       polygonZkEVMTestnet: vars.get("POLYGON_ZKEVM_API_KEY", ""),
-      // For Arbitrum testnets & mainnets
+      // For Arbitrum testnet & mainnets
       arbitrumOne: vars.get("ARBITRUM_API_KEY", ""),
       arbitrumNova: vars.get("ARBITRUM_API_KEY", ""),
-      arbitrumGoerli: vars.get("ARBITRUM_API_KEY", ""),
       arbitrumSepolia: vars.get("ARBITRUM_API_KEY", ""),
       // For Avalanche testnet & mainnet
       avalanche: vars.get("AVALANCHE_API_KEY", ""),
diff --git a/interface/.eslintignore b/interface/.eslintignore
@@ -1,3 +1,4 @@
 node_modules
 .next
 next-env.d.ts
+dist
diff --git a/interface/.gitignore b/interface/.gitignore
@@ -49,3 +49,4 @@ yarn-error.log*
 # Next.js
 .next
 next-env.d.ts
+dist
diff --git a/interface/.prettierignore b/interface/.prettierignore
@@ -1,3 +1,4 @@
 node_modules
 .next
 next-env.d.ts
+dist
diff --git a/interface/README.md b/interface/README.md
@@ -1,6 +1,6 @@
 # [`CreateX`](../src/CreateX.sol) User Interface
 
-[Next.js](https://nextjs.org)-based user interface for [createx.rocks](https://www.createx.rocks).
+[Next.js](https://nextjs.org)-based user interface for [createx.rocks](https://createx.rocks).
 
 ## 🙏🏼 Acknowledgement
 
diff --git a/interface/next-seo.config.ts b/interface/next-seo.config.ts
@@ -0,0 +1,28 @@
+import { DefaultSeoProps } from "next-seo";
+import { SITE_DESCRIPTION, SITE_IMAGE, SITE_NAME } from "@/lib/constants";
+
+const config: DefaultSeoProps = {
+  title: SITE_NAME,
+  description: SITE_DESCRIPTION,
+  openGraph: {
+    url: "https://createx.rocks",
+    title: "CreateX",
+    description: SITE_DESCRIPTION,
+    images: [
+      {
+        url: SITE_IMAGE,
+        secureUrl: SITE_IMAGE,
+        type: "image/png",
+        width: 1200,
+        height: 514,
+        alt: `${SITE_NAME} – ${SITE_DESCRIPTION}`,
+      },
+    ],
+  },
+  twitter: {
+    handle: "@pcaversaccio",
+    cardType: "summary_large_image",
+  },
+};
+
+export default config;
diff --git a/interface/next.config.js b/interface/next.config.js
@@ -0,0 +1,32 @@
+// @ts-check
+
+/**
+ * @type {import('next').NextConfig}
+ **/
+const nextConfig = {
+  /**
+   * Enable static exports for the App Router.
+   *
+   * @see https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
+   */
+  output: "export",
+
+  /**
+   * Disable server-based image optimization. Next.js does not support
+   * dynamic features with static exports.
+   *
+   * @see https://nextjs.org/docs/pages/api-reference/components/image#unoptimized
+   */
+  images: {
+    unoptimized: true,
+  },
+
+  /**
+   * Use a custom build directory instead of `.next`.
+   *
+   * @see https://nextjs.org/docs/pages/api-reference/next-config-js/distDir
+   */
+  distDir: "dist",
+};
+
+module.exports = nextConfig;
diff --git a/interface/package.json b/interface/package.json
@@ -37,7 +37,7 @@
     "prismjs": "^1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "sharp": "^0.33.0"
+    "sharp": "^0.33.1"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
@@ -47,6 +47,7 @@
     "autoprefixer": "10.4.16",
     "eslint": "8.56.0",
     "eslint-config-next": "14.0.4",
+    "next-seo": "^6.4.0",
     "postcss": "8.4.32",
     "prettier": "^3.1.1",
     "prettier-plugin-tailwindcss": "^0.5.9",
diff --git a/interface/public/.nojekyll b/interface/public/.nojekyll
diff --git a/interface/src/components/layout/Head.tsx b/interface/src/components/layout/Head.tsx
@@ -15,18 +15,6 @@ export const Head = (props: Props) => {
         content={props.description ?? SITE_DESCRIPTION}
       />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <meta name="twitter:card" content="summary" />
-      <meta name="twitter:creator" content="@pcaversaccio" />
-      <meta property="og:url" content="https://www.createx.rocks" />
-      <meta property="og:title" content="CreateX" />
-      <meta
-        property="og:description"
-        content="A Trustless, Universal Contract Deployer"
-      />
-      <meta
-        property="og:image"
-        content="https://github-production-user-asset-6210df.s3.amazonaws.com/25297591/272914952-38a5989c-0113-427d-9158-47646971b7d8.png"
-      />
     </NextHead>
   );
 };
diff --git a/interface/src/components/layout/Header.tsx b/interface/src/components/layout/Header.tsx
@@ -54,7 +54,6 @@ export const Header = () => {
               <span className="text-accent font-mono font-bold">
                 {SITE_NAME}
               </span>
-              {/* <Image className="h-8 w-auto rounded-full sm:h-10" src={logo} alt="logo" /> */}
             </Link>
           </div>
           <div>
diff --git a/interface/src/lib/constants.ts b/interface/src/lib/constants.ts
@@ -4,6 +4,8 @@ export const COMPANY_NAME = "pcaversaccio";
 export const COMPANY_URL = "https://pcaversaccio.com";
 export const GITHUB_URL = "https://github.com/pcaversaccio/createx";
 export const X_URL = "https://twitter.com/pcaversaccio";
+export const SITE_IMAGE =
+  "https://github-production-user-asset-6210df.s3.amazonaws.com/25297591/272914952-38a5989c-0113-427d-9158-47646971b7d8.png";
 
 export const CREATEX_ADDRESS = "0xba5Ed099633D3B313e4D5F7bdc1305d3c28ba5Ed";
 export const CREATEX_ABI = [
diff --git a/interface/src/pages/_app.tsx b/interface/src/pages/_app.tsx
@@ -1,14 +1,17 @@
 import * as React from "react";
 import type { AppProps } from "next/app";
+import { DefaultSeo } from "next-seo";
 import { ThemeProvider } from "next-themes";
 import { Layout } from "@/components/layout/Layout";
 import "@/styles/globals.css";
+import DefaultSeoProps from "../../next-seo.config";
 
 function App({ Component, pageProps }: AppProps) {
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => setMounted(true), []);
   return (
     <ThemeProvider attribute="class">
+      <DefaultSeo {...DefaultSeoProps} />
       {mounted && (
         <Layout>
           <>
diff --git a/lib/solady b/lib/solady
@@ -1 +1 @@
-Subproject commit 13854c47df10c93dd2b13a690432bc6d09ae44ee
+Subproject commit cb7f768ccfcf333d86e8f4e6f96f1a3b83e8cfe6
diff --git a/package.json b/package.json
@@ -48,7 +48,6 @@
     "deploy:optimismtestnet": "npx hardhat run --no-compile --network optimismTestnet scripts/deploy.ts",
     "deploy:optimismsepolia": "npx hardhat run --no-compile --network optimismSepolia scripts/deploy.ts",
     "deploy:optimismmain": "npx hardhat run --no-compile --network optimismMain scripts/deploy.ts",
-    "deploy:arbitrumtestnet": "npx hardhat run --no-compile --network arbitrumTestnet scripts/deploy.ts",
     "deploy:arbitrumsepolia": "npx hardhat run --no-compile --network arbitrumSepolia scripts/deploy.ts",
     "deploy:arbitrummain": "npx hardhat run --no-compile --network arbitrumMain scripts/deploy.ts",
     "deploy:arbitrumnova": "npx hardhat run --no-compile --network arbitrumNova scripts/deploy.ts",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -1,3 +1,4 @@ @@
 node_modules
 .next
 next-env.d.ts
 +dist