Merge pull request #8 from weaponsforge/feature/weaponsforge-3

Feature/weaponsforge 3

Author: weaponsforge

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_BASE_PATH=''

.github/workflows/lint.yml

@@ -9,6 +9,8 @@ jobs:
   lint-client:
     name: Lint Client
     runs-on: ubuntu-latest
+    env:
+      NEXT_PUBLIC_BASE_PATH: ${{ secrets.NEXT_PUBLIC_BASE_PATH }}
     steps:
       - name: Checkout the repository
         uses: actions/checkout@v3

.github/workflows/release.yml

@@ -0,0 +1,55 @@
+name: Deploy to GitHub Pages
+
+# This workflow will trigger on any tag/release created on *any* branch
+# Make sure to create tags/releases only from the "master" branch for consistency
+on:
+  release:
+    types: [published]
+
+jobs:
+  lint-client:
+    name: Lint and Export client
+    runs-on: ubuntu-latest
+    env:
+      NEXT_PUBLIC_BASE_PATH: ${{ secrets.NEXT_PUBLIC_BASE_PATH }}
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v3
+      - name: Use NodeJS v16.14.2
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.14.2
+      - name: Install Dependencies and lint
+        run: npm install
+      - name: Lint
+        run: npm run lint
+      - name: Export static files
+        run: |
+          npm run export
+          mv out/404/index.html out/404.html
+      - name: Disable Jekyll
+        run: touch out/.nojekyll
+      - name: Archive Development Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: main-out
+          path: out
+          retention-days: 3
+
+  deploy-client:
+    name: Deploy client to Github Pages
+    needs: lint-client
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download Artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: main-out
+      - name: List files for publish
+        run: ls -l -a
+      - name: Deploy to Github Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./
+          publish_branch: gh-pages

.gitignore

@@ -27,10 +27,14 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env*.development
+*.env
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*.zip

README.md

@@ -17,6 +17,12 @@ Testing display of all related content based on a URL query string.
 1. Install dependencies.<br>
 `npm install`
 
+2. Set up the environment variables. Create a `.env`, `.env.local` and a `.env.development` files inside the root project directory with reference to the `.env.example` file.<br>
+
+   | Variable Name         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+   | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+   | NEXT_PUBLIC_BASE_PATH | Root directory path name that NextJS uses for assets, media and client-side routing for the app.<br><br>Set its value to blank `''` when working on development mode in localhost.<br>Set its value to the sub-directory name where the exported NextJS app is to be deployed, i.e. `/<YOUR_REPOSITORY_NAME>` when deploying on a repository (sub-directory) of a root GitHub Pages site, i.e, on `https://<YOUR_GITHUB_USERNAME>.github.io/<YOUR_REPOSITORY_NAME>` |
+
 ## Usage
 
 1. Run the app in development mode.<br>

components/layout/navigation/index.js

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import styles from '@/styles/Navigation.module.css'
+
+function Navigation () {
+  return (
+    <span className={styles.container}>
+      <Link href='/'>Start</Link> |&nbsp;
+      <Link href='/home'>Home</Link> |&nbsp;
+      <Link href='/home/cafe'>Cafe</Link> |&nbsp;
+      <Link href='/about'>About</Link>
+    </span>
+  )
+}
+
+export default Navigation

components/layout/section/index.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types'
+import styles from '@/styles/Section.module.css'
+
+function Section ({ children }) {
+  return (
+    <div className={styles.containersection}>
+      {children}
+    </div>
+  )
+}
+
+Section.propTypes = {
+  children: PropTypes.node
+}
+
+export default Section

jsconfig.json

@@ -2,8 +2,10 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
+      "@/components/*": ["components/*"],
       "@/pages/*": ["pages/*"],
+      "@/public/*": ["public/*"],
       "@/styles/*": ["styles/*"]
     }
   }
-}
+}

next.config.js

@@ -1,12 +1,17 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  trailingSlash: true,
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   images: {
     unoptimized: true
   },
   eslint: {
-    dirs: ['pages', 'styles']
+    dirs: ['components', 'pages', 'styles']
   },
+  env: {
+    NEXT_PUBLIC_BASE_PATH: process.env.NEXT_PUBLIC_BASE_PATH
+  }
 }
 
 module.exports = nextConfig

pages/about/index.js

@@ -0,0 +1,15 @@
+import Section from '@/components/layout/section'
+import Navigation from '@/components/layout/navigation'
+
+function About () {
+  return (
+    <Section>
+      <h1>About</h1>
+      <Navigation />
+
+      <p>This is the About Page</p>
+    </Section>
+  )
+}
+
+export default About