smyalygames/quartz
Template
1
0
Fork 0
mirror of https://github.com/jackyzha0/quartz.git synced 2025-05-17 22:14:17 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

make og images look nice

Browse Source
This commit is contained in:
Jacky Zhao 2025-03-13 10:17:19 -07:00
parent de727b4686
commit 3173d185ed
1 changed files with 127 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
quartz/util/og.tsx
View File

@ -6,6 +6,8 @@ import { JSXInternal } from "preact/src/jsx"
import { FontSpecification, ThemeKey } from "./theme" import { FontSpecification, ThemeKey } from "./theme"
import path from "path" import path from "path"
import { QUARTZ } from "./path" import { QUARTZ } from "./path"
import { formatDate } from "../components/Date"
import { getDate } from "../components/Date"
const defaultHeaderWeight = [700] const defaultHeaderWeight = [700]
const defaultBodyWeight = [400] const defaultBodyWeight = [400]
@ -173,71 +175,92 @@ export const defaultImage: SocialImageOptions["imageStructure"] = (
fonts: SatoriOptions["fonts"], fonts: SatoriOptions["fonts"],
fileData: QuartzPluginData, fileData: QuartzPluginData,
) => { ) => {
const fontBreakPoint = 22 const fontBreakPoint = 32
const useSmallerFont = title.length > fontBreakPoint const useSmallerFont = title.length > fontBreakPoint
const iconPath = `https://${cfg.baseUrl}/static/icon.png` const iconPath = `https://${cfg.baseUrl}/static/icon.png`
// Format date if available
const rawDate = getDate(cfg, fileData)
const date = rawDate ? formatDate(rawDate, cfg.locale) : null
// Get tags if available
const tags = fileData.frontmatter?.tags ?? []
return ( return (
<div <div
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100%", height: "100%",
width: "100%", width: "100%",
backgroundColor: cfg.theme.colors[colorScheme].light, backgroundColor: cfg.theme.colors[colorScheme].light,
gap: "1rem", padding: "2.5rem",
padding: "3rem 3rem", fontFamily: fonts[1].name,
}} }}
> >
{/* Header Section */}
<div <div
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
width: "100%", gap: "1rem",
flexDirection: "row", marginBottom: "0.5rem",
gap: "2rem",
}} }}
> >
<img
src={iconPath}
width={56}
height={56}
style={{
borderRadius: "50%",
}}
/>
<div <div
style={{ style={{
display: "flex", display: "flex",
border: "1px solid red", fontSize: 32,
color: cfg.theme.colors[colorScheme].gray,
fontFamily: fonts[1].name,
}} }}
> >
<img src={iconPath} width={135} height={135} /> {cfg.baseUrl}
</div>
<div
style={{
display: "flex",
color: cfg.theme.colors[colorScheme].dark,
maxWidth: "80%",
}}
>
<h1
style={{
margin: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
fontSize: useSmallerFont ? 64 : 72,
fontFamily: fonts[0].name,
}}
>
{title}
</h1>
</div> </div>
</div> </div>
{/* Title Section */}
<div <div
style={{ style={{
display: "flex", display: "flex",
color: cfg.theme.colors[colorScheme].dark, marginTop: "1rem",
fontSize: 44, marginBottom: "1.5rem",
fontFamily: fonts[1].name, }}
maxWidth: "100%", >
maxHeight: "60%", <h1
overflow: "hidden", style={{
margin: 0,
fontSize: useSmallerFont ? 64 : 72,
fontFamily: fonts[0].name,
fontWeight: 700,
color: cfg.theme.colors[colorScheme].dark,
lineHeight: 1.2,
display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: 2,
overflow: "hidden",
}}
>
{title}
</h1>
</div>
{/* Description Section */}
<div
style={{
display: "flex",
flex: 1,
fontSize: 36,
color: cfg.theme.colors[colorScheme].darkgray,
lineHeight: 1.4,
}} }}
> >
<p <p
@ -245,14 +268,80 @@ export const defaultImage: SocialImageOptions["imageStructure"] = (
margin: 0, margin: 0,
display: "-webkit-box", display: "-webkit-box",
WebkitBoxOrient: "vertical", WebkitBoxOrient: "vertical",
WebkitLineClamp: 5, WebkitLineClamp: 4,
overflow: "hidden", overflow: "hidden",
textOverflow: "ellipsis",
}} }}
> >
{description} {description}
</p> </p>
</div> </div>
{/* Footer with Metadata */}
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginTop: "2rem",
paddingTop: "2rem",
borderTop: `1px solid ${cfg.theme.colors[colorScheme].lightgray}`,
}}
>
{/* Left side - Date */}
<div
style={{
display: "flex",
alignItems: "center",
color: cfg.theme.colors[colorScheme].gray,
fontSize: 28,
}}
>
{date && (
<div style={{ display: "flex", alignItems: "center" }}>
<svg
style={{ marginRight: "0.5rem" }}
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
{date}
</div>
)}
</div>
{/* Right side - Tags */}
<div
style={{
display: "flex",
gap: "0.5rem",
flexWrap: "wrap",
justifyContent: "flex-end",
maxWidth: "60%",
}}
>
{tags.slice(0, 3).map((tag: string) => (
<div
style={{
display: "flex",
padding: "0.5rem 1rem",
backgroundColor: cfg.theme.colors[colorScheme].highlight,
color: cfg.theme.colors[colorScheme].secondary,
borderRadius: "10px",
fontSize: 24,
}}
>
#{tag}
</div>
))}
</div>
</div>
</div> </div>
) )
} }