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(image-generator): add new default template

Browse Source
This commit is contained in:
Ben Schlegel 2024-08-29 15:11:48 +02:00
parent 29dc28d544
commit 75cf749fb0
1 changed files with 22 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
quartz/util/socialImage.tsx
View File

@ -26,45 +26,34 @@ export const defaultImage: SocialImageOptions["imageStructure"] = (
<div <div
style={{ style={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "column",
justifyContent: "flex-start",
alignItems: "center",
height: "100%",
width: "100%",
}}
>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center", justifyContent: "center",
alignItems: "center",
height: "100%", height: "100%",
width: "100%", width: "100%",
backgroundColor: cfg.theme.colors[colorScheme].light, backgroundColor: cfg.theme.colors[colorScheme].light,
flexDirection: "column", gap: "2rem",
gap: "2.5rem", paddingTop: "1.5rem",
paddingTop: "2rem", paddingBottom: "1.5rem",
paddingBottom: "2rem", paddingLeft: "5rem",
paddingRight: "5rem",
}} }}
> >
<div <div
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "flex-start",
height: "100%",
width: "100%", width: "100%",
gap: "2rem", flexDirection: "row",
gap: "2.5rem",
}} }}
> >
<img src={iconPath} width={200} height={200} /> <img src={iconPath} width={135} height={135} />
<p <p
style={{ style={{
color: cfg.theme.colors[colorScheme].dark, color: cfg.theme.colors[colorScheme].dark,
fontSize: useSmallerFont ? 70 : 82, fontSize: useSmallerFont ? 70 : 82,
marginLeft: "4rem",
textAlign: "center",
marginRight: "4rem",
fontFamily: fonts[0].name, fontFamily: fonts[0].name,
}} }}
> >
@ -75,8 +64,6 @@ export const defaultImage: SocialImageOptions["imageStructure"] = (
style={{ style={{
color: cfg.theme.colors[colorScheme].dark, color: cfg.theme.colors[colorScheme].dark,
fontSize: 44, fontSize: 44,
marginLeft: "8rem",
marginRight: "8rem",
lineClamp: 3, lineClamp: 3,
fontFamily: fonts[1].name, fontFamily: fonts[1].name,
}} }}
@ -84,15 +71,5 @@ export const defaultImage: SocialImageOptions["imageStructure"] = (
{description} {description}
</p> </p>
</div> </div>
<div
style={{
height: "100%",
width: "2vw",
position: "absolute",
backgroundColor: cfg.theme.colors[colorScheme].tertiary,
opacity: 0.85,
}}
/>
</div>
) )
} }