more site updates

Signed-off-by: Vu Van Dung <[email protected]>

src/app/(public)/blogs/(posts)/about-the-author.mdx

@@ -0,0 +1 @@
+[@joulev](https://github.com/joulev) is a lead Next.js developer at his company. He has also been one of the most active helpers in the [Next.js official Discord server](https://nextjs-forum.com), and is (as of 4 June 2024) among top 100 of [all-time Next.js contributors](https://github.com/vercel/next.js/graphs/contributors).

src/app/(public)/blogs/(posts)/client-components.tsx

@@ -4,12 +4,11 @@ import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 import { Balancer } from "react-wrap-balancer";
 
-import { CopyButton } from "~/components/copy-button";
-import { Check, Share } from "~/components/icons";
 import { Link } from "~/components/ui/link";
 import { incrementViews } from "~/lib/blogs/increment-view";
 import { formatTime } from "~/lib/blogs/utils";
 
+import { useHoverBackground } from "~/components/ui/hooks/use-hover-background";
 import { meta } from "../meta";
 
 function useMetadata() {
@@ -33,11 +32,34 @@ export function PostedDate() {
   const { postedDate } = useMetadata();
   const publishedTime = new Date(postedDate);
   return (
-    <div className="text-sm text-text-secondary">
-      Posted{" "}
-      <time dateTime={publishedTime.toISOString()} title={publishedTime.toISOString()}>
-        {formatTime(publishedTime)}
-      </time>
+    <div className="max-blog-lg:text-sm text-text-secondary">
+      <time dateTime={publishedTime.toISOString().split("T")[0]}>{formatTime(publishedTime)}</time>
+    </div>
+  );
+}
+
+export function Author() {
+  return (
+    <div className="-m-3">
+      <a
+        href="https://github.com/joulev"
+        target="_blank"
+        rel="noreferrer noopener"
+        className="hover-bg relative flex flex-row items-center gap-3 w-fit rounded m-1 p-2 hover:bg-bg-idle hover:m-0 hover:p-3 transition-all"
+        {...useHoverBackground({})}
+      >
+        <img
+          src="https://avatars.githubusercontent.com/u/44609036"
+          alt="Vu Van Dung"
+          className="size-9 shrink-0 rounded-full"
+        />
+        <div className="flex flex-col gap-1.5">
+          <div className="blog-lg:text-lg font-semibold leading-none blog-lg:leading-none">
+            Vu Van Dung
+          </div>
+          <div className="text-sm text-text-secondary leading-none">@joulev</div>
+        </div>
+      </a>
     </div>
   );
 }
@@ -55,26 +77,6 @@ export function ViewSourceHistory() {
   );
 }
 
-export function ShareButton() {
-  const { slug } = useMetadata();
-  return (
-    <CopyButton
-      content={`https://joulev.dev/blogs/${slug}`}
-      variants={{ size: "sm" }}
-      copyChildren={
-        <>
-          <Share /> Share
-        </>
-      }
-      copiedChildren={
-        <>
-          <Check /> Link copied!
-        </>
-      }
-    />
-  );
-}
-
 export function IncrementViews() {
   const { slug } = useMetadata();
   useEffect(() => {

src/app/(public)/blogs/(posts)/layout.tsx

@@ -3,19 +3,20 @@ import { LinkButton } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
 
 import type { LayoutProps } from "./$types";
+import AboutTheAuthor from "./about-the-author.mdx";
 import {
+  Author,
   IncrementViews,
   PostTitle,
   PostedDate,
-  ShareButton,
   ViewSourceHistory,
 } from "./client-components";
 
 export default function Layout({ children }: LayoutProps) {
   return (
     <main className="container max-w-screen-xl">
       <Card className="flex flex-col p-0">
-        <div className="relative border-b border-separator bg-bg-darker px-6 pb-6 pt-36 md:pb-12 blog-lg:px-12">
+        <div className="relative border-b border-separator bg-bg-darker px-6 pb-9 pt-36 md:pb-12 blog-lg:px-12">
           <div
             className="absolute inset-0 -z-10"
             style={{
@@ -26,33 +27,38 @@ export default function Layout({ children }: LayoutProps) {
               WebkitMaskImage: "linear-gradient(to top right, #0000 0%, #0003 50%, #000 100%)",
             }}
           />
-          <div className="flex max-w-prose flex-col gap-6 max-blog-lg:mx-auto">
+          <div className="flex max-w-prose flex-col gap-6 blog-lg:gap-9 max-blog-lg:mx-auto">
+            <PostedDate />
             <PostTitle />
-            <div className="flex flex-row items-center">
-              <div className="mr-4 flex flex-row gap-3 border-r border-separator pr-4">
-                <ShareButton />
-              </div>
-              <PostedDate />
-            </div>
+            <Author />
           </div>
         </div>
         <div className="flex flex-col divide-y divide-separator blog-lg:flex-row blog-lg:divide-x blog-lg:divide-y-0">
-          <article className="prose max-w-none px-[--p] py-12 [--p:24px] *:mx-auto *:max-w-prose blog-lg:[--p:48px]">
+          <article className="prose max-w-none px-[--p] py-12 [--p:24px] *:mx-auto *:max-w-prose blog-lg:[--p:48px] shrink-0">
             {children}
             <div className="not-prose">
               <LinkButton href="/blogs" className="mt-6 text-text-primary no-underline">
                 <ChevronLeft /> Back to blogs
               </LinkButton>
             </div>
           </article>
-          <div className="flex flex-col p-6 text-text-secondary blog-lg:p-12">
+          <div className="flex flex-col p-6 blog-lg:p-12">
             <div className="flex-grow max-blog-lg:hidden" />
-            <div className="sticky bottom-12 mx-auto flex w-full max-w-prose flex-col gap-3 text-sm">
-              <div>
-                <span className="whitespace-nowrap">Unless explicitly noted,</span>{" "}
-                <span className="whitespace-nowrap">all opinions are personal.</span>
+            <div className="sticky bottom-12 flex w-full flex-col gap-6 blog-lg:gap-12 text-sm">
+              <div className="flex flex-col gap-3 max-w-prose mx-auto w-full">
+                <h2 className="font-semibold text-base text-text-primary">About the author</h2>
+                <div className="prose-sm max-w-none text-text-prose">
+                  <AboutTheAuthor />
+                </div>
+              </div>
+              <hr className="-mx-6 blog-lg:-mx-12" />
+              <div className="flex flex-col gap-3 max-w-prose mx-auto w-full text-text-secondary">
+                <div>
+                  <span className="whitespace-nowrap">Unless explicitly noted,</span>{" "}
+                  <span className="whitespace-nowrap">all opinions are personal.</span>
+                </div>
+                <ViewSourceHistory />
               </div>
-              <ViewSourceHistory />
             </div>
           </div>
         </div>