Update dependencies and fix code issues

package.json

@@ -42,7 +42,6 @@
         "cheerio": "^1.0.0-rc.12",
         "cross-env": "^7.0.3",
         "css-shared": "workspace:^",
-        "eslint-plugin-react-hooks": "^4.6.0",
         "fast-glob": "^3.2.12",
         "firebase-admin": "^11.11.1",
         "jest": "^29.6.1",

website/app/[locale]/(root)/blog/_page.tsx

@@ -21,7 +21,7 @@ export async function generateMetadata(props: any, parent: any) {
 
 export default function Page(props: any) {
     return <>
-        <DocHeader contained locale={props.params.locale} />
+        <DocHeader contained />
         <main className='app-doc-main max-w:screen-xl'>
             <Article className="mb:80" prose>
                 <div className='gap:12x|25 grid-cols:4'>
@@ -31,7 +31,7 @@ export default function Page(props: any) {
                             return (
                                 <Link href="/blog/v2" className={clsx('text-decoration:none!', { 'grid-col-span:2 flex flex:col': index < 2 })} key={eachBlogMetadata.date}>
                                     <Image src="/images/gold-pattern.jpg"
-                                        className={clsx('aspect:16/9 r:5 h:auto w:full flex:1')}
+                                        className={clsx('aspect:16/9 flex:1 h:auto r:5 w:full')}
                                         width={480}
                                         height={270}
                                         alt={eachBlogMetadata.title} />

website/app/[locale]/(root)/docs/animation-direction/components/Basic.tsx

@@ -6,7 +6,7 @@ import { IconRefresh, IconRotate, IconRotateClockwise } from '@tabler/icons-reac
 import Code from 'websites/components/Code'
 
 export default ({ className }: any) => {
-    const iconClassName = clsx(className, 'app-icon-primary stroke:.5 size:12x @rotate|1s|linear|infinite')
+    const iconClassName = clsx(className, 'app-icon-primary @rotate|1s|linear|infinite size:12x stroke:.5')
     return (
         <>
             <Demo>

website/app/[locale]/(root)/docs/animation-iteration-count/components/Basic.tsx

@@ -10,7 +10,7 @@ export default ({ className }: any) => {
         <>
             <Demo>
                 <IconRotateClockwise className="size:12x stroke:.5 stroke:text-lightest" strokeDasharray={1.5} />
-                <IconRotateClockwise className={clsx(className, 'app-icon-primary stroke:.5 size:12x')} />
+                <IconRotateClockwise className={clsx(className, 'app-icon-primary size:12x stroke:.5')} />
             </Demo>
             <Code lang="html">{`
                 <svg class="**${className}**">…</svg>

website/app/[locale]/(root)/docs/animation-play-state/components/Basic.tsx

@@ -9,8 +9,8 @@ export default ({ className }: any) => {
     return (
         <>
             <Demo>
-                <IconUfo className={clsx(className, 'stroke:.5 stroke:text-lightest size:12x mr:-48')} strokeDasharray={1.5} />
-                <IconUfo className={clsx(className, 'app-icon-primary stroke:.5 size:12x @float|3s|ease-in-out|infinite')} />
+                <IconUfo className={clsx(className, 'mr:-48 size:12x stroke:.5 stroke:text-lightest')} strokeDasharray={1.5} />
+                <IconUfo className={clsx(className, 'app-icon-primary @float|3s|ease-in-out|infinite size:12x stroke:.5')} />
             </Demo>
             <Code lang="html">{`
                 <svg class="**${className}** ${className.includes('running') ? '@float|3s|ease-in-out|infinite|paused' : '@float|3s|ease-in-out|infinite'}">…</svg>

website/app/[locale]/(root)/docs/class-variant/example.js

@@ -4,7 +4,7 @@ const btn = cv(
     `rounded font:semibold`,
     {
         intent: {
-            primary: 'bg:blue bg:blue-55:hover fg:white',
+            primary: 'bg:blue bg:blue-60:hover fg:white',
             secondary: 'bg:white bg:slate-90:hover fg:slate-30',
         },
         size: {

website/app/[locale]/(root)/docs/cursor/components/Overview.tsx

@@ -3,7 +3,7 @@ import syntaxes from '../syntaxes'
 import clsx from 'clsx'
 import SyntaxTr from '~/components/SyntaxTr'
 import SyntaxPreview from './SyntaxPreview'
-import { IconArrowBarBoth, IconArrowBarDown, IconArrowBarLeft, IconArrowBarRight, IconArrowBarUp, IconArrowDownBar, IconArrowDownLeft, IconArrowDownRight, IconArrowLeftBar, IconArrowRightBar, IconArrowUpBar, IconArrowUpLeft, IconArrowUpRight, IconArrowsDiagonal, IconArrowsDiagonal2, IconArrowsHorizontal, IconArrowsMove, IconArrowsVertical, IconArticle, IconCursorText, IconHandFinger, IconHandGrab, IconHandStop, IconLoader, IconPlus, IconPointer, IconPointerCancel, IconPointerPlus, IconPointerQuestion, IconShare3, IconZoomIn, IconZoomOut } from '@tabler/icons-react'
+import { IconArrowBarBoth, IconArrowDownBar, IconArrowDownLeft, IconArrowDownRight, IconArrowLeftBar, IconArrowRightBar, IconArrowUpBar, IconArrowUpLeft, IconArrowUpRight, IconArrowsDiagonal, IconArrowsDiagonal2, IconArrowsHorizontal, IconArrowsMove, IconArrowsVertical, IconArticle, IconCursorText, IconHandFinger, IconHandGrab, IconHandStop, IconLoader, IconPlus, IconPointer, IconPointerCancel, IconPointerPlus, IconPointerQuestion, IconShare3, IconZoomIn, IconZoomOut } from '@tabler/icons-react'
 
 export default () => {
     const previewSyntax = 'cursor:pointer'

website/app/[locale]/(root)/docs/float/components/Basic.tsx

@@ -9,7 +9,7 @@ export default ({ className }: any) => {
         <>
             <Demo $py={0}>
                 <DemoPanel>
-                    <Image className={clsx(className, 'r:8 object:cover mt:6 mb:16', {
+                    <Image className={clsx(className, 'mb:16 mt:6 object:cover r:8', {
                         'mr:30': className === 'float:left',
                         'ml:30': className === 'float:right'
                     })} src="/images/blur.png" width={160} height={90} alt="Float Image" />

website/app/[locale]/(root)/docs/functions/components/Default.tsx

@@ -29,7 +29,7 @@ export default () => <table>
                             <td>
                                 {
                                     eachFunction.unit
-                                        ? <code className='fg:code-pink'>{eachFunction.unit}</code>
+                                        ? <code className='fg:pink'>{eachFunction.unit}</code>
                                         : <span className='fg:lightest'>-</span>
                                 }
                             </td>

website/app/[locale]/(root)/docs/layout.tsx

@@ -4,7 +4,7 @@ import DocSidebar from '~/components/DocSidebar'
 export default function Layout(props: any) {
     const { children, params } = props
     return <>
-        <DocHeader locale={params.locale} contained />
+        <DocHeader contained />
         <DocSidebar locale={params.locale} />
         {children}
     </>

website/app/[locale]/(root)/docs/rendering-modes/Layout.tsx

@@ -1,8 +1,10 @@
 import Tabs, { Tab } from 'websites/components/Tabs'
 import DocLayout from '~/layouts/doc'
 import metadata from './metadata'
+import { createTranslation } from '~/i18n'
 
-export default function Layout(props: any) {
+export default async function Layout(props: any) {
+    const $ = await createTranslation(props.params.locale)
     return (
         <DocLayout {...props}
             metadata={metadata}

website/app/[locale]/(root)/docs/rendering-modes/components/LearnMore.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 export default (props: any) => {
     return (
         <Link {...props} className={clsx(`
-            font:14 font:semibold px:4x h:44 my:10 center-content flex text-decoration:none! r:5
+            center-content flex font:14 font:semibold h:44 my:10 px:4x r:5 text-decoration:none!
         `, {
             'bg:primary fg:text-primary b:1 b:black/.1@light b:white/.2@dark': !props.disabled,
             'bg:slate-95@light bg:gray-15@dark': props.disabled

website/app/[locale]/(root)/docs/rules/components/Default.tsx

@@ -17,11 +17,11 @@ const Default = () => <table>
                     const eachRule = rules[eachRuleName]
                     return (
                         <tr key={eachRuleName}>
-                            <td><code className='fg:code-blue'>{eachRuleName}</code></td>
+                            <td><code className='fg:blue'>{eachRuleName}</code></td>
                             <td>
                                 {
                                     eachRule.unit
-                                        ? <code className='fg:code-pink'>{eachRule.unit}</code>
+                                        ? <code className='fg:pink'>{eachRule.unit}</code>
                                         : <span className='fg:lightest'>-</span>
                                 }
                             </td>

website/app/[locale]/(root)/docs/rules/components/LayerReference.tsx

@@ -17,8 +17,8 @@ const LayerReference = () => <table>
                     const each = Layer[eachName]
                     return (
                         <tr key={eachName}>
-                            <td><code className='fg:code-blue'>{eachName}</code></td>
-                            <td><code className='fg:code-blue'>{each}</code></td>
+                            <td><code className='fg:blue'>{eachName}</code></td>
+                            <td><code className='fg:blue'>{each}</code></td>
                         </tr>
                     )
                 })

website/app/[locale]/(root)/docs/theme-service/theme-service-layout.tsx

@@ -1,8 +1,10 @@
 import Tabs, { Tab } from 'websites/components/Tabs'
 import DocLayout from '~/layouts/doc'
 import metadata from './metadata'
+import { createTranslation } from '~/i18n'
 
-export default function Layout(props: any) {
+export default async function Layout(props: any) {
+    const $ = await createTranslation(props.params.locale)
     return (
         <DocLayout {...props} metadata={metadata}>
             <Tabs className="mb:30">

website/app/[locale]/(root)/sponsor/components/BackerTiers.tsx

@@ -7,7 +7,7 @@ import useRewritedPathname from 'websites/uses/rewrited-pathname'
 export default function BackerTiers() {
     const pathname = useRewritedPathname()
     const [selectedTier, setSelectedTier] = useState<any>()
-    const openCollectiveRedirectUrl = 'https://docs.master.co' + pathname.replace('donate', 'sponsor')
+    const openCollectiveRedirectUrl = 'https://docs.master.co' + pathname?.replace('donate', 'sponsor')
     const backerTiers: {
         name: string
         description?: string

website/app/[locale]/(root)/sponsor/components/DonationModal.tsx

@@ -12,9 +12,9 @@ export default function DonationModal() {
     const searchParams = useSearchParams()
 
     useEffect(() => {
-        let orderId = searchParams.get('orderId')
-        const orderIdV2 = searchParams.get('orderIdV2')
-        const status = searchParams.get('status')
+        let orderId = searchParams?.get('orderId')
+        const orderIdV2 = searchParams?.get('orderIdV2')
+        const status = searchParams?.get('status')
 
         let platform = null
         if (orderId && orderIdV2 && status) {

website/app/[locale]/(root)/sponsor/components/SponsorTiers.tsx

@@ -8,7 +8,7 @@ import useRewritedPathname from 'websites/uses/rewrited-pathname'
 export default function SponsorTiers() {
     const pathname = useRewritedPathname()
     const [selectedTier, setSelectedTier] = useState<any>()
-    const sponsorTiers = getSponsorTiers(pathname)
+    const sponsorTiers = getSponsorTiers(pathname || '')
 
     return <div className="gap:15 grid-cols:2 grid-cols:4@sm">
         {sponsorTiers.map((eachSponsorTier) => (

website/app/[locale]/(root)/sponsor/layout.tsx

@@ -1,12 +1,10 @@
-'use client'
-
 import DocHeader from '~/components/DocHeader'
 import DocSidebar from '~/components/DocSidebar'
 
-export default function Layout(props: any) {
+export default async function Layout(props: any) {
     const { children, params } = props
     return <>
-        <DocHeader locale={params.locale} contained />
+        <DocHeader contained />
         <DocSidebar locale={params.locale} />
         {children}
     </>

website/app/[locale]/play/Play.tsx

@@ -739,7 +739,7 @@ export default function Play(props: any) {
                             />
                         </div>
                         {previewErrorEvent &&
-                            <div className="abs full bg:red-10@dark bg:red-95@light fg:red-75@dark fg:red@light inset:0 p:12x">
+                            <div className="abs full bg:red-95@dark bg:red-5@light fg:red inset:0 p:12x">
                                 <h2 className="font:20">Error at line {previewErrorEvent.lineno === 1 ? 1 : previewErrorEvent.lineno - 1}</h2>
                                 <div className="bg:black/.2@dark bg:red-90@light font:14 font:medium my:20 p:15|20 r:5">
                                     {previewErrorEvent.message}

website/components/DocSidebar.tsx

@@ -7,7 +7,8 @@ import { pageCategories } from '~/app/[locale]/(root)/pages'
 export default async function DocSidebar(props: any) {
     const $ = await createTranslation(props.locale)
     return (
-        <aside id="sidebar" className="scrollbar fixed hide@print hide@<md invisible:not(:hover)::scrollbar-thumb invisible:not(:hover)::scrollbar bd:blur(25)@<md bg:transparent!::scrollbar bg:gray-10/.9@<md@dark bg:white/.8@<md direction:rtl h:calc(100%-6rem-1px) h:calc(100%-3.75rem)@md left:max(0px,calc(50%-45.3125rem)) overflow-y:overlay!@supports(overflow:overlay) overflow-y:auto overscroll-behavior:contain top:97 top:60@md w:full w:260@md w:300@xl z:1050@<md">
+        // eslint-disable-next-line @master/css/class-validation
+        <aside id="sidebar" className="scrollbar fixed hide@print hide@<md invisible:not(:hover)::scrollbar invisible:not(:hover)::scrollbar-thumb bd:blur(25)@<md bg:transparent!::scrollbar bg:gray-10/.9@<md@dark bg:white/.8@<md direction:rtl h:calc(100%-6rem-1px) h:calc(100%-3.75rem)@md left:max(0px,calc(50%-45.3125rem)) overflow-y:overlay!@supports(overflow:overlay) overflow-y:auto overscroll-behavior:contain top:97 top:60@md w:full w:260@md w:300@xl z:1050@<md">
             <div className="direction:ltr p:0|15|20|15">
                 <div className="flex sticky@md untouchable align-items:center gradient(180deg,base|0%,base|calc(100%-2rem),transparent|100%)@md mb:-30 pb:30 pt:20 top:20 top:0@md z:1">
                     <SearchButton className="pointer-events:auto" locale={props.locale} />

website/i18n/index.ts

@@ -1,13 +1,18 @@
-const dictionaries: Record<string, Promise<any>> = {
-    en: import('./en.json'),
-    tw: import('./tw.json'),
+import 'server-only'
+
+const dictionaries: { [key: string]: () => Promise<any> } = {
+    en: () => import('./en.json').then((module) => module.default),
+    tw: () => import('./tw.json').then((module) => module.default),
 }
 
 export async function createTranslation(locale: string): Promise<(text: any) => string> {
     const translations = await importTranslations(locale)
     return (text: any) => (translations)[text || ''] || text
 }
 
-export async function importTranslations(locale: string): Promise<any> {
-    return (await dictionaries[locale]).default
-}
+export const importTranslations = async (locale: string) => {
+    if (!locale) {
+        throw new Error('locale is required')
+    }
+    return dictionaries[locale as keyof typeof dictionaries]()
+}

website/layouts/article.tsx

@@ -3,22 +3,18 @@
 import { GridsBg } from 'websites/components/GridsBg'
 import Article from 'websites/components/Article'
 import DocHeader from '~/components/DocHeader'
-import DocFooter from '~/components/DocFooter'
 import ListAuthors from 'websites/components/ListAuthors'
-import { createTranslation } from '~/i18n'
-import dayjs from 'dayjs'
 import TimeAgo from 'websites/components/TimeAgo'
+import { useTranslation } from 'websites/contexts/i18n'
 
-export default async function Layout(props: any) {
-    const $ = await createTranslation(props.params.locale)
-    const date = new Date(props.metadata.date)
-    // const formattedDate = dayjs(date).format('dddd, MMMM D YYYY')
+export default function Layout(props: any) {
+    const $ = useTranslation()
     return <>
-        <DocHeader locale={props.params.locale} contained />
+        <DocHeader contained />
         <GridsBg className="abs h:352 left:0 top:97 top:60@md w:full z:-1" />
         <div className='max-w:screen-md mb:-20 mt:180 mx:auto'>
             <div className='fg:accent font:semibold mb:10 text:center'>
-                {props.metadata.date && <TimeAgo timestamp={props.metadata.date} locale={props.params.locale} />}
+                {props.metadata.date && <TimeAgo timestamp={props.metadata.date} />}
             </div>
             <h1 className='bg:text font:64@sm font:heavy gradient(180deg,gray-60,gray-90) gradient(180deg,white,gray-40)@dark ls:-.5 m:0 text-fill:transparent text:center'>
                 {$(props.metadata.title)}

website/next.config.mjs

@@ -12,7 +12,7 @@ const nextConfig = {
     eslint: {
         // Warning: This allows production builds to successfully complete even if
         // your project has ESLint errors.
-        ignoreDuringBuilds: true,
+        ignoreDuringBuilds: process.env.VERCEL_CI ? false : true,
     },
     experimental: {
         nextScriptWorkers: true,

website/package.json

@@ -25,14 +25,22 @@
         "@vercel/speed-insights": "^1.0.2",
         "accept-language": "^3.0.18",
         "clone-deep": "^4.0.1",
+        "eslint-config-next": "^14.1.0",
         "monaco-editor": "^0.45.0",
         "monaco-editor-textmate": "^4.0.0",
         "monaco-textmate": "^3.0.1",
         "next": "14.1.0",
         "theme-service": "workspace:^",
-        "websites": "workspace:../../.."
+        "websites": "workspace:../../..",
+        "react": "^18",
+        "react-dom": "^18"
     },
     "devDependencies": {
-        "@builder.io/partytown": "^0.8.2"
+        "@builder.io/partytown": "^0.8.2",
+        "typescript": "^5",
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "eslint": "^8"
     }
 }