Merge pull request #179 from AbhinavMV/main

Add new nextjs deploy script + fix SSR features not working on Github page by @AbhinavMV

Author: mkubdev

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }

.github/workflows/deploy-node.yml

@@ -0,0 +1,42 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build
+        env:
+          NEXT_PUBLIC_BASE_PATH: /WebXDAO.github.io
+      - run: npm run export
+        env:
+          NEXT_PUBLIC_BASE_PATH: /WebXDAO.github.io
+      - run: touch ./out/.nojekyll
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.2.5
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: out #nextjs static output is in out folder

.github/workflows/deploy_nextjs.yml

@@ -1,8 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-#package-lock.json
-package-lock.json
-
 # dependencies
 /node_modules
 /.pnp

.gitignore

@@ -1,4 +1,3 @@
-import Image from 'next/image'
 import Link from 'next/link'
 
 const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
@@ -21,11 +20,8 @@ const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
               <div className='flex flex-col justify-between items-stretch col-span-3 md:col-span-1 cursor-pointer p-2 shadow rounded-md focus:outline-none focus:shadow-outline transform transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out'>
                 <div className='bg-white p-4 rounded-lg'>
                   <div className='relative bg-contain'>
-                    <Image
+                    <img
                       alt={article.title}
-                      layout='responsive'
-                      height={150}
-                      width={150}
                       className='lg:h-60 xl:h-56 md:h-64 sm:h-72 xs:h-72 h-72 rounded-md w-full object-cover object-center mb-6'
                       src={article.social_image}
                     />
@@ -36,13 +32,11 @@ const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
                   <p className='leading-relaxed text-sm text-gray-600'>{article.description}</p>
                 </div>
                 <time className='p-4 text-gray-500 text-xs flex items-end'>
-                  <Image
-                    layout='fixed'
-                    width={40}
-                    height={40}
+                  <img
+                    
                     src={article?.user?.profile_image}
                     alt={article.user.name}
-                    className='rounded-full'
+                    className='rounded-full w-16 h-16 mr-1'
                   />
                   <p className='ml-2 opacity-50'>
                     by {article.user.name} on

components/Global/Blogs.jsx

@@ -1,9 +1,9 @@
 import { useState } from 'react'
 import { HiMenuAlt4 } from 'react-icons/hi'
 import { AiOutlineClose } from 'react-icons/ai'
-import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import {prefix} from '../../constants'
 
 const NavBarItem = ({ item, pathname, classprops }) => (
   <a href={item.url}>
@@ -21,13 +21,13 @@ const Navbar = () => {
   const router = useRouter()
   const [toggleMenu, setToggleMenu] = useState(false)
   const navItems = [
-    { title: 'HOME', url: '/' },
-    { title: 'LEARN', url: '#' },
-    { title: 'BLOG', url: '/blog' },
-    { title: 'ABOUT', url: '#' },
-    { title: 'PROJECTS', url: '/projects' },
-    { title: 'COMMUNITY PARTNERS', url: '/partners' },
-    { title: 'OUR MODERATORS', url: '/moderators' }
+    { title: 'HOME', url: prefix+'/' },
+    { title: 'LEARN', url: prefix+'#' },
+    { title: 'BLOG', url: prefix+'/blog' },
+    { title: 'ABOUT', url: prefix+'#' },
+    { title: 'PROJECTS', url: prefix+'/projects' },
+    { title: 'COMMUNITY PARTNERS', url: prefix+'/partners' },
+    { title: 'OUR MODERATORS', url: prefix+'/moderators' }
   ]
 
   return (
@@ -39,7 +39,7 @@ const Navbar = () => {
             href='/'
             passHref
           >
-            <Image layout='fixed' width={150} height={80} src='/logo.png' alt='WebXDAO' />
+            <img src={prefix+'/logo.png'} alt='WebXDAO' className='w-24 h-14 md:w-36 md:h-20'/>
           </Link>
         </div>
         <ul className='lg:flex hidden list-none flex-row justify-end items-center ml-auto'>
@@ -67,7 +67,7 @@ const Navbar = () => {
               className='z-10 fixed -top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl lg:hidden list-none
 flex flex-col justify-start items-end rounded-md blue-glassmorphism'
             >
-              <li className='text-xl w-full my-2 text-blue-600'>
+              <li className='text-xl w-full my-2 text-blue-600 cursor-pointer '>
                 <AiOutlineClose onClick={() => setToggleMenu(false)} />
               </li>
               {navItems.map((item, index) => (

components/Global/Navbar.jsx

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import { prefix } from "../../constants"
 
 const DeveloperPath = () => {
   const devPaths = [
@@ -50,13 +50,10 @@ const DeveloperPath = () => {
             >
               <div className='flex items-center justify-start overflow-hidden'>
                 <div className='relative bg-contain w-1/3'>
-                  <Image
+                  <img
                     alt={name}
-                    layout='responsive'
-                    height={150}
-                    width={150}
                     className='bg-gray-50 p-5 rounded-md'
-                    src={imgUrl}
+                    src={prefix+imgUrl}
                   />
                 </div>
                 <div id='body' className='flex flex-col gap-y-3 pl-5'>

components/Home/DeveloperPath.jsx

@@ -1,5 +1,5 @@
-import Image from 'next/image'
 import Link from 'next/link'
+import { prefix } from '../../constants'
 
 const DevprotocolBrands = () => {
   const projects = [
@@ -43,7 +43,7 @@ const DevprotocolBrands = () => {
             <Link key={name + index} href={url} passHref className='h-full group'>
               <div className='mx-auto flex flex-col justify-evenly items-center h-full object-center text-center p-8 shadow cursor-pointer rounded-md focus:outline-none focus:shadow-outline transform bg-white transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out'>
                 <div className='relative h-24 w-full flex-shrink-0'>
-                  <Image src={imgUrl} alt={name} layout='fill' objectFit='contain' />
+                  <img src={prefix + imgUrl} alt={name} className="object-contain" />
                 </div>
                 <p className='text-gray-800 mt-8 mb-2 text-sm px-8 sm:px-4 h-full'>{text}</p>
               </div>

components/Home/DevprotocolBrands.jsx

@@ -1,10 +1,10 @@
-import Image from 'next/image'
+import {prefix} from '../../constants'
 
 const Hero = () => {
   return (
     <div className='text-white bg-[#00007F] pt-24 py-24'>
       <div className='container px-5 mx-auto flex flex-wrap flex-col md:flex-row items-center'>
-        <div className='px-5 flex flex-col w-full md:w-2/5 items-start text-center md:text-left'>
+        <div className='px-5 flex flex-col mx-auto w-full md:w-2/5 items-start text-center md:text-left'>
           <h1 className='my-4 text-3xl font-bold leading-tight'>
             A new community for Blockchain developers, designers, and Dapp Owners
           </h1>
@@ -21,8 +21,8 @@ const Hero = () => {
           </div>
         </div>
 
-        <div className='relative w-full md:w-3/5 h-96 py-6 text-center items-end'>
-          <Image src='/hero.gif' layout='fill' objectFit='contain' alt='Web3' />
+        <div className='w-full md:w-2/5 flex mx-auto items-end'>
+          <img src={prefix+'/hero.gif'} className='object-contain' alt='Web3' />
         </div>
       </div>
     </div>

components/Home/Hero.jsx

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import { prefix } from "../../constants"
 
 const Testimonials = () => {
   const data = [
@@ -73,7 +73,7 @@ const Testimonials = () => {
               <p className='text-gray-600 text-base mb-2'>{text}</p>
               <div className='flex flex-row items-center justify-start py-2'>
                 <div className='relative h-16 w-16 flex-shrink-0'>
-                  <Image src={imgUrl} alt={name} layout='fill' objectFit='contain' />
+                  <img src={prefix + imgUrl} alt={name} className='object-contain' />
                 </div>
 
                 <div className='flex flex-col justify-center pl-3'>