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,
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 = {

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 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
---
<!DOCTYPE html>
@ -75,16 +78,13 @@ if (title) {
<meta name="description" content={description || pageTitle}>
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
{enableFavicon ? <link rel="icon" media="(prefers-color-scheme: light)" href={siteConfig.favicon.src.light} sizes={siteConfig.favicon.size}>
<link rel="icon" media="(prefers-color-scheme: dark)" href={siteConfig.favicon.src.dark}> :
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-32.png" sizes="32x32">
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-128.png" sizes="128x128">
<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-180.png" sizes="180x180">
<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">}
{favicons.map(favicon => (
<link rel="icon"
href={favicon.src}
sizes={favicon.sizes}
media={favicon.theme && `(prefers-color-scheme: ${favicon.theme})`}
/>
))}
<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
}
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 {