add videos page, new video

src/pages/blog/index.astro

@@ -4,27 +4,32 @@ import Layout from "@/layouts/Layout.astro";
 import { sortContentByDate } from "@/utils/sorts";
 import { getCollection } from "astro:content";
 
+const pageData = {
+  title: "Blog",
+  description: "Long format about thoughts and other topics.",
+};
+
 const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
 sortContentByDate(allPosts);
 ---
 
-<Layout title="Blog" description="Check my projects.">
-    <section class="prose prose-invert">
-        <h1>Blog</h1>
-        <p>Long format about thoughts and other topics.</p>
-    </section>
-    <ul class="mt-4 flex flex-col gap-4">
-        {
-            allPosts.map((blogpost: any) => (
-                <li>
-                    <PostItem
-                        type="blog"
-                        slug={blogpost.slug}
-                        date={blogpost.data.date!}
-                        title={blogpost.data.title!}
-                    />
-                </li>
-            ))
-        }
-    </ul>
+<Layout {...pageData}>
+  <section class="prose prose-invert">
+    <h1>{pageData.title}</h1>
+    <p>{pageData.description}</p>
+  </section>
+  <ul class="mt-4 flex flex-col gap-4">
+    {
+      allPosts.map((blogpost: any) => (
+        <li>
+          <PostItem
+            type="blog"
+            slug={blogpost.slug}
+            date={blogpost.data.date!}
+            title={blogpost.data.title!}
+          />
+        </li>
+      ))
+    }
+  </ul>
 </Layout>

src/pages/portfolio/index.astro

@@ -4,30 +4,35 @@ import Layout from "@/layouts/Layout.astro";
 import { sortContentByDate } from "@/utils/sorts";
 import { getCollection } from "astro:content";
 
+const pageData = {
+  title: "Portfolio",
+  description: "Check my projects.",
+};
+
 const allProjects = await getCollection(
-    "portfolio",
-    ({ data }) => data.draft !== true,
+  "portfolio",
+  ({ data }) => data.draft !== true
 );
 sortContentByDate(allProjects);
 ---
 
-<Layout title="Blog" description="Long format about thoughts and other topics.">
-    <section class="prose prose-invert">
-        <h1>Portfolio</h1>
-        <p>Check my projects.</p>
-    </section>
-    <ul class="mt-4 flex flex-col gap-4">
-        {
-            allProjects.map((project: any) => (
-                <li>
-                    <PostItem
-                        type="portfolio"
-                        slug={project.slug}
-                        date={project.data.date!}
-                        title={project.data.title!}
-                    />
-                </li>
-            ))
-        }
-    </ul>
+<Layout {...pageData}>
+  <section class="prose prose-invert">
+    <h1>{pageData.title}</h1>
+    <p>{pageData.description}</p>
+  </section>
+  <ul class="mt-4 flex flex-col gap-4">
+    {
+      allProjects.map((project: any) => (
+        <li>
+          <PostItem
+            type="portfolio"
+            slug={project.slug}
+            date={project.data.date!}
+            title={project.data.title!}
+          />
+        </li>
+      ))
+    }
+  </ul>
 </Layout>

src/pages/videos/[...slug].astro

@@ -0,0 +1,42 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+import components from "@/components/mdx/wrapper";
+import formatDate from "@/utils/format-date";
+
+interface Props {
+  project: CollectionEntry<"videos">;
+}
+
+export async function getStaticPaths() {
+  const allProjects = await getCollection(
+    "videos",
+    ({ data }) => data.draft !== true
+  );
+
+  return allProjects.map((project) => ({
+    params: { slug: project.slug },
+    props: { project },
+  }));
+}
+
+const { project } = Astro.props;
+const { Content } = await project.render();
+---
+
+<Layout
+  lang="es"
+  title={project.data.title}
+  description={project.data.description}
+>
+  <article class="prose prose-invert">
+    <h1>{project.data.title}</h1>
+    <Content components={{ ...components }} />
+    <hr />
+    <p>
+      <strong>Posted: </strong>
+      {project.data.date && formatDate(new Date(project.data.date))}
+    </p>
+  </article>
+</Layout>

src/pages/videos/index.astro

@@ -0,0 +1,38 @@
+---
+import PostItem from "@/components/post-item";
+import Layout from "@/layouts/Layout.astro";
+import { sortContentByDate } from "@/utils/sorts";
+import { getCollection } from "astro:content";
+
+const pageData = {
+  title: "Videos",
+  description: "Guiones de los videos de mi canal de YouTube.",
+};
+
+const allVideos = await getCollection(
+  "videos",
+  ({ data }) => data.draft !== true
+);
+sortContentByDate(allVideos);
+---
+
+<Layout {...pageData} lang="es">
+  <section class="prose prose-invert">
+    <h1>{pageData.title}</h1>
+    <p>{pageData.description}</p>
+  </section>
+  <ul class="mt-4 flex flex-col gap-4">
+    {
+      allVideos.map((video: any) => (
+        <li>
+          <PostItem
+            type="videos"
+            slug={video.slug}
+            date={video.data.date!}
+            title={video.data.title!}
+          />
+        </li>
+      ))
+    }
+  </ul>
+</Layout>