better link card

pages/api/v1/archives/[linkId].ts

@@ -19,6 +19,7 @@ export const config = {
 export default async function Index(req: NextApiRequest, res: NextApiResponse) {
   const linkId = Number(req.query.linkId);
   const format = Number(req.query.format);
+  const isPreview = Boolean(req.query.preview);
 
   let suffix: string;
 
@@ -55,13 +56,23 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
         .status(401)
         .json({ response: "You don't have access to this collection." });
 
-    const { file, contentType, status } = await readFile(
-      `archives/${collectionIsAccessible.id}/${linkId + suffix}`
-    );
+    if (isPreview) {
+      const { file, contentType, status } = await readFile(
+        `archives/preview/${collectionIsAccessible.id}/${linkId}.jpeg`
+      );
 
-    res.setHeader("Content-Type", contentType).status(status as number);
+      res.setHeader("Content-Type", contentType).status(status as number);
 
-    return res.send(file);
+      return res.send(file);
+    } else {
+      const { file, contentType, status } = await readFile(
+        `archives/${collectionIsAccessible.id}/${linkId + suffix}`
+      );
+
+      res.setHeader("Content-Type", contentType).status(status as number);
+
+      return res.send(file);
+    }
   }
   // else if (req.method === "POST") {
   //   const user = await verifyUser({ req, res });

pages/api/v1/links/[id]/archive/index.ts

@@ -76,6 +76,7 @@ const deleteArchivedFiles = async (link: Link & { collection: Collection }) => {
       image: null,
       pdf: null,
       readable: null,
+      preview: null,
     },
   });
 
@@ -88,4 +89,7 @@ const deleteArchivedFiles = async (link: Link & { collection: Collection }) => {
   await removeFile({
     filePath: `archives/${link.collection.id}/${link.id}_readability.json`,
   });
+  await removeFile({
+    filePath: `archives/preview/${link.collection.id}/${link.id}.png`,
+  });
 };

pages/collections/index.tsx

@@ -38,7 +38,7 @@ export default function Collections() {
           </div>
         </div>
 
-        <div className="grid xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+        <div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
           {sortedCollections
             .filter((e) => e.ownerId === data?.user.id)
             .map((e, i) => {
@@ -62,7 +62,7 @@ export default function Collections() {
               description={"Shared collections you're a member of"}
             />
 
-            <div className="grid xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+            <div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
               {sortedCollections
                 .filter((e) => e.ownerId !== data?.user.id)
                 .map((e, i) => {

pages/dashboard.tsx

@@ -146,7 +146,7 @@ export default function Dashboard() {
           {links[0] ? (
             <div className="w-full">
               <div
-                className={`grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
+                className={`grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5 w-full`}
               >
                 {links.slice(0, showLinks).map((e, i) => (
                   <LinkCard key={i} link={e} count={i} />
@@ -261,7 +261,7 @@ export default function Dashboard() {
           {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
             <div className="w-full">
               <div
-                className={`grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
+                className={`grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5 w-full`}
               >
                 {links
                   .filter((e) => e.pinnedBy && e.pinnedBy[0])