feat: enhance SEO with dynamic OG images, improved metadata, and sitemap

apps/www/astro.config.ts

@@ -1,22 +1,46 @@
 import cloudflare from "@astrojs/cloudflare"
 import mdx from "@astrojs/mdx"
 import react from "@astrojs/react"
+import sitemap from "@astrojs/sitemap"
 import tailwindcss from "@tailwindcss/vite"
 import { defineConfig } from "astro/config"
 import inspect from "vite-plugin-inspect"
 
+import { siteConfig } from "./src/config/site"
 import { remarkPluginCodeWrapper } from "./src/lib/remark-code-wrapper"
 
-// https://astro.build/configo
 export default defineConfig({
-  adapter: cloudflare(),
+  site: siteConfig.url,
 
-  integrations: [mdx({ remarkPlugins: [remarkPluginCodeWrapper] }), react()],
+  adapter: cloudflare({
+    imageService: "compile",
+  }),
+
+  integrations: [
+    mdx({ remarkPlugins: [remarkPluginCodeWrapper] }),
+    react(),
+    sitemap(),
+  ],
 
   vite: {
     plugins: [inspect(), tailwindcss()],
+    ssr: {
+      external: [
+        "node:path",
+        "node:fs",
+        "node:module",
+        "node:fs/promises",
+        "node:v8",
+        "node:url",
+        "node:process",
+        "node:assert",
+        "node:util",
+      ],
+    },
   },
 
+  output: "server",
+
   trailingSlash: "ignore",
 
   redirects: {

apps/www/package.json

@@ -7,7 +7,8 @@
     "dev": "astro dev",
     "clean": "git clean -xdf node_modules .astro .turbo dist",
     "build": "astro build",
-    "preview": "astro preview",
+    "preview": "wrangler dev",
+    "upload": "wrangler versions upload",
     "typecheck": "astro check",
     "test": "vitest run"
   },
@@ -18,10 +19,12 @@
     "@astrojs/cloudflare": "catalog:",
     "@astrojs/mdx": "catalog:",
     "@astrojs/react": "catalog:",
+    "@astrojs/sitemap": "^3.5.1",
     "@astrojs/vue": "catalog:",
     "@fontsource-variable/geist": "catalog:",
     "@fontsource-variable/geist-mono": "catalog:",
     "@lucide/astro": "catalog:",
+    "@resvg/resvg-wasm": "^2.6.2",
     "@tailwindcss/vite": "catalog:",
     "@tanstack/react-table": "catalog:",
     "@ui/lib": "workspace:*",
@@ -39,11 +42,13 @@
     "react-dom": "catalog:react18",
     "react-scan": "catalog:",
     "recharts": "catalog:",
+    "satori": "0.15.2",
     "scule": "catalog:",
-    "sharp": "catalog:",
     "tailwind-merge": "catalog:",
     "tailwindcss": "catalog:",
-    "tw-animate-css": "catalog:"
+    "tiny-invariant": "^1.3.3",
+    "tw-animate-css": "catalog:",
+    "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "catalog:",

apps/www/public/site.webmanifest

@@ -1 +1,19 @@
-{"name":"Shipbase","short_name":"Shipbase","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#111111","background_color":"#111111","display":"standalone"}
+{
+  "name": "shipbase",
+  "short_name": "shipbase",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#09090b",
+  "background_color": "#09090b",
+  "display": "standalone"
+}

apps/www/src/components/landing/cta.astro

@@ -1,7 +1,6 @@
 ---
 import { siteConfig } from "@/config/site"
 import { Button } from "@ui/react/button"
-import { Input } from "@ui/react/input"
 
 import ArkUI from "@/assets/logos/ark-ui.svg"
 import CVA from "@/assets/logos/cva.svg"
@@ -19,12 +18,11 @@ import Vue from "@/assets/logos/vue.svg"
   <h1
     class="font-heading text-foreground mb-4 text-3xl/[1.1] font-bold tracking-tight sm:text-4xl/[1.1] md:text-4xl/[1.1] lg:text-5xl/[1.1]"
   >
-    Beautiful Components for<br class="md:hidden" />
-    <span class="hidden md:inline"> </span>Multi Framework
+    Shadcn UI Components for<br class="md:hidden" />
+    <span class="hidden md:inline"> </span>Multi-Framework
   </h1>
   <p class="text-muted-foreground mb-8 text-lg">
-    A set of beautiful designed components you can customize, extend, and make
-    your own. Multi Framework Support, Open Source.
+    {siteConfig.description}
   </p>
   <div class="flex items-center justify-center gap-4">
     <a href="/docs/introduction">

apps/www/src/components/mobile-nav/sheet.tsx

@@ -14,7 +14,7 @@ export function MobileNavSheet({ children }: { children: React.ReactNode }) {
           <span className="sr-only">Toggle Menu</span>
         </Button>
       </SheetTrigger>
-      <SheetContent className="pr-0" side="left">
+      <SheetContent className="z-[50] pr-0" side="left">
         {children}
       </SheetContent>
     </Sheet>