From e5e93442ff8a33ea8f4b27ab16a4e128d955dcba Mon Sep 17 00:00:00 2001
From: mcnaveen <8493007+mcnaveen@users.noreply.github.com>
Date: Thu, 3 Oct 2024 22:33:09 +0530
Subject: [PATCH] feat: hook link renderer in post desc

---
 app/[slug]/[board]/(main)/[...post]/page.tsx | 15 +++++++--
 app/[slug]/page.tsx                          |  1 -
 components/common/link-renderer.tsx          | 33 +++++++++-----------
 3 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/app/[slug]/[board]/(main)/[...post]/page.tsx b/app/[slug]/[board]/(main)/[...post]/page.tsx
index cf5ba82..ef2e6ec 100644
--- a/app/[slug]/[board]/(main)/[...post]/page.tsx
+++ b/app/[slug]/[board]/(main)/[...post]/page.tsx
@@ -9,6 +9,7 @@ import { authOptions } from "@/lib/auth";
 import { Button } from "@/components/ui/button";
 import { Reply } from "@/components/replies/create";
 import { RepliesList } from "@/components/replies/list";
+import { LinkRenderer } from "@/components/common/link-renderer";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
@@ -62,8 +63,18 @@ export default async function PostPage({
           <h2 className="text-xl font-bold text-gray-800 dark:text-gray-200 sm:text-2xl">
             {post.title}
           </h2>
-          <p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
-            {post.description}
+          <p className="mt-1 flex flex-wrap text-sm text-gray-600 dark:text-gray-300">
+            {post?.description
+              ?.split(/(https?:\/\/[^\s]+)/g)
+              .map((part, index) =>
+                part.match(/https?:\/\/[^\s]+/) ? (
+                  <LinkRenderer key={index} href={part}>
+                    {part}
+                  </LinkRenderer>
+                ) : (
+                  part
+                ),
+              )}
           </p>
           <p className="mt-1 text-xs text-gray-600 dark:text-gray-300 sm:text-sm">
             {formatDistance(post.createdAt, new Date(), {
diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
index ff6b55a..a330d27 100644
--- a/app/[slug]/page.tsx
+++ b/app/[slug]/page.tsx
@@ -16,7 +16,6 @@ import { BoardFilter } from "@/components/boards/filter";
 import NotFound from "./not-found";
 import PrivateBoard from "./private";
 
-// meta data
 export async function generateMetadata({
   params,
 }: {
diff --git a/components/common/link-renderer.tsx b/components/common/link-renderer.tsx
index 558fb95..67e0928 100644
--- a/components/common/link-renderer.tsx
+++ b/components/common/link-renderer.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { useQuery } from "@tanstack/react-query";
-import { Globe, ExternalLink } from "lucide-react";
+import { Globe } from "lucide-react";
 
 const fetchMetaTags = async (href: string) => {
   const response = await fetch(`/api/metatags?url=${href}`);
@@ -42,22 +42,19 @@ export const LinkRenderer = ({
   }
 
   return (
-    <span className="group flex items-center justify-center">
-      <Link
-        className="group flex items-center space-x-2 rounded-md bg-card p-1 px-2 shadow-sm hover:text-blue-600"
-        href={href}
-        target={target}
-      >
-        {data.favicon ? (
-          <Image alt="favicon" height={16} src={data.favicon} width={16} />
-        ) : (
-          <Globe size={10} />
-        )}
-        <span className={`line-clamp-1 text-${size}`}>
-          {children ? children : data.title.substring(0, 40) + "..."}
-        </span>
-      </Link>
-      <ExternalLink className="invisible ml-0 h-4 w-4 transition-opacity duration-200 group-hover:visible group-hover:ml-2" />
-    </span>
+    <Link
+      className="group flex items-center space-x-2 rounded-md bg-card p-1 px-2 shadow-sm hover:text-blue-600"
+      href={href}
+      target={target}
+    >
+      {data.favicon ? (
+        <Image alt="favicon" height={16} src={data.favicon} width={16} />
+      ) : (
+        <Globe size={10} />
+      )}
+      <span className={`line-clamp-1 text-${size}`}>
+        {children ? children : data.title.substring(0, 40) + "..."}
+      </span>
+    </Link>
   );
 };