From 86820c402b5c47105781767d4e631aabbdd7215d Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Sun, 24 Dec 2023 06:46:08 -0500 Subject: [PATCH] bug fix + improvements + bundled up the app --- components/AnnouncementBar.tsx | 14 +- components/LinkViews/LinkCard.tsx | 16 +- .../LinkViews/LinkComponents/LinkIcon.tsx | 46 +++-- components/LinkViews/LinkGrid.tsx | 7 +- components/LinkViews/LinkList.tsx | 4 +- lib/api/archiveHandler.ts | 7 +- .../controllers/dashboard/getDashboardData.ts | 2 +- package.json | 9 +- pages/dashboard.tsx | 47 +++-- yarn.lock | 192 +++++++++++++++++- 10 files changed, 278 insertions(+), 66 deletions(-) diff --git a/components/AnnouncementBar.tsx b/components/AnnouncementBar.tsx index 839a438..70d72de 100644 --- a/components/AnnouncementBar.tsx +++ b/components/AnnouncementBar.tsx @@ -10,24 +10,22 @@ export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
- 🎉️{" "} + 🎉️ See what's new in{" "} - Linkwarden v2.0 - {" "} - is now out! 🥳️ + Linkwarden v2.4 + + ! 🥳️
diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx index cb9eb1f..c490cec 100644 --- a/components/LinkViews/LinkCard.tsx +++ b/components/LinkViews/LinkCard.tsx @@ -62,6 +62,8 @@ export default function LinkGrid({ link, count, className }: Props) { !link.preview?.startsWith("archives") && link.preview !== "unavailable" ) { + getLink(link.id as number); + interval = setInterval(async () => { getLink(link.id as number); }, 5000); @@ -72,7 +74,7 @@ export default function LinkGrid({ link, count, className }: Props) { clearInterval(interval); } }; - }, [isVisible]); + }, [isVisible, link.preview]); const [showInfo, setShowInfo] = useState(false); @@ -88,7 +90,7 @@ export default function LinkGrid({ link, count, className }: Props) { width={1280} height={720} alt="" - className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow" + className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105" style={{ filter: "blur(2px)" }} draggable="false" onError={(e) => { @@ -96,8 +98,10 @@ export default function LinkGrid({ link, count, className }: Props) { target.style.display = "none"; }} /> + ) : link.preview === "unavailable" ? ( +
) : ( -
+
)}
+
+

{unescapeString(link.name || link.description) || link.url} @@ -121,9 +127,9 @@ export default function LinkGrid({ link, count, className }: Props) { href={link.url || ""} target="_blank" title={link.url || ""} - className="w-fit hover:opacity-60 duration-100" + className="w-fit" > -

+

{shortendURL}

diff --git a/components/LinkViews/LinkComponents/LinkIcon.tsx b/components/LinkViews/LinkComponents/LinkIcon.tsx index e5f7380..70101e9 100644 --- a/components/LinkViews/LinkComponents/LinkIcon.tsx +++ b/components/LinkViews/LinkComponents/LinkIcon.tsx @@ -20,25 +20,29 @@ export default function LinkIcon({ const [showFavicon, setShowFavicon] = React.useState(true); - return link.url && url && showFavicon ? ( - { - setShowFavicon(false); - }} - /> - ) : showFavicon === false ? ( -
- -
- ) : link.type === "pdf" ? ( - - ) : link.type === "image" ? ( - - ) : undefined; + return ( + <> + {link.url && url && showFavicon ? ( + { + setShowFavicon(false); + }} + /> + ) : showFavicon === false ? ( +
+ +
+ ) : link.type === "pdf" ? ( + + ) : link.type === "image" ? ( + + ) : undefined} + + ); } diff --git a/components/LinkViews/LinkGrid.tsx b/components/LinkViews/LinkGrid.tsx index ac8a31d..a9c4344 100644 --- a/components/LinkViews/LinkGrid.tsx +++ b/components/LinkViews/LinkGrid.tsx @@ -100,7 +100,12 @@ export default function LinkGrid({ link, count, className }: Props) { ) : undefined}
- + {}} + linkInfo={false} + link={link} + collection={collection} + />
); } diff --git a/components/LinkViews/LinkList.tsx b/components/LinkViews/LinkList.tsx index 277201c..955e530 100644 --- a/components/LinkViews/LinkList.tsx +++ b/components/LinkViews/LinkList.tsx @@ -53,7 +53,7 @@ export default function LinkCardCompact({ link, count, className }: Props) {
link.url && window.open(link.url || "", "_blank")} - className="flex items-center cursor-pointer py-3 sm:px-3" + className="flex items-center cursor-pointer py-3 px-3" >
@@ -88,7 +88,7 @@ export default function LinkCardCompact({ link, count, className }: Props) { setShowInfo(!showInfo)} linkInfo={showInfo} /> diff --git a/lib/api/archiveHandler.ts b/lib/api/archiveHandler.ts index 4bab749..aeec9cd 100644 --- a/lib/api/archiveHandler.ts +++ b/lib/api/archiveHandler.ts @@ -9,6 +9,7 @@ import { Collection, Link, User } from "@prisma/client"; import validateUrlSize from "./validateUrlSize"; import removeFile from "./storage/removeFile"; import Jimp from "jimp"; +import createFolder from "./storage/createFolder"; type LinksAndCollectionAndOwner = Link & { collection: Collection & { @@ -123,6 +124,10 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) { return metaTag ? (metaTag as any).content : null; }); + createFolder({ + filePath: `archives/preview/${link.collectionId}`, + }); + if (ogImageUrl) { console.log("Found og:image URL:", ogImageUrl); @@ -161,8 +166,6 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) { } else { console.log("No image data found."); } - } else { - console.log("Image response is null."); } await page.goBack(); diff --git a/lib/api/controllers/dashboard/getDashboardData.ts b/lib/api/controllers/dashboard/getDashboardData.ts index 9691381..c43a869 100644 --- a/lib/api/controllers/dashboard/getDashboardData.ts +++ b/lib/api/controllers/dashboard/getDashboardData.ts @@ -46,7 +46,7 @@ export default async function getDashboardData( }); const recentlyAddedLinks = await prisma.link.findMany({ - take: 6, + take: 8, where: { collection: { OR: [ diff --git a/package.json b/package.json index efc92ba..dcb19aa 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,10 @@ "seed": "node ./prisma/seed.js" }, "scripts": { - "dev": "next dev", - "worker": "ts-node --skip-project scripts/worker.ts", - "start": "next start", + "dev": "concurrently -k \"next dev\" \"yarn worker:dev\"", + "worker:dev": "nodemon --skip-project scripts/worker.ts", + "worker:prod": "ts-node --transpile-only --skip-project scripts/worker.ts", + "start": "concurrently \"next start\" \"yarn worker:prod\"", "build": "next build", "lint": "next lint" }, @@ -33,6 +34,7 @@ "bcrypt": "^5.1.0", "bootstrap-icons": "^1.11.2", "colorthief": "^2.4.0", + "concurrently": "^8.2.2", "crypto-js": "^4.2.0", "csstype": "^3.1.2", "dompurify": "^3.0.6", @@ -65,6 +67,7 @@ "@types/shelljs": "^0.8.15", "autoprefixer": "^10.4.14", "daisyui": "^4.4.2", + "nodemon": "^3.0.2", "postcss": "^8.4.26", "prisma": "^5.1.0", "tailwindcss": "^3.3.3", diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index f84f126..18973c7 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -9,10 +9,14 @@ import Link from "next/link"; import useWindowDimensions from "@/hooks/useWindowDimensions"; import React from "react"; import { toast } from "react-hot-toast"; -import { MigrationFormat, MigrationRequest } from "@/types/global"; +import { MigrationFormat, MigrationRequest, ViewMode } from "@/types/global"; import DashboardItem from "@/components/DashboardItem"; import NewLinkModal from "@/components/ModalContent/NewLinkModal"; import PageHeader from "@/components/PageHeader"; +import CardView from "@/components/LinkViews/Layouts/CardView"; +import ListView from "@/components/LinkViews/Layouts/ListView"; +import ViewDropdown from "@/components/ViewDropdown"; +// import GridView from "@/components/LinkViews/Layouts/GridView"; export default function Dashboard() { const { collections } = useCollectionStore(); @@ -36,9 +40,11 @@ export default function Dashboard() { }, [collections]); const handleNumberOfLinksToShow = () => { - if (window.innerWidth > 1535) { + if (window.innerWidth > 1900) { + setShowLinks(8); + } else if (window.innerWidth > 1280) { setShowLinks(6); - } else if (window.innerWidth > 1295) { + } else if (window.innerWidth > 650) { setShowLinks(4); } else setShowLinks(3); }; @@ -88,14 +94,31 @@ export default function Dashboard() { const [newLinkModal, setNewLinkModal] = useState(false); + const [viewMode, setViewMode] = useState( + localStorage.getItem("viewMode") || ViewMode.Card + ); + + const linkView = { + [ViewMode.Card]: CardView, + // [ViewMode.Grid]: GridView, + [ViewMode.List]: ListView, + }; + + // @ts-ignore + const LinkComponent = linkView[viewMode]; + return (
- +
+ + +
+
{links[0] ? (
-
- {links.slice(0, showLinks).map((e, i) => ( - - ))} -
+
) : (