refactor(blog): remove title placeholders from files and update layout with dynamic title

Author: skyhancloud

app/blogs/hello/page.mdx

@@ -6,6 +6,4 @@ export const metadata = generateMetadata({
   date: '2024-05-11'
 });
 
-# {metadata.title}
-
 Hello, world! This is my first blog post. I'm excited to share my thoughts with you. I don't have much time to write, but I'll try to make it worth your while. Check back soon for more updates!

app/blogs/layout.tsx

@@ -1,13 +1,15 @@
 'use client';
 
 import cn from '@/utils/cn';
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export default function BlogLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   const router = useRouter();
 
+  const [title, setTitle] = useState(document.title);
+
   useEffect(() => {
     const headings = document.querySelectorAll('h2, h3, h4, h5, h6');
 
@@ -45,6 +47,8 @@ export default function BlogLayout({ children }: Readonly<{ children: React.Reac
         });
       }
     }
+
+    setTitle(document.title);
   }, []);
 
   return (
@@ -54,11 +58,11 @@ export default function BlogLayout({ children }: Readonly<{ children: React.Reac
         href='/'
       >
         <h1 className='font-bricolageGrotesque font-bold'>
-          Gökhan Bulut
+          {title.split(' - ').shift()}
         </h1>
 
-        <span className='text-sm text-secondary'>
-          Full-stack Developer
+        <span className='text-sm text-tertiary'>
+          Gökhan Bulut
         </span>
       </Link>
 

app/blogs/using-lantern-rest-to-display-your-discord-presence/page.mdx

@@ -8,8 +8,6 @@ export const metadata = generateMetadata({
   date: '2024-12-01'
 });
 
-# {metadata.title}
-
 Ever wanted to showcase your Discord status, current gaming session, or Spotify tracks on your personal website? Enter Lantern, a powerful service that makes it incredibly easy to broadcast your Discord presence in real-time. In this post, we'll explore how Lantern works and how you can integrate it into your projects.
 
 ## What is Lantern?