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

feat: add config for theme (light or dark)

Browse Source
This commit is contained in:
Ben Schlegel 2023-09-22 15:31:41 +02:00
parent 3887de1eca
commit 9297e34d97
No known key found for this signature in database
GPG Key ID: 8BDB8891C1575E22
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
quartz/components/Head.tsx
View File

@ -21,6 +21,7 @@ async function generateSocialImage(
fileName: string, fileName: string,
fontName: string, fontName: string,
cfg: GlobalConfiguration, cfg: GlobalConfiguration,
colorScheme: "lightMode" | "darkMode",
) { ) {
const font = (await getTtfFromGfont(fontName)) as ArrayBuffer const font = (await getTtfFromGfont(fontName)) as ArrayBuffer
const svg = await satori( const svg = await satori(
@ -41,14 +42,14 @@ async function generateSocialImage(
justifyContent: "center", justifyContent: "center",
height: "100%", height: "100%",
width: "100%", width: "100%",
backgroundColor: cfg.theme.colors.lightMode.light, backgroundColor: cfg.theme.colors[colorScheme].light,
flexDirection: "column", flexDirection: "column",
gap: "2.5rem", gap: "2.5rem",
}} }}
> >
<div <div
style={{ style={{
color: cfg.theme.colors.lightMode.dark, color: cfg.theme.colors[colorScheme].dark,
fontSize: 80, fontSize: 80,
}} }}
> >
@ -56,7 +57,7 @@ async function generateSocialImage(
</div> </div>
<div <div
style={{ style={{
color: cfg.theme.colors.lightMode.dark, color: cfg.theme.colors[colorScheme].dark,
fontSize: 42, fontSize: 42,
marginLeft: "10rem", marginLeft: "10rem",
marginRight: "10rem", marginRight: "10rem",
@ -71,7 +72,8 @@ async function generateSocialImage(
height: "100%", height: "100%",
width: "2vw", width: "2vw",
position: "absolute", position: "absolute",
backgroundColor: cfg.theme.colors.lightMode.tertiary, backgroundColor: cfg.theme.colors[colorScheme].secondary,
opacity: 0.85,
}} }}
/> />
</div>, </div>,
@ -118,7 +120,14 @@ export default (() => {
const title = fileData.frontmatter?.title ?? "Untitled" const title = fileData.frontmatter?.title ?? "Untitled"
const description = fileData.description?.trim() ?? "No description provided" const description = fileData.description?.trim() ?? "No description provided"
generateSocialImage(title, description, filePath as string, cfg.theme.typography.header, cfg) generateSocialImage(
title,
description,
filePath as string,
cfg.theme.typography.header,
cfg,
"lightMode",
)
if (!fs.existsSync(imageDir)) { if (!fs.existsSync(imageDir)) {
fs.mkdirSync(imageDir, { recursive: true }) fs.mkdirSync(imageDir, { recursive: true })
@ -132,7 +141,10 @@ export default (() => {
const iconPath = joinSegments(baseDir, "static/icon.png") const iconPath = joinSegments(baseDir, "static/icon.png")
// TODO: use default image if undefined // TODO: use default image if undefined
const ogImageDefaultPath = `https://${cfg.baseUrl}/static/og-image.png` const ogImageDefaultPath = `https://${cfg.baseUrl}/static/og-image.png`
const ogImagePath = `https://${cfg.baseUrl}/static/${filePath}.${extension}` const ogImagePath = `https://${cfg.baseUrl}/${imageDir.replace(
"public/",
"",
)}/${filePath}.${extension}`
return ( return (
<head> <head>