fix latest shadcn css bugs on blocks

.gitignore

@@ -5,6 +5,9 @@ node_modules
 .pnp
 .pnp.js
 
+# fonts
+apps/www/assets/fonts/truetype
+
 # astro
 .astro
 

apps/prepare/.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4],"astro-version","5.0.5"]
+[["Map",1,2],"meta::meta",["Map",3,4],"astro-version","5.0.9"]

apps/prepare/astro.config.mjs

@@ -39,9 +39,9 @@ export default defineConfig({
     },
   },
   vite: {
-    optimizeDeps: {
-      include: ["@splinetool/react-spline"],
-    },
+    // optimizeDeps: {
+    //   include: ["@splinetool/react-spline"],
+    // },
     build: {
       chunkSizeWarningLimit: 2000,
       rollupOptions: {

apps/prepare/package.json

@@ -19,10 +19,10 @@
   "keywords": [],
   "license": "ISC",
   "dependencies": {
-    "@astrojs/mdx": "^4.0.1",
+    "@astrojs/mdx": "^4.0.2",
     "@astrojs/partytown": "^2.1.2",
-    "@astrojs/react": "^4.0.0",
-    "@astrojs/rss": "^4.0.9",
+    "@astrojs/react": "^4.1.1",
+    "@astrojs/rss": "^4.0.10",
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/tailwind": "^5.1.3",
     "@fontsource-variable/fustat": "^5.1.0",
@@ -41,13 +41,14 @@
     "@types/node": "^22.9.1",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.22",
-    "astro": "^5.0.5",
+    "astro": "^5.0.9",
     "class-variance-authority": "0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": ">=11.14.4",
     "lucide-react": "^0.468.0",
     "next-themes": "^0.4.3",
     "react": "^18.3.1",
+    "react-compiler-runtime": "19.0.0-beta-201e55d-20241215",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.1",
     "tailwind-merge": "^2.5.5",
@@ -57,6 +58,7 @@
   },
   "devDependencies": {
     "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+    "eslint-plugin-astro": "^1.3.1",
     "postcss-import": "^16.1.0",
     "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1"

apps/prepare/src/components/BaseHead.astro

@@ -1,19 +1,17 @@
 ---
-// Import the global.css file here so that it is included on
-// all pages through the use of the <BaseHead /> component.
 import "../styles/sparkstack_globals.css";
 import "@/styles/sparkstack_globals.css";
 import "../env.d.ts";
-
+import { themeScript } from "../lib/theme-script";
 import { ClientRouter } from "astro:transitions";
+
 interface Props {
   title: string;
   description: string;
   image?: string;
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-
 const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 ---
 
@@ -22,12 +20,13 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <meta name="generator" content={Astro.generator} />
+<ClientRouter />
 
 <!-- Font preloads -->
-<!-- <link rel="preload" href="/fonts/fonts/complete/TT_Hoves_Pro_Variable.woff" as="font" type="font/woff" crossorigin /> -->
-<!-- <link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin /> -->
 <link href="/fonts/fonts.css" type="css/stylesheet" />
 
+<script is:inline set:html={themeScript}></script>
+
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />
 
@@ -50,46 +49,3 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
-<ClientRouter />
-
-<script is:inline>
-  // Theme handling
-  const getThemePreference = () => {
-    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
-      return localStorage.getItem("theme");
-    }
-    return window.matchMedia("(prefers-color-scheme: dark)").matches
-      ? "dark"
-      : "light";
-  };
-
-  // Initialize theme
-  const isDark = getThemePreference() === "dark";
-  document.documentElement.classList[isDark ? "add" : "remove"]("dark");
-
-  // Color scheme initialization
-  const initializeColorScheme = (attribute, defaultValue) => {
-    const stored = localStorage.getItem(attribute);
-    const value = stored || defaultValue;
-    localStorage.setItem(attribute, value);
-    document.documentElement.setAttribute(`data-${attribute}`, value);
-  };
-
-  // Initialize all color schemes
-  initializeColorScheme("primary-color", "lime");
-  initializeColorScheme("gray-color", "olive");
-  initializeColorScheme("secondary-color", "mint");
-  initializeColorScheme("accent-color", "lime");
-
-  // Theme observer
-  if (typeof localStorage !== "undefined") {
-    const observer = new MutationObserver(() => {
-      const isDark = document.documentElement.classList.contains("dark");
-      localStorage.setItem("theme", isDark ? "dark" : "light");
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    });
-  }
-</script>