Skip to content

Commit

Permalink
feat: hook link renderer in post desc
Browse files Browse the repository at this point in the history
  • Loading branch information
mcnaveen committed Oct 3, 2024
1 parent 07d8c46 commit e5e9344
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 21 deletions.
15 changes: 13 additions & 2 deletions app/[slug]/[board]/(main)/[...post]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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(), {
Expand Down
1 change: 0 additions & 1 deletion app/[slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}: {
Expand Down
33 changes: 15 additions & 18 deletions components/common/link-renderer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}`);
Expand Down Expand Up @@ -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>
);
};

0 comments on commit e5e9344

Please sign in to comment.