From 94a9e9757d9b4e41dedf969291d340239d59ce56 Mon Sep 17 00:00:00 2001 From: saicaca Date: Tue, 23 Apr 2024 02:57:38 +0800 Subject: [PATCH] feat: multiple custom favicons --- src/config.ts | 15 +++++++-------- src/constants/icon.ts | 37 +++++++++++++++++++++++++++++++++++++ src/layouts/Layout.astro | 22 +++++++++++----------- src/types/config.ts | 15 +++++++-------- 4 files changed, 62 insertions(+), 27 deletions(-) create mode 100644 src/constants/icon.ts diff --git a/src/config.ts b/src/config.ts index c84c012..8375a07 100644 --- a/src/config.ts +++ b/src/config.ts @@ -15,14 +15,13 @@ export const siteConfig: SiteConfig = { enable: false, src: 'assets/images/demo-banner.png', }, - favicon: { - enable: false, - size: '32x32', - src: { - light: '/favicon/favicon-light-32.png', - dark: '/favicon/favicon-dark-32.png', - } - }, + favicon: [ // Leave this array empty to use the default favicon + // { + // src: '/favicon/icon.png', // Path of the favicon, relative to the /public directory + // theme: 'light', // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode + // sizes: '32x32', // (Optional) Size of the favicon, set only if you have favicons of different sizes + // } + ] } export const navBarConfig: NavBarConfig = { diff --git a/src/constants/icon.ts b/src/constants/icon.ts new file mode 100644 index 0000000..f9571b8 --- /dev/null +++ b/src/constants/icon.ts @@ -0,0 +1,37 @@ +import type {Favicon} from "@/types/config.ts"; + +export const defaultFavicons: Favicon[] = [ + { + src: '/favicon/favicon-light-32.png', + theme: 'light', + sizes: '32x32', + }, { + src: '/favicon/favicon-light-128.png', + theme: 'light', + sizes: '128x128', + }, { + src: '/favicon/favicon-light-180.png', + theme: 'light', + sizes: '180x180', + }, { + src: '/favicon/favicon-light-192.png', + theme: 'light', + sizes: '192x192', + }, { + src: '/favicon/favicon-dark-32.png', + theme: 'dark', + sizes: '32x32', + }, { + src: '/favicon/favicon-dark-128.png', + theme: 'dark', + sizes: '128x128', + }, { + src: '/favicon/favicon-dark-180.png', + theme: 'dark', + sizes: '180x180', + }, { + src: '/favicon/favicon-dark-192.png', + theme: 'dark', + sizes: '192x192', + } +] \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 63598b1..79b8879 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -8,6 +8,8 @@ import ImageWrapper from "@components/misc/ImageWrapper.astro"; import {pathsEqual} from "@utils/url-utils"; import ConfigCarrier from "@components/ConfigCarrier.astro"; import {profileConfig, siteConfig} from "@/config"; +import {Favicon} from "../types/config"; +import {defaultFavicons} from "../constants/icon"; interface Props { title: string; @@ -54,7 +56,6 @@ if (!banner || typeof banner !== 'string' || banner.trim() === '') { banner = siteConfig.banner.src; const enableBanner = siteConfig.banner.enable; -const enableFavicon = siteConfig.favicon.enable; let pageTitle; if (title) { @@ -63,6 +64,8 @@ if (title) { pageTitle = `${siteConfig.title} - ${siteConfig.subtitle}`; } +const favicons: Favicon[] = siteConfig.favicon.length > 0 ? siteConfig.favicon : defaultFavicons + --- @@ -75,16 +78,13 @@ if (title) { - {enableFavicon ? - : - - - - - - - - } + {favicons.map(favicon => ( + + ))} diff --git a/src/types/config.ts b/src/types/config.ts index c068600..399d311 100644 --- a/src/types/config.ts +++ b/src/types/config.ts @@ -10,14 +10,13 @@ export type SiteConfig = { src: string } - favicon: { - enable: boolean - size: string - src: { - light: string - dark: string - } - } + favicon: Favicon[] +} + +export type Favicon = { + src: string, + theme?: 'light' | 'dark' + sizes?: string } export enum LinkPreset {