feat: update profile page layout and enhance Markdown rendering

src/app/[username]/(profile-page)/layout.tsx

@@ -63,13 +63,7 @@ const layout: React.FC<ProfilePageLayoutProps> = async ({
 
   return (
     <BaseLayout>
-      {/* <pre>
-        {JSON.stringify(
-          { currentPath: sanitizedUsername(currentPath!), username },
-          null,
-          2
-        )}
-      </pre> */}
+      {/* <pre>{JSON.stringify({ profile }, null, 2)}</pre> */}
       <div className="wrapper">
         <div className="grid grid-cols-1 gap-6 my-2 lg:my-6 md:grid-cols-12 lg:gap-10">
           <aside className="md:col-span-3 col-span-full">

src/app/[username]/(profile-page)/page.tsx

@@ -1,6 +1,7 @@
 import { getUserByUsername } from "@/backend/services/user.action";
 import _t from "@/i18n/_t";
 import { markdocParser } from "@/lib/markdown/markdoc-parser";
+import Markdown from "@/lib/markdown/Markdown";
 import Image from "next/image";
 import React from "react";
 
@@ -19,7 +20,7 @@ const UserProfilePage: React.FC<UserProfilePageProps> = async ({ params }) => {
     <main className="border rounded-bl-2xl rounded-br-2xl md:col-span-9 col-span-full">
       {profile?.profile_readme ? (
         <div className="p-3 content-typography">
-          {markdocParser(profile?.profile_readme ?? "")}
+          <Markdown content={profile?.profile_readme} />
         </div>
       ) : (
         <div className="py-10 flex flex-col items-center justify-center gap-4">

src/styles/_content-typography.css

@@ -13,7 +13,7 @@
   @apply prose-h4:text-base;
 
   iframe {
-    @apply w-full aspect-[16/9];
+    @apply w-full aspect-video;
   }
 
   .table-of-contents {