Misc updates (solana-foundation#30)

* Misc updates

* Update comment

Author: catalinred

.env.example

@@ -1,4 +1,4 @@
-# YouTube keys for getting videos & info from channel
+# YouTube
 YOUTUBE_CHANNEL_ID=
 YOUTUBE_API_KEY=
 # Simplecast

.github/workflows/action.yml

@@ -20,7 +20,7 @@ jobs:
       - name: installing_yarn
         run: yarn install
       - name: formatting
-        run: yarn format
+        run: yarn format:check
   stage:
     name: Test linting...
     needs: Format
@@ -37,4 +37,4 @@ jobs:
       - name: installing_yarn & lint
         run: |
           yarn install
-          yarn run lint
+          yarn lint

.husky/pre-commit

@@ -1,2 +1,2 @@
-yarn format
+yarn format:check
 yarn lint

package.json

@@ -1,6 +1,5 @@
 {
   "name": "solana-com",
-  "private": true,
   "description": "The solana.com website",
   "version": "3.0.0",
   "author": "Solana Maintainers",
@@ -70,27 +69,21 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^9.0.11",
     "next-sitemap": "^4.2.3",
-    "next-transpile-modules": "^10.0.1",
     "postcss": "^8.4.38",
     "postcss-preset-env": "^9.5.14",
     "prettier": "^3.2.5",
     "svg-react-loader": "^0.4.6",
     "typescript": "^5.4.5"
   },
   "scripts": {
-    "build": "echo 'Building solana-com...' && next build",
+    "build": "next build",
     "dev": "next",
-    "develop": "yarn dev",
     "start": "next start",
-    "format": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md,scss}\"",
-    "format:fix": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,scss}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md,scss}\"",
+    "format:all": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,scss}\"",
     "lint": "next lint",
-    "lint:fix": "yarn lint --fix",
-    "vdev": "vercel dev --debug",
+    "lint:fix": "next lint --fix",
     "postbuild": "next-sitemap",
     "prepare": "husky"
-  },
-  "msw": {
-    "workerDirectory": "public"
   }
 }

src/components/ModalLauncher/ModalLauncher.js

@@ -1,4 +1,11 @@
-import { useEffect, useState, useRef, createElement } from "react";
+import {
+  useEffect,
+  useState,
+  useRef,
+  createElement,
+  useCallback,
+  useMemo,
+} from "react";
 import { useRouter } from "next/router";
 import { Modal, CloseButton } from "react-bootstrap";
 import ArtistsAndCreatorsNewsletter from "../newsletter/artistsAndCreators";
@@ -10,11 +17,14 @@ const ModalLauncher = () => {
   const [modalLaunchId, setModalLaunchId] = useState("default");
   const modalActionCompleted = useRef(false);
 
-  const modalMapping = {
-    artistAndCreatorsNewsletter: ArtistsAndCreatorsNewsletter,
-  };
+  const modalMapping = useMemo(
+    () => ({
+      artistAndCreatorsNewsletter: ArtistsAndCreatorsNewsletter,
+    }),
+    [],
+  );
 
-  const modalCloseHandler = () => {
+  const modalCloseHandler = useCallback(() => {
     // if the modal action is not complete, track bounce
     if (!modalActionCompleted.current && typeof window.gtag !== "undefined") {
       window.gtag("event", "modal_bounce", {
@@ -37,7 +47,7 @@ const ModalLauncher = () => {
       undefined,
       { shallow: true },
     );
-  };
+  }, [modalLaunchId, router]);
 
   useEffect(() => {
     const { modalLaunch, modalLaunchId } = router.query;
@@ -68,7 +78,7 @@ const ModalLauncher = () => {
       setShowModal(false);
       setModalComponent(null);
     }
-  }, [router.query]);
+  }, [router.query, modalCloseHandler, modalMapping]);
 
   return (
     <Modal

src/components/blog/PostCard.js

@@ -170,7 +170,11 @@ const PostCard = ({ post, index, isFirstPage, variant = "primary" }) => {
               height={1073}
             />
           </Link>
-          <h2 className="post-card-title secondary">{post?.data?.title}</h2>
+          <h2 className="post-card-title secondary">
+            {typeof post?.data?.title === "string"
+              ? post.data.title
+              : post?.data?.title?.Default}
+          </h2>
         </div>
         <Link to={url} className="post-card-button">
           {t("blog.read-article")}
@@ -198,7 +202,11 @@ const PostCard = ({ post, index, isFirstPage, variant = "primary" }) => {
                   <small className="d-block post-card-date">
                     <PublishedAt publishedDateString={publishedDate} />
                   </small>
-                  <h2 className="post-card-title">{post?.data?.title}</h2>
+                  <h2 className="post-card-title">
+                    {typeof post?.data?.title === "string"
+                      ? post.data.title
+                      : post?.data?.title?.Default}
+                  </h2>
                   <p className="post-card-excerpt">{excerpt}</p>
                 </div>
               </div>
@@ -232,7 +240,11 @@ const PostCard = ({ post, index, isFirstPage, variant = "primary" }) => {
                 <span className="d-block post-card-date">
                   <PublishedAt publishedDateString={publishedDate} />
                 </span>
-                <h2 className="post-card-title">{post?.data?.title}</h2>
+                <h2 className="post-card-title">
+                  {typeof post?.data?.title === "string"
+                    ? post.data.title
+                    : post?.data?.title?.Default}
+                </h2>
                 <p className="post-card-excerpt">{excerpt}</p>
               </div>
             ) : (

src/components/news/CategorySelection.js

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useCallback } from "react";
 import styles from "./CategorySelection.module.scss";
 import classNames from "classnames";
 import { SwitcherButtons } from "@solana-foundation/solana-lib";
@@ -29,7 +29,7 @@ const CategorySelection = ({
     return arr.length; // Return -1 if the sum never exceeds maxNumber
   };
 
-  const updateDisplayedItems = () => {
+  const updateDisplayedItems = useCallback(() => {
     const containerWidth = categoryContainer.current.offsetWidth;
     const dropdownWidth = moreCategoriesLabel?.length * 10 + 70; // 70 = padding + ~margin
     maxDisplayItems.current = findExceedingIndex(
@@ -45,7 +45,7 @@ const CategorySelection = ({
       setDisplayCategories(categories);
       setMoreCategories([]);
     }
-  };
+  }, [buttonWidths, moreCategoriesLabel, categories]); // Added 'categories' to dependencies
 
   // estimate the widths of the category buttons on initial render
   // note: can't rely on actual widths because some buttons are stored in the dropdown and are not accessible
@@ -66,7 +66,7 @@ const CategorySelection = ({
     return () => {
       window.removeEventListener("resize", updateDisplayedItems);
     };
-  }, [buttonWidths]);
+  }, [buttonWidths, updateDisplayedItems]);
 
   return (
     <>

src/components/possible/PossibleAnimatedIcons.js

@@ -21,16 +21,18 @@ const PossibleAnimatedIcons = ({
       },
     );
 
-    if (videoRef.current) {
-      observer.observe(videoRef.current);
+    const currentVideoRef = videoRef.current; // Store the current ref
+
+    if (currentVideoRef) {
+      observer.observe(currentVideoRef);
     }
 
     return () => {
-      if (videoRef.current) {
-        observer.unobserve(videoRef.current);
+      if (currentVideoRef) {
+        observer.unobserve(currentVideoRef);
       }
     };
-  }, [videoSrc]);
+  }, []);
 
   const handleVideoError = () => {
     setShowFallback(true);

src/components/shared/Divider.js

@@ -3,19 +3,19 @@ import styled from "styled-components";
 const StyledDivider = styled.div`
   height: ${(props) => props.height || "auto"};
   ${(props) =>
-    props.axis === "x"
+    props.$axis === "x"
       ? "border-top"
-      : props.axis === "y"
+      : props.$axis === "y"
         ? "border-right"
         : "border"}: 1px solid
     rgba(
       ${(props) =>
-    props.theme === "light"
+    props.$theme === "light"
       ? "255, 255, 255"
-      : props.theme === "dark"
+      : props.$theme === "dark"
         ? "0, 0, 0"
-        : "100,100,100"},
-      ${(props) => props.alpha || 0.4}
+        : "100, 100, 100"},
+      ${(props) => props.$alpha || 0.4}
     );
 `;
 
@@ -32,9 +32,9 @@ const StyledDivider = styled.div`
 const Divider = ({ theme, alpha, axis, height, className }) => (
   <StyledDivider
     role="separator"
-    theme={theme}
-    alpha={alpha}
-    axis={axis}
+    $theme={theme}
+    $alpha={alpha}
+    $axis={axis}
     height={height}
     className={className}
   />

src/components/shared/Link.js

@@ -25,7 +25,7 @@ export const Link = ({
         asPath.includes(to) &&
         !partiallyActiveIgnore.filter((el) => asPath.startsWith(el)).length)
     );
-  }, [partiallyActive, asPath, to]);
+  }, [partiallyActive, asPath, to, partiallyActiveIgnore]); // Added partiallyActiveIgnore to dependencies
 
   if (internal) {
     const { scroll, prefetch, ...aProps } = other;