Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: multiple custom favicons

This commit is contained in:
saicaca 2024-04-23 02:57:38 +08:00 committed by saica.go
parent bd468054c2
commit 94a9e9757d
4 changed files with 62 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/config.ts
View File

@ -15,14 +15,13 @@ export const siteConfig: SiteConfig = {
enable: false, enable: false,
src: 'assets/images/demo-banner.png', src: 'assets/images/demo-banner.png',
}, },
favicon: { favicon: [ // Leave this array empty to use the default favicon
enable: false, // {
size: '32x32', // src: '/favicon/icon.png', // Path of the favicon, relative to the /public directory
src: { // theme: 'light', // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
light: '/favicon/favicon-light-32.png', // sizes: '32x32', // (Optional) Size of the favicon, set only if you have favicons of different sizes
dark: '/favicon/favicon-dark-32.png', // }
} ]
},
} }
export const navBarConfig: NavBarConfig = { export const navBarConfig: NavBarConfig = {

37
src/constants/icon.ts Normal file
View File

@ -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',
}
]

22
src/layouts/Layout.astro
View File

@ -8,6 +8,8 @@ import ImageWrapper from "@components/misc/ImageWrapper.astro";
import {pathsEqual} from "@utils/url-utils"; import {pathsEqual} from "@utils/url-utils";
import ConfigCarrier from "@components/ConfigCarrier.astro"; import ConfigCarrier from "@components/ConfigCarrier.astro";
import {profileConfig, siteConfig} from "@/config"; import {profileConfig, siteConfig} from "@/config";
import {Favicon} from "../types/config";
import {defaultFavicons} from "../constants/icon";
interface Props { interface Props {
title: string; title: string;
@ -54,7 +56,6 @@ if (!banner || typeof banner !== 'string' || banner.trim() === '') {
banner = siteConfig.banner.src; banner = siteConfig.banner.src;
const enableBanner = siteConfig.banner.enable; const enableBanner = siteConfig.banner.enable;
const enableFavicon = siteConfig.favicon.enable;
let pageTitle; let pageTitle;
if (title) { if (title) {
@ -63,6 +64,8 @@ if (title) {
pageTitle = `${siteConfig.title} - ${siteConfig.subtitle}`; pageTitle = `${siteConfig.title} - ${siteConfig.subtitle}`;
} }
const favicons: Favicon[] = siteConfig.favicon.length > 0 ? siteConfig.favicon : defaultFavicons
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@ -75,16 +78,13 @@ if (title) {
<meta name="description" content={description || pageTitle}> <meta name="description" content={description || pageTitle}>
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
{enableFavicon ? <link rel="icon" media="(prefers-color-scheme: light)" href={siteConfig.favicon.src.light} sizes={siteConfig.favicon.size}> {favicons.map(favicon => (
<link rel="icon" media="(prefers-color-scheme: dark)" href={siteConfig.favicon.src.dark}> : <link rel="icon"
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-32.png" sizes="32x32"> href={favicon.src}
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-128.png" sizes="128x128"> sizes={favicon.sizes}
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-180.png" sizes="180x180"> media={favicon.theme && `(prefers-color-scheme: ${favicon.theme})`}
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-192.png" sizes="192x192"> />
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon/favicon-dark-32.png" sizes="32x32"> ))}
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon/favicon-dark-128.png" sizes="128x128">
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon/favicon-dark-180.png" sizes="180x180">
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon/favicon-dark-192.png" sizes="192x192">}
<link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.9/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.9/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">

13
src/types/config.ts
View File

@ -10,14 +10,13 @@ export type SiteConfig = {
src: string src: string
} }
favicon: { favicon: Favicon[]
enable: boolean
size: string
src: {
light: string
dark: string
}
} }
export type Favicon = {
src: string,
theme?: 'light' | 'dark'
sizes?: string
} }
export enum LinkPreset { export enum LinkPreset {