Dev to integration

astro.config.mjs

@@ -15,7 +15,7 @@ import partytown from "@astrojs/partytown";
 import prefetch from "@astrojs/prefetch";
 
 // https://astro.build/config
-import vercel from "@astrojs/vercel/static";
+import vercel from "@astrojs/vercel/serverless";
 
 // https://astro.build/config
 export default defineConfig({
@@ -30,7 +30,7 @@ export default defineConfig({
     partytown(),
     prefetch(),
   ],
-  output: "static",
+  output: "server",
   adapter: vercel({
     analytics: true,
   }),

package.json

@@ -26,6 +26,7 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "astro": "^2.1.6",
+    "powered-by-vercel": "^1.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "tailwindcss": "^3.0.24"

src/components/FormattedDate.astro

@@ -3,11 +3,11 @@ const { date } = Astro.props;
 ---
 
 <time
-  datetime={date.toISOString()}
+  datetime={new Date(date).toISOString()}
   class="whitespace-nowrap italic text-slate-11"
 >
   {
-    date.toLocaleDateString("en-us", {
+    new Date(date).toLocaleDateString("en-us", {
       year: "numeric",
       month: "short",
       day: "numeric",

src/components/Header.astro

@@ -2,6 +2,9 @@
 import HeaderLink from "./HeaderLink.astro";
 import { LinkedinLogo, GithubLogo, TwitterLogo } from "@phosphor-icons/react";
 import ThemeToggle from "./ThemeToggle";
+import poweredByVercel from "powered-by-vercel/powered-by-vercel.svg";
+
+export const prerender = true;
 ---
 
 <header
@@ -18,7 +21,7 @@ import ThemeToggle from "./ThemeToggle";
     <HeaderLink href="/">Home</HeaderLink>
     <HeaderLink href="/blog">Blog</HeaderLink>
   </nav>
-  <div class="mr-8 mb-4 flex w-full justify-center gap-4">
+  <div class="mr-8 flex w-full justify-center gap-4">
     <HeaderLink href="https://github.com/maxphillipsdev" target="_blank">
       <GithubLogo size={18} />
     </HeaderLink>
@@ -32,4 +35,7 @@ import ThemeToggle from "./ThemeToggle";
       <ThemeToggle client:load />
     </HeaderLink>
   </div>
+  <div class="mr-8 hidden w-full justify-center md:flex">
+    <img src={poweredByVercel} alt="Powered by vercel badge" />
+  </div>
 </header>

src/components/HeaderLink.astro

@@ -16,7 +16,6 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, "");
     className,
     { "text-crimson-9": isActive },
   ]}
-  rel="prefetch"
   {...props}
 >
   <slot />

src/content/config.ts

@@ -3,7 +3,7 @@ import { defineCollection, z } from "astro:content";
 const blog = defineCollection({
   // Type-check frontmatter using a schema
   schema: z.object({
-    title: z.string().optional(),
+    title: z.string(),
     description: z.string().optional(),
     // Transform string to Date object
     pubDate: z
@@ -14,8 +14,8 @@ const blog = defineCollection({
       .string()
       .optional()
       .transform((str) => (str ? new Date(str) : undefined)),
-    heroImage: z.string().optional(),
-    draft: z.boolean().optional(),
+    coverImage: z.string().optional(),
+    tags: z.array(z.string()).optional(),
   }),
 });