Fix PDF import and cover image (#55)

src/components/bookmark/BookmarkImage.tsx

@@ -1,22 +1,40 @@
 'use client';
 
-import { BookmarkIcon } from '@heroicons/react/24/solid';
+import { isPdfUrl } from '@/utils/url';
+import { BookmarkIcon, DocumentIcon } from '@heroicons/react/24/solid';
 import Image from 'next/image';
 import { useState } from 'react';
 
 export interface Props {
-  link: { image: string | null; blurHash: string | null; title: string | null };
+  link: {
+    image: string | null;
+    blurHash: string | null;
+    title: string | null;
+    url: string;
+  };
   fallbackSrc?: string;
 }
 
+const PdfIcon = () => {
+  return (
+    <div className="flex flex-col justify-center">
+      <span className="text-center text-white font-bold text-xs absolute mt-2 ml-2">
+        PDF
+      </span>
+      <DocumentIcon className="h-10 w-10 fill-violet-600" />
+    </div>
+  );
+};
+
 const BookmarkImage = ({ link, fallbackSrc }: Props) => {
   const [failToLoadImage, setFailToLoadImage] = useState(false);
+  const isPdf = isPdfUrl(link.url);
 
   return (
     <>
       {failToLoadImage ? (
         <div className="flex items-center justify-center bg-gray-100 text-gray-200 h-full w-full">
-          <BookmarkIcon className="h-10 w-10" />
+          {isPdf ? <PdfIcon /> : <BookmarkIcon className="h-10 w-10" />}
         </div>
       ) : (
         <Image

src/components/digests/block-card/bookmark-card/BookmarkCard.tsx

@@ -88,6 +88,7 @@ export default function BlockBookmarkCard({
           image: link.image,
           blurHash: link.blurHash,
           title: link.title,
+          url: link?.url,
         }}
         {...(title && { title })}
         {...(description && { description })}

src/utils/bookmark.ts

@@ -7,6 +7,7 @@ import MetascraperTitle from 'metascraper-title';
 import MetascraperDescription from 'metascraper-description';
 import MetascraperImage from 'metascraper-image';
 import MetascrapperLogoFavicon from 'metascraper-logo-favicon';
+import { isPdfUrl } from './url';
 
 const metascraper = Metascraper([
   MetascraperTwitter(),
@@ -97,13 +98,17 @@ export const saveBookmark = async (
     },
   });
 
-  await isLinkValid(linkUrl);
+  const response = await isLinkValid(linkUrl);
   await isBookmarkedByUser(link?.id, membershipId, teamId);
 
   if (!link) {
-    const metadata = await extractMetadata(linkUrl);
-
+    const isPDF = response.headers.get('Content-Type') === 'application/pdf';
     let blurhash = null;
+    let metadata = null;
+
+    if (!isPDF) {
+      metadata = await extractMetadata(linkUrl);
+    }
 
     if (metadata?.image) {
       try {
@@ -115,13 +120,15 @@ export const saveBookmark = async (
       } catch (e) {}
     }
 
+    const logo = isPDF ? 'hello' : metadata?.logo ?? null;
+
     link = await db.link.create({
       data: {
         title: metadata?.title || linkUrl,
-        image: metadata?.image,
-        description: metadata?.description,
+        image: metadata?.image || null,
+        description: metadata?.description || '',
         url: linkUrl,
-        logo: metadata?.logo,
+        logo,
         blurHash: blurhash,
       },
     });

src/utils/link/index.ts

@@ -1,4 +1,4 @@
-export async function isLinkValid(url: string): Promise<boolean> {
+export async function isLinkValid(url: string): Promise<Response> {
   return fetch(url, {
     headers: {
       'User-Agent': 'digestclub-bot/1.0',
@@ -8,7 +8,7 @@ export async function isLinkValid(url: string): Promise<boolean> {
       if (!response.ok) {
         throw new TypeError('invalid_link');
       }
-      return response.ok;
+      return response;
     })
     .catch(() => {
       throw new TypeError('invalid_link');

src/utils/url.ts

@@ -4,3 +4,5 @@ export const getDomainFromUrl = (url: string) => {
 
   return domain;
 };
+
+export const isPdfUrl = (url: string) => url.indexOf('.pdf') > -1;