✨ NICE-99 simplified layout [b] (#2528)

Well, what started as a "simplified layout" turned into a complete rewrite and of course since I did not really set out with a goal things are all over the place. 🤣 

So started taking some control and breaking down some smaller tasks.

It is at the point where it is "shippable" but just means more tweaks down the line because there are still a lot of pages not migrated / updated for either layout.

## Commits

🚧  NICE-99 move to zustand for temp mocks

🚧  NICE-99 more prep to move to a layout

🚧  NICE-99 more cta stuff

🚧  NICE-99 why did i think this would not take 4eva

🚧  NICE-99 body m-0 hack for dropdown

🚧  NICE-99 pixel perfect means... something i guess

🚧  NICE-99 px px px px px px 3vrywhr3

🚧  NICE-99 hidden good for aria|a11y

🚧  NICE-99 add icons, expand left col

🚚  NICE-99 start moving components for routing

🚧  NICE-99 continue to migrate to new layout

🚧  NICE-99 seems like a hack, but passes lighthouse

🚧  NICE-99 as always scope to the creep

🚧  NICE-107 cta z-index fix

🚧  NICE-103 books|music => currently/r|l-to

🚚  NICE-116 (next) redirects for currently

🚧  NICE-99 file renames and Box usage

🚧  NICE-106 mobile padding below container main

🚧  NICE-112 styled OL|UL|LI

🚨  NICE-99 pass lint 😮‍💨

🚧  NICE-101 pass event data

🚧  NICE-106 really fix padding this time

🚧  NICE-118 fix px, mobile first

🚧  NICE-118 mobile first

🚧  NICE-119 listening|reading move into "new" format for now

🚧  NICE-99 what timing this is being fixed...

🚧  NICE-99 more tailwind tweaks (pick a lane!)

🚧  NICE-99 pause for radix-ui circ

🐛  (radix-ui) NICE-120 circular deps

⬆️  (deps) @radix-ui/[email protected]

⬆️  (deps) package upgrades...


📦️  (deps) clean up deps from peers

🚧  NICE-119 reduce currently complexity

⬆️  (deps) @jeromefitz/[email protected]

⬆️  (deps) [email protected] (from 0.32.6 ...)

💄  NICE-119 tighten things up

🚧  NICE-99 more cleanup...

⬇️  (deps) [email protected] (revert)

🚧  NICE-99 rework fonts a bit; sidebar border

⬆️  (deps) playwright, storybook, vercel/analytics...

⬆️  (deps) vercel/analytics|speed-insights

🚧  NICE-99 overcomplicated currently prep

⬆️  (deps) [email protected]

⬆️  [email protected]

🚧  NICE-99 uh ... why did spotify do this

🚧  NICE-99 layout tweaks, gradient/blur

⬆️  (deps) [email protected]

🚧  NICE-99 useSWRInfinitePages 🔥 jf/ds

🏷️  NICE-99 ugh tis port is awful

🚧  NICE-99 hide cmdk, add skip nav

➕  (deps) clean-up storybook and root eslint

⬆️  (deps) [email protected]

🔒️  (next) https localhost

💩  NICE-99 hack for mouseOver on dropdown

💩  NICE-99 yup revert that onMouse stuff

🚧  NICE-99 smoothscroll section legend

♻️  NICE-99 no client component, use scrollMarginTop

⬆️  (deps) ts-jest

🚧  NICE-99 section side scroller

⬆️  (deps) storybook, framer-motion, types/node

⬆️  (deps) types/node;framer-motion

🚧  NICE-99 guess i need to write ocntent now

⬆️  (deps) types/node, ramda

♿️  NICE-99 lhci updates

package.json

@@ -10,7 +10,7 @@
   },
   "license": "MIT",
   "private": true,
-  "packageManager": "pnpm@9.0.4+sha256.caa915eaae9d9aefccf50ee8aeda25a2f8684d8f9d5c6e367eaf176d97c1f89e",
+  "packageManager": "pnpm@9.1.2+sha256.19c17528f9ca20bd442e4ca42f00f1b9808a9cb419383cd04ba32ef19322aba7",
   "engines": {
     "node": ">=20"
   },
@@ -30,24 +30,25 @@
   },
   "dependencies": {
     "@jeromefitz/conventional-gitmoji": "4.0.1",
-    "@jeromefitz/eslint-config": "3.0.1",
-    "@jeromefitz/lint-staged": "2.0.2",
+    "@jeromefitz/eslint-config": "3.0.4",
+    "@jeromefitz/lint-staged": "2.0.3",
     "@jeromefitz/prettier-config": "2.0.4",
-    "@jeromefitz/release-notes-generator": "2.0.6",
+    "@jeromefitz/release-notes-generator": "2.0.8",
     "@jeromefitz/semantic": "10.0.6",
     "@jeromefitz/tsconfig": "2.0.0",
     "@manypkg/cli": "0.21.4",
     "@types/is-ci": "3.0.4",
-    "@types/lodash": "4.17.1",
-    "@types/node": "20.12.8",
+    "@types/lodash": "4.17.4",
+    "@types/node": "20.14.0",
     "ccommit": "2.0.2",
     "concurrently": "8.2.2",
     "dotenv": "16.4.5",
     "husky": "9.0.11",
     "is-ci": "3.0.1",
     "lodash": "4.17.21",
-    "semantic-release": "23.0.8",
+    "semantic-release": "23.1.1",
     "syncpack": "12.3.2",
+    "tailwindcss": "3.4.3",
     "ts-node": "10.9.2",
     "tsup": "8.0.2",
     "turbo": "1.13.3",

packages/design-system/package.json

@@ -32,6 +32,10 @@
       "types": "./dist/components/Section/index.d.ts",
       "default": "./dist/components/Section/index.js"
     },
+    "./components/SkipNav": {
+      "types": "./dist/components/SkipNav/index.d.ts",
+      "default": "./dist/components/SkipNav/index.js"
+    },
     "./utils/cx": {
       "types": "./dist/utils/cx.d.ts",
       "default": "./dist/utils/cx.js"
@@ -96,7 +100,7 @@
     "@radix-ui/react-toolbar": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
     "@radix-ui/react-visually-hidden": "1.0.3",
-    "@radix-ui/themes": "3.0.3",
+    "@radix-ui/themes": "3.0.5",
     "clsx": "2.1.1",
     "cmdk": "1.0.0",
     "tailwind-merge": "2.3.0"
@@ -106,8 +110,8 @@
     "@jeromefitz/next-config": "workspace:*",
     "@jeromefitz/storybook-config": "workspace:*",
     "@jeromefitz/tailwind-config": "workspace:*",
-    "@mantine/hooks": "7.9.0",
-    "@types/react": "18.3.1",
+    "@mantine/hooks": "7.10.1",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "next": "14.2.3",
     "react": "18.3.1",

packages/design-system/src/components/Anchor/Anchor.tsx

@@ -1,12 +1,6 @@
 import { envClient as env } from '@jeromefitz/next-config/env.client.mjs'
 
-/**
- * @todo(radix-ui) issue w/ flex.props.js init order
- *
- * ref: https://github.com/JeromeFitz/websites/pull/2341
- */
-import { Flex } from '@radix-ui/themes'
-// import { Flex } from '@radix-ui/themes/dist/esm/components/flex.js'
+import { Flex } from '@radix-ui/themes/dist/esm/components/flex.js'
 import { Link } from '@radix-ui/themes/dist/esm/components/link.js'
 // eslint-disable-next-line no-restricted-imports
 import NextLink from 'next/link'

packages/design-system/src/components/SkipNav/SkipNav.tsx

@@ -0,0 +1,56 @@
+import { Box } from '@radix-ui/themes/dist/esm/components/box.js'
+import { Link } from '@radix-ui/themes/dist/esm/components/link.js'
+import { forwardRef } from 'react'
+
+import { cx } from '../../utils/cx'
+
+const defaultId = 'skip-nav'
+
+interface SkipNavLinkProps {
+  children?: React.ReactNode
+  contentId?: string
+}
+interface SkipNavContentProps {
+  children?: React.ReactNode
+  id?: string
+}
+
+const SkipNavLink = forwardRef(function SkipNavLink(
+  { children = 'Skip to content', contentId, ...props }: SkipNavLinkProps,
+  forwardedRef,
+) {
+  const id = contentId || defaultId
+  return (
+    <Link
+      {...props}
+      className={cx(
+        'rounded-3 bg-accent-1 absolute right-[100%] top-2 z-50 block p-4',
+        'focus:left-2.5 focus:right-auto',
+      )}
+      data-skip-nav-content=""
+      href={`#${id}`}
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ref={forwardedRef}
+      tabIndex={0}
+    >
+      {children}
+    </Link>
+  )
+})
+SkipNavLink.displayName = 'SkipNavLink'
+
+const SkipNavContent = forwardRef(function SkipNavContent(
+  { id: idProp, ...props }: SkipNavContentProps,
+  forwardedRef,
+) {
+  const id = idProp || defaultId
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <Box {...props} asChild id={id} ref={forwardedRef} />
+  )
+})
+SkipNavContent.displayName = 'SkipNavContent'
+
+export { SkipNavContent, SkipNavLink }

packages/design-system/src/components/SkipNav/index.ts

@@ -0,0 +1 @@
+export { SkipNavContent, SkipNavLink } from './SkipNav'

packages/design-system/src/components/index.ts

@@ -1,3 +1,4 @@
 export { Anchor } from './Anchor/index'
 export { Callout } from './Callout/index'
 export { Icon } from './Icon/index'
+export { SkipNavContent, SkipNavLink } from './SkipNav/index'

packages/jest-config/package.json

@@ -6,11 +6,13 @@
     "@jeromefitz/jest-presets": "workspace:*",
     "@testing-library/dom": "10.1.0",
     "@testing-library/jest-dom": "6.4.5",
-    "@testing-library/react": "15.0.6",
+    "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.12",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "next": "14.2.3"
+    "next": "14.2.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   }
 }

packages/jest-presets/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "main": "./jest/node/jest-preset.js",
   "devDependencies": {
-    "ts-jest": "29.1.2"
+    "jest": "29.7.0",
+    "ts-jest": "29.1.4"
   }
 }

packages/lighthouse-config/.lighthouserc.cjs

@@ -39,6 +39,7 @@ const config = ({ urlAdditional, website }) => {
           'unused-css-rules': OFF,
           'unused-javascript': OFF,
           'uses-responsive-images': OFF,
+          'uses-text-compression': WARN,
         },
         preset: 'lighthouse:no-pwa',
       },

packages/next-config/next.config.mjs

@@ -75,6 +75,7 @@ const config = ({
   basePath,
   buildInfoConfig,
   pathDirName,
+  redirects = [],
   serverComponentsExternalPackages = [],
   transpilePackages = [],
 }) => {
@@ -178,6 +179,10 @@ const config = ({
           hostname: `cdn.jeromefitzgerald.com`,
           protocol,
         },
+        {
+          hostname: `nice-fonts.s3.amazonaws.com`,
+          protocol,
+        },
         // @note(remotePattern) AWS
         {
           hostname: `**.amazonws.com`,
@@ -256,7 +261,9 @@ const config = ({
     // @todo(react) https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode
     // reactStrictMode: true,
     // @note(next) redirect an incoming request path to a different destination path
-    // redirects,
+    async redirects() {
+      return redirects
+    },
     // @note(next) map an incoming request path to a different destination path
     async rewrites() {
       /**

packages/next-config/package.json

@@ -10,6 +10,11 @@
     "@plaiceholder/next": "3.0.0",
     "fast-json-stable-stringify": "2.1.0",
     "lodash": "4.17.21",
-    "zod": "3.23.6"
+    "next": "14.2.3",
+    "plaiceholder": "3.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "sharp": "0.32.6",
+    "zod": "3.23.8"
   }
 }

packages/next-config/src/build-info.mjs

@@ -31,6 +31,8 @@ function getBranch(branch) {
 /**
  * @todo(dynamic) owner/repo from package.json
  */
+// @todo(complexity) 15
+// eslint-disable-next-line complexity
 async function setupBuildInfo({ buildInfoConfig, pathDirName }) {
   /**
    * @todo(dynamic) determine path for multi-site

packages/next-config/src/security-headers.mjs

@@ -8,7 +8,7 @@ const ContentSecurityPolicy = `
   object-src 'self' * blob: data:;
   media-src 'none';
   connect-src * vitals.vercel-insights.com;
-  font-src 'self' data:;
+  font-src 'self' * nice-fonts-apn-all-874455631470.s3-accesspoint.us-east-1.amazonaws.com nice-fonts.s3.amazonaws.com fonts.jeromefitzgerald.com data:;
 `
 
 const securityHeaders = [

packages/next-notion/package.json

@@ -111,7 +111,7 @@
     "@jeromefitz/date-fns-tz": "3.0.0-canary.8",
     "@jeromefitz/utils": "3.0.0",
     "@notionhq/client": "2.2.15",
-    "@types/react": "18.3.1",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "date-fns": "3.6.0",
     "next": "14.2.3",

packages/playwright-config/package.json

@@ -5,6 +5,6 @@
   "private": true,
   "main": "./playwright.config.ts",
   "devDependencies": {
-    "@playwright/test": "1.43.1"
+    "@playwright/test": "1.44.1"
   }
 }

packages/shared/package.json

@@ -68,6 +68,18 @@
       "types": "./dist/hooks/index.d.ts",
       "default": "./dist/hooks/index.js"
     },
+    "./hooks/useSWRInfinitePages": {
+      "types": "./dist/hooks/useSWRInfinitePages.d.ts",
+      "default": "./dist/hooks/useSWRInfinitePages.js"
+    },
+    "./hooks/useThemeToggle": {
+      "types": "./dist/hooks/useThemeToggle.d.ts",
+      "default": "./dist/hooks/useThemeToggle.js"
+    },
+    "./hooks/useThrottle": {
+      "types": "./dist/hooks/useThrottle.d.ts",
+      "default": "./dist/hooks/useThrottle.js"
+    },
     "./lib": {
       "types": "./dist/lib/index.d.ts",
       "default": "./dist/lib/index.js"
@@ -117,20 +129,21 @@
     "react-dom": "^18.2.0",
     "react-tweet": "^3.2.0",
     "server-only": "0.0.1",
+    "swr": "^2.2.5",
     "tailwind-merge": "^2.2.1",
     "valid-url": "^1.0.9"
   },
   "devDependencies": {
     "@jeromefitz/utils": "3.0.0",
     "@notionhq/client": "2.2.15",
-    "@radix-ui/themes": "3.0.3",
-    "@types/lodash": "4.17.1",
-    "@types/react": "18.3.1",
+    "@radix-ui/themes": "3.0.5",
+    "@types/lodash": "4.17.4",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@upstash/ratelimit": "1.1.3",
-    "@upstash/redis": "1.30.0",
-    "@vercel/analytics": "1.2.2",
-    "@vercel/speed-insights": "1.0.10",
+    "@upstash/redis": "1.31.3",
+    "@vercel/analytics": "1.3.1",
+    "@vercel/speed-insights": "1.0.11",
     "clsx": "2.1.1",
     "fast-json-stable-stringify": "2.1.0",
     "fathom-client": "3.6.0",
@@ -143,6 +156,8 @@
     "react-dom": "18.3.1",
     "react-tweet": "3.2.1",
     "server-only": "0.0.1",
+    "sharp": "0.32.6",
+    "swr": "2.2.5",
     "tailwind-merge": "2.3.0",
     "valid-url": "1.0.9"
   },

packages/shared/src/hooks/index.ts

@@ -1 +1,3 @@
+export { useSWRInfinitePages } from './useSWRInfinitePages'
 export { useThemeToggle } from './useThemeToggle'
+export { useThrottle } from './useThrottle'