feat: github pages build and push workflow

* also fixed some leftover codes

.github/workflows/static.yml

@@ -0,0 +1,30 @@
+# .github/workflows/publish.yml
+name: Generate a build and push to another branch
+
+on:
+  push:
+    branches:
+      - master # Remove this line if your primary branch is "main"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build and Push
+    steps:
+      - name: git-checkout
+        uses: actions/checkout@v2
+
+      - name: Install all dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run deploy # The build command of your project
+
+      - name: Push
+        uses: s0/git-publish-subdir-action@develop
+        env:
+          REPO: self
+          BRANCH: gh-pages # The branch name where you want to push the assets
+          FOLDER: "." # The directory where your assets are generated
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub will automatically add this - you don't need to bother getting a token
+          MESSAGE: "build: ({sha}) pushed new static build" # The commit message

package.json

@@ -1,17 +1,21 @@
 {
   "name": "plotsystem-api",
   "version": "0.1.0",
+  "homepage": "https://asean-build-the-earth.github.io/plotsystem-api/",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "gh-pages": "^6.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

src/App.css

@@ -1,6 +1,4 @@
-.app {
-  text-align: center;
-}
+.app { text-align: center; }
 
 .app_logo {
   height: 20vmin;
@@ -29,22 +27,18 @@
 }
 
 .app_link {
-  color: #d1b456;
   display: flex;
   align-items: flex-end;
 }
+.github_link { color: #aeafb1; }
+.website_link { color: #d1b456; }
 
 .app_footer {
-  color: #aeafb1;
   display: inline-flex;
   justify-content: space-evenly;
   align-items: flex-end;
   width: 100%;
   max-width: 30em;
 }
-
-.app_footer small{
-  font-style: oblique;
-
-}
+.app_footer small{ font-style: oblique; }
 

src/App.js

@@ -19,24 +19,28 @@ function App() {
             href="https://github.com/ASEAN-Build-The-Earth"
             target="_blank"
             rel="noopener noreferrer">
-            <small>Our Github</small>
-            <svg width="1.75rem" height="1.75rem" ariaHidden="true" viewBox="-5 -4.75 30 30">
-              <path fill="currentColor" 
-                d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
-              </path>
-            </svg>
+              <span className="github_link">
+                <small>Our Github</small>
+                <svg width="1.75rem" height="1.75rem" ariaHidden="true" viewBox="-5 -4.75 30 30">
+                  <path fill="currentColor" 
+                    d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
+                  </path>
+                </svg>
+              </span>
           </a>
           <a
             className="app_link"
             href="https://asean.buildtheearth.asia/"
             target="_blank"
             rel="noopener noreferrer">
-            <small>Visit Our Website</small>
-            <svg width="1.75rem" height="1.75rem" ariaHidden="true" viewBox="-5 -4.75 30 30">
-              <path fill="currentColor" 
-                d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
-              </path>
-            </svg>
+            <span className="website_link">
+              <small className="website_link">Visit Our Website</small>
+              <svg width="1.75rem" height="1.75rem" ariaHidden="true" viewBox="-5 -4.75 30 30">
+                <path fill="currentColor" 
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
+                </path>
+              </svg>
+            </span>
           </a>
         </footer>
       </header>

src/components/Result.js

@@ -26,9 +26,6 @@ const ResultContent = {
                 >In Google Earth</a>
             </span>
         </div>
-        <button>
-
-        </button>
         <svg onClick={onCLick} role="close_button" className="guide_close" viewBox="-45 150 700 700" xmlns="http://www.w3.org/2000/svg">
             <path d="M640 320L512 192 320 384 128 192 0 320l192 192L0 704l128 128 192-192 192 192 128-128L448 512 640 320z"/>
         </svg>