feat: icbd page skeleton (#90)

Co-authored-by: Ludovic Mermod <ludovic.mermod@epfl.ch>

Author: NoeTerrier

directus

@@ -16,6 +16,9 @@
   "dependencies": {
     "@directus/sdk": "^18.0.0",
     "@svgr/webpack": "^8.1.0",
+    "@tsparticles/engine": "^3.7.1",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.7.1",
     "next": "^14.2.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -26,15 +29,15 @@
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
     "@trivago/prettier-plugin-sort-imports": "^4.1.0",
-    "husky": "^8.0.0",
-    "prettier": "2.8.4",
     "@types/node": "20.4.5",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
+    "husky": "^8.0.0",
     "postcss": "8.4.31",
+    "prettier": "2.8.4",
     "sass": "^1.69.5",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"

package-lock.json

@@ -31,6 +31,9 @@ export default function Card(
     case "/subsonic":
       className = styles.subsonic;
       break;
+    case "/icbd":
+      className = styles.icbd;
+      break;
     default:
       className = styles.card;
       break;

package.json

@@ -0,0 +1,28 @@
+import DirectusImage from "./DirectusImage";
+import { getTranslation, locale } from "@/locales";
+import styles from "@/styles/IcbdActivityCard.module.scss";
+import { ICBDActivity } from "@/types/aliases";
+import { useRouter } from "next/router";
+import Markdown from "react-markdown";
+
+export default function IcbdActivityCard(props: { activity: ICBDActivity }) {
+  const router = useRouter();
+
+  const translation = getTranslation(props.activity, locale(router));
+  return (
+    <div className={styles.content}>
+      <div className={styles.title}>
+        <DirectusImage
+          sizes="5rem"
+          img={props.activity.icon}
+          name={translation.name || ""}
+          className={styles.picture}
+        />
+        <h2>{translation.name}</h2>
+      </div>
+      <Markdown className={styles.description}>
+        {translation.description}
+      </Markdown>
+    </div>
+  );
+}

src/components/Card.tsx

@@ -177,6 +177,9 @@ export default function NavigationBar(props: {
     case "/subsonic":
       className = styles.subsonic;
       break;
+    case "/icbd":
+      className = styles.icbd;
+      break;
     default:
       className = styles.navigationBar;
       break;

src/components/IcbdActivityCard.tsx

@@ -0,0 +1,96 @@
+import { ISourceOptions } from "@tsparticles/engine";
+import Particles, { initParticlesEngine } from "@tsparticles/react";
+import { loadSlim } from "@tsparticles/slim";
+import { useEffect, useMemo, useState } from "react";
+
+export default function ParticlesComponent(props: { id: string }) {
+  const [init, setInit] = useState(false);
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    }).then(() => {
+      setInit(true);
+    });
+  }, []);
+
+  const options: ISourceOptions = useMemo(
+    () => ({
+      background: {
+        color: {
+          value: "#ffffff",
+        },
+      },
+      fullScreen: {
+        zIndex: -1,
+        enable: true, // this is the line to change
+      },
+      fpsLimit: 120,
+      interactivity: {
+        events: {
+          onClick: {
+            enable: true,
+            mode: "repulse",
+          },
+          onHover: {
+            enable: true,
+            mode: "grab",
+          },
+        },
+        modes: {
+          push: {
+            distance: 200,
+            duration: 15,
+          },
+          grab: {
+            distance: 150,
+          },
+        },
+      },
+      particles: {
+        color: {
+          value: "#FE9F21",
+        },
+        links: {
+          color: "#FE9F21",
+          distance: 150,
+          enable: true,
+          opacity: 0.3,
+          width: 1,
+        },
+        move: {
+          direction: "none",
+          enable: true,
+          outModes: {
+            default: "bounce",
+          },
+          random: true,
+          speed: 3,
+          straight: false,
+        },
+        number: {
+          density: {
+            enable: true,
+          },
+          value: 200,
+        },
+        opacity: {
+          value: 7.0,
+        },
+        shape: {
+          type: "circle",
+        },
+        size: {
+          value: { min: 1, max: 4 },
+        },
+      },
+      detectRetina: true,
+    }),
+    []
+  );
+
+  if (init) {
+    return <Particles id={props.id} options={options} />;
+  }
+
+  return <></>;
+}

src/components/NavigationBar.tsx

@@ -157,7 +157,6 @@ export function cleanTranslations<T extends { [key: string]: any }>(
 export function getDirectusImageUrl(
   image: string | components["schemas"]["Files"] | null | undefined
 ): string | undefined {
-  console.log(JSON.stringify(image, null, 2));
   return image
     ? `${PUBLIC_DIRECTUS_URL}/assets/${
         typeof image === "string" ? image : image.filename_disk