next.js with gh-pages

Brushfam · Nov 21, 2023 · a48bd51 · a48bd51
1 parent e8d6acb
commit a48bd51
Show file tree

Hide file tree

Showing 19 changed files with 143 additions and 209 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -1,93 +1,37 @@
-# Sample workflow for building and deploying a Next.js site to GitHub Pages
-#
-# To get started with Next.js see: https://nextjs.org/docs/getting-started
-#
-name: Deploy Next.js site to Pages
-
 on:
-  # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
+    branches: [ main ]
 
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, 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 job
   build:
     runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Detect package manager
-        id: detect-package-manager
-        run: |
-          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
-            echo "manager=yarn" >> $GITHUB_OUTPUT
-            echo "command=install" >> $GITHUB_OUTPUT
-            echo "runner=yarn" >> $GITHUB_OUTPUT
-            exit 0
-          elif [ -f "${{ github.workspace }}/package.json" ]; then
-            echo "manager=npm" >> $GITHUB_OUTPUT
-            echo "command=ci" >> $GITHUB_OUTPUT
-            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
-            exit 0
-          else
-            echo "Unable to determine package manager"
-            exit 1
-          fi
-      - name: Setup Node
-        uses: actions/setup-node@v3
+      - name: Get files
+        uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
         with:
-          node-version: "16"
-          cache: ${{ steps.detect-package-manager.outputs.manager }}
+          node-version: ${{ matrix.node-version }}
       - name: Setup Pages
         uses: actions/configure-pages@v3
         with:
-          # Automatically inject basePath in your Next.js configuration file and disable
-          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
-          #
-          # You may remove this line if you want to manage the configuration yourself.
           static_site_generator: next
-      - name: Restore cache
-        uses: actions/cache@v3
+      - name: Install packages
+        run: npm ci
+      - name: Build project
+        run: npm run build
+      - name: Export static files
+        run: npm run export
+      - name: Add .nojekyll file
+        run: touch ./out/.nojekyll
+      - name: Deploy
+        uses: JamesIves/[email protected]
         with:
-          path: |
-            .next/cache
-          # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-          # If source files changed but packages didn't, rebuild from a prior cache.
-          restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
-      - name: Install dependencies
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
-      - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
-        with:
-          path: ./dist
-
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v2
+          branch: gh-pages
+          folder: out
diff --git a/components/Contact/SocialMedia.js b/components/Contact/SocialMedia.js
@@ -5,11 +5,11 @@ export const SocialButtons = () => {
   return (
     <div className={styles.socialWrapper}>
       <Link href={"https://twitter.com/Brushfam_io"} className={styles.socialButton}>
-          <img src={"/icons/contact-form/twitter-contact.svg"} />
+          <img src={"icons/contact-form/twitter-contact.svg"} />
           <p>Twitter</p>
       </Link>
         <Link href={"https://discord.gg/9FRETSPmp9"} className={styles.socialButton}>
-            <img src={"/icons/contact-form/discord-contact.svg"} />
+            <img src={"icons/contact-form/discord-contact.svg"} />
             <p>Discord</p>
         </Link>
       <Link
@@ -18,11 +18,11 @@ export const SocialButtons = () => {
         }
         className={styles.socialButton}
       >
-          <img src={"/icons/contact-form/element-contact.svg"} />
+          <img src={"icons/contact-form/element-contact.svg"} />
           <p>Element</p>
       </Link>
         <Link href={"https://medium.com/brushfam"} className={styles.socialButton} style={{marginRight: 0}}>
-            <img src={"/icons/contact-form/medium-contact.svg"} />
+            <img src={"icons/contact-form/medium-contact.svg"} />
             <p>Medium</p>
         </Link>
     </div>
@@ -35,19 +35,19 @@ export const SocialButtonsMobile = () => {
         <div className={styles.socialWrapperMobile}>
             <div className={styles.socialBlock} style={{border: "none", paddingTop: 0}}>
                 <Link href={"https://twitter.com/Brushfam_io"} className={styles.socialButton}>
-                    <img src={"/icons/contact-form/twitter-contact.svg"} style={{width: 20, height: 17, marginLeft: 10}}/>
+                    <img src={"icons/contact-form/twitter-contact.svg"} style={{width: 20, height: 17, marginLeft: 10}}/>
                     <p>Twitter</p>
                 </Link>
             </div>
             <div className={styles.socialBlock}>
                 <Link href={"https://discord.gg/9FRETSPmp9"} className={styles.socialButton}>
-                    <img src={"/icons/contact-form/discord-contact.svg"} style={{width: 24, height: 17, marginLeft: 6}}/>
+                    <img src={"icons/contact-form/discord-contact.svg"} style={{width: 24, height: 17, marginLeft: 6}}/>
                     <p>Discord</p>
                 </Link>
             </div>
             <div className={styles.socialBlock}>
                 <Link href={"https://medium.com/727-ventures"} className={styles.socialButton}>
-                    <img src={"/icons/contact-form/medium-contact.svg"} style={{width: 30, height: 17}}/>
+                    <img src={"icons/contact-form/medium-contact.svg"} style={{width: 30, height: 17}}/>
                     <p>Medium</p>
                 </Link>
             </div>
@@ -58,7 +58,7 @@ export const SocialButtonsMobile = () => {
                     }
                     className={styles.socialButton}
                 >
-                    <img src={"/icons/contact-form/element-contact.svg"} style={{width: 17, height: 17, marginLeft: 13}}/>
+                    <img src={"icons/contact-form/element-contact.svg"} style={{width: 17, height: 17, marginLeft: 13}}/>
                     <p>Element</p>
                 </Link>
             </div>

diff --git a/components/MobileNavbar.js b/components/MobileNavbar.js
@@ -87,10 +87,10 @@ export const MobileNavbar = () => {
     <div>
       <div className={styles.navbarMobile} id={"navbar-bottom"}>
         <Link href={"/"}>
-          <img src={"/logos/brushfam-mobile-logo.svg"} />
+          <img src={"logos/brushfam-mobile-logo.svg"} />
         </Link>
         <img
-          src={"/mobile-navbar-button.svg"}
+          src={"mobile-navbar-button.svg"}
           className={styles.navbarMenuButton}
           onClick={toggle}
         />
@@ -99,12 +99,12 @@ export const MobileNavbar = () => {
       {isOpened ? (
         <div className={styles.navbarContainer}>
           <img
-            src={"/exit-button.svg"}
+            src={"exit-button.svg"}
             className={styles.exitButton}
             onClick={toggle}
           />
           <Link href={"/"} style={{ marginLeft: 16, marginBottom: 43 }}>
-            <img src={"/logos/brushfam-logo.svg"} style={{ maxWidth: 230 }} />
+            <img src={"logos/brushfam-logo.svg"} style={{ maxWidth: 230 }} />
           </Link>
           <div className={styles.item}>
             <button
@@ -114,13 +114,13 @@ export const MobileNavbar = () => {
               onClick={setProducts}
             >
               Products
-              <img id={"arrow1"} src={"/arrow.svg"} className={styles.arrow} />
+              <img id={"arrow1"} src={"arrow.svg"} className={styles.arrow} />
             </button>
             {ProductsIsOpened ? (
               <ul>
                 <li>
                   <Link href={"https://openbrush.brushfam.io/"} className={styles.link}>
-                    <img src="/nav-icons/nav-openbrush.svg" />
+                    <img src="nav-icons/nav-openbrush.svg" />
                     <p>OpenBrush</p>
                   </Link>
                 </li>
@@ -129,7 +129,7 @@ export const MobileNavbar = () => {
                     href={"https://github.com/727-Ventures/sol2ink"}
                     className={styles.link}
                   >
-                    <img src="/nav-icons/nav-sol2Ink.svg" />
+                    <img src="nav-icons/nav-sol2Ink.svg" />
                     <p>Sol2ink</p>
                   </Link>
                 </li>
@@ -139,7 +139,7 @@ export const MobileNavbar = () => {
                     className={styles.link}
                     style={{marginBottom: 0}}
                   >
-                    <img src="/nav-icons/nav-typechain.svg" />
+                    <img src="nav-icons/nav-typechain.svg" />
                     <p>Typechain</p>
                   </Link>
                 </li>
@@ -156,31 +156,31 @@ export const MobileNavbar = () => {
               onClick={setServices}
             >
               Services & Solutions
-              <img id={"arrow2"} src={"/arrow.svg"} className={styles.arrow} />
+              <img id={"arrow2"} src={"arrow.svg"} className={styles.arrow} />
             </button>
             {ServicesIsOpened ? (
               <ul>
                 <li>
                   <Link href={"/advisory-subscription"} className={styles.link}>
-                    <img src="/nav-icons/nav-advisory.svg" style={{width: 15}}/>
+                    <img src="nav-icons/nav-advisory.svg" style={{width: 15}}/>
                     <p>Advisory subscription</p>
                   </Link>
                 </li>
                 <li>
                   <Link href={"security-audits"} className={styles.link}>
-                    <img src="/nav-icons/nav-audit.svg" style={{width: 15}}/>
+                    <img src="nav-icons/nav-audit.svg" style={{width: 15}}/>
                     <p>Security audits</p>
                   </Link>
                 </li>
                 <li>
                   <Link href={"/onboard-to-web3"} className={styles.link}>
-                    <img src="/nav-icons/nav-web3.svg" style={{width: 18, marginRight: 7}}/>
+                    <img src="nav-icons/nav-web3.svg" style={{width: 18, marginRight: 7}}/>
                     <p>Web3 onboard</p>
                   </Link>
                 </li>
                 <li>
                   <Link href={"/crypto-payment"} className={styles.link} style={{marginBottom: 0}}>
-                    <img src="/nav-icons/nav-payment.svg" style={{width: 14}}/>
+                    <img src="nav-icons/nav-payment.svg" style={{width: 14}}/>
                     <p>Crypto payment</p>
                   </Link>
                 </li>
@@ -193,7 +193,7 @@ export const MobileNavbar = () => {
           <div className={styles.item}>
             <button type="button" className={styles.button} onClick={setLearn}>
               Learn
-              <img id={"arrow3"} src={"/arrow.svg"} className={styles.arrow} />
+              <img id={"arrow3"} src={"arrow.svg"} className={styles.arrow} />
             </button>
             {LearnIsOpened ? (
               <ul>
@@ -202,7 +202,7 @@ export const MobileNavbar = () => {
                     href={"https://discord.gg/9FRETSPmp9"}
                     className={styles.link}
                   >
-                    <img src="/nav-icons/nav-discord.svg" />
+                    <img src="nav-icons/nav-discord.svg" />
                     <p>Community Discord</p>
                   </Link>
                 </li>
@@ -213,7 +213,7 @@ export const MobileNavbar = () => {
                     className={styles.link}
                     style={{marginBottom: 0}}
                   >
-                    <img src="/nav-icons/nav-docs.svg" style={{paddingLeft: 5, paddingRight: 4}}/>
+                    <img src="nav-icons/nav-docs.svg" style={{paddingLeft: 5, paddingRight: 4}}/>
                     <p>Docs</p>
                   </Link>
                 </li>
@@ -230,7 +230,7 @@ export const MobileNavbar = () => {
               onClick={setCompany}
             >
               Company
-              <img id={"arrow4"} src={"/arrow.svg"} className={styles.arrow} />
+              <img id={"arrow4"} src={"arrow.svg"} className={styles.arrow} />
             </button>
             {CompanyIsOpened ? (
               <ul>
@@ -252,16 +252,16 @@ export const MobileNavbar = () => {
 
           <div className={styles.social}>
             <Link href={"https://t.me/openbrush"} style={{marginRight: 38}}>
-              <img src={"/icons/telegram.svg"} style={{width: 22}}/>
+              <img src={"icons/telegram.svg"} style={{width: 22}}/>
             </Link>
             <Link href={"https://instagram.com/727_ventures?igshid=ZmVmZTY5ZGE="} style={{marginRight: 38}}>
-              <img src={"/icons/inst-mobile.svg"}/>
+              <img src={"icons/inst-mobile.svg"}/>
             </Link>
             <Link href={"https://twitter.com/Brushfam_io"} style={{marginRight: 38}}>
-              <img src={"/icons/twitter.svg"} style={{width: 21}}/>
+              <img src={"icons/twitter.svg"} style={{width: 21}}/>
             </Link>
             <Link href={"mailto:[email protected]"} >
-              <img src={"/icons/mail.svg"} style={{width: 24}}/>
+              <img src={"icons/mail.svg"} style={{width: 24}}/>
             </Link>
           </div>
         </div>