diff options
| author | schererleander <leander@schererleander.de> | 2025-09-17 23:55:35 +0200 |
|---|---|---|
| committer | schererleander <leander@schererleander.de> | 2025-09-17 23:55:35 +0200 |
| commit | 4e10a6525733ce005745bd481e8fc8d6063f7ad8 (patch) | |
| tree | e701ea3b394b09615eb52a0332aa362c57f77cc2 | |
| parent | 056821469f43dd2a6a0da299a6d8d5a39ffd6ea5 (diff) | |
feat: change page title
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | src/pages/404.tsx | 1 | ||||
| -rw-r--r-- | src/pages/Blog.tsx | 2 | ||||
| -rw-r--r-- | src/pages/Home.tsx | 2 | ||||
| -rw-r--r-- | src/pages/Post.tsx | 67 |
5 files changed, 40 insertions, 33 deletions
@@ -3,7 +3,6 @@ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Leander Scherer</title> <meta name="description" content="Hello Leander here, a computer science student passionate about hardware and software, building 3D printing projects and learning Nix."/> </head> <body> 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> + </> + ); } |