Merge pull request #64 from ciatph/dev

1.0.1

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "ciatph-web"
+  }
+}

.github/workflows/dev.yml

@@ -0,0 +1,42 @@
+name: Deploy to Firebase Hosting
+
+on:
+  push:
+    branches: 
+      - dev
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v1
+      - name: Install Dependencies
+        run: npm install
+      - name: Lint
+        run: npm run lint
+      - name: Archive Development Artifact
+        uses: actions/upload-artifact@master
+        with:
+          name: public
+          path: public
+
+  deploy:
+    name: Deploy
+    needs: lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v1
+      - name: Download Artifact
+        uses: actions/download-artifact@master
+        with:
+          name: public
+          path: public
+      - name: Deploy to Firebase
+        uses: w9jds/firebase-action@master
+        with:
+          args: deploy --only hosting:pakistan-web-dev
+        env:
+          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

.github/workflows/main.yml

@@ -1,18 +1,40 @@
+name: Deploy to Github Pages
+
 on:
   push:
     branches:
-      - dev
+      - master
 
 jobs:
-  deploy:
+  lint:
+    name: Lint
     runs-on: ubuntu-18.04
     steps:
-      - uses: actions/checkout@v2
-      - name: Install modules
+      - name: Checkout the repository
+        uses: actions/checkout@v1
+      - name: Install Dependencies
         run: npm install
       - name: Lint
         run: npm run lint
-      - name: Deploy
+      - name: Archive Development Artifact
+        uses: actions/upload-artifact@master
+        with:
+          name: public
+          path: public
+
+  deploy:
+    name: Deploy
+    needs: lint
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v1
+      - name: Download Artifact
+        uses: actions/download-artifact@master
+        with:
+          name: public
+          path: public
+      - name: Deploy to Github Pages
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+.firebase/

README.md

@@ -1,15 +1,19 @@
-## pakistan_web_dev
+## alliance-csa-pakistan
 
-> This forked repository serves as a personal stash for storing the requested updates and follow-up fixes for the original website on https://ciat-dapa.github.io/pakistan_web/.
+> This forked repository serves as a stash for storing the requested updates and follow-up fixes for the original website on https://ciat-dapa.github.io/pakistan_web/.
 >
-> Test Site is available on https://ciatph.github.io/pakistan_web_dev. 
+> **Production Site** is available on https://ciatph.github.io/alliance-csa-pakistan  
+> **Test Site** is available on https://pakistan-web-dev.web.app
 
 ### Content
 
+- [Content](#content)
 - [Requirements](#requirements)
 - [Installation](#installation)
 - [Usage](#usage)
 - [Deployment](#deployment)
+  - [Production](#production)
+  - [Development](#development)
 
 
 ### Requirements
@@ -20,10 +24,10 @@
 ## Installation
 
 1. Clone this repository.  
-`git clone https://github.com/ciatph/pakistan_web_dev.git`
+`git clone https://github.com/ciatph/alliance-csa-pakistan.git`
 2. Install dependencies.  
    ```
-   cd pakistan_web_dev
+   cd alliance-csa-pakistan
    npm install
    ```
 
@@ -42,7 +46,12 @@
 
 ## Deployment
 
-Push updates into the dev branch to trigger GitHub workflows ci/cd to the gh-pages branch. Updates will be viewable on https://ciatph.github.io/pakistan_web_dev after the deployment has finished.
+### Production
+- Push updates into the `master` branch to trigger GitHub workflows CI/CD to the gh-pages branch. Updates will be viewable on https://ciatph.github.io/alliance-csa-pakistan after the [deployment](https://github.com/ciatph/alliance-csa-pakistan/actions) has finished.
+- Alternatively, static files from the `/public` directory can also be hosted from any web server that can serve HTML, CSS, JavaScript and CSV files.
+
+### Development
+- Push updates into the `dev` branch to trigger GitHub workflows CI/CD to firebase hosting. Updates will be viewable on https://pakistan-web-dev.web.app after the [deployment](https://github.com/ciatph/alliance-csa-pakistan/actions) has finished.
 
 @ciatph  
 20210427

firebase.json

@@ -0,0 +1,11 @@
+{
+  "hosting": {
+    "site": "pakistan-web-dev",
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "pakistan_web_dev",
+  "name": "alliance-csa-pakistan",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
@@ -11,7 +11,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ciatph/pakistan_web_dev.git"
+    "url": "git+https://github.com/ciatph/alliance-csa-pakistan.git"
   },
   "eslintConfig": {
     "env": {
@@ -43,9 +43,9 @@
   "author": "",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/ciatph/pakistan_web_dev/issues"
+    "url": "https://github.com/ciatph/alliance-csa-pakistan/issues"
   },
-  "homepage": "https://github.com/ciatph/pakistan_web_dev#readme",
+  "homepage": "https://github.com/ciatph/alliance-csa-pakistan#readme",
   "devDependencies": {
     "browser-sync": "^2.26.14",
     "eslint": "^7.24.0",

public/404.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
+  </body>
+</html>

public/index.html

@@ -19,7 +19,7 @@
     <!-- Site CSS -->
     <link href="main.css" rel="stylesheet" type="text/css">
 
-    <title>Pakistan - Test Site</title>
+    <title>Pakistan</title>
 </head>
 
 <body class="d-flex flex-column h-100">
@@ -52,14 +52,14 @@
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="#">
-                            <i class="fas fa-cloud-sun-rain"></i>
-                            Climate
+                            <i class="fas fa-biohazard"></i>
+                            Climate risk
                         </a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="#">
-                            <i class="fas fa-biohazard"></i>
-                            Climate risk
+                            <i class="fas fa-cloud-sun-rain"></i>
+                            Climate
                         </a>
                     </li>
                     <li class="nav-item">