Fix title and description tags

src/layouts/BaseLayout.astro

@@ -4,13 +4,14 @@ import RootLayout from "./RootLayout.astro";
 
 interface Props {
   title?: string;
+  description?: string;
   noStickyNavbar?: boolean;
 }
 
-const { title, noStickyNavbar } = Astro.props;
+const { title, description, noStickyNavbar } = Astro.props;
 ---
 
-<RootLayout {title}>
+<RootLayout {title} {description}>
   <Navbar
     client:load
     sticky={!noStickyNavbar}

src/layouts/RootLayout.astro

@@ -3,11 +3,12 @@ import { ViewTransitions } from "astro:transitions";
 
 interface Props {
   title?: string;
+  description?: string;
   hideScrollbar?: boolean;
   themeColor?: string;
 }
 
-const { title, hideScrollbar, themeColor } = Astro.props;
+const { title, description, hideScrollbar, themeColor } = Astro.props;
 
 const fullTitle = `${title ? title + " – " : ""}Mikkel Svartveit`;
 ---
@@ -21,7 +22,8 @@ const fullTitle = `${title ? title + " – " : ""}Mikkel Svartveit`;
     <title>{fullTitle}</title>
     <meta
       name="description"
-      content="Hi, I'm Mikkel! I am a Computer Science student from Norway and this is my playground. Here you will find some programming projects, and a small collection of photos I'm proud of."
+      content={description ??
+        "Hi, I'm Mikkel! I am a Computer Science student from Norway and this is my playground. Here you will find some programming projects, and a small collection of photos I'm proud of."}
     />
     <meta name="theme-color" content={themeColor ?? "#facc15"} />
     <ViewTransitions fallback="swap" />

src/pages/articles/[article].astro

@@ -17,11 +17,12 @@ export const getStaticPaths = (async () => {
 }) satisfies GetStaticPaths;
 
 const project = Astro.props.entry;
-const { Content } = await project.render();
+const { Content, headings } = await project.render();
-const { title, date } = project.data;
+const { date, intro } = project.data;
+const title = headings[0].text;
 ---
 
-<BaseLayout {title}>
+<BaseLayout {title} description={intro}>
   <ContainerLayout>
     <TextContentLayout>
       <p class="mx-auto mb-4 text-gray-500">

src/pages/articles/index.astro

@@ -9,7 +9,7 @@ import { getCollection } from "astro:content";
 const articles = await getCollection("blog");
 ---
 
-<BaseLayout title="Programming">
+<BaseLayout title="Articles">
   <ContainerLayout>
     <TextContentLayout>
       <h1