Deploy Preview PR

.env.sample

@@ -0,0 +1,2 @@
+# PUBLIC URL
+REACT_APP_PUBLIC_URL=https://push.org

.github/workflows/preview.yml

@@ -0,0 +1,61 @@
+name: Deploy PR previews
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+    branches:
+      - main
+concurrency: preview-${{ github.ref }}
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up environment variables
+        run: |
+          echo "REACT_APP_PREVIEW_BASE=pr-${{ github.event.pull_request.number }}" >> $GITHUB_ENV
+          echo "REACT_APP_DEPLOY_ENV=PREVIEW" >> $GITHUB_ENV
+          echo "REACT_APP_PUBLIC_URL=https://push-protocol.github.io/" >> $GITHUB_ENV
+          echo "GITHUB_PR_NUMBER=${{ github.event.pull_request.number }}" >> $GITHUB_ENV
+          echo "ESLINT_NO_DEV_ERRORS=true" >> $GITHUB_ENV
+          echo "TSC_COMPILE_ON_ERROR=true" >> $GITHUB_ENV
+          echo "DISABLE_ESLINT_PLUGIN=true" >> $GITHUB_ENV
+          echo "GENERATE_SOURCEMAP=true" >> $GITHUB_ENV
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with: 
+          node-version: 20.x
+          cache: yarn
+
+      - name: Install and Build
+        if: github.event.action != 'closed' # You might want to skip the build if the PR has been closed
+        run: |
+          yarn install --frozen-lockfile
+          yarn build:pr:preview
+
+
+      # Configure GitHub Pages for deployment
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      # Upload build artifacts for review
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: build
+
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir:  ./build 
+          destination_dir: pr-preview/pr-${{ github.event.pull_request.number }}
+          # user_name: github-actions[bot]
+          # user_email: 41898282+github-actions[bot]@users.noreply.github.com

basePath.js

@@ -0,0 +1,12 @@
+// basePath.js
+function getPreviewBasePath() {
+  if (typeof process !== 'undefined' && process.env) {
+    // Node.js environment (e.g., during the build process)
+    return process.env.REACT_APP_PREVIEW_BASE
+      ? `/push-website/pr-preview/${process.env.REACT_APP_PREVIEW_BASE}`
+      : '';
+  }
+  return '';
+}
+
+module.exports = { getPreviewBasePath };

blog/2024-09-12-push-august-monthly-updates/index.md

@@ -74,7 +74,7 @@ Push Protocol continues to expand its ecosystem through new collaborations:
 
 - We hosted an engineering-focused [X space with Wormhole](https://x.com/pushprotocol/status/1821875116390613041) on the upcoming CCR feature with [Wormhole](https://wormhole.com/), whose NTT framework is key to Push's chain-agnostic vision.
 - Push Protocol founder Harsh Rajat shared his insights on Push Protocol's evolution, the web3 consumer landscape, and upcoming upgrades on the "[Colors of Web3 Entrepreneurship](https://www.youtube.com/watch?v=LQmHFQ7IO18)" podcast.
-- In collaboration with [Tally]([https://www.tally.xyz](https://www.tally.xyz/)), a governance optimization platform, we held a Twitter space on "[Improving Decentralized Governance with Push and Tally.](https://x.com/pushprotocol/status/1821441276740346320)”
+- In collaboration with [Tally](https://www.tally.xyz/), a governance optimization platform, we held a Twitter space on "[Improving Decentralized Governance with Push and Tally.](https://x.com/pushprotocol/status/1821441276740346320)”
 - Ian, our DAO and Governance lead was invited to speak on the [Hipther Podcast Show](https://www.youtube.com/watch?v=zpqP_b-ch1A) to share his experience working in web3 for almost a decade while also discussing the working mechanisms of Push DAO and the upcoming launch of Push Nodes.
 - Ian was also invited to the [Amberdata Podcast](https://blog.amberdata.io/amberdata-podcast-feat-ian-leviness-head-of-grants-at-push-protocol?hss_channel=tw-876969251617112064) to share his unique story, our core mission, & how Push is solving for scaling decentralized communications.
 - Push and CoinEasy conducted a joint Twitter space with DAO Lead Ian and Seung Lee, the co-founder of CoinEasy discussing [Simplifying Web3 Journey with Push and CoinEasy](https://x.com/pushprotocol/status/1826620569053286715).

build.mjs

@@ -3,7 +3,20 @@ import fs from 'fs';
 import Jimp from 'jimp';
 import path from 'path';
 import readline from 'readline';
+import { parse } from 'envfile';
 import { fileURLToPath } from 'url';
+import { getPreviewBasePath } from './basePath.js';
+
+const envPresets = {
+  prod: {
+    REACT_APP_DEPLOY_ENV: 'PROD',
+    REACT_APP_PUBLIC_URL: 'https://push.org/',
+  },
+  preview: {
+    REACT_APP_DEPLOY_ENV: 'PREVIEW',
+    REACT_APP_PUBLIC_URL: `https://push-protocol.github.io${getPreviewBasePath()}`,
+  },
+};
 
 // Define the starting directory
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -283,10 +296,172 @@ async function generatePNGImage(imagePath, title) {
   console.log('Image generated with title:', title);
 }
 
+const changeENV = async (appEnv) => {
+  console.log(chalk.green.dim('  -- Generating custom .env file...'));
+
+  // set up file modified flag
+  let fileModified = false;
+
+  // Load environment files
+  const envpath = `./.env`;
+  const envsamplepath = `./.env.sample`;
+
+  if (!fs.existsSync(envpath)) {
+    console.log(chalk.red('  -- Checking for ENV File... Not Found, creating'));
+    fs.writeFileSync(envpath, fs.readFileSync(envsamplepath, 'utf8'));
+  } else {
+    console.log(chalk.green.dim('  -- Checking for ENV File... Found'));
+  }
+
+  // Now Load the environment
+  const envData = fs.readFileSync(envpath, 'utf8');
+  const envObject = parse(envData);
+
+  const envSampleData = fs.readFileSync(envsamplepath, 'utf8');
+  const envSampleObject = parse(envSampleData);
+
+  const readIntSampleENV = readline.createInterface({
+    input: fs.createReadStream(envsamplepath),
+    output: false,
+  });
+  let realENVContents = '';
+
+  console.log(chalk.green.dim('  -- Verifying and building ENV File...'));
+
+  // load custom env preset
+  const customENVPreset = envPresets[appEnv];
+  let envParamOverridden = false;
+
+  // check to see if env param should be overwritten and / or are empty
+  for await (const line of readIntSampleENV) {
+    let moddedLine = line;
+
+    // Check if line is comment or environment variable
+    if (
+      moddedLine.startsWith('#') ||
+      moddedLine.startsWith('\n') ||
+      moddedLine.trim().length == 0
+    ) {
+      // do nothing, just include it in the line
+      // console.log("----");
+    } else {
+      // This is an environtment variable, first segregate the comment if any and the variable info
+      const delimiter = '#';
+
+      const index = moddedLine.indexOf('#');
+      const splits =
+        index == -1
+          ? [moddedLine.slice(0, index), '']
+          : [
+              moddedLine.slice(0, index),
+              ' ' + delimiter + moddedLine.slice(index + 1),
+            ];
+
+      const envVar = splits[0].split('=')[0]; //  Get environment variable by splitting the sample and then taking first seperation
+      const comment = splits[1];
+
+      // Check if envVar exists in real env, if not ask for val
+      // console.log(envObject[`${envVar}`]);
+
+      // check if envVar is in preset, if so override those values
+      envParamOverridden = false;
+      for (const [key, value] of Object.entries(customENVPreset)) {
+        if (!envParamOverridden && key === envVar) {
+          moddedLine = `${envVar}=${value}${comment}`;
+          console.log(chalk.dim(`   -- ENV MODIFIED: ${moddedLine}`));
+          fileModified = true;
+          envParamOverridden = true;
+        }
+      }
+
+      // Check and replace envVar value if it doesn't match
+      if (
+        !envParamOverridden &&
+        (!envObject[`${envVar}`] || envObject[`${envVar}`].trim() == '')
+      ) {
+        // env key doesn't exist, ask for input
+        console.log(
+          chalk.bgBlack.white(`  Enter ENV Variable Value --> ${envVar}`)
+        );
+
+        var value = '';
+
+        while (value.trim().length == 0) {
+          const rl = readline.createInterface({
+            input: process.stdin,
+            output: null,
+          });
+          value = await doSyncPrompt(rl, `${envSampleObject[envVar]} >`);
+
+          if (value.trim().length == 0) {
+            console.log(
+              chalk.bgRed.black("  Incorrect Entry, Field can't be empty")
+            );
+          }
+        }
+
+        console.log(chalk.bgBlack.white(`  [Saved] ${envVar}=${value}`));
+        moddedLine = `${envVar}=${value}${comment}`;
+
+        fileModified = true;
+      } else if (!envParamOverridden) {
+        // Value exists so just replicate
+        moddedLine = `${envVar}=${envObject[envVar]}${comment}`;
+      }
+    }
+
+    // if (envParamOverridden) {
+    //   console.log(chalk.blue(moddedLine));
+    // }
+
+    // finally append the line
+    realENVContents = `${realENVContents}\n${moddedLine}`;
+  }
+
+  if (fileModified) {
+    console.log(chalk.green.dim('  -- Modified ENV file generated, saving'));
+    fs.writeFileSync(envpath, realENVContents, { flag: 'w' });
+    console.log(chalk.green.bold(' -- -- -- --  -- -- -- --  -- -- -- --'));
+    console.log(chalk.green.bold(' CONTENT OF .ENV FILE CHANGED '));
+    console.log(chalk.green.bold(' DONT FORGET TO CHANGE .ENV FILE BACK '));
+    console.log(chalk.green.bold(' -- -- -- --  -- -- -- --  -- -- -- --'));
+    console.log(chalk.green.dim('👍 ENV modified for build deployment'));
+  } else {
+    console.log(chalk.green.dim('  -- ENV file verified!'));
+  }
+};
+
+// Leverages Node.js' awesome async/await functionality
+async function doSyncPrompt(rl, message) {
+  var promptInput = await readLineAsync(rl, message);
+  rl.close();
+
+  return promptInput;
+}
+
+function readLineAsync(rl, message) {
+  return new Promise((resolve, reject) => {
+    rl.question(message, (answer) => {
+      resolve(answer.trim());
+    });
+  });
+}
+
 // Prep for deployment starts everything
 const prepForDeployment = async (appEnv) => {
   console.log(chalk.green('Starting Custom Deployment Prebuild...'));
 
+  if (appEnv !== 'prod' && appEnv !== 'preview') {
+    console.log(
+      chalk.red(
+        'App Environment not set correctly... can only be prod or preview. Please check and retry'
+      )
+    );
+    process.exit(1);
+  }
+
+  await changeENV(appEnv);
+
   clearDirectory(ogPreviewDirectory);
 
   walkDirectory(docsDirectory, async (filePath) => {

docusaurus.config.js

@@ -11,10 +11,14 @@ const config = {
   favicon: '/assets/website/favicon.ico',
 
   // Set the production url of your site here
-  url: 'https://push.org/',
+  url: process.env.GITHUB_ACTIONS
+    ? `https://push-protocol.github.io`
+    : 'https://push.org/',
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/',
+  baseUrl: process.env.GITHUB_ACTIONS
+    ? `/push-website/pr-preview/${process.env.REACT_APP_PREVIEW_BASE}`
+    : '/',
   trailingSlash: true,
 
   // GitHub pages deployment config.
@@ -134,6 +138,29 @@ const config = {
     ],
   ],
 
+  headTags: [
+    {
+      tagName: 'script',
+      attributes: {
+        type: 'text/javascript',
+      },
+      innerHTML: `
+       (function (l) {
+          if (l.search[1] === '/') {
+            var decoded = l.search
+              .slice(1)
+              .split('&')
+              .map(function (s) {
+                return s.replace(/~and~/g, '&');
+              })
+              .join('?');
+            window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash);
+          }
+        })(window.location);
+      `,
+    },
+  ],
+
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({

package.json

@@ -6,7 +6,8 @@
     "start": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
-    "deploy": "node build.mjs && docusaurus deploy",
+    "build:pr:preview": "node build.mjs preview && NODE_OPTIONS=--max-old-space-size=8192 docusaurus build --no-minify",
+    "deploy": "node build.mjs prod && NODE_OPTIONS=--max-old-space-size=8192 docusaurus build && echo 'push.org' > ./build/CNAME & gh-pages -d build -r git@github.com:push-protocol/push-website-prod-deployment.git",
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
@@ -49,13 +50,16 @@
     "chalk": "5.3.0",
     "clsx": "^1.2.1",
     "crypto-browserify": "^3.12.0",
+    "dotenv": "^16.4.5",
+    "envfile": "^7.1.0",
     "ethers": "^5.6.8",
     "gsap": "3.11.1",
     "https-browserify": "^1.0.0",
     "i18next": "^23.2.6",
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-http-backend": "^2.2.1",
     "jimp": "0.22.10",
+    "os-browserify": "^0.3.0",
     "path": "0.12.7",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",

plugins/blog-plugin.js

@@ -79,7 +79,9 @@ async function blogPluginExtended(...pluginArgs) {
 
       actions.addRoute({
         // Add route for the home page
-        path: '/',
+        path: process.env.GITHUB_ACTIONS
+          ? `/push-website/pr-preview/${process.env.REACT_APP_PREVIEW_BASE}`
+          : '/',
         exact: true,
 
         // The component to use for the "Home" page route

plugins/custom-webpack-plugin/index.js

@@ -26,6 +26,7 @@ module.exports = function (context, options) {
             http: require.resolve('stream-http'),
             https: require.resolve('https-browserify'),
             stream: require.resolve('stream-browserify'),
+            os: require.resolve('os-browserify/browser'),
             url: require.resolve('url'),
             zlib: require.resolve('browserify-zlib'),
             crypto: require.resolve('crypto-browserify'),

src/pages/home.tsx

@@ -63,6 +63,7 @@ import {
 import { OthersFeaturesList } from '@site/src/config/HomeOthersFeaturesList';
 import GLOBALS, { device } from '@site/src/config/globals';
 import { PageMeta } from '@site/src/config/pageMeta';
+import { getPublicAssetPath } from '../utils/useRouteHelper';
 
 export default function Home({ homePageBlogMetadata, recentPosts }) {
   // Internationalization
@@ -470,7 +471,7 @@ export default function Home({ homePageBlogMetadata, recentPosts }) {
               {!isMobile && (
                 <ItemH justifyContent='flex-end'>
                   <SlideLink
-                    href='/blog'
+                    href={getPublicAssetPath('/blog')}
                     title='Explore all articles'
                     hoverBackground='transparent'
                     hover='transparent'