fixed types error

README.md

@@ -4,7 +4,7 @@ Projects using the domain [orlan.dev](https://orlan.dev)
 
 ## What's inside?
 
-Monorepo using [Turborepo](https://turbo.build/repo), with apps using [React](https://reactjs.org/), [Next.js](https://nextjs.org/), [Astro](https://astro.build/), [TypeScript](https://www.typescriptlang.org/), [Framer Motion](https://www.framer.com/motion/), [Tailwind CSS](https://tailwindcss.com/)
+Monorepo using [Turborepo](https://turbo.build/repo), with apps using [React](https://reactjs.org/), [Next.js](https://nextjs.org/), [Astro](https://astro.build/), [TypeScript](https://www.typescriptlang.org/), [Motion](https://motion.dev/), [Tailwind CSS](https://tailwindcss.com/)
 
 ### Apps and Packages
 
@@ -20,14 +20,14 @@ Each package/app is 100% `TypeScript`.
 
 This is the latest version of my portfolio website, built using the following technologies:
 
-`Astro`, `React`, `TypeScript`, `Framer Motion`, `Tailwind CSS`
+`Astro`, `React`, `TypeScript`, `Motion`, `Tailwind CSS`
 
 The website showcases my work, skills, and experience as a software engineer. It also includes a blog section where I share general software engineering notes and mini blog posts.
 
 ## [Daily Stoic](https://daily.orlan.dev)
 
 This project is a Progressive Web App (PWA) built with the following technologies:
 
-`Next.js`, `React`, `TypeScript`, `Framer Motion`, `CSS-in-JS`
+`Next.js`, `React`, `TypeScript`, `Motion`, `CSS-in-JS`
 
 The PWA provides a daily quote from famous Stoic philosophers like Marcus Aurelius, Seneca, and Epictetus, along with a brief explanation of the quote. Users can also view the quotes for each day using a calendar view.

apps/daily/package.json

@@ -12,12 +12,12 @@
     "prepare": "panda codegen"
   },
   "dependencies": {
+    "@date-fns/tz": "catalog:",
     "@radix-ui/react-icons": "^1.3.2",
     "@vercel/og": "^0.5.6",
     "contentlayer2": "^0.5.4",
-    "date-fns": "^2.29.1",
-    "date-fns-tz": "^1.3.6",
-    "motion": "^12.5.0",
+    "date-fns": "catalog:",
+    "motion": "catalog:",
     "next": "15.2.3",
     "next-contentlayer2": "^0.5.4",
     "next-pwa": "5.6.0",
@@ -27,15 +27,14 @@
     "swr": "^1.3.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
+    "@biomejs/biome": "catalog:",
     "@pandacss/dev": "^0.53.2",
     "@types/node": "^20.10.4",
     "@types/react": "19.0.12",
     "@types/react-dom": "19.0.4",
     "@vitejs/plugin-react": "^4.2.1",
     "jsdom": "^20.0.0",
-    "tsconfig": "workspace:*",
-    "typescript": "^5.8.2",
+    "typescript": "catalog:",
     "vite": "^5.0.10",
     "vitest": "^1.0.4"
   },

apps/daily/panda.config.ts

@@ -1,143 +1,143 @@
-import { textRecipe } from '@/components/Text'
-import { defineConfig, defineGlobalStyles } from '@pandacss/dev'
+import { textRecipe } from "@/components/Text";
+import { defineConfig, defineGlobalStyles } from "@pandacss/dev";
 
 const globalCss = defineGlobalStyles({
-  '*, *::before, *::after': {
-    boxSizing: 'border-box',
-  },
-
-  '*': {
-    margin: 0,
-  },
-
-  'html, body': {
-    fontFamily: 'serif',
-    color: 'textColor',
-  },
-
-  'html, body, #__next': {
-    height: '100%',
-  },
-
-  body: {
-    backgroundColor: 'bg',
-    lineHeight: 1.5,
-    WebkitFontSmoothing: 'antialiased',
-  },
-
-  '::selection': {
-    backgroundColor: 'selection',
-  },
-
-  'input, button, textarea, select': {
-    font: 'inherit',
-  },
-
-  button: {
-    userSelect: 'none',
-  },
-
-  'p, h1, h2, h3, h4, h5, h6': {
-    overflowWrap: 'break-word',
-  },
-
-  a: {
-    textDecoration: 'none',
-  },
-})
+	"*, *::before, *::after": {
+		boxSizing: "border-box",
+	},
+
+	"*": {
+		margin: 0,
+	},
+
+	"html, body": {
+		fontFamily: "serif",
+		color: "textColor",
+	},
+
+	"html, body, #__next": {
+		height: "100%",
+	},
+
+	body: {
+		backgroundColor: "bg",
+		lineHeight: 1.5,
+		WebkitFontSmoothing: "antialiased",
+	},
+
+	"::selection": {
+		backgroundColor: "selection",
+	},
+
+	"input, button, textarea, select": {
+		font: "inherit",
+	},
+
+	button: {
+		userSelect: "none",
+	},
+
+	"p, h1, h2, h3, h4, h5, h6": {
+		overflowWrap: "break-word",
+	},
+
+	a: {
+		textDecoration: "none",
+	},
+});
 
 export const olive = {
-  1: { value: '#fcfdfc' },
-  2: { value: '#f8faf8' },
-  3: { value: '#f2f4f2' },
-  4: { value: '#ecefec' },
-  5: { value: '#e6e9e6' },
-  6: { value: '#e0e4e0' },
-  7: { value: '#d8dcd8' },
-  8: { value: '#c3c8c2' },
-  9: { value: '#8b918a' },
-  10: { value: '#818780' },
-  11: { value: '#6b716a' },
-  12: { value: '#141e12' },
-} as const
+	1: { value: "#fcfdfc" },
+	2: { value: "#f8faf8" },
+	3: { value: "#f2f4f2" },
+	4: { value: "#ecefec" },
+	5: { value: "#e6e9e6" },
+	6: { value: "#e0e4e0" },
+	7: { value: "#d8dcd8" },
+	8: { value: "#c3c8c2" },
+	9: { value: "#8b918a" },
+	10: { value: "#818780" },
+	11: { value: "#6b716a" },
+	12: { value: "#141e12" },
+} as const;
 
 export default defineConfig({
-  // Whether to use css reset
-  preflight: true,
-
-  // Where to look for your css declarations
-  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
-
-  // Files to exclude
-  exclude: [],
-
-  // Useful for theme customization
-  theme: {
-    extend: {
-      recipes: {
-        text: textRecipe,
-      },
-
-      tokens: {
-        colors: {
-          olive: olive,
-        },
-
-        fonts: {
-          serif: {
-            value: '"EB Garamond", Georgia, "Times New Roman", Times, serif',
-          },
-        },
-
-        fontSizes: {
-          base: { value: '1rem' },
-          lg: { value: '1.125rem' },
-          xl: { value: '1.25rem' },
-          '2xl': { value: '1.5rem' },
-        },
-
-        fontWeights: {
-          regular: { value: 400 },
-          bold: { value: 700 },
-        },
-      },
-
-      semanticTokens: {
-        colors: {
-          bg: { value: '{colors.olive.1}' },
-          textColor: { value: '{colors.olive.12}' },
-          selection: { value: '{colors.olive.5}' },
-        },
-      },
-
-      keyframes: {
-        fadeIn: {
-          '0%': {
-            mask: 'linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 150% 0 / 400% no-repeat',
-            opacity: 0,
-          },
-          '100%': {
-            mask: 'linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 0 / 400% no-repeat',
-            opacity: 1,
-          },
-        },
-
-        shimmer: {
-          from: {
-            backgroundPosition: '200% 0',
-          },
-          to: {
-            backgroundPosition: '-200% 0',
-          },
-        },
-      },
-    },
-  },
-
-  // The output directory for your css system
-  outdir: 'styled-system',
-
-  jsxFramework: 'react',
-
-  globalCss,
-})
+	// Whether to use css reset
+	preflight: true,
+
+	// Where to look for your css declarations
+	include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
+
+	// Files to exclude
+	exclude: [],
+
+	// Useful for theme customization
+	theme: {
+		extend: {
+			recipes: {
+				text: textRecipe,
+			},
+
+			tokens: {
+				colors: {
+					olive: olive,
+				},
+
+				fonts: {
+					serif: {
+						value: '"EB Garamond", Georgia, "Times New Roman", Times, serif',
+					},
+				},
+
+				fontSizes: {
+					base: { value: "1rem" },
+					lg: { value: "1.125rem" },
+					xl: { value: "1.25rem" },
+					"2xl": { value: "1.5rem" },
+				},
+
+				fontWeights: {
+					regular: { value: 400 },
+					bold: { value: 700 },
+				},
+			},
+
+			semanticTokens: {
+				colors: {
+					bg: { value: "{colors.olive.1}" },
+					textColor: { value: "{colors.olive.12}" },
+					selection: { value: "{colors.olive.5}" },
+				},
+			},
+
+			keyframes: {
+				fadeIn: {
+					"0%": {
+						mask: "linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 150% 0 / 400% no-repeat",
+						opacity: 0,
+					},
+					"100%": {
+						mask: "linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 0 / 400% no-repeat",
+						opacity: 1,
+					},
+				},
+
+				shimmer: {
+					from: {
+						backgroundPosition: "200% 0",
+					},
+					to: {
+						backgroundPosition: "-200% 0",
+					},
+				},
+			},
+		},
+	},
+
+	// The output directory for your css system
+	outdir: "styled-system",
+
+	jsxFramework: "react",
+
+	globalCss,
+});

apps/daily/src/lib/api.ts

@@ -1,6 +1,5 @@
+import { TZDate } from "@date-fns/tz";
 import { type Daily, allDailies } from "contentlayer/generated";
-import { parse } from "date-fns";
-import { formatInTimeZone } from "date-fns-tz";
 
 import { type Month, Months } from "./contentlayer";
 import { type FilterFalseProps, type KeysFlag, pickProps } from "./utils";
@@ -46,12 +45,7 @@ export function getDailies<
 export function getDailyToday(timezone = "Asia/Manila") {
 	// correctly display `Daily` today based on timezone if given
 	// ^ above is necessary bec `getServerSideProps` uses UTC by default
-	const format = "yyyy-MM-dd HH:mm:ss";
-	const today = parse(
-		formatInTimeZone(new Date(), timezone, format),
-		format,
-		new Date(),
-	);
+	const today = new TZDate(new Date(), timezone);
 
 	const dailyToday = getDailies({
 		filter: { month: Months[today.getMonth()], day: today.getDate() },

apps/portfolio-v2/.vscode/extensions.json

@@ -1,4 +1,4 @@
 {
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
+	"recommendations": ["astro-build.astro-vscode"],
+	"unwantedRecommendations": []
 }

apps/portfolio-v2/.vscode/launch.json

@@ -1,11 +1,11 @@
 {
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"command": "./node_modules/.bin/astro dev",
+			"name": "Development server",
+			"request": "launch",
+			"type": "node-terminal"
+		}
+	]
 }