aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-04 12:26:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: get url favicon from google s2

Browse Source
This commit is contained in:
Steven
2023-09-29 19:37:44 +08:00
parent 010271c668
commit 8cd976791e
12 changed files with 84 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/web/src/components/ShortcutCard.tsx
View File

@ -1,12 +1,10 @@
import { Tooltip } from "@mui/joy";
import classNames from "classnames";
import copy from "copy-to-clipboard";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { absolutifyLink } from "../helpers/utils";
import useFaviconStore from "../stores/v1/favicon";
import { absolutifyLink, getFaviconWithGoogleS2 } from "../helpers/utils";
import useViewStore from "../stores/v1/view";
import Icon from "./Icon";
import ShortcutActionsDropdown from "./ShortcutActionsDropdown";
@ -20,17 +18,8 @@ const ShortcutView = (props: Props) => {
const { shortcut } = props;
const { t } = useTranslation();
const viewStore = useViewStore();
const faviconStore = useFaviconStore();
const [favicon, setFavicon] = useState<string | undefined>(undefined);
const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
useEffect(() => {
faviconStore.getOrFetchUrlFavicon(shortcut.link).then((url) => {
if (url) {
setFavicon(url);
}
});
}, [shortcut.link]);
const favicon = getFaviconWithGoogleS2(shortcut.link);
const handleCopyButtonClick = () => {
copy(shortcutLink);

15
frontend/web/src/components/ShortcutView.tsx
View File

@ -1,8 +1,6 @@
import classNames from "classnames";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { absolutifyLink } from "../helpers/utils";
import useFaviconStore from "../stores/v1/favicon";
import { absolutifyLink, getFaviconWithGoogleS2 } from "../helpers/utils";
import Icon from "./Icon";
import ShortcutActionsDropdown from "./ShortcutActionsDropdown";
@ -12,17 +10,8 @@ interface Props {
const ShortcutView = (props: Props) => {
const { shortcut } = props;
const faviconStore = useFaviconStore();
const [favicon, setFavicon] = useState<string | undefined>(undefined);
const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
useEffect(() => {
faviconStore.getOrFetchUrlFavicon(shortcut.link).then((url) => {
if (url) {
setFavicon(url);
}
});
}, [shortcut.link]);
const favicon = getFaviconWithGoogleS2(shortcut.link);
return (
<>

4
frontend/web/src/helpers/api.ts
View File

@ -71,7 +71,3 @@ export function patchShortcut(shortcutPatch: ShortcutPatch) {
export function deleteShortcutById(shortcutId: ShortcutId) {
return axios.delete(`/api/v1/shortcut/${shortcutId}`);
}
export function getUrlFavicon(url: string) {
return axios.get<string>(`/api/v1/url/favicon?url=${url}`);
}

9
frontend/web/src/helpers/utils.ts
View File

@ -13,3 +13,12 @@ export const absolutifyLink = (rel: string): string => {
export const releaseGuard = () => {
return import.meta.env.MODE === "development";
};
export const getFaviconWithGoogleS2 = (url: string) => {
try {
const urlObject = new URL(url);
return `https://www.google.com/s2/favicons?sz=128&domain=${urlObject.hostname}`;
} catch (error) {
return undefined;
}
};

16
frontend/web/src/pages/ShortcutDetail.tsx
View File

@ -1,7 +1,7 @@
import { Tooltip } from "@mui/joy";
import classNames from "classnames";
import copy from "copy-to-clipboard";
import { useEffect, useState } from "react";
import { useState } from "react";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { useLoaderData } from "react-router-dom";
@ -13,9 +13,8 @@ import GenerateQRCodeDialog from "../components/GenerateQRCodeDialog";
import Icon from "../components/Icon";
import VisibilityIcon from "../components/VisibilityIcon";
import Dropdown from "../components/common/Dropdown";
import { absolutifyLink } from "../helpers/utils";
import { absolutifyLink, getFaviconWithGoogleS2 } from "../helpers/utils";
import { shortcutService } from "../services";
import useFaviconStore from "../stores/v1/favicon";
import useUserStore from "../stores/v1/user";
interface State {
@ -28,22 +27,13 @@ const ShortcutDetail = () => {
const shortcutId = (useLoaderData() as Shortcut).id;
const shortcut = shortcutService.getShortcutById(shortcutId) as Shortcut;
const currentUser = useUserStore().getCurrentUser();
const faviconStore = useFaviconStore();
const [state, setState] = useState<State>({
showEditModal: false,
});
const [favicon, setFavicon] = useState<string | undefined>(undefined);
const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
useEffect(() => {
faviconStore.getOrFetchUrlFavicon(shortcut.link).then((url) => {
if (url) {
setFavicon(url);
}
});
}, [shortcut.link]);
const favicon = getFaviconWithGoogleS2(shortcut.link);
const handleCopyButtonClick = () => {
copy(shortcutLink);

41
frontend/web/src/stores/v1/favicon.ts
View File

@ -1,41 +0,0 @@
import { create } from "zustand";
import { persist } from "zustand/middleware";
import * as api from "../../helpers/api";
interface FaviconState {
cache: {
[key: string]: string;
};
getOrFetchUrlFavicon: (url: string) => Promise<string>;
}
const useFaviconStore = create<FaviconState>()(
persist(
(set, get) => ({
cache: {},
getOrFetchUrlFavicon: async (url: string) => {
const cache = get().cache;
if (cache[url]) {
return cache[url];
}
try {
const { data: favicon } = await api.getUrlFavicon(url);
if (favicon) {
cache[url] = favicon;
set(cache);
return favicon;
}
} catch (error) {
// do nothing
}
return "";
},
}),
{
name: "favicon_cache",
}
)
);
export default useFaviconStore;