revert to simple static asset paths in HTML with proper Vercel routing config

Author: tonycletus

frontend/index.html

@@ -8,7 +8,7 @@
   <meta name="keywords" content="programmify, builder lab, developer tools, ai tools, open source, startup tools, free api, hackathon, builder hub" />
   <meta property="og:title" content="Builder Lab by Programmify" />
   <meta property="og:description" content="Discover, learn, and use the best AI and open-source tools to build and launch projects fast." />
-  <meta property="og:image" content="https://builderlab.programmify.org/og-image.png" />
+  <meta property="og:image" content="/og-image.png" />
   <meta property="og:url" content="https://builderlab.programmify.org" />
   <meta property="og:site_name" content="Builder Lab by Programmify" />
   <meta name="twitter:card" content="summary_large_image" />
@@ -21,15 +21,15 @@
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
   <meta property="og:type" content="website" />
-  <meta property="og:image" content="/logo.png" />
+  <meta property="og:image" content="/og-image.png" />
   <meta property="og:image:alt" content="Programmify logo" />
     <meta property="og:type" content="website" />
-    <meta property="og:image" content="/logo.png" />
+    <meta property="og:image" content="/og-image.png" />
     <meta property="og:image:alt" content="Programmify logo" />
 
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@programmify" />
-    <meta name="twitter:image" content="/logo.png" />
+    <meta name="twitter:image" content="/og-image.png" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="apple-touch-icon" href="/icon.png" />
   </head>

frontend/src/components/MetaAssets.tsx

@@ -1,15 +1,11 @@
+// Import assets to ensure they get bundled
 import faviconImage from "@/assets/favicon.png";
-import logoImage from "@/assets/logo.png";
 import ogImage from "@/assets/og-image.png";
 
+// Export the asset URLs so they can be used in HTML
+export { faviconImage, ogImage };
+
+// This component doesn't render anything, just ensures assets are bundled
 export const MetaAssets = () => {
-  return (
-    <>
-      <link rel="icon" type="image/png" href={faviconImage} />
-      <link rel="apple-touch-icon" href={faviconImage} />
-      <meta property="og:image" content={logoImage} />
-      <meta property="og:image:alt" content="Programmify logo" />
-      <meta name="twitter:image" content={logoImage} />
-    </>
-  );
+  return null;
 };

vercel.json

@@ -0,0 +1,26 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "frontend/package.json",
+      "use": "@vercel/static-build",
+      "config": {
+        "distDir": "dist"
+      }
+    }
+  ],
+  "routes": [
+    {
+      "src": "/assets/(.*)",
+      "dest": "/assets/$1"
+    },
+    {
+      "src": "/(.*\\.(png|jpg|jpeg|gif|svg|ico|webp|txt))",
+      "dest": "/$1"
+    },
+    {
+      "src": "/(.*)",
+      "dest": "/index.html"
+    }
+  ]
+}