Refactor: Folder structure, scripts and design

.github/workflows/screenshots.yml

@@ -1,24 +1,24 @@
 name: Take screenshots
 on:
   schedule:
-    - cron: 5 0 * * *
+    - cron: 0 0 * * *
   workflow_dispatch:
 
 jobs:
   screenshots:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 16.x
         uses: actions/setup-node@v2
         with:
-          node-version: "14"
-          cache: "npm"
+          node-version: "16"
       - run: npm install
       - name: Take screenshots
         id: screenshots
         run: npm run screenshots
       - name: Commit screenshots
+        if: ${{ steps.screenshots.outputs.should-commit == 'true' }}
         env:
           LATEST_VERSION: ${{ steps.screenshots.outputs.latest-version }}
         run: |

components/BagdeNew.js

@@ -0,0 +1,18 @@
+/**
+ *
+ * @param {{show: boolean, theme: string}} props
+ * @returns
+ */
+function BadgeNew({ show, theme }) {
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <span className="badge" style={{ backgroundColor: theme }}>
+      NEW
+    </span>
+  );
+}
+
+export default BadgeNew;

src/components/Champions.js → components/Champions.js

@@ -39,12 +39,12 @@ function Champions({ champions, skip }) {
   const items = chunckChampions(champions, chunkSize);
 
   return (
-    <section className="champions">
+    <>
       <div className="grid" ref={gridRef}>
         {items}
       </div>
       <div id="observer" ref={observerRef}></div>
-    </section>
+    </>
   );
 }
 

components/LoadingImage.js

@@ -0,0 +1,30 @@
+import { cloneElement, useRef, useState, useEffect } from "react";
+import styles from "@/styles/Thumbnail.module.css";
+
+function LoadingImage({ children }) {
+  const [loading, setLoading] = useState(true);
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const ref = useRef();
+
+  const handleLoad = () => setLoading(false);
+
+  useEffect(() => {
+    setWidth(Number(ref.current?.width));
+    setHeight(Number(ref.current?.height));
+  }, []);
+
+  return (
+    <div style={{ position: "relative" }}>
+      {loading && (
+        <span
+          className={styles.skeleton}
+          style={{ width: width, height: height }}
+        ></span>
+      )}
+      {cloneElement(children, { ref, onLoad: handleLoad })}
+    </div>
+  );
+}
+
+export default LoadingImage;

components/Thumbnail.js

@@ -0,0 +1,33 @@
+import { memo } from "react";
+import Link from "next/link";
+import BadgeNew from "@/components/BagdeNew";
+import styles from "@/styles/Thumbnail.module.css";
+
+/**
+ *
+ * @param {{champion: IChampion}} props
+ */
+function Thumbnail({ champion }) {
+  return (
+    <div className={styles.thumbnail}>
+      <Link href={`/champions/${champion.id}`}>
+        <a>
+          <BadgeNew show={champion.new} />
+          <div style={{ overflow: "hidden" }}>
+            {" "}
+            <img
+              src={champion.thumbnail}
+              alt={champion.name}
+              loading="lazy"
+              width="150"
+              height="150"
+            />
+          </div>
+          <span className={styles.champion_name}>{champion.name}</span>
+        </a>
+      </Link>
+    </div>
+  );
+}
+
+export default memo(Thumbnail, (a, b) => a.champion.id === b.champion.id);

src/context/theme.js → context/theme.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useState } from "react";
 
 const DEFAULT_COLOR = "#ffd369";
 
@@ -7,9 +7,9 @@ const ThemeContext = createContext();
 export function ThemeProvider({ children }) {
   const [theme, setTheme] = useState(DEFAULT_COLOR);
 
-  const setValue = (color) => {
+  const setValue = useCallback((color) => {
     setTheme(color || DEFAULT_COLOR);
-  };
+  }, []);
 
   return (
     <ThemeContext.Provider value={{ theme, setTheme: setValue }}>

hooks/useVibrant.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+/**
+ *
+ * @param {string} src
+ * @returns {string?}
+ */
+function useVibrant(src) {
+  const [color, setColor] = useState();
+
+  useEffect(() => {
+    import("node-vibrant/dist/vibrant").then((module) => {
+      const Vibrant = module.default;
+
+      Vibrant.from(src, { quality: 1 })
+        .getPalette()
+        .then((palette) => setColor(palette.Vibrant.hex));
+    });
+  }, [src]);
+
+  return color;
+}
+
+export default useVibrant;

src/index.d.ts → index.d.ts

@@ -16,4 +16,9 @@ declare global {
       thumbnail: string;
     };
   }
+
+  type Versions = {
+    latest: string;
+    previous: string;
+  };
 }

jsconfig.json

@@ -2,8 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
-      "@/public/*": ["public/*"]
+      "@/*": ["*"]
     }
   }
 }