From f8ad08f5ed2f6abdecb362a3b6ff903660b0429d Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Fri, 15 Dec 2023 16:18:54 -0500 Subject: [PATCH] improvements --- components/ReadableView.tsx | 268 ++++++++++++++++++++++++++++++++++ pages/preserved/[id].tsx | 276 +----------------------------------- styles/globals.css | 1 - 3 files changed, 275 insertions(+), 270 deletions(-) create mode 100644 components/ReadableView.tsx diff --git a/components/ReadableView.tsx b/components/ReadableView.tsx new file mode 100644 index 0000000..57a7c02 --- /dev/null +++ b/components/ReadableView.tsx @@ -0,0 +1,268 @@ +import unescapeString from "@/lib/client/unescapeString"; +import { readabilityAvailable } from "@/lib/shared/getArchiveValidity"; +import isValidUrl from "@/lib/shared/isValidUrl"; +import useLinkStore from "@/store/links"; +import { + ArchivedFormat, + LinkIncludingShortenedCollectionAndTags, +} from "@/types/global"; +import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import ColorThief, { RGBColor } from "colorthief"; +import DOMPurify from "dompurify"; +import Image from "next/image"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import React, { useEffect, useState } from "react"; + +type LinkContent = { + title: string; + content: string; + textContent: string; + length: number; + excerpt: string; + byline: string; + dir: string; + siteName: string; + lang: string; +}; + +type Props = { + link: LinkIncludingShortenedCollectionAndTags; +}; + +export default function ReadableView({ link }: Props) { + const [linkContent, setLinkContent] = useState(); + const [imageError, setImageError] = useState(false); + const [colorPalette, setColorPalette] = useState(); + + const colorThief = new ColorThief(); + + const router = useRouter(); + + const { links, getLink } = useLinkStore(); + + 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 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 ( +
+ + +
+ {link?.readabilityPath?.startsWith("archives") ? ( +
+ ) : ( +
+ + + + +

+ The Link preservation is currently in the queue +

+

+ Please check back later to see the result +

+
+ )} +
+
+ ); +} diff --git a/pages/preserved/[id].tsx b/pages/preserved/[id].tsx index 6612950..4ce45db 100644 --- a/pages/preserved/[id].tsx +++ b/pages/preserved/[id].tsx @@ -1,49 +1,13 @@ -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; -}; +import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; +import ReadableView from "@/components/ReadableView"; 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(); - const [linkContent, setLinkContent] = useState(); - const [imageError, setImageError] = useState(false); - const [colorPalette, setColorPalette] = useState(); const router = useRouter(); @@ -61,238 +25,12 @@ export default function Index() { 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 ( -
- - -
- {link && link.type === "url" - ? DisplayReadable(link, linkContent) - : undefined} -
+
+ {/*
+ Readable +
*/} + {link && }
); } - -const DisplayReadable = ( - link: LinkIncludingShortenedCollectionAndTags, - linkContent?: LinkContent -) => { - return link.readabilityPath?.startsWith("archives") ? ( -
- ) : ( -
- - - - -

- The Link preservation is currently in the queue -

-

- Please check back later to see the result -

-
- ); -}; diff --git a/styles/globals.css b/styles/globals.css index 709ff19..35948bb 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -154,7 +154,6 @@ body { /* For the Link banner */ .link-banner { - z-index: 0; border-radius: 1rem; height: fit-content; }