Merge pull request #39 from RobotSail/simplify-gh-action

Simplifies CI logic

.eslintrc.json

@@ -10,7 +10,7 @@
   "rules": {
     "@typescript-eslint/no-unused-vars": [
       "warn",
-      { 
+      {
         "argsIgnorePattern": "^_",
         "varsIgnorePattern": "^_",
         "caughtErrorsIgnorePattern": "^_"

.github/workflows/nextjs.yml

@@ -7,7 +7,7 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["dev", "main"]
+    branches: ['dev', 'main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -24,7 +24,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:
@@ -34,28 +34,11 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Detect package manager
-        id: detect-package-manager
-        run: |
-          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
-            echo "manager=yarn" >> $GITHUB_OUTPUT
-            echo "command=install" >> $GITHUB_OUTPUT
-            echo "runner=yarn" >> $GITHUB_OUTPUT
-            exit 0
-          elif [ -f "${{ github.workspace }}/package.json" ]; then
-            echo "manager=npm" >> $GITHUB_OUTPUT
-            echo "command=ci" >> $GITHUB_OUTPUT
-            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
-            exit 0
-          else
-            echo "Unable to determine package manager"
-            exit 1
-          fi
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
-          cache: ${{ steps.detect-package-manager.outputs.manager }}
+          node-version: '20'
+          cache: yarn
       - name: Setup Pages
         uses: actions/configure-pages@v4
         with:
@@ -76,11 +59,11 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-${{ github.ref }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
       - name: Install dependencies
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+        run: yarn install
+      - name: Lint check
+        run: yarn lint
       - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
-      - name: Static HTML export with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+        run: yarn build
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+

README.md

@@ -1,4 +1,5 @@
 # instructlab
+
 InstructLAB website
 
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

package.json

@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format:fix": "yarn prettier . --write",
+    "format:check": "yarn prettier . --check"
   },
   "dependencies": {
     "@carbon/react": "^1.52.0",
@@ -29,7 +31,7 @@
     "eslint-config-next": "14.1.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.2.5",
+    "prettier": "3.2.5",
     "sass": "^1.71.1",
     "typescript": "5.4.2"
   }

src/components/HowItWorks/InfographicAnimation/index.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment, useEffect, useState } from 'react';
+import { FC, Fragment, useEffect, useCallback, useState } from 'react';
 import { infographicList } from './constant';
 
 import styles from './InfographicAnimation.module.scss';
@@ -27,43 +27,49 @@ const LayerImg: FC<{
   const [animList, setAnimList] = useState<any[] | null>(null); // eslint-disable-line
   const Img = layer.img;
 
-  const resetAnimation = (left: string, top: string, width: string) => {
-    setTargetStyle({ left: left, top: top, width: width });
-    animList?.map(d => clearTimeout(d));
-    setAnimList(null);
-  };
-
-  const setAnimation = (left: string, top: string, width: string) => {
-    if (layer.animation) {
-      setTargetStyle({
-        ...layer.animation[0], //base style to create transition
-        left: getPos('left', layer, originalSize, layer.animation[0].left),
-        top: getPos('top', layer, originalSize, layer.animation[0].top),
-        width,
-      });
-
-      const animList = [layer.animation].flat();
-      animList.map((d, i) => {
-        const animation = setTimeout(
-          () => {
-            setTargetStyle({
-              ...d,
-              left: d.left
-                ? getPos('left', layer, originalSize, d.left)
-                : `${left}%`,
-              top: d.top
-                ? getPos('top', layer, originalSize, d.top)
-                : `${top}%`,
-              width,
-            });
-          },
-          (layer?.delay || 0) * (i + 1),
-        );
-
-        setAnimList(prev => (prev ? [...prev, animation] : [animation]));
-      });
-    }
-  };
+  const resetAnimation = useCallback(
+    (left: string, top: string, width: string) => {
+      setTargetStyle({ left: left, top: top, width: width });
+      animList?.map(d => clearTimeout(d));
+      setAnimList(null);
+    },
+    [animList],
+  );
+
+  const setAnimation = useCallback(
+    (left: string, top: string, width: string) => {
+      if (layer.animation) {
+        setTargetStyle({
+          ...layer.animation[0], //base style to create transition
+          left: getPos('left', layer, originalSize, layer.animation[0].left),
+          top: getPos('top', layer, originalSize, layer.animation[0].top),
+          width,
+        });
+
+        const animList = [layer.animation].flat();
+        animList.map((d, i) => {
+          const animation = setTimeout(
+            () => {
+              setTargetStyle({
+                ...d,
+                left: d.left
+                  ? getPos('left', layer, originalSize, d.left)
+                  : `${left}%`,
+                top: d.top
+                  ? getPos('top', layer, originalSize, d.top)
+                  : `${top}%`,
+                width,
+              });
+            },
+            (layer?.delay || 0) * (i + 1),
+          );
+
+          setAnimList(prev => (prev ? [...prev, animation] : [animation]));
+        });
+      }
+    },
+    [layer, originalSize],
+  );
 
   useEffect(() => {
     if (!layer) return;
@@ -79,7 +85,7 @@ const LayerImg: FC<{
     } else {
       resetAnimation(left, top, width);
     }
-  }, [isAnimOn, layer, size]);
+  }, [isAnimOn, layer, originalSize, resetAnimation, setAnimation, size]);
 
   useEffect(() => {
     const [left, top] = [
@@ -89,7 +95,7 @@ const LayerImg: FC<{
     const width = `${layer.size || 100}%`;
 
     if (animList === null) setAnimation(left, top, width);
-  }, [animList]);
+  }, [animList, layer, originalSize, setAnimation]);
 
   return (
     <Img
@@ -117,11 +123,11 @@ const InfographicAnimation: FC<InfographicAnimationProps> = ({
   const [isAnimOn, setIsAnimOn] = useState(false);
   const [animWidth, setAnimWidth] = useState(size);
 
-  const resetAnim = () => {
+  const resetAnim = useCallback(() => {
     const delays =
       Math.max(...infographicList[kind].layers.map(d => d.delay || 0)) + 5000;
     setTimeout(() => setIsAnimOn(false), delays);
-  };
+  }, [kind]);
 
   useEffect(() => {
     setTimeout(() => setIsAnimOn(true), 3000);
@@ -138,7 +144,7 @@ const InfographicAnimation: FC<InfographicAnimationProps> = ({
       setAnimList(() => ({ ...infographicList[kind] }) as any); // eslint-disable-line
       resetAnim();
     }
-  }, [kind, size]);
+  }, [kind, resetAnim, size]);
 
   useEffect(() => {
     if (!!infographicList[kind]) {
@@ -150,7 +156,7 @@ const InfographicAnimation: FC<InfographicAnimationProps> = ({
         resetAnim();
       }
     }
-  }, [isOn, isAnimOn]);
+  }, [isOn, isAnimOn, kind, resetAnim]);
 
   return (
     <>

src/components/HowItWorks/Slideshow.module.scss

@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/breakpoint' as *;
-@use "@carbon/react/scss/theme" as *;
-@use "@carbon/type" as *;
+@use '@carbon/react/scss/theme' as *;
+@use '@carbon/type' as *;
 @use '@carbon/grid' as *;
 
 .slideshowWrapper {
@@ -104,7 +104,7 @@
     align-items: flex-end;
 
     .order {
-      @include type-style("heading-05");
+      @include type-style('heading-05');
       color: $text-primary;
       text-align: center;
       font-size: 34px;
@@ -114,7 +114,7 @@
     .description {
       flex: 1;
       margin-left: 4rem;
-      @include type-style("body-02");
+      @include type-style('body-02');
       color: $text-primary;
       word-break: auto-phrase;
       padding-right: 1rem;
@@ -157,4 +157,3 @@
     opacity: 1;
   }
 }
-

src/components/Leadspace/Leadspace.module.scss

@@ -2,7 +2,7 @@
 @use '@carbon/grid' as *;
 @use '@carbon/type' as *;
 @use '@carbon/colors' as *;
-@use "@carbon/react/scss/theme" as *;
+@use '@carbon/react/scss/theme' as *;
 @use '../../styles/type.scss' as *;
 
 .pane {
@@ -15,26 +15,26 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-  
+
     &__header {
       margin-bottom: 32px;
-  
+
       @include breakpoint(lg) {
         margin-bottom: 48px;
       }
     }
-  
+
     &__subhead {
       position: relative;
     }
-  
+
     .action {
       margin-top: 32px;
       padding-left: 16px;
       width: 100%;
       min-width: 20rem;
       margin-top: 16px;
-  
+
       label {
         flex: 1;
       }
@@ -60,11 +60,11 @@
 
     .graphics {
       transform: scale(0.6);
-  
+
       @include breakpoint(lg) {
         transform: scale(0.8);
       }
-      
+
       @include breakpoint(xlg) {
         transform: scale(1);
       }

src/components/Leadspace/graphics/Cube.module.scss

@@ -7,4 +7,4 @@
     position: absolute;
     overflow: visible;
   }
-}
+}

src/components/Leadspace/graphics/Logo.tsx

@@ -1,7 +1,8 @@
 import { FC } from 'react';
+import Image from 'next/image';
 
 const Logo: FC = () => {
-  return <img src="logo.png" alt="A cute dog" />;
+  return <Image src="logo.png" alt="A cute dog" />;
 };
 
 export default Logo;

src/components/ReleaseCycle/ReleaseCycle.tsx

@@ -19,8 +19,8 @@ const ReleaseCycle: FC<ReleaseCycleProps> = () => (
       >
         <h2> Periodic release cycle for models and data</h2>
         <p>
-          The InstructLab community model will be updated with the
-          latest contributions and shared on Hugging Face regularly.
+          The InstructLab community model will be updated with the latest
+          contributions and shared on Hugging Face regularly.
         </p>
       </Column>
       <Column

src/components/ReleaseCycle/graphics/ReleaseCycleDiagram.module.scss

@@ -51,7 +51,7 @@
       text-align: center;
       transform: translateX(50%);
     }
-    
+
     .img3 {
       top: 103%;
       left: 11.5%;
@@ -84,4 +84,4 @@
       text-align: center;
     }
   }
-}
+}