feat: change page title

4 files changed, 40 insertions, 32 deletions

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 8ca9968..5a8da53 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -14,6 +14,7 @@ export default function NotFound() {
 
   return (
     <>
+			<title>߸ 404</title>
       <h1 className="text-2xl font-semibold pt-4">404 - Not found</h1>
       <img src="/images/404.webp" className="rounded-lg" />
     </>
diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
index 7156991..77549d8 100644
--- a/src/pages/Blog.tsx
+++ b/src/pages/Blog.tsx
@@ -41,7 +41,7 @@ const posts: Meta[] = Object.entries(postFiles)
 export default function Blog() {
   return (
     <>
-      <title>Blog</title>
+      <title>߸ blog</title>
       <main className="container mx-auto py-12">
           <h1 className="text-3xl font-semibold mb-4">
             Blog Posts
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 6337d52..8af42cd 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -8,7 +8,7 @@ import { Github, Mail } from "lucide-react";
 export default function Home() {
   return (
     <>
-      <title>Hi, I'm Leander</title>
+      <title>߸ home</title>
       <main className="container mx-auto py-12">
         <div className="relative flex justify-center items-center pt-24">
           {/* Gradient Blob */}
diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx
index a869a26..b4e7151 100644
--- a/src/pages/Post.tsx
+++ b/src/pages/Post.tsx
@@ -1,15 +1,15 @@
 import { useParams, Navigate } from "react-router-dom";
-import type { FC } from "react";
+import { useEffect, type FC } from "react";
 
 interface Meta {
-  title: string;
-  date: string;
-  cover?: string;
+	title: string;
+	date: string;
+	cover?: string;
 }
 
 interface Post {
-  attributes: Meta;
-  ReactComponent: FC;
+	attributes: Meta;
+	ReactComponent: FC;
 }
 
 const posts = import.meta.glob<Post>("../blog/*.md", { eager: true });
@@ -17,33 +17,40 @@ const posts = import.meta.glob<Post>("../blog/*.md", { eager: true });
 const formDate = new Intl.DateTimeFormat("de-DE", { dateStyle: "medium" });
 
 export default function Post() {
-  const { slug } = useParams();
-  
-  const post = posts[`../blog/${slug}.md`];
+	const { slug } = useParams();
 
-  if (!post) return <Navigate to="/404" replace />;
+	const post = posts[`../blog/${slug}.md`];
 
-  const { attributes: meta, ReactComponent: Content } = post;
+	if (!post) return <Navigate to="/404" replace />;
 
-  return (
-    <>
-      <a href="/blog" className="no-underline hover:underline">
-        ← Back
-      </a>
+	const { attributes: meta, ReactComponent: Content } = post;
 
-      {meta.cover && (
-        <img
-          src={meta.cover}
-          alt={meta.title}
-          className="w-full h-60 object-cover rounded-lg my-6"
-        />
-      )}
+	useEffect(() => {
+		document.title = `߸ ${meta.title}`;
+	}, [meta.title])
 
-      <h1 className="text-2xl font-bold mb-4">{meta.title}</h1>
-      <p className="text-sm text-muted-foreground mb-8">{formDate.format(new Date(meta.date))}</p>
-      <div className="prose prose-neutral max-w-none prose-img:mx-auto prose-img:w-1/2 prose-img:rounded-lg prose-img:shadow-lg dark:prose-invert">
-        <Content />
-      </div>
-    </>
-  );
+	return (
+		<>
+			<title>߸ blog post</title>
+			<main>
+				<a href="/blog" className="no-underline hover:underline">
+					← Back
+				</a>
+
+				{meta.cover && (
+					<img
+						src={meta.cover}
+						alt={meta.title}
+						className="w-full h-60 object-cover rounded-lg my-6"
+					/>
+				)}
+
+				<h1 className="text-2xl font-bold mb-4">{meta.title}</h1>
+				<p className="text-sm text-muted-foreground mb-8">{formDate.format(new Date(meta.date))}</p>
+				<div className="prose prose-neutral max-w-none prose-img:mx-auto prose-img:w-1/2 prose-img:rounded-lg prose-img:shadow-lg dark:prose-invert">
+					<Content />
+				</div>
+			</main>
+		</>
+	);
 }