From ce3a547112dd8d9e54d71c6239d01c58574a2a84 Mon Sep 17 00:00:00 2001 From: Sohum Mendon Date: Sun, 13 Oct 2024 17:37:44 -0700 Subject: [PATCH] feat(head): allow extra customization of favicons This commit adds a new "options" parameter into components/Head.tsx. Its design is inspired from the components/Footer.tsx. This allows us to: - Specify multiple icons. - Change the location of the icon's storage. - Signal the correct MIME type and, optionally, upload non-PNG files. This otherwise requires manual customization of components/Head.tsx. An example of configuration with this new parameter is in quartz.layout.ts. --- quartz.layout.ts | 6 +++++- quartz/components/Head.tsx | 19 ++++++++++++++++--- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/quartz.layout.ts b/quartz.layout.ts index 4a78256aa..81203ec2d 100644 --- a/quartz.layout.ts +++ b/quartz.layout.ts @@ -3,7 +3,11 @@ import * as Component from "./quartz/components" // components shared across all pages export const sharedPageComponents: SharedLayout = { - head: Component.Head(), + head: Component.Head({ + favicons: [ + { path: "static/icon.png", size: "200x200", mime: "image/png" } + ] + }), header: [], afterBody: [], footer: Component.Footer({ diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx index 90e338730..aa0194fe9 100644 --- a/quartz/components/Head.tsx +++ b/quartz/components/Head.tsx @@ -4,7 +4,17 @@ import { JSResourceToScriptElement } from "../util/resources" import { googleFontHref } from "../util/theme" import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" -export default (() => { +interface Favicon { + path: string + size?: string + mime?: string +} + +interface Options { + favicons?: Favicon[] +} + +export default ((opts?: Options) => { const Head: QuartzComponent = ({ cfg, fileData, externalResources }: QuartzComponentProps) => { const titleSuffix = cfg.pageTitleSuffix ?? "" const title = @@ -17,9 +27,10 @@ export default (() => { const path = url.pathname as FullSlug const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!) - const iconPath = joinSegments(baseDir, "static/icon.png") const ogImagePath = `https://${cfg.baseUrl}/static/og-image.png` + const icons = opts?.favicons ?? [] + return ( {title} @@ -37,7 +48,9 @@ export default (() => { {cfg.baseUrl && } - + {icons.map(({ path, size, mime }) => ( + + ))} {css.map((href) => (