Merge pull request #558 from o1-labs/feature/tutorial-4-ghpages

Add scripts for GitHub Pages Deployment in Tutorial 4
o1-labs · Aug 17, 2023 · 6f40d98 · 6f40d98 · vercel · Aug 17, 2023
2 parents 3264128 + e6bc0a9
commit 6f40d98
Show file tree

Hide file tree

Showing 35 changed files with 2,868 additions and 143 deletions.
diff --git a/examples/zkapps/04-zkapp-browser-ui/contracts/package-lock.json b/examples/zkapps/04-zkapp-browser-ui/contracts/package-lock.json
diff --git a/examples/zkapps/04-zkapp-browser-ui/ui/ghp-postbuild.js b/examples/zkapps/04-zkapp-browser-ui/ui/ghp-postbuild.js
@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+
+// This script modifies the built CSS files and prepends the repo-name to the asset URLs.
+// to be compatible with GitHub Pages deployment.
+const cssDir = path.join(__dirname, '/out/_next/static/css');
+// Update your repository name here if it is different from the project name.
+let repoURL = '04-zkapp-browser-ui';
+const files = fs.readdirSync(cssDir);
+
+files.forEach((file) => {
+  if (path.extname(file) === '.css') {
+    const filePath = path.join(cssDir, file);
+
+    const data = fs.readFileSync(filePath, 'utf8');
+
+    const singleQuoteRegex = new RegExp(`url\\(\\s*'\\/(?!${repoURL})`, 'g');
+    const doubleQuoteRegex = new RegExp(`url\\(\\s*"\\/(?!${repoURL})`, 'g');
+
+    let result = data.replace(singleQuoteRegex, `url('/${repoURL}/`);
+    result = result.replace(doubleQuoteRegex, `url("/${repoURL}/`);
+
+    fs.writeFileSync(filePath, result, 'utf8');
+  }
+});
diff --git a/examples/zkapps/04-zkapp-browser-ui/ui/next.config.js b/examples/zkapps/04-zkapp-browser-ui/ui/next.config.js
@@ -1,24 +1,15 @@
 /** @type {import('next').NextConfig} */
-
-const isProd = process.env.NODE_ENV === 'production'
 const nextConfig = {
   reactStrictMode: false,
   pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
-
-  /*  Used to serve the Next.js app from a subdirectory (the GitHub repo name) and 
-   * assetPrefix is used to serve assets (JS, CSS, images, etc.) from that subdirectory 
-   * when deployed to GitHub Pages. The assetPrefix needs to be added manually to any assets
-   * if they're not loaded by Next.js' automatic handling (for example, in CSS files or in a <img> element).
-   */
-  basePath: isProd ? '/04-zkapp-browser-ui': '',
-  assetPrefix: isProd ? '/04-zkapp-browser-ui': '',
 
   webpack(config) {
     config.resolve.alias = {
       ...config.resolve.alias,
-      snarkyjs: require('path').resolve('node_modules/snarkyjs'),
+      snarkyjs: require('path').resolve('node_modules/snarkyjs')
     };
     config.experiments = { ...config.experiments, topLevelAwait: true };
+    config.optimization.minimizer = [];
     return config;
   },
   // To enable SnarkyJS for the web, we must set the COOP and COEP headers.
@@ -30,16 +21,29 @@ const nextConfig = {
         headers: [
           {
             key: 'Cross-Origin-Opener-Policy',
-            value: 'same-origin',
+            value: 'same-origin'
           },
           {
             key: 'Cross-Origin-Embedder-Policy',
-            value: 'require-corp',
-          },
-        ],
-      },
+            value: 'require-corp'
+          }
+        ]
+      }
     ];
   },
+  images: {
+    unoptimized: true
+  },
+
+  /* Used to serve the Next.js app from a subdirectory (the GitHub repo name) and
+   * assetPrefix is used to serve assets (JS, CSS, images, etc.) from that subdirectory
+   * when deployed to GitHub Pages. The assetPrefix needs to be added manually to any assets
+   * if they're not loaded by Next.js' automatic handling (for example, in CSS files or in a <img> element).
+   * The 'ghp-postbuild.js' script in this project prepends the repo name to asset urls in the built css files
+   * after running 'npm run deploy'.
+   */
+  basePath: process.env.NODE_ENV === 'production' ? '/04-zkapp-browser-ui' : '', // update basePath if you change your repo name
+  assetPrefix: process.env.NODE_ENV === 'production' ? '/04-zkapp-browser-ui' : '' // update assetPrefix if you change your repo name. 
 };
 
-module.exports = nextConfig;
+module.exports = nextConfig;
diff --git a/examples/zkapps/04-zkapp-browser-ui/ui/out/.nojekyll b/examples/zkapps/04-zkapp-browser-ui/ui/out/.nojekyll
diff --git a/examples/zkapps/04-zkapp-browser-ui/ui/out/404.html b/examples/zkapps/04-zkapp-browser-ui/ui/out/404.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>404: This page could not be found</title><meta name="next-head-count" content="3"/><link rel="preload" href="/04-zkapp-browser-ui/_next/static/css/ad2354abebf7054a.css" as="style"/><link rel="stylesheet" href="/04-zkapp-browser-ui/_next/static/css/ad2354abebf7054a.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/04-zkapp-browser-ui/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/04-zkapp-browser-ui/_next/static/chunks/webpack-683523282bec2506.js" defer=""></script><script src="/04-zkapp-browser-ui/_next/static/chunks/framework-305cb810cde7afac.js" defer=""></script><script src="/04-zkapp-browser-ui/_next/static/chunks/main-15ee87a5f6d80118.js" defer=""></script><script src="/04-zkapp-browser-ui/_next/static/chunks/pages/_app-7e7a1410ed9b0062.js" defer=""></script><script src="/04-zkapp-browser-ui/_next/static/chunks/pages/_error-54de1933a164a1ff.js" defer=""></script><script src="/04-zkapp-browser-ui/_next/static/IbSPwN67V1Yvix1r0yGn1/_buildManifest.js" defer=""></script><script src="/04-zkapp-browser-ui/_next/static/IbSPwN67V1Yvix1r0yGn1/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div style="font-family:system-ui,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div style="line-height:48px"><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding-right:23px;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:28px">This page could not be found<!-- -->.</h2></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"IbSPwN67V1Yvix1r0yGn1","assetPrefix":"/04-zkapp-browser-ui","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
diff --git a/...es/zkapps/04-zkapp-browser-ui/ui/out/_next/static/IbSPwN67V1Yvix1r0yGn1/_buildManifest.js b/...es/zkapps/04-zkapp-browser-ui/ui/out/_next/static/IbSPwN67V1Yvix1r0yGn1/_buildManifest.js
diff --git a/...ples/zkapps/04-zkapp-browser-ui/ui/out/_next/static/IbSPwN67V1Yvix1r0yGn1/_ssgManifest.js b/...ples/zkapps/04-zkapp-browser-ui/ui/out/_next/static/IbSPwN67V1Yvix1r0yGn1/_ssgManifest.js
@@ -0,0 +1 @@
+self.__SSG_MANIFEST=new Set,self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB();
diff --git a/examples/zkapps/04-zkapp-browser-ui/ui/out/_next/static/chunks/189.07c0688e525e16bd.js b/examples/zkapps/04-zkapp-browser-ui/ui/out/_next/static/chunks/189.07c0688e525e16bd.js
diff --git a/examples/zkapps/04-zkapp-browser-ui/ui/out/_next/static/chunks/542.7802e7ade35d48e9.js b/examples/zkapps/04-zkapp-browser-ui/ui/out/_next/static/chunks/542.7802e7ade35d48e9.js