Migrated to Astro 2.0

.gitignore

@@ -19,3 +19,4 @@ yarn-error.log*
 
 # Local Netlify folder
 .netlify
+.astro

astro.config.mjs

@@ -1,13 +1,12 @@
+import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import svelte from "@astrojs/svelte";
-import { defineConfig } from "astro/config";
 import sitemap from "@astrojs/sitemap";
 
 import mdx from "@astrojs/mdx";
 
-// https://astro.build/config
 export default defineConfig({
-  site: "https://rafa.page",
+  site: "https://rafa.page/",
   integrations: [tailwind({
     config: {
       applyBaseStyles: false,

package.json

@@ -9,14 +9,19 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^0.9.0",
+    "@astrojs/mdx": "^0.17.0",
-    "@astrojs/sitemap": "^1.0.0",
+    "@astrojs/sitemap": "^1.0.1",
-    "@astrojs/svelte": "^1.0.0",
+    "@astrojs/svelte": "^2.0.2",
-    "@astrojs/tailwind": "^1.0.0",
+    "@astrojs/tailwind": "^3.0.1",
     "@notionhq/client": "^2.2.0",
-    "astro": "^1.0.3",
+    "astro": "^2.0.14",
     "marked": "^4.1.0",
     "notion-to-md": "^2.5.5",
-    "svelte": "^3.49.0"
+    "postcss": "^8.4.21",
+    "rollup": "^3.17.2",
+    "svelte": "^3.49.0",
+    "tailwindcss": "^3.2.7",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4"
   }
 }

src/content/config.ts

@@ -0,0 +1,16 @@
+import { z, defineCollection } from "astro:content";
+
+const blogCollection = defineCollection({
+  schema: z.object({
+    layout: z.enum(['../../layouts/main.astro']).optional(),
+    date: z.date(),
+    title: z.string(),
+    description: z.string(),
+    exerpt: z.string(),
+    image: z.string()
+  }),
+});
+
+export const collections = {
+  'blog': blogCollection,
+};

src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

src/pages/blog/[slug].astro

@@ -0,0 +1,16 @@
+---
+import { getCollection } from 'astro:content';
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+  const blogEntries = await getCollection('blog');
+  return blogEntries.map(entry => ({
+    params: { slug: entry.slug }, props: { entry },
+  }));
+}
+// 2. When it's time to render, you can get the entry directly from the prop
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+---
+
+<Content />

src/pages/blog/index.astro

@@ -1,12 +1,15 @@
 ---
-import MainLayout from "../layouts/main.astro";
+import MainLayout from "../../layouts/main.astro";
-const posts = await Astro.glob("../pages/blog/*.mdx");
+import {getCollection} from "astro:content";
+const posts = await getCollection("blog");
+
+console.log(posts[0].slug);
 
 const postByDate = posts
   .sort((a, b) => {
     return (
-      new Date(b.frontmatter.date).getTime() -
+      new Date(b.data.date).getTime() -
-      new Date(a.frontmatter.date).getTime()
+      new Date(a.data.date).getTime()
     );
   })
   .reverse();
@@ -21,18 +24,18 @@ const postByDate = posts
   <section class="grid grid-cols-2 md:grid-cols-4 gap-4">
     {
       postByDate.map((post) => (
-        <a href={`${post.url}`} class="">
+        <a href={`/blog/${post.slug}`} class="">
           <article class="border-2 border-gray-800 dark:border-gray-200 dark:text-gray-200 dark:hover:text-white text-gray-800 hover:text-black">
-            <img src={post.frontmatter.image} />
+            <img src={post.data.image} />
             <div class="p-4">
               <h3 class="mb-4 uppercase">
-                {post.frontmatter.title}
+                {post.data.title}
               </h3>
               <p class="text-s mb-2">
-                {post.frontmatter.exerpt}
+                {post.data.exerpt}
               </p>
               <p class="text-s text-gray-600 dark:text-gray-400 text-sm">
-                {new Date(post.frontmatter.date).toLocaleDateString("es-US")}
+                {new Date(post.data.date).toLocaleDateString("es-US")}
               </p>
             </div>
           </article>

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  // Note: No change needed if you use "astro/tsconfigs/strict" or "astro/tsconfigs/strictest"
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "strictNullChecks": true
+  }
+}