GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-24 15:05:42 -05: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 // components shared across all pages
export const sharedPageComponents: SharedLayout = { export const sharedPageComponents: SharedLayout = {
head: Component.Head(), head: Component.Head({
favicons: [
{ path: "static/icon.png", size: "200x200", mime: "image/png" }
]
}),
header: [], header: [],
afterBody: [], afterBody: [],
footer: Component.Footer({ 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 { googleFontHref } from "../util/theme"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" 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 Head: QuartzComponent = ({ cfg, fileData, externalResources }: QuartzComponentProps) => {
const titleSuffix = cfg.pageTitleSuffix ?? "" const titleSuffix = cfg.pageTitleSuffix ?? ""
const title = const title =
@ -17,9 +27,10 @@ export default (() => {
const path = url.pathname as FullSlug const path = url.pathname as FullSlug
const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!) 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 ogImagePath = `https://${cfg.baseUrl}/static/og-image.png`
const icons = opts?.favicons ?? []
return ( return (
<head> <head>
<title>{title}</title> <title>{title}</title>
@ -37,7 +48,9 @@ export default (() => {
{cfg.baseUrl && <meta property="og:image" content={ogImagePath} />} {cfg.baseUrl && <meta property="og:image" content={ogImagePath} />}
<meta property="og:width" content="1200" /> <meta property="og:width" content="1200" />
<meta property="og:height" content="675" /> <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="description" content={description} />
<meta name="generator" content="Quartz" /> <meta name="generator" content="Quartz" />
{css.map((href) => ( {css.map((href) => (