better UX + more consistent layout
This commit is contained in:
daniel31x13
parent
b74ff01ce6
commit
530ec69d1c
|
|
@ -26,7 +26,6 @@ import unescapeString from "@/lib/client/unescapeString";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import EditLinkModal from "./ModalContent/EditLinkModal";
|
import EditLinkModal from "./ModalContent/EditLinkModal";
|
||||||
import DeleteLinkModal from "./ModalContent/DeleteLinkModal";
|
import DeleteLinkModal from "./ModalContent/DeleteLinkModal";
|
||||||
import ExpandedLink from "./ModalContent/ExpandedLink";
|
|
||||||
import PreservedFormatsModal from "./ModalContent/PreservedFormatsModal";
|
import PreservedFormatsModal from "./ModalContent/PreservedFormatsModal";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
@ -112,11 +111,10 @@ export default function LinkCard({ link, count, className }: Props) {
|
||||||
const [editLinkModal, setEditLinkModal] = useState(false);
|
const [editLinkModal, setEditLinkModal] = useState(false);
|
||||||
const [deleteLinkModal, setDeleteLinkModal] = useState(false);
|
const [deleteLinkModal, setDeleteLinkModal] = useState(false);
|
||||||
const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
|
const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
|
||||||
const [expandedLink, setExpandedLink] = useState(false);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`h-fit border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative ${
|
className={`h-fit hover:bg-base-300 hover:border-base-300 border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-200 rounded-2xl relative ${
|
||||||
className || ""
|
className || ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|
@ -200,12 +198,8 @@ export default function LinkCard({ link, count, className }: Props) {
|
||||||
</div>
|
</div>
|
||||||
) : undefined}
|
) : undefined}
|
||||||
|
|
||||||
<Link
|
<div
|
||||||
href={"/links/" + link.id}
|
onClick={() => link.url && window.open(link.url || "", "_blank")}
|
||||||
// onClick={
|
|
||||||
// () => router.push("/links/" + link.id)
|
|
||||||
// // setExpandedLink(true)
|
|
||||||
// }
|
|
||||||
className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
|
className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
|
||||||
>
|
>
|
||||||
{link.url && url ? (
|
{link.url && url ? (
|
||||||
|
|
@ -241,13 +235,7 @@ export default function LinkCard({ link, count, className }: Props) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{link.url ? (
|
{link.url ? (
|
||||||
<div
|
<div className="flex items-center gap-1 max-w-full w-fit text-neutral">
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
window.open(link.url || "", "_blank");
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-60 duration-100"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
|
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
|
||||||
<p className="truncate w-full">{shortendURL}</p>
|
<p className="truncate w-full">{shortendURL}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -257,7 +245,7 @@ export default function LinkCard({ link, count, className }: Props) {
|
||||||
|
|
||||||
<div
|
<div
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.stopPropagation();
|
||||||
router.push(`/collections/${link.collection.id}`);
|
router.push(`/collections/${link.collection.id}`);
|
||||||
}}
|
}}
|
||||||
className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
|
className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
|
||||||
|
|
@ -295,7 +283,7 @@ export default function LinkCard({ link, count, className }: Props) {
|
||||||
) : (
|
) : (
|
||||||
<p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
|
<p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
|
||||||
)} */}
|
)} */}
|
||||||
</Link>
|
</div>
|
||||||
{editLinkModal ? (
|
{editLinkModal ? (
|
||||||
<EditLinkModal
|
<EditLinkModal
|
||||||
onClose={() => setEditLinkModal(false)}
|
onClose={() => setEditLinkModal(false)}
|
||||||
|
|
@ -314,9 +302,6 @@ export default function LinkCard({ link, count, className }: Props) {
|
||||||
activeLink={link}
|
activeLink={link}
|
||||||
/>
|
/>
|
||||||
) : undefined}
|
) : undefined}
|
||||||
{/* {expandedLink ? (
|
|
||||||
<ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
|
|
||||||
) : undefined} */}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
|
||||||
<div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100">
|
<div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100">
|
||||||
<div
|
<div
|
||||||
onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
|
onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
|
||||||
className="absolute top-3 right-3 btn btn-sm outline-none btn-circle btn-ghost"
|
className="absolute top-3 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faClose} className="w-4 h-4 text-neutral" />
|
<FontAwesomeIcon icon={faClose} className="w-4 h-4 text-neutral" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,254 +0,0 @@
|
||||||
import {
|
|
||||||
CollectionIncludingMembersAndLinkCount,
|
|
||||||
LinkIncludingShortenedCollectionAndTags,
|
|
||||||
} from "@/types/global";
|
|
||||||
import Image from "next/image";
|
|
||||||
import ColorThief, { RGBColor } from "colorthief";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import {
|
|
||||||
faArrowUpRightFromSquare,
|
|
||||||
faBoxArchive,
|
|
||||||
faCloudArrowDown,
|
|
||||||
faFolder,
|
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import useCollectionStore from "@/store/collections";
|
|
||||||
import {
|
|
||||||
faCalendarDays,
|
|
||||||
faFileImage,
|
|
||||||
faFilePdf,
|
|
||||||
} from "@fortawesome/free-regular-svg-icons";
|
|
||||||
import isValidUrl from "@/lib/shared/isValidUrl";
|
|
||||||
import unescapeString from "@/lib/client/unescapeString";
|
|
||||||
import useLocalSettingsStore from "@/store/localSettings";
|
|
||||||
import Modal from "../Modal";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
link: LinkIncludingShortenedCollectionAndTags;
|
|
||||||
onClose: Function;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function LinkDetails({ link, onClose }: Props) {
|
|
||||||
const {
|
|
||||||
settings: { theme },
|
|
||||||
} = useLocalSettingsStore();
|
|
||||||
|
|
||||||
const [imageError, setImageError] = useState<boolean>(false);
|
|
||||||
const formattedDate = new Date(link.createdAt as string).toLocaleString(
|
|
||||||
"en-US",
|
|
||||||
{
|
|
||||||
year: "numeric",
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const { collections } = useCollectionStore();
|
|
||||||
|
|
||||||
const [collection, setCollection] =
|
|
||||||
useState<CollectionIncludingMembersAndLinkCount>(
|
|
||||||
collections.find(
|
|
||||||
(e) => e.id === link.collection.id
|
|
||||||
) as CollectionIncludingMembersAndLinkCount
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setCollection(
|
|
||||||
collections.find(
|
|
||||||
(e) => e.id === link.collection.id
|
|
||||||
) as CollectionIncludingMembersAndLinkCount
|
|
||||||
);
|
|
||||||
}, [collections]);
|
|
||||||
|
|
||||||
const [colorPalette, setColorPalette] = useState<RGBColor[]>();
|
|
||||||
|
|
||||||
const colorThief = new ColorThief();
|
|
||||||
|
|
||||||
const url = link.url && isValidUrl(link.url) ? new URL(link.url) : undefined;
|
|
||||||
|
|
||||||
const handleDownload = (format: "png" | "pdf") => {
|
|
||||||
const path = `/api/v1/archives/${link.collection.id}/${link.id}.${format}`;
|
|
||||||
fetch(path)
|
|
||||||
.then((response) => {
|
|
||||||
if (response.ok) {
|
|
||||||
// Create a temporary link and click it to trigger the download
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.href = path;
|
|
||||||
link.download = format === "pdf" ? "PDF" : "Screenshot";
|
|
||||||
link.click();
|
|
||||||
} else {
|
|
||||||
console.error("Failed to download file");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.error("Error:", error);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal toggleModal={onClose}>
|
|
||||||
<div className={`relative flex gap-5 items-start mr-10`}>
|
|
||||||
{!imageError && url && (
|
|
||||||
<Image
|
|
||||||
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
|
|
||||||
width={42}
|
|
||||||
height={42}
|
|
||||||
alt=""
|
|
||||||
id={"favicon-" + link.id}
|
|
||||||
className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
|
|
||||||
draggable="false"
|
|
||||||
onLoad={(e) => {
|
|
||||||
try {
|
|
||||||
const color = colorThief.getPalette(
|
|
||||||
e.target as HTMLImageElement,
|
|
||||||
4
|
|
||||||
);
|
|
||||||
|
|
||||||
setColorPalette(color);
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onError={(e) => {
|
|
||||||
setImageError(true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div className="flex w-full flex-col min-h-[3rem] justify-center drop-shadow">
|
|
||||||
<p className="text-2xl capitalize break-words hyphens-auto">
|
|
||||||
{unescapeString(link.name)}
|
|
||||||
</p>
|
|
||||||
<Link
|
|
||||||
href={link.url || ""}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className={`${
|
|
||||||
link.name ? "text-sm" : "text-xl"
|
|
||||||
} text-gray-500 dark:text-gray-300 break-all hover:underline cursor-pointer w-fit`}
|
|
||||||
>
|
|
||||||
{url ? url.host : link.url}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-1 items-center flex-wrap">
|
|
||||||
<Link
|
|
||||||
href={`/collections/${link.collection.id}`}
|
|
||||||
className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faFolder}
|
|
||||||
className="w-5 h-5 drop-shadow"
|
|
||||||
style={{ color: collection?.color }}
|
|
||||||
/>
|
|
||||||
<p
|
|
||||||
title={collection?.name}
|
|
||||||
className="text-lg truncate max-w-[12rem]"
|
|
||||||
>
|
|
||||||
{collection?.name}
|
|
||||||
</p>
|
|
||||||
</Link>
|
|
||||||
{link.tags.map((e, i) => (
|
|
||||||
<Link key={i} href={`/tags/${e.id}`} className="z-10">
|
|
||||||
<p
|
|
||||||
title={e.name}
|
|
||||||
className="px-2 py-1 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
|
|
||||||
>
|
|
||||||
{e.name}
|
|
||||||
</p>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{link.description && (
|
|
||||||
<>
|
|
||||||
<div className="max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
|
|
||||||
{unescapeString(link.description)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
|
|
||||||
<FontAwesomeIcon icon={faBoxArchive} className="w-4 h-4" />
|
|
||||||
<p>Archived Formats:</p>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="flex items-center gap-1 text-gray-500 dark:text-gray-300"
|
|
||||||
title={"Created at: " + formattedDate}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
|
|
||||||
<p>{formattedDate}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<div className="flex justify-between items-center p-2 border border-sky-100 dark:border-neutral-700 rounded-md">
|
|
||||||
<div className="flex gap-2 items-center">
|
|
||||||
<div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
|
|
||||||
<FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>Screenshot</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-1">
|
|
||||||
<Link
|
|
||||||
href={`/api/v1/archives/${link.collectionId}/${link.id}.png`}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faArrowUpRightFromSquare}
|
|
||||||
className="w-5 h-5 text-sky-500 dark:text-sky-500"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div
|
|
||||||
onClick={() => handleDownload("png")}
|
|
||||||
className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faCloudArrowDown}
|
|
||||||
className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-between items-center p-2 border border-sky-100 dark:border-neutral-700 rounded-md">
|
|
||||||
<div className="flex gap-2 items-center">
|
|
||||||
<div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
|
|
||||||
<FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>PDF</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-1">
|
|
||||||
<Link
|
|
||||||
href={`/api/v1/archives/${link.collectionId}/${link.id}.pdf`}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faArrowUpRightFromSquare}
|
|
||||||
className="w-5 h-5 text-sky-500 dark:text-sky-500"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div
|
|
||||||
onClick={() => handleDownload("pdf")}
|
|
||||||
className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faCloudArrowDown}
|
|
||||||
className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -15,11 +15,16 @@ import {
|
||||||
faUpRightFromSquare,
|
faUpRightFromSquare,
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
import Modal from "../Modal";
|
import Modal from "../Modal";
|
||||||
import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
|
import {
|
||||||
|
faFileImage,
|
||||||
|
faFileLines,
|
||||||
|
faFilePdf,
|
||||||
|
} from "@fortawesome/free-regular-svg-icons";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import { useSession } from "next-auth/react";
|
import { useSession } from "next-auth/react";
|
||||||
import {
|
import {
|
||||||
pdfAvailable,
|
pdfAvailable,
|
||||||
|
readabilityAvailable,
|
||||||
screenshotAvailable,
|
screenshotAvailable,
|
||||||
} from "@/lib/shared/getArchiveValidity";
|
} from "@/lib/shared/getArchiveValidity";
|
||||||
|
|
||||||
|
|
@ -30,7 +35,7 @@ type Props = {
|
||||||
|
|
||||||
export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
|
export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
|
||||||
const session = useSession();
|
const session = useSession();
|
||||||
const { links, getLink } = useLinkStore();
|
const { getLink } = useLinkStore();
|
||||||
|
|
||||||
const [link, setLink] =
|
const [link, setLink] =
|
||||||
useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
|
useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
|
||||||
|
|
@ -110,9 +115,54 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
|
||||||
<Modal toggleModal={onClose}>
|
<Modal toggleModal={onClose}>
|
||||||
<p className="text-xl font-thin">Preserved Formats</p>
|
<p className="text-xl font-thin">Preserved Formats</p>
|
||||||
|
|
||||||
<div className="divider mb-3 mt-1"></div>
|
<div className="divider mb-2 mt-1"></div>
|
||||||
|
|
||||||
|
{screenshotAvailable(link) ||
|
||||||
|
pdfAvailable(link) ||
|
||||||
|
readabilityAvailable(link) ? (
|
||||||
|
<p className="mb-3">
|
||||||
|
The following formats are available for this link:
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className="mb-3">No preserved formats available.</p>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className={`flex flex-col gap-3`}>
|
<div className={`flex flex-col gap-3`}>
|
||||||
|
{readabilityAvailable(link) ? (
|
||||||
|
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
|
||||||
|
<div className="flex gap-2 items-center">
|
||||||
|
<div className="bg-primary text-primary-content p-2 rounded-l-md">
|
||||||
|
<FontAwesomeIcon icon={faFileLines} className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Readable</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{/* <div
|
||||||
|
onClick={() => handleDownload(ArchivedFormat.pdf)}
|
||||||
|
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={faCloudArrowDown}
|
||||||
|
className="w-5 h-5 cursor-pointer text-neutral"
|
||||||
|
/>
|
||||||
|
</div> */}
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href={`/preserved/${link?.id}?format=${ArchivedFormat.readability}`}
|
||||||
|
target="_blank"
|
||||||
|
className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={faArrowUpRightFromSquare}
|
||||||
|
className="w-5 h-5 text-neutral"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : undefined}
|
||||||
|
|
||||||
{screenshotAvailable(link) ? (
|
{screenshotAvailable(link) ? (
|
||||||
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
|
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
|
||||||
<div className="flex gap-2 items-center">
|
<div className="flex gap-2 items-center">
|
||||||
|
|
@ -152,7 +202,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
|
||||||
</div>
|
</div>
|
||||||
) : undefined}
|
) : undefined}
|
||||||
|
|
||||||
{link?.pdfPath && link.pdfPath !== "pending" ? (
|
{pdfAvailable(link) ? (
|
||||||
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
|
<div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
|
||||||
<div className="flex gap-2 items-center">
|
<div className="flex gap-2 items-center">
|
||||||
<div className="bg-primary text-primary-content p-2 rounded-l-md">
|
<div className="bg-primary text-primary-content p-2 rounded-l-md">
|
||||||
|
|
@ -191,7 +241,11 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
|
||||||
{link?.collection.ownerId === session.data?.user.id ? (
|
{link?.collection.ownerId === session.data?.user.id ? (
|
||||||
<div
|
<div
|
||||||
className={`btn btn-accent w-1/2 dark:border-violet-400 text-white ${
|
className={`btn btn-accent w-1/2 dark:border-violet-400 text-white ${
|
||||||
screenshotAvailable(link) && pdfAvailable(link) ? "mt-3" : ""
|
screenshotAvailable(link) &&
|
||||||
|
pdfAvailable(link) &&
|
||||||
|
readabilityAvailable(link)
|
||||||
|
? "mt-3"
|
||||||
|
: ""
|
||||||
}`}
|
}`}
|
||||||
onClick={() => updateArchive()}
|
onClick={() => updateArchive()}
|
||||||
>
|
>
|
||||||
|
|
@ -208,11 +262,15 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
|
||||||
)}`}
|
)}`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className={`text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm ${
|
className={`text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm ${
|
||||||
screenshotAvailable(link) && pdfAvailable(link) ? "sm:mt-3" : ""
|
screenshotAvailable(link) &&
|
||||||
|
pdfAvailable(link) &&
|
||||||
|
readabilityAvailable(link)
|
||||||
|
? "sm:mt-3"
|
||||||
|
: ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<p className="whitespace-nowrap">
|
<p className="whitespace-nowrap">
|
||||||
View Latest Snapshot on archive.org
|
View latest snapshot on archive.org
|
||||||
</p>
|
</p>
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={faArrowUpRightFromSquare}
|
icon={faArrowUpRightFromSquare}
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ export default function NoLinksFound({ text }: Props) {
|
||||||
<div className="w-full h-full flex flex-col justify-center p-3">
|
<div className="w-full h-full flex flex-col justify-center p-3">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
className="w-1/4 min-w-[7rem] max-w-[15rem] h-auto mx-auto mb-5"
|
className="w-1/4 min-w-[7rem] max-w-[15rem] h-auto mx-auto mb-5 text-primary drop-shadow"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
viewBox="0 0 16 16"
|
viewBox="0 0 16 16"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,6 @@ import { JSDOM } from "jsdom";
|
||||||
import DOMPurify from "dompurify";
|
import DOMPurify from "dompurify";
|
||||||
import { Collection, Link, User } from "@prisma/client";
|
import { Collection, Link, User } from "@prisma/client";
|
||||||
import validateUrlSize from "./validateUrlSize";
|
import validateUrlSize from "./validateUrlSize";
|
||||||
import {
|
|
||||||
pdfAvailable,
|
|
||||||
readabilityAvailable,
|
|
||||||
screenshotAvailable,
|
|
||||||
} from "../shared/getArchiveValidity";
|
|
||||||
|
|
||||||
type LinksAndCollectionAndOwner = Link & {
|
type LinksAndCollectionAndOwner = Link & {
|
||||||
collection: Collection & {
|
collection: Collection & {
|
||||||
|
|
@ -174,23 +169,15 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
|
||||||
await prisma.link.update({
|
await prisma.link.update({
|
||||||
where: { id: link.id },
|
where: { id: link.id },
|
||||||
data: {
|
data: {
|
||||||
readabilityPath:
|
readabilityPath: !finalLink.readabilityPath?.startsWith("archives")
|
||||||
!finalLink.textContent ||
|
? "unavailable"
|
||||||
finalLink.textContent === "" ||
|
: undefined,
|
||||||
!readabilityAvailable(finalLink) ||
|
screenshotPath: !finalLink.screenshotPath?.startsWith("archives")
|
||||||
finalLink.type !== "url"
|
? "unavailable"
|
||||||
? "unavailable"
|
: undefined,
|
||||||
: undefined,
|
pdfPath: !finalLink.pdfPath?.startsWith("archives")
|
||||||
screenshotPath:
|
? "unavailable"
|
||||||
!screenshotAvailable(finalLink) ||
|
: undefined,
|
||||||
(finalLink.type !== "url" && finalLink.type !== "pdf")
|
|
||||||
? "unavailable"
|
|
||||||
: undefined,
|
|
||||||
pdfPath:
|
|
||||||
!pdfAvailable(finalLink) ||
|
|
||||||
(finalLink.type !== "url" && finalLink.type !== "image")
|
|
||||||
? "unavailable"
|
|
||||||
: undefined,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
import { prisma } from "@/lib/api/db";
|
|
||||||
import createFile from "@/lib/api/storage/createFile";
|
|
||||||
import fs from "fs";
|
|
||||||
import path from "path";
|
|
||||||
|
|
||||||
export default async function imageHandler(
|
|
||||||
linkId: number,
|
|
||||||
url: string | null,
|
|
||||||
extension: string,
|
|
||||||
file?: string
|
|
||||||
) {
|
|
||||||
const image = await fetch(url as string).then((res) => res.blob());
|
|
||||||
|
|
||||||
const buffer = Buffer.from(await image.arrayBuffer());
|
|
||||||
|
|
||||||
const linkExists = await prisma.link.findUnique({
|
|
||||||
where: { id: linkId },
|
|
||||||
});
|
|
||||||
|
|
||||||
linkExists
|
|
||||||
? await createFile({
|
|
||||||
data: buffer,
|
|
||||||
filePath: `archives/${linkExists.collectionId}/${linkId}.${extension}`,
|
|
||||||
})
|
|
||||||
: undefined;
|
|
||||||
|
|
||||||
await prisma.link.update({
|
|
||||||
where: { id: linkId },
|
|
||||||
data: {
|
|
||||||
screenshotPath: linkExists
|
|
||||||
? `archives/${linkExists.collectionId}/${linkId}.${extension}`
|
|
||||||
: null,
|
|
||||||
pdfPath: null,
|
|
||||||
readabilityPath: null,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
import { prisma } from "@/lib/api/db";
|
|
||||||
import createFile from "@/lib/api/storage/createFile";
|
|
||||||
import fs from "fs";
|
|
||||||
import path from "path";
|
|
||||||
|
|
||||||
export default async function pdfHandler(
|
|
||||||
linkId: number,
|
|
||||||
url: string | null,
|
|
||||||
file?: string
|
|
||||||
) {
|
|
||||||
const targetLink = await prisma.link.update({
|
|
||||||
where: { id: linkId },
|
|
||||||
data: {
|
|
||||||
pdfPath: "pending",
|
|
||||||
lastPreserved: new Date().toISOString(),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const pdf = await fetch(url as string).then((res) => res.blob());
|
|
||||||
|
|
||||||
const buffer = Buffer.from(await pdf.arrayBuffer());
|
|
||||||
|
|
||||||
const linkExists = await prisma.link.findUnique({
|
|
||||||
where: { id: linkId },
|
|
||||||
});
|
|
||||||
|
|
||||||
linkExists
|
|
||||||
? await createFile({
|
|
||||||
data: buffer,
|
|
||||||
filePath: `archives/${linkExists.collectionId}/${linkId}.pdf`,
|
|
||||||
})
|
|
||||||
: undefined;
|
|
||||||
|
|
||||||
await prisma.link.update({
|
|
||||||
where: { id: linkId },
|
|
||||||
data: {
|
|
||||||
pdfPath: linkExists
|
|
||||||
? `archives/${linkExists.collectionId}/${linkId}.pdf`
|
|
||||||
: null,
|
|
||||||
readabilityPath: null,
|
|
||||||
screenshotPath: null,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,303 +0,0 @@
|
||||||
import LinkLayout from "@/layouts/LinkLayout";
|
|
||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import Link from "next/link";
|
|
||||||
import useLinkStore from "@/store/links";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
import {
|
|
||||||
ArchivedFormat,
|
|
||||||
LinkIncludingShortenedCollectionAndTags,
|
|
||||||
} from "@/types/global";
|
|
||||||
import Image from "next/image";
|
|
||||||
import ColorThief, { RGBColor } from "colorthief";
|
|
||||||
import unescapeString from "@/lib/client/unescapeString";
|
|
||||||
import isValidUrl from "@/lib/shared/isValidUrl";
|
|
||||||
import DOMPurify from "dompurify";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import {
|
|
||||||
faBoxesStacked,
|
|
||||||
faFolder,
|
|
||||||
faLink,
|
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import useModalStore from "@/store/modals";
|
|
||||||
import { useSession } from "next-auth/react";
|
|
||||||
import useLocalSettingsStore from "@/store/localSettings";
|
|
||||||
import { readabilityAvailable } from "@/lib/shared/getArchiveValidity";
|
|
||||||
|
|
||||||
type LinkContent = {
|
|
||||||
title: string;
|
|
||||||
content: string;
|
|
||||||
textContent: string;
|
|
||||||
length: number;
|
|
||||||
excerpt: string;
|
|
||||||
byline: string;
|
|
||||||
dir: string;
|
|
||||||
siteName: string;
|
|
||||||
lang: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Index() {
|
|
||||||
const { links, getLink } = useLinkStore();
|
|
||||||
const { setModal } = useModalStore();
|
|
||||||
|
|
||||||
const { settings } = useLocalSettingsStore();
|
|
||||||
|
|
||||||
const session = useSession();
|
|
||||||
const userId = session.data?.user.id;
|
|
||||||
|
|
||||||
const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
|
|
||||||
const [linkContent, setLinkContent] = useState<LinkContent>();
|
|
||||||
const [imageError, setImageError] = useState<boolean>(false);
|
|
||||||
const [colorPalette, setColorPalette] = useState<RGBColor[]>();
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchLink = async () => {
|
|
||||||
if (router.query.id) {
|
|
||||||
await getLink(Number(router.query.id));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchLink();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
|
|
||||||
}, [links]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchLinkContent = async () => {
|
|
||||||
if (router.query.id && readabilityAvailable(link)) {
|
|
||||||
const response = await fetch(
|
|
||||||
`/api/v1/archives/${link?.id}?format=${ArchivedFormat.readability}`
|
|
||||||
);
|
|
||||||
|
|
||||||
const data = await response?.json();
|
|
||||||
|
|
||||||
setLinkContent(data);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchLinkContent();
|
|
||||||
}, [link]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let interval: any;
|
|
||||||
if (link?.readabilityPath === "pending") {
|
|
||||||
interval = setInterval(() => getLink(link.id as number), 5000);
|
|
||||||
} else {
|
|
||||||
if (interval) {
|
|
||||||
clearInterval(interval);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (interval) {
|
|
||||||
clearInterval(interval);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [link?.screenshotPath, link?.pdfPath, link?.readabilityPath]);
|
|
||||||
|
|
||||||
const colorThief = new ColorThief();
|
|
||||||
|
|
||||||
const rgbToHex = (r: number, g: number, b: number): string =>
|
|
||||||
"#" +
|
|
||||||
[r, g, b]
|
|
||||||
.map((x) => {
|
|
||||||
const hex = x.toString(16);
|
|
||||||
return hex.length === 1 ? "0" + hex : hex;
|
|
||||||
})
|
|
||||||
.join("");
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const banner = document.getElementById("link-banner");
|
|
||||||
const bannerInner = document.getElementById("link-banner-inner");
|
|
||||||
|
|
||||||
if (colorPalette && banner && bannerInner) {
|
|
||||||
if (colorPalette[0] && colorPalette[1]) {
|
|
||||||
banner.style.background = `linear-gradient(to bottom, ${rgbToHex(
|
|
||||||
colorPalette[0][0],
|
|
||||||
colorPalette[0][1],
|
|
||||||
colorPalette[0][2]
|
|
||||||
)}20, ${rgbToHex(
|
|
||||||
colorPalette[1][0],
|
|
||||||
colorPalette[1][1],
|
|
||||||
colorPalette[1][2]
|
|
||||||
)}20)`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (colorPalette[2] && colorPalette[3]) {
|
|
||||||
bannerInner.style.background = `linear-gradient(to bottom, ${rgbToHex(
|
|
||||||
colorPalette[2][0],
|
|
||||||
colorPalette[2][1],
|
|
||||||
colorPalette[2][2]
|
|
||||||
)}30, ${rgbToHex(
|
|
||||||
colorPalette[3][0],
|
|
||||||
colorPalette[3][1],
|
|
||||||
colorPalette[3][2]
|
|
||||||
)})30`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [colorPalette]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<LinkLayout>
|
|
||||||
<div className={`flex flex-col max-w-screen-md h-full`}>
|
|
||||||
<div
|
|
||||||
id="link-banner"
|
|
||||||
className="link-banner relative bg-opacity-10 border-neutral-content"
|
|
||||||
>
|
|
||||||
{/* <div id="link-banner-inner" className="link-banner-inner"></div> */}
|
|
||||||
|
|
||||||
<div className={`relative flex flex-col gap-3 items-start`}>
|
|
||||||
<div className="flex gap-3 items-start">
|
|
||||||
{!imageError && link?.url && (
|
|
||||||
<Image
|
|
||||||
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
|
|
||||||
width={42}
|
|
||||||
height={42}
|
|
||||||
alt=""
|
|
||||||
id={"favicon-" + link.id}
|
|
||||||
className="bg-white shadow rounded-md p-1 select-none mt-1"
|
|
||||||
draggable="false"
|
|
||||||
onLoad={(e) => {
|
|
||||||
try {
|
|
||||||
const color = colorThief.getPalette(
|
|
||||||
e.target as HTMLImageElement,
|
|
||||||
4
|
|
||||||
);
|
|
||||||
|
|
||||||
setColorPalette(color);
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onError={(e) => {
|
|
||||||
setImageError(true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<p className="text-xl">
|
|
||||||
{unescapeString(
|
|
||||||
link?.name || link?.description || link?.url || ""
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
{link?.url ? (
|
|
||||||
<Link
|
|
||||||
href={link?.url || ""}
|
|
||||||
title={link?.url}
|
|
||||||
target="_blank"
|
|
||||||
className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faLink} className="w-4 h-4" />
|
|
||||||
|
|
||||||
{isValidUrl(link?.url || "")
|
|
||||||
? new URL(link?.url as string).host
|
|
||||||
: undefined}
|
|
||||||
</Link>
|
|
||||||
) : undefined}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-1 items-center flex-wrap">
|
|
||||||
<Link
|
|
||||||
href={`/collections/${link?.collection.id}`}
|
|
||||||
className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faFolder}
|
|
||||||
className="w-5 h-5 drop-shadow"
|
|
||||||
style={{ color: link?.collection.color }}
|
|
||||||
/>
|
|
||||||
<p
|
|
||||||
title={link?.collection.name}
|
|
||||||
className="text-lg truncate max-w-[12rem]"
|
|
||||||
>
|
|
||||||
{link?.collection.name}
|
|
||||||
</p>
|
|
||||||
</Link>
|
|
||||||
{link?.tags.map((e, i) => (
|
|
||||||
<Link key={i} href={`/tags/${e.id}`} className="z-10">
|
|
||||||
<p
|
|
||||||
title={e.name}
|
|
||||||
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
|
|
||||||
>
|
|
||||||
#{e.name}
|
|
||||||
</p>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="min-w-fit text-sm text-neutral">
|
|
||||||
{link?.createdAt
|
|
||||||
? new Date(link?.createdAt).toLocaleString("en-US", {
|
|
||||||
year: "numeric",
|
|
||||||
month: "long",
|
|
||||||
day: "numeric",
|
|
||||||
})
|
|
||||||
: undefined}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{link?.name ? (
|
|
||||||
<p>{unescapeString(link?.description)}</p>
|
|
||||||
) : undefined}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="divider"></div>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-5 h-full">
|
|
||||||
{link?.readabilityPath?.startsWith("archives") ? (
|
|
||||||
<div
|
|
||||||
className="line-break px-1 reader-view"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: DOMPurify.sanitize(linkContent?.content || "") || "",
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
) : (
|
|
||||||
<div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-base-200">
|
|
||||||
{link?.readabilityPath === "pending" ? (
|
|
||||||
<p className="text-center">
|
|
||||||
Generating readable format, please wait...
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<p className="text-center text-2xl">
|
|
||||||
There is no reader view for this webpage
|
|
||||||
</p>
|
|
||||||
<p className="text-center text-sm">
|
|
||||||
{link?.collection.ownerId === userId
|
|
||||||
? "You can update (refetch) the preserved formats by managing them below"
|
|
||||||
: "The collections owners can refetch the preserved formats"}
|
|
||||||
</p>
|
|
||||||
{link?.collection.ownerId === userId ? (
|
|
||||||
<div
|
|
||||||
onClick={() =>
|
|
||||||
link
|
|
||||||
? setModal({
|
|
||||||
modal: "LINK",
|
|
||||||
state: true,
|
|
||||||
active: link,
|
|
||||||
method: "FORMATS",
|
|
||||||
})
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
className="mt-4 flex gap-2 w-fit mx-auto relative items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-md dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faBoxesStacked}
|
|
||||||
className="w-5 h-5 duration-100"
|
|
||||||
/>
|
|
||||||
<p>Manage preserved formats</p>
|
|
||||||
</div>
|
|
||||||
) : undefined}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</LinkLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,298 @@
|
||||||
|
import LinkLayout from "@/layouts/LinkLayout";
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import useLinkStore from "@/store/links";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import {
|
||||||
|
ArchivedFormat,
|
||||||
|
LinkIncludingShortenedCollectionAndTags,
|
||||||
|
} from "@/types/global";
|
||||||
|
import Image from "next/image";
|
||||||
|
import ColorThief, { RGBColor } from "colorthief";
|
||||||
|
import unescapeString from "@/lib/client/unescapeString";
|
||||||
|
import isValidUrl from "@/lib/shared/isValidUrl";
|
||||||
|
import DOMPurify from "dompurify";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import useModalStore from "@/store/modals";
|
||||||
|
import { useSession } from "next-auth/react";
|
||||||
|
import useLocalSettingsStore from "@/store/localSettings";
|
||||||
|
import { readabilityAvailable } from "@/lib/shared/getArchiveValidity";
|
||||||
|
|
||||||
|
type LinkContent = {
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
textContent: string;
|
||||||
|
length: number;
|
||||||
|
excerpt: string;
|
||||||
|
byline: string;
|
||||||
|
dir: string;
|
||||||
|
siteName: string;
|
||||||
|
lang: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Index() {
|
||||||
|
const { links, getLink } = useLinkStore();
|
||||||
|
const { setModal } = useModalStore();
|
||||||
|
|
||||||
|
const { settings } = useLocalSettingsStore();
|
||||||
|
|
||||||
|
const session = useSession();
|
||||||
|
const userId = session.data?.user.id;
|
||||||
|
|
||||||
|
const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
|
||||||
|
const [linkContent, setLinkContent] = useState<LinkContent>();
|
||||||
|
const [imageError, setImageError] = useState<boolean>(false);
|
||||||
|
const [colorPalette, setColorPalette] = useState<RGBColor[]>();
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchLink = async () => {
|
||||||
|
if (router.query.id) {
|
||||||
|
await getLink(Number(router.query.id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchLink();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
|
||||||
|
}, [links]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchLinkContent = async () => {
|
||||||
|
if (router.query.id && readabilityAvailable(link)) {
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/v1/archives/${link?.id}?format=${ArchivedFormat.readability}`
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = await response?.json();
|
||||||
|
|
||||||
|
setLinkContent(data);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchLinkContent();
|
||||||
|
}, [link]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (link) getLink(link?.id as number);
|
||||||
|
|
||||||
|
let interval: any;
|
||||||
|
if (
|
||||||
|
link &&
|
||||||
|
(link?.screenshotPath === "pending" ||
|
||||||
|
link?.pdfPath === "pending" ||
|
||||||
|
link?.readabilityPath === "pending" ||
|
||||||
|
!link?.screenshotPath ||
|
||||||
|
!link?.pdfPath ||
|
||||||
|
!link?.readabilityPath)
|
||||||
|
) {
|
||||||
|
interval = setInterval(() => getLink(link.id as number), 5000);
|
||||||
|
} else {
|
||||||
|
if (interval) {
|
||||||
|
clearInterval(interval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (interval) {
|
||||||
|
clearInterval(interval);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [link?.screenshotPath, link?.pdfPath, link?.readabilityPath]);
|
||||||
|
|
||||||
|
const colorThief = new ColorThief();
|
||||||
|
|
||||||
|
const rgbToHex = (r: number, g: number, b: number): string =>
|
||||||
|
"#" +
|
||||||
|
[r, g, b]
|
||||||
|
.map((x) => {
|
||||||
|
const hex = x.toString(16);
|
||||||
|
return hex.length === 1 ? "0" + hex : hex;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const banner = document.getElementById("link-banner");
|
||||||
|
const bannerInner = document.getElementById("link-banner-inner");
|
||||||
|
|
||||||
|
if (colorPalette && banner && bannerInner) {
|
||||||
|
if (colorPalette[0] && colorPalette[1]) {
|
||||||
|
banner.style.background = `linear-gradient(to bottom, ${rgbToHex(
|
||||||
|
colorPalette[0][0],
|
||||||
|
colorPalette[0][1],
|
||||||
|
colorPalette[0][2]
|
||||||
|
)}20, ${rgbToHex(
|
||||||
|
colorPalette[1][0],
|
||||||
|
colorPalette[1][1],
|
||||||
|
colorPalette[1][2]
|
||||||
|
)}20)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (colorPalette[2] && colorPalette[3]) {
|
||||||
|
bannerInner.style.background = `linear-gradient(to bottom, ${rgbToHex(
|
||||||
|
colorPalette[2][0],
|
||||||
|
colorPalette[2][1],
|
||||||
|
colorPalette[2][2]
|
||||||
|
)}30, ${rgbToHex(
|
||||||
|
colorPalette[3][0],
|
||||||
|
colorPalette[3][1],
|
||||||
|
colorPalette[3][2]
|
||||||
|
)})30`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [colorPalette]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`flex flex-col max-w-screen-md h-full mx-auto py-5`}>
|
||||||
|
<div
|
||||||
|
id="link-banner"
|
||||||
|
className="link-banner relative bg-opacity-10 border-neutral-content p-3 border mb-3"
|
||||||
|
>
|
||||||
|
<div id="link-banner-inner" className="link-banner-inner"></div>
|
||||||
|
|
||||||
|
<div className={`relative flex flex-col gap-3 items-start`}>
|
||||||
|
<div className="flex gap-3 items-start">
|
||||||
|
{!imageError && link?.url && (
|
||||||
|
<Image
|
||||||
|
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
|
||||||
|
width={42}
|
||||||
|
height={42}
|
||||||
|
alt=""
|
||||||
|
id={"favicon-" + link.id}
|
||||||
|
className="bg-white shadow rounded-md p-1 select-none mt-1"
|
||||||
|
draggable="false"
|
||||||
|
onLoad={(e) => {
|
||||||
|
try {
|
||||||
|
const color = colorThief.getPalette(
|
||||||
|
e.target as HTMLImageElement,
|
||||||
|
4
|
||||||
|
);
|
||||||
|
|
||||||
|
setColorPalette(color);
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onError={(e) => {
|
||||||
|
setImageError(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<p className="text-xl">
|
||||||
|
{unescapeString(
|
||||||
|
link?.name || link?.description || link?.url || ""
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
{link?.url ? (
|
||||||
|
<Link
|
||||||
|
href={link?.url || ""}
|
||||||
|
title={link?.url}
|
||||||
|
target="_blank"
|
||||||
|
className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faLink} className="w-4 h-4" />
|
||||||
|
|
||||||
|
{isValidUrl(link?.url || "")
|
||||||
|
? new URL(link?.url as string).host
|
||||||
|
: undefined}
|
||||||
|
</Link>
|
||||||
|
) : undefined}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-1 items-center flex-wrap">
|
||||||
|
<Link
|
||||||
|
href={`/collections/${link?.collection.id}`}
|
||||||
|
className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={faFolder}
|
||||||
|
className="w-5 h-5 drop-shadow"
|
||||||
|
style={{ color: link?.collection.color }}
|
||||||
|
/>
|
||||||
|
<p
|
||||||
|
title={link?.collection.name}
|
||||||
|
className="text-lg truncate max-w-[12rem]"
|
||||||
|
>
|
||||||
|
{link?.collection.name}
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
{link?.tags.map((e, i) => (
|
||||||
|
<Link key={i} href={`/tags/${e.id}`} className="z-10">
|
||||||
|
<p
|
||||||
|
title={e.name}
|
||||||
|
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
|
||||||
|
>
|
||||||
|
#{e.name}
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="min-w-fit text-sm text-neutral">
|
||||||
|
{link?.createdAt
|
||||||
|
? new Date(link?.createdAt).toLocaleString("en-US", {
|
||||||
|
year: "numeric",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
})
|
||||||
|
: undefined}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{link?.name ? <p>{unescapeString(link?.description)}</p> : undefined}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-5 h-full">
|
||||||
|
{link && link.type === "url"
|
||||||
|
? DisplayReadable(link, linkContent)
|
||||||
|
: undefined}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const DisplayReadable = (
|
||||||
|
link: LinkIncludingShortenedCollectionAndTags,
|
||||||
|
linkContent?: LinkContent
|
||||||
|
) => {
|
||||||
|
return link.readabilityPath?.startsWith("archives") ? (
|
||||||
|
<div
|
||||||
|
className="line-break px-1 reader-view"
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: DOMPurify.sanitize(linkContent?.content || "") || "",
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className={`w-full h-full flex flex-col justify-center p-10 ${
|
||||||
|
link?.readabilityPath === "pending" || !link?.readabilityPath
|
||||||
|
? "skeleton"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
className="w-1/4 min-w-[7rem] max-w-[15rem] h-auto mx-auto mb-5"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.598.598 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.598.598 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.598.598 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535L7.733.063z" />
|
||||||
|
<path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z" />
|
||||||
|
</svg>
|
||||||
|
<p className="text-center text-2xl">
|
||||||
|
The Link preservation is currently in the queue
|
||||||
|
</p>
|
||||||
|
<p className="text-center text-lg mt-2">
|
||||||
|
Please check back later to see the result
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -1,299 +0,0 @@
|
||||||
import LinkLayout from "@/layouts/LinkLayout";
|
|
||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import Link from "next/link";
|
|
||||||
import useLinkStore from "@/store/links";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
import {
|
|
||||||
ArchivedFormat,
|
|
||||||
LinkIncludingShortenedCollectionAndTags,
|
|
||||||
} from "@/types/global";
|
|
||||||
import Image from "next/image";
|
|
||||||
import ColorThief, { RGBColor } from "colorthief";
|
|
||||||
import unescapeString from "@/lib/client/unescapeString";
|
|
||||||
import isValidUrl from "@/lib/shared/isValidUrl";
|
|
||||||
import DOMPurify from "dompurify";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { faBoxesStacked, faFolder } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import useModalStore from "@/store/modals";
|
|
||||||
import { useSession } from "next-auth/react";
|
|
||||||
import useLocalSettingsStore from "@/store/localSettings";
|
|
||||||
import { readabilityAvailable } from "@/lib/shared/getArchiveValidity";
|
|
||||||
|
|
||||||
type LinkContent = {
|
|
||||||
title: string;
|
|
||||||
content: string;
|
|
||||||
textContent: string;
|
|
||||||
length: number;
|
|
||||||
excerpt: string;
|
|
||||||
byline: string;
|
|
||||||
dir: string;
|
|
||||||
siteName: string;
|
|
||||||
lang: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Index() {
|
|
||||||
const { links, getLink } = useLinkStore();
|
|
||||||
const { setModal } = useModalStore();
|
|
||||||
|
|
||||||
const { settings } = useLocalSettingsStore();
|
|
||||||
|
|
||||||
const session = useSession();
|
|
||||||
const userId = session.data?.user.id;
|
|
||||||
|
|
||||||
const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
|
|
||||||
const [linkContent, setLinkContent] = useState<LinkContent>();
|
|
||||||
const [imageError, setImageError] = useState<boolean>(false);
|
|
||||||
const [colorPalette, setColorPalette] = useState<RGBColor[]>();
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchLink = async () => {
|
|
||||||
if (router.query.id) {
|
|
||||||
await getLink(Number(router.query.id), true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchLink();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
|
|
||||||
}, [links]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchLinkContent = async () => {
|
|
||||||
if (router.query.id && readabilityAvailable(link)) {
|
|
||||||
const response = await fetch(
|
|
||||||
`/api/v1/archives/${link?.id}?format=${ArchivedFormat.readability}`
|
|
||||||
);
|
|
||||||
|
|
||||||
const data = await response?.json();
|
|
||||||
|
|
||||||
setLinkContent(data);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchLinkContent();
|
|
||||||
}, [link]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let interval: any;
|
|
||||||
if (link?.readabilityPath === "pending") {
|
|
||||||
interval = setInterval(() => getLink(link.id as number, true), 5000);
|
|
||||||
} else {
|
|
||||||
if (interval) {
|
|
||||||
clearInterval(interval);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (interval) {
|
|
||||||
clearInterval(interval);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [link?.screenshotPath, link?.pdfPath, link?.readabilityPath]);
|
|
||||||
|
|
||||||
const colorThief = new ColorThief();
|
|
||||||
|
|
||||||
const rgbToHex = (r: number, g: number, b: number): string =>
|
|
||||||
"#" +
|
|
||||||
[r, g, b]
|
|
||||||
.map((x) => {
|
|
||||||
const hex = x.toString(16);
|
|
||||||
return hex.length === 1 ? "0" + hex : hex;
|
|
||||||
})
|
|
||||||
.join("");
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const banner = document.getElementById("link-banner");
|
|
||||||
const bannerInner = document.getElementById("link-banner-inner");
|
|
||||||
|
|
||||||
if (colorPalette && banner && bannerInner) {
|
|
||||||
if (colorPalette[0] && colorPalette[1]) {
|
|
||||||
banner.style.background = `linear-gradient(to right, ${rgbToHex(
|
|
||||||
colorPalette[0][0],
|
|
||||||
colorPalette[0][1],
|
|
||||||
colorPalette[0][2]
|
|
||||||
)}30, ${rgbToHex(
|
|
||||||
colorPalette[1][0],
|
|
||||||
colorPalette[1][1],
|
|
||||||
colorPalette[1][2]
|
|
||||||
)}30)`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (colorPalette[2] && colorPalette[3]) {
|
|
||||||
bannerInner.style.background = `linear-gradient(to left, ${rgbToHex(
|
|
||||||
colorPalette[2][0],
|
|
||||||
colorPalette[2][1],
|
|
||||||
colorPalette[2][2]
|
|
||||||
)}30, ${rgbToHex(
|
|
||||||
colorPalette[3][0],
|
|
||||||
colorPalette[3][1],
|
|
||||||
colorPalette[3][2]
|
|
||||||
)})30`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [colorPalette]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<LinkLayout>
|
|
||||||
<div
|
|
||||||
className={`flex flex-col max-w-screen-md h-full ${
|
|
||||||
settings.theme === "dark" ? "banner-dark-mode" : "banner-light-mode"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
id="link-banner"
|
|
||||||
className="link-banner p-5 mb-4 relative bg-opacity-10 border border-solid border-neutral-content shadow-md"
|
|
||||||
>
|
|
||||||
<div id="link-banner-inner" className="link-banner-inner"></div>
|
|
||||||
|
|
||||||
<div className={`relative flex flex-col gap-3 items-start`}>
|
|
||||||
<div className="flex gap-3 items-end">
|
|
||||||
{!imageError && link?.url && (
|
|
||||||
<Image
|
|
||||||
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
|
|
||||||
width={42}
|
|
||||||
height={42}
|
|
||||||
alt=""
|
|
||||||
id={"favicon-" + link.id}
|
|
||||||
className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-base-100 bg-base-100 aspect-square"
|
|
||||||
draggable="false"
|
|
||||||
onLoad={(e) => {
|
|
||||||
try {
|
|
||||||
const color = colorThief.getPalette(
|
|
||||||
e.target as HTMLImageElement,
|
|
||||||
4
|
|
||||||
);
|
|
||||||
|
|
||||||
setColorPalette(color);
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onError={(e) => {
|
|
||||||
setImageError(true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex gap-2 text-sm text-neutral">
|
|
||||||
<p className=" min-w-fit">
|
|
||||||
{link?.createdAt
|
|
||||||
? new Date(link?.createdAt).toLocaleString("en-US", {
|
|
||||||
year: "numeric",
|
|
||||||
month: "long",
|
|
||||||
day: "numeric",
|
|
||||||
})
|
|
||||||
: undefined}
|
|
||||||
</p>
|
|
||||||
{link?.url ? (
|
|
||||||
<>
|
|
||||||
<p>•</p>
|
|
||||||
<Link
|
|
||||||
href={link?.url || ""}
|
|
||||||
title={link?.url}
|
|
||||||
target="_blank"
|
|
||||||
className="hover:opacity-60 duration-100 break-all"
|
|
||||||
>
|
|
||||||
{isValidUrl(link?.url || "")
|
|
||||||
? new URL(link?.url as string).host
|
|
||||||
: undefined}
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
) : undefined}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<p className="capitalize text-2xl sm:text-3xl font-thin">
|
|
||||||
{unescapeString(link?.name || link?.description || "")}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex gap-1 items-center flex-wrap">
|
|
||||||
<Link
|
|
||||||
href={`/collections/${link?.collection?.id}`}
|
|
||||||
className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faFolder}
|
|
||||||
className="w-5 h-5 drop-shadow"
|
|
||||||
style={{ color: link?.collection?.color }}
|
|
||||||
/>
|
|
||||||
<p
|
|
||||||
title={link?.collection?.name}
|
|
||||||
className="text-lg truncate max-w-[12rem]"
|
|
||||||
>
|
|
||||||
{link?.collection?.name}
|
|
||||||
</p>
|
|
||||||
</Link>
|
|
||||||
{link?.tags.map((e, i) => (
|
|
||||||
<Link
|
|
||||||
key={i}
|
|
||||||
href={"/public/collections/20?q=" + e.name}
|
|
||||||
title={e.name}
|
|
||||||
className="z-10 btn btn-xs btn-ghost truncate max-w-[19rem]"
|
|
||||||
>
|
|
||||||
#{e.name}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-5 h-full">
|
|
||||||
{link?.readabilityPath?.startsWith("archives") ? (
|
|
||||||
<div
|
|
||||||
className="line-break px-3 reader-view"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: DOMPurify.sanitize(linkContent?.content || "") || "",
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
) : (
|
|
||||||
<div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-base-200">
|
|
||||||
{link?.readabilityPath === "pending" ? (
|
|
||||||
<p className="text-center">
|
|
||||||
Generating readable format, please wait...
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<p className="text-center text-2xl">
|
|
||||||
There is no reader view for this webpage
|
|
||||||
</p>
|
|
||||||
<p className="text-center text-sm">
|
|
||||||
{link?.collection?.ownerId === userId
|
|
||||||
? "You can update (refetch) the preserved formats by managing them below"
|
|
||||||
: "The collections owners can refetch the preserved formats"}
|
|
||||||
</p>
|
|
||||||
{link?.collection?.ownerId === userId ? (
|
|
||||||
<div
|
|
||||||
onClick={() =>
|
|
||||||
link
|
|
||||||
? setModal({
|
|
||||||
modal: "LINK",
|
|
||||||
state: true,
|
|
||||||
active: link,
|
|
||||||
method: "FORMATS",
|
|
||||||
})
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
className="mt-4 flex gap-2 w-fit mx-auto relative items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-md dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faBoxesStacked}
|
|
||||||
className="w-5 h-5 duration-100"
|
|
||||||
/>
|
|
||||||
<p>Manage preserved formats</p>
|
|
||||||
</div>
|
|
||||||
) : undefined}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</LinkLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Ŝarĝante…
Reference in New Issue