refactor(app): ♻️ refactor code and assets

crstnmac · crstnmac · commit 61504ca43f27 · 2024-08-19T20:57:53.000+05:30
diff --git a/app/globals.css b/app/globals.css
@@ -83,7 +83,6 @@
     width: 2px;
     display: block;
     margin-left: -1.5px;
-    display: none;
     background-color: #e4e4e4;
   }
   .experience__content > li {
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -34,7 +34,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
       <head />
       <body
         className={
-          'group antialiased min-h-screen dark:bg-black-900 bg-white-300 transition-colors duration-1000 ease-in-out'
+          'group antialiased min-h-screen dark:bg-black-900 bg-neutral-200 transition-colors duration-1000 ease-in-out'
         }
       >
         <Providers>
diff --git a/components/about-me.tsx b/components/about-me.tsx
@@ -1,11 +1,16 @@
+import {Squircle} from '@squircle-js/react'
 import {Link, Picture} from 'components'
 
 export default function AboutMe() {
   return (
     <div className="flex flex-col justify-center items-center mx-auto">
       <div className="grid w-full gap-6 sm:grid-flow-col">
-        <div className="flex flex-col items-start justify-center gap-1.5 rounded-3xl p-6 border-[0.5px] dark:border-black-600 border-black-200 dark:bg-black-800 bg-black-100">
-          <div className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-purple-500 to-green-400 dark:from-yellow-300 dark:via-purple-400 dark:to-green-300">
+        <Squircle
+          cornerRadius={60}
+          cornerSmoothing={1}
+          className="flex flex-col items-start justify-center gap-1.5 rounded-3xl p-12 border-[0.5px] dark:border-black-800 border-black-100 dark:bg-black-800 bg-gray-100"
+        >
+          <div className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r bg-black-900 dark:bg-black-200 ">
             Criston Mascarenhas
           </div>
           <div className="text-sm font-medium pl-1 dark:text-black-200">
@@ -25,10 +30,25 @@ export default function AboutMe() {
           <div className="text-md mt-4 font-semibold italic text-gray-400">
             &quot;Make it work, make it right, make it fast. &quot; - Kent Beck
           </div>
+        </Squircle>
+        <div className="flex flex-col items-center justify-center gap-6">
+          <Squircle
+            cornerRadius={60}
+            cornerSmoothing={1}
+            className="border-[0.5px] dark:border-black-800 border-black-100 dark:bg-black-800 bg-gray-100"
+          >
+            <Picture
+              className="w-full h-full"
+              alt="Criston Mascarenhas"
+              width={160}
+              height={160}
+              src="https://dqy38fnwh4fqs.cloudfront.net/UHBADP79DNJ867R3OQJ8RMR8A7N6/hbadp79dnj867r3oqj8rmr8a7n6-profile.webp"
+            />
+          </Squircle>
         </div>
-        <div className="hidden md:block border-[0.5px] h-40 sm:h-auto dark:border-black-600 border-black-200 rounded-3xl bg-[conic-gradient(var(--tw-gradient-stops))] from-yellow-600 to-black-100"></div>
+        {/* <div className="hidden md:block border-[0.5px] h-40 sm:h-auto dark:border-black-600 border-black-200 rounded-3xl bg-[conic-gradient(var(--tw-gradient-stops))] from-yellow-600 to-black-100"></div>
         <div className="hidden md:block border-[0.5px] h-40 sm:h-auto dark:border-black-600 border-black-200 rounded-3xl bg-[conic-gradient(var(--tw-gradient-stops))] from-purple-600 to-black-100"></div>
-        <div className="hidden md:block border-[0.5px] h-40 sm:h-auto dark:border-black-600 border-black-200 rounded-3xl bg-[conic-gradient(var(--tw-gradient-stops))] from-green-600 to-black-100"></div>
+        <div className="hidden md:block border-[0.5px] h-40 sm:h-auto dark:border-black-600 border-black-200 rounded-3xl bg-[conic-gradient(var(--tw-gradient-stops))] from-green-600 to-black-100"></div> */}
       </div>
     </div>
   )
diff --git a/components/box.tsx b/components/box.tsx
@@ -1,3 +1,4 @@
+import { Squircle } from "@squircle-js/react";
 import { t } from "lib";
 
 interface IBox {
diff --git a/components/button.tsx b/components/button.tsx
@@ -1,17 +1,25 @@
+import { Squircle } from "@squircle-js/react";
 import { PropsWithChildren } from "react";
 
 interface IButton {
   onClick: () => void;
 }
 
+
 export default function Button(props: PropsWithChildren<IButton>) {
   const { children, onClick } = props;
   return (
-    <button
-      className="border-none bg-brand-100 hover:bg-brand-200 dark:bg-black-800 hover:dark:bg-black-600 p-2 rounded-xl transition duration-700 ease-in-out"
-      onClick={onClick}
+    <Squircle
+      cornerRadius={10}
+      cornerSmoothing={1}
+      className="p-4 bg-black text-white"
     >
-      {children}
-    </button>
-  );
+      <button
+        className="border-none bg-brand-100 hover:bg-brand-200 dark:bg-black-800 hover:dark:bg-black-600 p-2 rounded-xl transition duration-700 ease-in-out"
+        onClick={onClick}
+      >
+        {children}
+      </button>
+    </Squircle>
+  )
 }
diff --git a/components/experience-section.tsx b/components/experience-section.tsx
@@ -1,6 +1,7 @@
 import {PropsWithChildren} from 'react'
 import {Box, Link, Picture} from 'components'
 import {t} from 'lib'
+import {Squircle} from '@squircle-js/react'
 
 interface IInfo {
   place?: string
@@ -55,9 +56,11 @@ export default function Experience(props: PropsWithChildren<IExperiences>) {
           </div>
           <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3">
             {exp.info.map((exp, idx) => (
-              <div
+              <Squircle
+                cornerRadius={40}
+                cornerSmoothing={1}
                 key={idx}
-                className="break-words p-6 rounded-3xl border-[0.5px] dark:border-black-600 border-black-200 dark:bg-black-800 bg-black-100 flex items-center"
+                className="break-words p-6 rounded-3xl border-[1px] dark:border-black-800 border-black-100 dark:bg-black-800 bg-gray-100 flex items-center "
               >
                 <div className="flex flex-col gap-6">
                   <div className="w-20 h-20 rounded-full">
@@ -110,7 +113,7 @@ export default function Experience(props: PropsWithChildren<IExperiences>) {
                     </div>
                   </div>
                 </div>
-              </div>
+              </Squircle>
             ))}
           </div>
         </div>
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -35,7 +35,7 @@ export default function Footer() {
           <div className="hover:animate-jelly">
             <Link
               href="https://github.com/crstnmac"
-              className="font-extrabold text-transparent text-2xl bg-clip-text bg-gradient-to-r from-yellow-300 via-purple-400 to-green-300 "
+              className="font-extrabold text-transparent text-2xl bg-clip-text bg-gradient-to-r bg-black-900 dark:bg-black-200"
             >
               crstnmac
             </Link>
diff --git a/components/header.tsx b/components/header.tsx
@@ -18,7 +18,7 @@ export default function Header() {
           <div className="flex items-center hover:animate-jelly">
             <Link
               href="/"
-              className="font-extrabold text-transparent text-2xl bg-clip-text bg-gradient-to-r  from-yellow-400 via-purple-500 to-green-400 dark:from-yellow-300 dark:via-purple-400 dark:to-green-300 animate-jelly flex flex-row flex-nowrap items-center justify-start"
+              className="font-extrabold text-transparent text-2xl bg-clip-text bg-gradient-to-r bg-black-900 dark:bg-black-200 animate-jelly flex flex-row flex-nowrap items-center justify-start"
             >
               crstnmac
             </Link>
diff --git a/components/icons/moon.tsx b/components/icons/moon.tsx
@@ -17,7 +17,7 @@ export default function Moon() {
     >
       <motion.path
         d="M 43.81 29.354 C 43.688 28.958 43.413 28.626 43.046 28.432 C 42.679 28.238 42.251 28.198 41.854 28.321 C 36.161 29.886 30.067 28.272 25.894 24.096 C 21.722 19.92 20.113 13.824 21.683 8.133 C 21.848 7.582 21.697 6.985 21.29 6.578 C 20.884 6.172 20.287 6.022 19.736 6.187 C 10.659 8.728 4.691 17.389 5.55 26.776 C 6.408 36.163 13.847 43.598 23.235 44.451 C 32.622 45.304 41.28 39.332 43.816 30.253 C 43.902 29.96 43.9 29.647 43.81 29.354 Z"
-        fill="currentColor"
+        fill="#000000"
         initial="initial"
         animate="animate"
         whileTap="whileTap"
diff --git a/components/snippet-section.tsx b/components/snippet-section.tsx
@@ -16,7 +16,7 @@ export default function BlogSection({snippets}: {snippets: Snippet[]}) {
             {snippets.map((b) => (
               <div
                 key={b._id}
-                className="group p-2 w-full sm:w-[330px] flex-none rounded-2xl  bg-black-200 dark:bg-black-800 transition duration-700 ease-in-out"
+                className="group p-2 w-full sm:w-[330px] flex-none rounded-2xl border-black-800 dark:border-black-200  bg-black-100 dark:bg-black-800 transition duration-700 ease-in-out"
               >
                 <Link
                   href={`/snippets/${b.slugAsParams}`}
diff --git a/lib/twDynamicPlugin/common.d.ts b/lib/twDynamicPlugin/common.d.ts
@@ -0,0 +1,8 @@
+export declare const shades: number[]
+
+export function makeVariable(args: {
+  fallbackValue?: string
+  name: string
+  shade: number | string
+  withVar?: boolean
+}): string
diff --git a/lib/twDynamicPlugin/common.js b/lib/twDynamicPlugin/common.js
@@ -0,0 +1,11 @@
+export const shades = [
+  50,
+  ...Array.from({length: 9}).map((_, i) => (i + 1) * 100),
+  950,
+]
+
+export const makeVariable = ({fallbackValue, name, shade, withVar}) => {
+  const variable = `--${name}-${shade}`
+  const value = fallbackValue ? variable + ', ' + fallbackValue : variable
+  return withVar ? `var(${value})` : variable
+}
diff --git a/lib/twDynamicPlugin/runtime.ts b/lib/twDynamicPlugin/runtime.ts
@@ -0,0 +1,95 @@
+import {
+  // @ts-expect-error Old typings for this module
+  toGamut as _toGamut,
+  Color,
+  Oklch,
+  converter,
+  differenceEuclidean,
+} from 'culori'
+
+import {makeVariable, shades} from './common'
+
+const toGamut = _toGamut as (...args: unknown[]) => (color: string) => Color
+
+/**
+ * A map of CSS varable name to color
+ */
+type SingleVariable = [string, string]
+
+export function getVariables({
+  baseName,
+  hue,
+  mode = 'consistent',
+}: {
+  baseName: string
+  hue: number
+  mode?: 'bright' | 'consistent'
+}): SingleVariable[] {
+  const calculator = mode === 'bright' ? highestChroma : consistentChroma
+  return shades.map((shade, shadeIndex) => [
+    makeVariable({name: baseName, shade}),
+    calculator(shadeIndex, hue),
+  ])
+}
+
+export function updateVariables(variables: SingleVariable[], el?: HTMLElement) {
+  const target = el ?? document.documentElement
+
+  for (const [varName, value] of variables) {
+    target.style.setProperty(varName, value + '')
+  }
+}
+
+const lightnessForShade = (shade: number) => {
+  const highestL = 89
+  const lowestL = 13
+  const diffL = highestL - lowestL
+
+  const shadeDiff = shades[shades.length - 1] - shades[0]
+
+  // Maintaining the proximity of colors with a step of 50 and 100
+  const multiplier = shade / shadeDiff
+
+  return (lowestL + (highestL - diffL * multiplier)) / 100
+}
+const lightness = shades.map(lightnessForShade)
+
+export const highestChroma = (shadeIndex: number, hue: number) => {
+  const oklch = converter('oklch')
+
+  // Setting an obsurdly high chroma
+  const color = `oklch(${lightness[shadeIndex]} 0.4 ${hue})`
+
+  // Clamping it to the highest chroma possible
+  return serializeColor(
+    oklch(toGamut('p3', 'oklch', differenceEuclidean('oklch'), 0)(color))
+  )
+}
+
+export const consistentChroma = (i: number, hue: number) => {
+  const oklch = converter('oklch')
+
+  // Using a pinned chroma
+  const color = `oklch(${lightness[i]} ${chromaData[i]} ${hue})`
+
+  return serializeColor(
+    oklch(toGamut('p3', 'oklch', differenceEuclidean('oklch'), 0)(color))
+  )
+}
+
+const chromaData: Record<number, number> = {
+  0: 0.0114,
+  1: 0.0331,
+  2: 0.0774,
+  3: 0.1275,
+  4: 0.1547,
+  5: 0.1355,
+  6: 0.1164,
+  7: 0.0974,
+  8: 0.0782,
+  9: 0.0588,
+  10: 0.0491,
+}
+
+const serializeColor = (c: Oklch): string =>
+  `${c.l.toFixed(3)} ${c.c.toFixed(3)} ${c.h?.toFixed(3)}`
diff --git a/lib/twDynamicPlugin/twPlugin.js b/lib/twDynamicPlugin/twPlugin.js
@@ -0,0 +1,20 @@
+import {makeVariable, shades} from './common'
+import {consistentChroma} from './runtime'
+
+export function dynamicTwClasses(baseName, baseHue) {
+  return Object.fromEntries(
+    shades.map((shade, i) => {
+      const color = consistentChroma(i, baseHue)
+
+      return [
+        shade,
+        `oklch(${makeVariable({
+          fallbackValue: color,
+          name: baseName,
+          shade,
+          withVar: true,
+        })} / <alpha-value>)`,
+      ]
+    })
+  )
+}
diff --git a/package.json b/package.json
@@ -10,40 +10,43 @@
     "deploy": "next build && touch out/.nojekyll && git add out/ && git commit -m \"Deploy\" && git subtree push --prefix out origin gh-pages"
   },
   "dependencies": {
-    "clsx": "^2.0.0",
+    "@squircle-js/react": "^1.2.0",
+    "clsx": "^2.1.1",
     "contentlayer": "^0.3.4",
-    "date-fns": "^2.30.0",
-    "eslint": "8.44.0",
-    "eslint-config-next": "13.4.8",
-    "framer-motion": "10.16.4",
-    "next": "14.0.0",
+    "culori": "^4.0.1",
+    "date-fns": "^3.6.0",
+    "eslint": "8.56.0",
+    "eslint-config-next": "14.1.0",
+    "framer-motion": "11.3.28",
+    "next": "14.2.5",
     "next-contentlayer": "^0.3.4",
-    "next-themes": "^0.2.1",
+    "next-themes": "^0.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "reading-time": "^1.5.0",
     "rehype-accessible-emojis": "^0.3.2",
-    "rehype-autolink-headings": "^7.0.0",
-    "rehype-pretty-code": "^0.10.2",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-pretty-code": "^0.13.2",
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
-    "sharp": "^0.32.6",
-    "shiki": "^0.14.5",
-    "tailwind-merge": "^2.0.0",
+    "sharp": "^0.33.5",
+    "shiki": "^1.14.1",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.6",
-    "@tailwindcss/typography": "^0.5.10",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.14",
+    "@types/culori": "^2.1.1",
     "@types/node": "20.3.3",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5",
-    "typescript": "5.0.2"
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "typescript": "5.3.3"
   },
   "resolutions": {
     "@types/react": "18.2.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/barrierbreak.png b/public/barrierbreak.png
diff --git a/tailwind.config.ts b/tailwind.config.ts

Original file line number	Diff line number	Diff line change
`@@ -83,7 +83,6 @@`
`83`	`83`	`width: 2px;`
`84`	`84`	`display: block;`
`85`	`85`	`margin-left: -1.5px;`
`86`		`- display: none;`
`87`	`86`	`background-color: #e4e4e4;`
`88`	`87`	`}`
`89`	`88`	`.experience__content > li {`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {`
`34`	`34`	`<head />`
`35`	`35`	`<body`
`36`	`36`	`className={`
`37`		`- 'group antialiased min-h-screen dark:bg-black-900 bg-white-300 transition-colors duration-1000 ease-in-out'`
	`37`	`+ 'group antialiased min-h-screen dark:bg-black-900 bg-neutral-200 transition-colors duration-1000 ease-in-out'`
`38`	`38`	`}`
`39`	`39`	`>`
`40`	`40`	`<Providers>`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import { Squircle } from "@squircle-js/react";`
`1`	`2`	`import { t } from "lib";`
`2`	`3`
`3`	`4`	`interface IBox {`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export default function Footer() {`
`35`	`35`	`<div className="hover:animate-jelly">`
`36`	`36`	`<Link`
`37`	`37`	`href="https://github.com/crstnmac"`
`38`		`- className="font-extrabold text-transparent text-2xl bg-clip-text bg-gradient-to-r from-yellow-300 via-purple-400 to-green-300 "`
	`38`	`+ className="font-extrabold text-transparent text-2xl bg-clip-text bg-gradient-to-r bg-black-900 dark:bg-black-200"`
`39`	`39`	`>`
`40`	`40`	`crstnmac`
`41`	`41`	`</Link>`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export default function Header() {`
`18`	`18`	`<div className="flex items-center hover:animate-jelly">`
`19`	`19`	`<Link`
`20`	`20`	`href="/"`
`21`		`- className="font-extrabold text-transparent text-2xl bg-clip-text bg-gradient-to-r from-yellow-400 via-purple-500 to-green-400 dark:from-yellow-300 dark:via-purple-400 dark:to-green-300 animate-jelly flex flex-row flex-nowrap items-center justify-start"`
	`21`	`+ className="font-extrabold text-transparent text-2xl bg-clip-text bg-gradient-to-r bg-black-900 dark:bg-black-200 animate-jelly flex flex-row flex-nowrap items-center justify-start"`
`22`	`22`	`>`
`23`	`23`	`crstnmac`
`24`	`24`	`</Link>`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export default function Moon() {`
`17`	`17`	`>`
`18`	`18`	`<motion.path`
`19`	`19`	`d="M 43.81 29.354 C 43.688 28.958 43.413 28.626 43.046 28.432 C 42.679 28.238 42.251 28.198 41.854 28.321 C 36.161 29.886 30.067 28.272 25.894 24.096 C 21.722 19.92 20.113 13.824 21.683 8.133 C 21.848 7.582 21.697 6.985 21.29 6.578 C 20.884 6.172 20.287 6.022 19.736 6.187 C 10.659 8.728 4.691 17.389 5.55 26.776 C 6.408 36.163 13.847 43.598 23.235 44.451 C 32.622 45.304 41.28 39.332 43.816 30.253 C 43.902 29.96 43.9 29.647 43.81 29.354 Z"`
`20`		`- fill="currentColor"`
	`20`	`+ fill="#000000"`
`21`	`21`	`initial="initial"`
`22`	`22`	`animate="animate"`
`23`	`23`	`whileTap="whileTap"`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export default function BlogSection({snippets}: {snippets: Snippet[]}) {`
`16`	`16`	`{snippets.map((b) => (`
`17`	`17`	`<div`
`18`	`18`	`key={b._id}`
`19`		`- className="group p-2 w-full sm:w-[330px] flex-none rounded-2xl bg-black-200 dark:bg-black-800 transition duration-700 ease-in-out"`
	`19`	`+ className="group p-2 w-full sm:w-[330px] flex-none rounded-2xl border-black-800 dark:border-black-200 bg-black-100 dark:bg-black-800 transition duration-700 ease-in-out"`
`20`	`20`	`>`
`21`	`21`	`<Link`
`22`	`22`	href={`/snippets/${b.slugAsParams}`}