diff --git a/.eslintrc.json b/.eslintrc.json index 4850a7f..7fcb2bb 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -10,7 +10,7 @@ "rules": { "@typescript-eslint/no-unused-vars": [ "warn", - { + { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_", "caughtErrorsIgnorePattern": "^_" diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml index be0f98e..9fcf64e 100644 --- a/.github/workflows/nextjs.yml +++ b/.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: diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..c6cad59 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +# Ignore artifacts: +build +coverage + diff --git a/README.md b/README.md index 40b2200..e4f7d48 100644 --- a/README.md +++ b/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). diff --git a/package.json b/package.json index 0afb10a..2edae0c 100644 --- a/package.json +++ b/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" } diff --git a/src/components/HowItWorks/InfographicAnimation/index.tsx b/src/components/HowItWorks/InfographicAnimation/index.tsx index 116fcad..4e3890f 100644 --- a/src/components/HowItWorks/InfographicAnimation/index.tsx +++ b/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(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 ( = ({ 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 = ({ 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 = ({ resetAnim(); } } - }, [isOn, isAnimOn]); + }, [isOn, isAnimOn, kind, resetAnim]); return ( <> diff --git a/src/components/HowItWorks/Slideshow.module.scss b/src/components/HowItWorks/Slideshow.module.scss index fd109d1..3b10256 100644 --- a/src/components/HowItWorks/Slideshow.module.scss +++ b/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; } } - diff --git a/src/components/Leadspace/Leadspace.module.scss b/src/components/Leadspace/Leadspace.module.scss index 0996e7b..1d861aa 100644 --- a/src/components/Leadspace/Leadspace.module.scss +++ b/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); } diff --git a/src/components/Leadspace/graphics/Cube.module.scss b/src/components/Leadspace/graphics/Cube.module.scss index d20645c..d41ab77 100644 --- a/src/components/Leadspace/graphics/Cube.module.scss +++ b/src/components/Leadspace/graphics/Cube.module.scss @@ -7,4 +7,4 @@ position: absolute; overflow: visible; } -} \ No newline at end of file +} diff --git a/src/components/Leadspace/graphics/Logo.tsx b/src/components/Leadspace/graphics/Logo.tsx index 34d4c10..dcc648a 100644 --- a/src/components/Leadspace/graphics/Logo.tsx +++ b/src/components/Leadspace/graphics/Logo.tsx @@ -1,7 +1,8 @@ import { FC } from 'react'; +import Image from 'next/image'; const Logo: FC = () => { - return A cute dog; + return A cute dog; }; export default Logo; diff --git a/src/components/ReleaseCycle/ReleaseCycle.tsx b/src/components/ReleaseCycle/ReleaseCycle.tsx index 0c4713b..fbda187 100644 --- a/src/components/ReleaseCycle/ReleaseCycle.tsx +++ b/src/components/ReleaseCycle/ReleaseCycle.tsx @@ -19,8 +19,8 @@ const ReleaseCycle: FC = () => ( >

Periodic release cycle for models and data

- 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.

.node { left: 180px; } @@ -79,9 +79,9 @@ .dashed { stroke: $black-100; } - + .selected { stroke: $black-100; } } -} \ No newline at end of file +} diff --git a/src/styles/globals.scss b/src/styles/globals.scss index ddfb32f..6b689c5 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -4,15 +4,18 @@ @use '@carbon/styles/scss/breakpoint' as *; :root { - @include themes.theme($white, ( - text-primary: black, - border-inverse: black, - background-brand: #3B3FB6, - )); - - --light-gray: #F2F4F8; - --brand-green: #51FFC4; - --brand-dark-green: #007D79; + @include themes.theme( + $white, + ( + text-primary: black, + border-inverse: black, + background-brand: #3b3fb6, + ) + ); + + --light-gray: #f2f4f8; + --brand-green: #51ffc4; + --brand-dark-green: #007d79; } * { diff --git a/src/styles/type.scss b/src/styles/type.scss index 78951dc..108d11e 100644 --- a/src/styles/type.scss +++ b/src/styles/type.scss @@ -1,3 +1,2 @@ @use '@carbon/styles/scss/breakpoint' as *; @use '@carbon/type' as *; - diff --git a/tsconfig.json b/tsconfig.json index 7c36020..da5f69c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,12 +14,8 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true, + "incremental": true }, - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx", - ], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] } diff --git a/yarn.lock b/yarn.lock index 4a33989..b9c38b8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3701,7 +3701,7 @@ prettier-linter-helpers@^1.0.0: dependencies: fast-diff "^1.1.2" -prettier@^3.2.5: +prettier@3.2.5: version "3.2.5" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368" integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==