fix: eslint and add deploy script

Notuom · Nov 23, 2021 · 56329b0 · 56329b0
1 parent b9b1c15
commit 56329b0
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 25 deletions.
diff --git a/components/About.js b/components/About.js
@@ -11,16 +11,17 @@ export const About = () => (
       <p>
         Click on the icon corresponding to the collected Decor Pikmin to change
         from ❌ to ✅. It will be saved on this device until you clear your
-        browser's storage.
+        browser&apos;s storage.
       </p>
       <p>
         Click on the icon again to change to 🥚, indicating you are currently
         growing this type/color of Decor Pikmin.
       </p>
       <p>
-        You can also share your progress between devices by using the "Share"
-        button which will generate a URL containing your collection to be sent
-        to the other device, and clear your progress with the "Clear" button.
+        You can also share your progress between devices by using the
+        &quot;Share&quot; button which will generate a URL containing your
+        collection to be sent to the other device, and clear your progress with
+        the &quot;Clear&quot; button.
       </p>
       <h3>Why?</h3>
       <p>
@@ -29,16 +30,21 @@ export const About = () => (
       </p>
       <h3>Decor Pikmin?</h3>
       <p>
-        If you have no idea how Decor Pikmin work, I'd suggest starting here:{" "}
-        <a href="https://www.pikminwiki.com/Decor_Pikmin" target="_blank">
+        If you have no idea how Decor Pikmin work, I&apos;d suggest starting
+        here:{" "}
+        <a
+          href="https://www.pikminwiki.com/Decor_Pikmin"
+          target="_blank"
+          rel="noreferrer"
+        >
           https://www.pikminwiki.com/Decor_Pikmin
         </a>{" "}
         or reading the sections below.
       </p>
       <h4>How do I get Decor Pikmin?</h4>
       <p>
         In Pikmin Bloom, every Pikmin you get has the potential to become a
-        "Decor Pikmin". This can happen two different ways:
+        &quot;Decor Pikmin&quot;. This can happen two different ways:
       </p>
       <ol>
         <li>
@@ -54,8 +60,8 @@ export const About = () => (
       </ol>
       <h4>How do I know which Decor Pikmin I have?</h4>
       <p>
-        In order to know which ones you already have, you can check your "Decor
-        Collector" badge progress. To do so:
+        In order to know which ones you already have, you can check your
+        &quot;Decor Collector&quot; badge progress. To do so:
       </p>
       <ol>
         <li>
@@ -67,7 +73,7 @@ export const About = () => (
       <p>
         This will show you all the Decor Pikmin you already have. If you want to
         get all the Decors as swiftly as possible, you could mark the Seedlings
-        and Pikmin of a color and type of Decor you don't already have and
+        and Pikmin of a color and type of Decor you don&apos;t already have and
         prioritize growing and making friends with those first.
       </p>
       <h4>How do I know which Decor a Pikmin or Seedling will get?</h4>
@@ -87,14 +93,19 @@ export const About = () => (
       <ul>
         <li>
           Decor Icons retrieved from{" "}
-          <a href="https://www.pikminwiki.com/Decor_Pikmin" target="_blank">
+          <a
+            href="https://www.pikminwiki.com/Decor_Pikmin"
+            target="_blank"
+            rel="noreferrer"
+          >
             https://www.pikminwiki.com/Decor_Pikmin
           </a>
         </li>
         <li>
           <a
             href="https://thenounproject.com/term/beetle/396855/"
             target="_blank"
+            rel="noreferrer"
           >
             Beetle by Erik Jensen from the Noun Project
           </a>
@@ -103,6 +114,7 @@ export const About = () => (
           <a
             href="https://thenounproject.com/term/banana/2770445/"
             target="_blank"
+            rel="noreferrer"
           >
             banana by Izwar Muis from the Noun Project
           </a>
@@ -111,6 +123,7 @@ export const About = () => (
           <a
             href="https://thenounproject.com/term/mushroom/3194002/"
             target="_blank"
+            rel="noreferrer"
           >
             Mushroom by Adrien Coquet from the Noun Project
           </a>
@@ -119,22 +132,30 @@ export const About = () => (
           <a
             href="https://thenounproject.com/term/acorn/4408016/"
             target="_blank"
+            rel="noreferrer"
           >
             Acorn by KP Arts from the Noun Project
           </a>
         </li>
       </ul>
       <p>
         Created with{" "}
-        <a href="https://nextjs.org/" target="_blank">
+        <a href="https://nextjs.org/" target="_blank" rel="noreferrer">
           Next.js
         </a>
         .
       </p>
       <h3>Contributions</h3>
       <p>
         <strong>Suggestions, corrections, bug reports?</strong> Please{" "}
-        <a href="#">file an issue or open a pull request on GitHub</a>.
+        <a
+          href="https://github.com/Notuom/pikmin-bloom-checklist"
+          target="_blank"
+          rel="noreferrer"
+        >
+          file an issue or open a pull request on GitHub
+        </a>
+        .
       </p>
     </footer>
   </>

diff --git a/components/Checklist.js b/components/Checklist.js
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { useRef, useState } from "react";
 import {
   nextValidStatus,
@@ -8,6 +9,7 @@ import { colors, decors, imageSize, statusEmojis } from "../utils/constants";
 import { getShareURL } from "../utils/encoding";
 import {
   capitalizeDecorTitle,
+  decorLoader,
   getDecorIcon,
   getDecorKey,
 } from "../utils/strings";
@@ -53,16 +55,15 @@ export const Checklist = () => {
         <tbody>
           {decors.map((decor) => {
             const title = capitalizeDecorTitle(decor);
-            const imageSrc = getDecorIcon(decor);
 
             return (
               <tr key={decor}>
                 <th>
-                  <img
-                    className={styles.decor}
+                  <Image
+                    loader={decorLoader}
                     alt={title}
                     title={title}
-                    src={imageSrc}
+                    src={getDecorIcon(decor)}
                     width={imageSize}
                     height={imageSize}
                   />

diff --git a/next.config.js b/next.config.js
@@ -1,3 +1,7 @@
 module.exports = {
   reactStrictMode: true,
-}
+  images: {
+    loader: "custom",
+    path: "/",
+  },
+};
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "deploy": "next build && next export && git checkout gh-pages && cd out && cp -r * ../ && git add -A && git commit -m \"chore: deploy to gh-pages\" && cd .. && git checkout main"
   },
   "dependencies": {
     "next": "12.0.4",

diff --git a/styles/Checklist.module.css b/styles/Checklist.module.css
@@ -43,11 +43,6 @@
   background: #d526a4;
 }
 
-img.decor {
-  display: block;
-  margin: 0 auto;
-}
-
 .table td.status {
   cursor: pointer;
 }

diff --git a/utils/strings.js b/utils/strings.js
@@ -4,7 +4,9 @@ export const capitalizeDecorTitle = (decorKey) =>
     .map((word) => word[0].toUpperCase() + word.substring(1))
     .join(" ");
 
-export const getDecorIcon = (decorKey) => `/decors/${decorKey}.png`;
+export const getDecorIcon = (decorKey) => `${decorKey}.png`;
+
+export const decorLoader = ({ src }) => `/decors/${src}`;
 
 export const getDecorKey = (decor, color) => `${decor}~${color}`;