| | |
| | | import { formatDate, getDate } from "../components/Date" |
| | | import readingTime from "reading-time" |
| | | import { i18n } from "../i18n" |
| | | import chalk from "chalk" |
| | | import { styleText } from "util" |
| | | |
| | | const defaultHeaderWeight = [700] |
| | | const defaultBodyWeight = [400] |
| | | |
| | | export async function getSatoriFonts(headerFont: FontSpecification, bodyFont: FontSpecification) { |
| | | // Get all weights for header and body fonts |
| | | const headerWeights: FontWeight[] = ( |
| | |
| | | |
| | | if (!match) { |
| | | console.log( |
| | | chalk.yellow( |
| | | styleText( |
| | | "yellow", |
| | | `\nWarning: Failed to fetch font ${rawFontName} with weight ${weight}, got ${cssResponse.statusText}`, |
| | | ), |
| | | ) |
| | |
| | | excludeRoot: boolean |
| | | /** |
| | | * JSX to use for generating image. See satori docs for more info (https://github.com/vercel/satori) |
| | | * @param cfg global quartz config |
| | | * @param userOpts options that can be set by user |
| | | * @param title title of current page |
| | | * @param description description of current page |
| | | * @param fonts global font that can be used for styling |
| | | * @param fileData full fileData of current page |
| | | * @returns prepared jsx to be used for generating image |
| | | */ |
| | | imageStructure: ( |
| | | cfg: GlobalConfiguration, |
| | | userOpts: UserOpts, |
| | | title: string, |
| | | description: string, |
| | | fonts: SatoriOptions["fonts"], |
| | | fileData: QuartzPluginData, |
| | | options: ImageOptions & { |
| | | userOpts: UserOpts |
| | | iconBase64?: string |
| | | }, |
| | | ) => JSXInternal.Element |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | // This is the default template for generated social image. |
| | | export const defaultImage: SocialImageOptions["imageStructure"] = ( |
| | | cfg: GlobalConfiguration, |
| | | { colorScheme }: UserOpts, |
| | | title: string, |
| | | description: string, |
| | | _fonts: SatoriOptions["fonts"], |
| | | fileData: QuartzPluginData, |
| | | ) => { |
| | | export const defaultImage: SocialImageOptions["imageStructure"] = ({ |
| | | cfg, |
| | | userOpts, |
| | | title, |
| | | description, |
| | | fileData, |
| | | iconBase64, |
| | | }) => { |
| | | const { colorScheme } = userOpts |
| | | const fontBreakPoint = 32 |
| | | const useSmallerFont = title.length > fontBreakPoint |
| | | const iconPath = `https://${cfg.baseUrl}/static/icon.png` |
| | | |
| | | // Format date if available |
| | | const rawDate = getDate(cfg, fileData) |
| | |
| | | marginBottom: "0.5rem", |
| | | }} |
| | | > |
| | | <img |
| | | src={iconPath} |
| | | width={56} |
| | | height={56} |
| | | style={{ |
| | | borderRadius: "50%", |
| | | }} |
| | | /> |
| | | {iconBase64 && ( |
| | | <img |
| | | src={iconBase64} |
| | | width={56} |
| | | height={56} |
| | | style={{ |
| | | borderRadius: "50%", |
| | | }} |
| | | /> |
| | | )} |
| | | <div |
| | | style={{ |
| | | display: "flex", |
| | |
| | | WebkitBoxOrient: "vertical", |
| | | WebkitLineClamp: 2, |
| | | overflow: "hidden", |
| | | textOverflow: "ellipsis", |
| | | }} |
| | | > |
| | | {title} |
| | |
| | | margin: 0, |
| | | display: "-webkit-box", |
| | | WebkitBoxOrient: "vertical", |
| | | WebkitLineClamp: 4, |
| | | WebkitLineClamp: 5, |
| | | overflow: "hidden", |
| | | textOverflow: "ellipsis", |
| | | }} |
| | | > |
| | | {description} |