GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-27 23:04:05 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(head): allow extra customization of favicons

Browse Source 
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.
This commit is contained in:
Sohum Mendon 2024-10-13 17:37:44 -07:00
parent 1dc208356a
commit ce3a547112
2 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
quartz.layout.ts
View File

@ -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({

19
quartz/components/Head.tsx
View File

@ -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 (
<head>
<title>{title}</title>
@ -37,7 +48,9 @@ export default (() => {
{cfg.baseUrl && <meta property="og:image" content={ogImagePath} />}
<meta property="og:width" content="1200" />
<meta property="og:height" content="675" />
<link rel="icon" href={iconPath} />
{icons.map(({ path, size, mime }) => (
<link rel="icon" href={joinSegments(baseDir, path)} sizes={size} type={mime} />
))}
<meta name="description" content={description} />
<meta name="generator" content="Quartz" />
{css.map((href) => (