From fd008a4860430b8bf6c9f7a416bb5251b7f6a8bc Mon Sep 17 00:00:00 2001
From: Lwin Moe Paing <lwinmoepaing.dev@gmail.com>
Date: Sat, 21 Oct 2023 16:04:18 +0630
Subject: [PATCH] :bug: fix(profile): empty profile detail page and meta tag

---
 src/app/profile/[slug]/page.tsx   |  9 +++++++--
 src/app/profile/page.tsx          |  5 +++++
 src/components/Common/Mdx/Mdx.tsx | 29 ++++++++++++++++++++++++++---
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/app/profile/[slug]/page.tsx b/src/app/profile/[slug]/page.tsx
index 79f708b..3906550 100644
--- a/src/app/profile/[slug]/page.tsx
+++ b/src/app/profile/[slug]/page.tsx
@@ -1,6 +1,7 @@
 import Container from "@/components/Common/Container/Container";
 import { Mdx } from "@/components/Common/Mdx/Mdx";
 import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
+import TitleText from "@/components/Common/TitleText/TitleText";
 import { allProfiles } from "contentlayer/generated";
 import { notFound } from "next/navigation";
 import { FC } from "react";
@@ -28,7 +29,7 @@ export async function generateMetadata({
     openGraph: {
       title: `Profile | ${profile.name}`,
       description: `Profile | ${profile.description}`,
-      image: !!profile.image
+      images: !!profile.image
         ? profile.image
         : "https://mmswe.com/images/landing/galaxy.jpg",
       siteName: `https://mmswe.com/profile/${slug}`,
@@ -52,7 +53,11 @@ const PProfileDetailPage: FC<TPProfileDetailPageProps> = async ({
 
   return (
     <Container>
-      <Mdx code={profile.body.code} />
+      <Mdx
+        code={profile.body.code}
+        extraText={`${profile.name} | ${profile.description}`}
+      />
+
       <SpacingDivider size="lg" />
     </Container>
   );
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 77275d1..610b6e7 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -10,6 +10,11 @@ import { profileHelperService } from "@/utils/profileHelper";
 export const metadata: Metadata = {
   title: `Profile List | ${APP_CONFIG.title}`,
   description: APP_CONFIG.description,
+  openGraph: {
+    title: `Profile List | ${APP_CONFIG.title}`,
+    description: APP_CONFIG.description,
+    images: "https://mmswe.com/images/landing/galaxy.jpg",
+  },
 };
 
 const getAllProfileList = async () => {
diff --git a/src/components/Common/Mdx/Mdx.tsx b/src/components/Common/Mdx/Mdx.tsx
index 777ec42..2d4798a 100644
--- a/src/components/Common/Mdx/Mdx.tsx
+++ b/src/components/Common/Mdx/Mdx.tsx
@@ -1,6 +1,9 @@
+"use client";
+
 import { cn } from "@/utils";
 import { useMDXComponent } from "next-contentlayer/hooks";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import TitleText from "../TitleText/TitleText";
 
 const components = {
   h1: ({ className, ...rest }: React.HTMLAttributes<HTMLHeadingElement>) => (
@@ -155,14 +158,34 @@ const components = {
 
 interface MdxProps {
   code: string;
+  extraText?: string;
 }
 
-export function Mdx({ code }: MdxProps) {
+export function Mdx({ code, extraText }: MdxProps) {
   const Component = useMDXComponent(code);
+  const [showExtraText, setShowExtraText] = useState(false);
+
+  useEffect(() => {
+    const mdxContainer = document.getElementById("mdx_container");
+    setTimeout(() => {
+      if (mdxContainer && !mdxContainer.innerHTML) {
+        setShowExtraText(true);
+      }
+    }, 300);
+    return () => {};
+  }, []);
 
   return (
-    <div className="mdx">
+    <div className="mdx" id="mdx_container">
       <Component components={components} />
+      {showExtraText && !!extraText ? (
+        <>
+          <TitleText>{extraText}</TitleText>
+          <TitleText tag="h2" className="text-sm mt-5">
+            Note: The profile owner needs to update their Profile Detail Page
+          </TitleText>
+        </>
+      ) : null}
     </div>
   );
 }