feat(open-graph): generate OG images + further OG support (#740)
* Quartz sync: Aug 29, 2023, 10:17 PM * feat: add basic satori og image generation * Squashed commit of the following: commitfa69c2a565Author: Ben Schlegel <31989404+benschlegel@users.noreply.github.com> Date: Thu Sep 21 19:35:11 2023 +0200 fix(explorer): increase consistency, explicitly use font-family (#496) * fix(explorer): display name for folders without `index` file * docs(explorer): add section for folder display names * docs(explorer): fix broken wikilink * fix(consistency): explicitly set font + label/link fix Use consistent styling between folders with `folderClickBehavior: "link"` and `"collapse` * Update quartz/components/styles/explorer.scss Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Update quartz/components/styles/explorer.scss Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> commit8eb1554b13Author: Ben Schlegel <31989404+benschlegel@users.noreply.github.com> Date: Thu Sep 21 18:54:33 2023 +0200 fix(explorer): display names for folders without frontmatter (#494) * fix(explorer): display name for folders without `index` file * docs(explorer): add section for folder display names commitdcdeae4e7bAuthor: Ben Schlegel <31989404+benschlegel@users.noreply.github.com> Date: Thu Sep 21 18:53:19 2023 +0200 docs(explorer): update default config + new example (#493) commit48452231d5Author: Jacky Zhao <j.zhao2k19@gmail.com> Date: Wed Sep 20 16:09:18 2023 -0700 perf: memoize filetree computation (#490) * perf: memoize filetree computation * format * var -> let commit16d33fb771Author: Jacky Zhao <j.zhao2k19@gmail.com> Date: Wed Sep 20 16:08:54 2023 -0700 feat: display name for folders, expand explorer a little bit (#489) * feat: display name for folders, expand explorer a little bit * update docs commitb029eeadabAuthor: Ben Schlegel <31989404+benschlegel@users.noreply.github.com> Date: Wed Sep 20 22:55:29 2023 +0200 feat(explorer): improve accessibility and consistency (+ bug fix) (#488) * feat(consistency): use `all: unset` on button * style: improve accessibility and consistency for explorer * fix: localStorage bug with folder name changes * chore: bump quartz version commit6a9e6352e8Author: Jacky Zhao <j.zhao2k19@gmail.com> Date: Wed Sep 20 13:52:45 2023 -0700 Revert "feat: Making Quartz available offline by making it a PWA (#465)" This reverts commitd6301fae90. commit70e029d151Author: Jacky Zhao <j.zhao2k19@gmail.com> Date: Wed Sep 20 13:52:29 2023 -0700 Revert "docs: wording changes for offline support" This reverts commit52a172d1a4. commit0bad3ce799Author: Jacky Zhao <j.zhao2k19@gmail.com> Date: Wed Sep 20 11:58:52 2023 -0700 docs: document enableToc commit52a172d1a4Author: Jacky Zhao <j.zhao2k19@gmail.com> Date: Wed Sep 20 11:40:36 2023 -0700 docs: wording changes for offline support commitd6301fae90Author: Adam Brangenberg <adambrangenberg@proton.me> Date: Wed Sep 20 20:38:13 2023 +0200 feat: Making Quartz available offline by making it a PWA (#465) * Adding PWA and chaching for offline aviability * renamed workbox config to fit Quartz' scheme * Documenting new configuration * Added missig umami documentation * Fixed formatting so the build passes, thank you prettier :) * specified caching strategies to improve performance * formatting... * fixing "404 manifest.json not found" on subdirectories by adding a / to manifestpath * turning it into a plugin * Removed Workbox-cli and updated @types/node * Added Serviceworkercode to offline.ts * formatting * Removing workbox from docs * applied suggestions * Removed path.join for sw path Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Removed path.join for manifest path Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Removing path module import * Added absolute path to manifests start_url and manifest "import" using baseUrl * Adding protocol to baseurl Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Adding protocol to start_url too then * formatting... * Adding fallback page * Documenting offline plugin * formatting... * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * formatting... * Fixing manifest path, all these nits hiding the actual issues .-. * Offline fallback page through plugins, most things taken from 404 Plugin * adding Offline Plugin to config * formatting... * Turned offline off as default and removed offline.md --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> commit27a6087dd5Author: rwutscher <richard.wutscher@gmail.com> Date: Tue Sep 19 21:26:30 2023 +0200 fix: tag regex no longer includes purely numerical 'tags' (#485) * fix: tag regex no longer includes purely numerical 'tags' * fix: formatting * fix: use guard in findAndReplace() instead of expanding the regex commit1bf7e3d8b3Author: Jacky Zhao <j.zhao2k19@gmail.com> Date: Tue Sep 19 10:22:39 2023 -0700 fix(nit): make defaultOptions on explorer not a function commitcc31a40b0cAuthor: David Fischer <david@konst.fish> Date: Tue Sep 19 18:25:51 2023 +0200 feat: support changes in system theme (#484) * feat: support changes in system theme * fix: run prettier * fix: add content/.gitkeep commit0d3cf29226Author: Ben Schlegel <31989404+benschlegel@users.noreply.github.com> Date: Mon Sep 18 23:32:00 2023 +0200 docs: fix explorer example (#483) * feat: dynamically generate og images, write to fs as png * fix: og preview on discord * feat: use `sharp` to convert to webp, add content headers * feat: add config for theme (light or dark) * feat: improve image margins, add font breakpoint * feat: use config header + body fonts for satori * perf: memoize fonts * feat: use default og image if no path exists * feat: add config option for social images * feat: support custom og images via frontmatter * refactor: clean font helpers, rename fonts helper * refactor: make image generation cleaner * refactor: move default image to own component * chore: add todos * fix: only set width/height header if known * feat: remove html from description * feat: make image dimensions configurable * feat: pass userOpts to image generator * feat: option for users to provide own image struct (satori) This allows users to pass their own jsx for generating the default og image * refactor: rename `defaultImage.tsx` > `socialImage.tsx` * chore: improve comments + types * refactor: rename socialImage frontmatter property * feat: add frontmatter aliases for cover image * feat: add frontmatter alias for obsidian publish * docs: add documentation for social images * feat: add `generateSocialImages` prop to config * chore: update lock file * fix: fix type error * chore: update package.json * chore: update package-lock.json * docs: update docs Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * fix: clean url for use in metadata * refactor: clean function signature * feat: pass `fileData` to image generator * CI: run format * fix: file system import * fix: merge paths using `joinSegments` * fix: get output dir via `ctx.argv.output` * chore: add explanation to font regex * Squashed commit of the following: commit7164857f6eAuthor: Aaron Pham <29749331+aarnphm@users.noreply.github.com> Date: Fri Mar 15 21:17:42 2024 -0400 chore(ofm): remove unused (#999) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> commit47024022e8Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri Mar 15 18:29:14 2024 -0400 chore(deps-dev): bump @types/node from 20.11.24 to 20.11.25 (#990) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.11.24 to 20.11.25. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commitb98e4be665Author: Mara-Li <lili.simonetti@outlook.fr> Date: Fri Mar 15 23:28:31 2024 +0100 feat(i18n): Add French translation for reading time (#998) Signed-off-by: Mara-Li <lili.simonetti@outlook.fr> commit8be51a0504Author: catcodeme <1020082805@qq.com> Date: Fri Mar 15 14:25:01 2024 +0800 fix: wikiLink in table (#993) * fix: wikiLink in table - update regexp to make '\' to group in alias - handle alias using block_id * style: format with prettier * style: add comment for block_ref(without alias) in table --------- Co-authored-by: hulinjiang <hulinjiang@58.com> commit92cc23dc45Author: Linus Sehn <37184648+linozen@users.noreply.github.com> Date: Wed Mar 13 08:59:37 2024 +0100 feat(plugin): citations (#984) * feat: add rehype-citations * feat: add citations transformer plugin * feat: add rehype-rewrite * feat: add csl option and add no-popover to citation links * revert: add rehype-rewrite 04b2692 'feat: add rehype-rewrite' * feat: use existing package for html manipulation * fix: remove `console.log()` commit097abc3cdaAuthor: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 11 13:41:48 2024 -0700 chore(deps): bump async-mutex from 0.4.1 to 0.5.0 (#991) Bumps [async-mutex](https://github.com/DirtyHairy/async-mutex) from 0.4.1 to 0.5.0. - [Changelog](https://github.com/DirtyHairy/async-mutex/blob/master/CHANGELOG.md) - [Commits](https://github.com/DirtyHairy/async-mutex/compare/v0.4.1...v0.5.0) --- updated-dependencies: - dependency-name: async-mutex dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commita00324ddfdAuthor: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 11 13:41:41 2024 -0700 chore(deps-dev): bump typescript from 5.3.3 to 5.4.2 (#989) Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.3.3 to 5.4.2. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml) - [Commits](https://github.com/Microsoft/TypeScript/compare/v5.3.3...v5.4.2) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commit9fff6d7d0dAuthor: Mara-Li <lili.simonetti@outlook.fr> Date: Mon Mar 11 17:46:53 2024 +0100 fix: spelling error (#987) I really don't know why I translated this like that into "pas trouvé", and it bugged me a lot. I finally fixed it… Signed-off-by: Mara-Li <lili.simonetti@outlook.fr> commit0f5a9d7b66Author: Matt Vogel <mainmoniker@googlemail.com> Date: Sun Mar 10 12:57:10 2024 -0400 feat: separated content meta (#929) to allow for CSS styling commitb4236e5142Author: kabirgh <15871468+kabirgh@users.noreply.github.com> Date: Sun Mar 10 00:42:23 2024 +0000 feat(perf:fast-rebuilds): Stop mutating resources param in ComponentResources emitter (#977) * Stop mutating resources param in ComponentResources emitter * Add done rebuilding log for fast rebuilds * Move google font loading to Head component * Simplify code and fix comment commit6e0c102970Author: Emile Bangma <ewjbangma@hotmail.com> Date: Sun Mar 10 01:14:31 2024 +0100 fix(transclusion): prevent duplicate transclusion if multiple transclusions are present. (#982) commit94a54698abAuthor: Emile Bangma <ewjbangma@hotmail.com> Date: Sat Mar 9 17:59:55 2024 +0100 fix(resources): Use full path to font when cdnCache is false (#976) commit2e9a0c21dbAuthor: Emile Bangma <ewjbangma@hotmail.com> Date: Sat Mar 9 17:43:40 2024 +0100 fix(description): first sentence no longer repeats until max length (#981) commitb30a200bd4Author: Aaron Pham <29749331+aarnphm@users.noreply.github.com> Date: Fri Mar 8 12:14:22 2024 -0500 fix(i18n): make sure to use correct fileData for manual localization (#975) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> commit6d59aa8201Author: Emile Bangma <ewjbangma@hotmail.com> Date: Fri Mar 8 10:04:44 2024 +0100 fix(description): counts characters instead of words (#972) * fix(description): make sure description counts characters instead of words * ref: removed duplicate ternary * CI: fix package log post merge * CI: fix more merge artifacts * CI: fix package-lock.json * feat: add new default image template * feat: use icon.png for image generation * chore: update satori and sharp version * feat(image-generator): add new default template * Update quartz/components/Head.tsx * Update quartz/components/Head.tsx * Update quartz/components/Head.tsx * Update docs/features/social images.md * Update quartz/components/Head.tsx Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * feat(og-image): add config option to use default og image for root path * docs(og-image): add `excludeRoot` config + update preview images * docs(open-graph): add examples section * chore: remove unused `socialImage2.tsx` component * feat(open-graph): add frontmatter aliases for socialImage/cover/image * fix(open-graph): only load satori font if config option is enabled * refactor(open-graph): dont use async promise inside `fetchTtf()` * chore: renaming and finished copywriting Signed-off-by: Aaron Pham <contact@aarnphm.xyz> * chore: update typo Signed-off-by: Aaron Pham <contact@aarnphm.xyz> * chore: update hinting for socialImage Signed-off-by: Aaron Pham <contact@aarnphm.xyz> --------- Signed-off-by: Aaron Pham <contact@aarnphm.xyz> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> Co-authored-by: Emile Bangma <ewjbangma@hotmail.com> Co-authored-by: Emile Bangma <github@emilebangma.com> Co-authored-by: Aaron Pham <contact@aarnphm.xyz>
This commit is contained in:
Ben Schlegel
GitHub
parent
9188939b1f
commit
137d55eb1b
14 changed files with 1446 additions and 8 deletions
401
docs/features/social images.md
Normal file
401
docs/features/social images.md
Normal file
|
|
@ -0,0 +1,401 @@
|
|||
---
|
||||
title: "Social Media Preview Cards"
|
||||
---
|
||||
|
||||
A lot of social media platforms can display a rich preview for your website when sharing a link (most notably, a cover image, a title and a description). Quartz automatically handles most of this for you with reasonable defaults, but for more control, you can customize these by setting [[social images#Frontmatter Properties]].
|
||||
Quartz can also dynamically generate and use new cover images for every page to be used in link previews on social media for you. To get started with this, set `generateSocialImages: true` in `quartz.config.ts`.
|
||||
|
||||
## Showcase
|
||||
|
||||
After enabling `generateSocialImages` in `quartz.config.ts`, the social media link preview for [[authoring content | Authoring Content]] looks like this:
|
||||
|
||||
| Light | Dark |
|
||||
| ----------------------------------- | ---------------------------------- |
|
||||
| ![[social-image-preview-light.png]] | ![[social-image-preview-dark.png]] |
|
||||
|
||||
For testing, it is recommended to use [opengraph.xyz](https://www.opengraph.xyz/) to see what the link to your page will look like on various platforms (more info under [[social images#local testing]]).
|
||||
|
||||
## Customization
|
||||
|
||||
You can customize how images will be generated in the quartz config.
|
||||
|
||||
For example, here's what the default configuration looks like if you set `generateSocialImages: true`:
|
||||
|
||||
```typescript title="quartz.config.ts"
|
||||
generateSocialImages: {
|
||||
colorScheme: "lightMode", // what colors to use for generating image, same as theme colors from config, valid values are "darkMode" and "lightMode"
|
||||
width: 1200, // width to generate with (in pixels)
|
||||
height: 630, // height to generate with (in pixels)
|
||||
excludeRoot: false, // wether to exclude "/" index path to be excluded from auto generated images (false = use auto, true = use default og image)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Frontmatter Properties
|
||||
|
||||
> [!tip] Hint
|
||||
>
|
||||
> Overriding social media preview properties via frontmatter still works even if `generateSocialImages` is disabled.
|
||||
|
||||
The following properties can be used to customize your link previews:
|
||||
|
||||
| Property | Alias | Summary |
|
||||
| ------------------- | ---------------- | ----------------------------------- |
|
||||
| `socialDescription` | `description` | Description to be used for preview. |
|
||||
| `socialImage` | `image`, `cover` | Link to preview image. |
|
||||
|
||||
The `socialImage` property should contain a link to an image relative to `quartz/static`. If you have a folder for all your images in `quartz/static/my-images`, an example for `socialImage` could be `"my-images/cover.png"`.
|
||||
|
||||
> [!info] Info
|
||||
>
|
||||
> The priority for what image will be used for the cover image looks like the following: `frontmatter property > generated image (if enabled) > default image`.
|
||||
>
|
||||
> The default image (`quartz/static/og-image.png`) will only be used as a fallback if nothing else is set. If `generateSocialImages` is enabled, it will be treated as the new default per page, but can be overwritten by setting the `socialImage` frontmatter property for that page.
|
||||
|
||||
---
|
||||
|
||||
### Fully customized image generation
|
||||
|
||||
You can fully customize how the images being generated look by passing your own component to `generateSocialImages.imageStructure`. This component takes html/css + some page metadata/config options and converts it to an image using [satori](https://github.com/vercel/satori). Vercel provides an [online playground](https://og-playground.vercel.app/) that can be used to preview how your html/css looks like as a picture. This is ideal for prototyping your custom design.
|
||||
|
||||
It is recommended to write your own image components in `quartz/util/og.tsx` or any other `.tsx` file, as passing them to the config won't work otherwise. An example of the default image component can be found in `og.tsx` in `defaultImage()`.
|
||||
|
||||
> [!tip] Hint
|
||||
>
|
||||
> Satori only supports a subset of all valid CSS properties. All supported properties can be found in their [documentation](https://github.com/vercel/satori#css).
|
||||
|
||||
Your custom image component should have the `SocialImageOptions["imageStructure"]` type, to make development easier for you. Using a component of this type, you will be passed the following variables:
|
||||
|
||||
```ts
|
||||
imageStructure: (
|
||||
cfg: GlobalConfiguration, // global Quartz config (useful for getting theme colors and other info)
|
||||
userOpts: UserOpts, // options passed to `generateSocialImage`
|
||||
title: string, // title of current page
|
||||
description: string, // description of current page
|
||||
fonts: SatoriOptions["fonts"], // header + body font
|
||||
) => JSXInternal.Element
|
||||
```
|
||||
|
||||
Now, you can let your creativity flow and design your own image component! For reference and some cool tips, you can check how the markup for the default image looks.
|
||||
|
||||
> [!example] Examples
|
||||
>
|
||||
> Here are some examples for markup you may need to get started:
|
||||
>
|
||||
> - Get a theme color
|
||||
>
|
||||
> `cfg.theme.colors[colorScheme].<colorName>`, where `<colorName>` corresponds to a key in `ColorScheme` (defined at the top of `quartz/util/theme.ts`)
|
||||
>
|
||||
> - Use the page title/description
|
||||
>
|
||||
> `<p>{title}</p>`/`<p>{description}</p>`
|
||||
>
|
||||
> - Use a font family
|
||||
>
|
||||
> Detailed in the Fonts chapter below
|
||||
|
||||
---
|
||||
|
||||
### Fonts
|
||||
|
||||
You will also be passed an array containing a header and a body font (where the first entry is header and the second is body). The fonts matches the ones selected in `theme.typography.header` and `theme.typography.body` from `quartz.config.ts` and will be passed in the format required by [`satori`](https://github.com/vercel/satori). To use them in CSS, use the `.name` property (e.g. `fontFamily: fonts[1].name` to use the "body" font family).
|
||||
|
||||
An example of a component using the header font could look like this:
|
||||
|
||||
```tsx title="socialImage.tsx"
|
||||
export const myImage: SocialImageOptions["imageStructure"] = (...) => {
|
||||
return <p style={{ fontFamily: fonts[0].name }}>Cool Header!</p>
|
||||
}
|
||||
```
|
||||
|
||||
> [!example]- Local fonts
|
||||
>
|
||||
> For cases where you use a local fonts under `static` folder, make sure to set the correct `@font-face` in `custom.scss`
|
||||
>
|
||||
> ```scss title="custom.scss"
|
||||
> @font-face {
|
||||
> font-family: "Newsreader";
|
||||
> font-style: normal;
|
||||
> font-weight: normal;
|
||||
> font-display: swap;
|
||||
> src: url("/static/Newsreader.woff2") format("woff2");
|
||||
> }
|
||||
> ```
|
||||
>
|
||||
> Then in `quartz/util/og.tsx`, you can load the satori fonts like so:
|
||||
>
|
||||
> ```tsx title="quartz/util/og.tsx"
|
||||
> const headerFont = joinSegments("static", "Newsreader.woff2")
|
||||
> const bodyFont = joinSegments("static", "Newsreader.woff2")
|
||||
>
|
||||
> export async function getSatoriFont(cfg: GlobalConfiguration): Promise<SatoriOptions["fonts"]> {
|
||||
> const headerWeight: FontWeight = 700
|
||||
> const bodyWeight: FontWeight = 400
|
||||
>
|
||||
> const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
|
||||
>
|
||||
> const [header, body] = await Promise.all(
|
||||
> [headerFont, bodyFont].map((font) =>
|
||||
> fetch(`${url.toString()}/${font}`).then((res) => res.arrayBuffer()),
|
||||
> ),
|
||||
> )
|
||||
>
|
||||
> return [
|
||||
> { name: cfg.theme.typography.header, data: header, weight: headerWeight, style: "normal" },
|
||||
> { name: cfg.theme.typography.body, data: body, weight: bodyWeight, style: "normal" },
|
||||
> ]
|
||||
> }
|
||||
> ```
|
||||
>
|
||||
> This font then can be used with your custom structure
|
||||
|
||||
### Local testing
|
||||
|
||||
To test how the full preview of your page is going to look even before deploying, you can forward the port you're serving quartz on. In VSCode, this can easily be achieved following [this guide](https://code.visualstudio.com/docs/editor/port-forwarding) (make sure to set `Visibility` to `public` if testing on external tools like [opengraph.xyz](https://www.opengraph.xyz/)).
|
||||
|
||||
If you have `generateSocialImages` enabled, you can check out all generated images under `public/static/social-images`.
|
||||
|
||||
## Technical info
|
||||
|
||||
Images will be generated as `.webp` files, which helps to keep images small (the average image takes ~`19kB`). They are also compressed further using [sharp](https://sharp.pixelplumbing.com/).
|
||||
|
||||
When using images, the appropriate [Open Graph](https://ogp.me/) and [Twitter](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started) meta tags will be set to ensure they work and look as expected.
|
||||
|
||||
## Examples
|
||||
|
||||
Besides the template for the default image generation (found under `quartz/util/og.tsx`), you can also add your own! To do this, you can either edit the source code of that file (not recommended) or create a new one (e.g. `customSocialImage.tsx`, source shown below).
|
||||
|
||||
After adding that file, you can update `quartz.config.ts` to use your image generation template as follows:
|
||||
|
||||
```ts
|
||||
// Import component at start of file
|
||||
import { customImage } from "./quartz/util/customSocialImage.tsx"
|
||||
|
||||
// In main config
|
||||
const config: QuartzConfig = {
|
||||
...
|
||||
generateSocialImages: {
|
||||
...
|
||||
imageStructure: customImage, // tells quartz to use your component when generating images
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
The following example will generate images that look as follows:
|
||||
|
||||
| Light | Dark |
|
||||
| ------------------------------------------ | ----------------------------------------- |
|
||||
| ![[custom-social-image-preview-light.png]] | ![[custom-social-image-preview-dark.png]] |
|
||||
|
||||
This example (and the default template) use colors and fonts from your theme specified in the quartz config. Fonts get passed in as a prop, where `fonts[0]` will contain the header font and `fonts[1]` will contain the body font (more info in the [[#fonts]] section).
|
||||
|
||||
```tsx
|
||||
import { SatoriOptions } from "satori/wasm"
|
||||
import { GlobalConfiguration } from "../cfg"
|
||||
import { SocialImageOptions, UserOpts } from "./imageHelper"
|
||||
import { QuartzPluginData } from "../plugins/vfile"
|
||||
|
||||
export const customImage: SocialImageOptions["imageStructure"] = (
|
||||
cfg: GlobalConfiguration,
|
||||
userOpts: UserOpts,
|
||||
title: string,
|
||||
description: string,
|
||||
fonts: SatoriOptions["fonts"],
|
||||
fileData: QuartzPluginData,
|
||||
) => {
|
||||
// How many characters are allowed before switching to smaller font
|
||||
const fontBreakPoint = 22
|
||||
const useSmallerFont = title.length > fontBreakPoint
|
||||
|
||||
const { colorScheme } = userOpts
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
backgroundColor: cfg.theme.colors[colorScheme].light,
|
||||
flexDirection: "column",
|
||||
gap: "2.5rem",
|
||||
paddingTop: "2rem",
|
||||
paddingBottom: "2rem",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
color: cfg.theme.colors[colorScheme].dark,
|
||||
fontSize: useSmallerFont ? 70 : 82,
|
||||
marginLeft: "4rem",
|
||||
textAlign: "center",
|
||||
marginRight: "4rem",
|
||||
fontFamily: fonts[0].name,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
color: cfg.theme.colors[colorScheme].dark,
|
||||
fontSize: 44,
|
||||
marginLeft: "8rem",
|
||||
marginRight: "8rem",
|
||||
lineClamp: 3,
|
||||
fontFamily: fonts[1].name,
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
width: "2vw",
|
||||
position: "absolute",
|
||||
backgroundColor: cfg.theme.colors[colorScheme].tertiary,
|
||||
opacity: 0.85,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
> [!example]- Advanced example
|
||||
>
|
||||
> The following example includes a customized social image with a custom background and formatted date.
|
||||
>
|
||||
> ```typescript title="custom-og.tsx"
|
||||
> export const og: SocialImageOptions["Component"] = (
|
||||
> cfg: GlobalConfiguration,
|
||||
> fileData: QuartzPluginData,
|
||||
> { colorScheme }: Options,
|
||||
> title: string,
|
||||
> description: string,
|
||||
> fonts: SatoriOptions["fonts"],
|
||||
> ) => {
|
||||
> let created: string | undefined
|
||||
> let reading: string | undefined
|
||||
> if (fileData.dates) {
|
||||
> created = formatDate(getDate(cfg, fileData)!, cfg.locale)
|
||||
> }
|
||||
> const { minutes, text: _timeTaken, words: _words } = readingTime(fileData.text!)
|
||||
> reading = i18n(cfg.locale).components.contentMeta.readingTime({
|
||||
> minutes: Math.ceil(minutes),
|
||||
> })
|
||||
>
|
||||
> const Li = [created, reading]
|
||||
>
|
||||
> return (
|
||||
> <div
|
||||
> style={{
|
||||
> position: "relative",
|
||||
> display: "flex",
|
||||
> flexDirection: "row",
|
||||
> alignItems: "flex-start",
|
||||
> height: "100%",
|
||||
> width: "100%",
|
||||
> backgroundImage: `url("https://${cfg.baseUrl}/static/og-image.jpeg")`,
|
||||
> backgroundSize: "100% 100%",
|
||||
> }}
|
||||
> >
|
||||
> <div
|
||||
> style={{
|
||||
> position: "absolute",
|
||||
> top: 0,
|
||||
> left: 0,
|
||||
> right: 0,
|
||||
> bottom: 0,
|
||||
> background: "radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.4) 70%)",
|
||||
> }}
|
||||
> />
|
||||
> <div
|
||||
> style={{
|
||||
> display: "flex",
|
||||
> height: "100%",
|
||||
> width: "100%",
|
||||
> flexDirection: "column",
|
||||
> justifyContent: "flex-start",
|
||||
> alignItems: "flex-start",
|
||||
> gap: "1.5rem",
|
||||
> paddingTop: "4rem",
|
||||
> paddingBottom: "4rem",
|
||||
> marginLeft: "4rem",
|
||||
> }}
|
||||
> >
|
||||
> <img
|
||||
> src={`"https://${cfg.baseUrl}/static/icon.jpeg"`}
|
||||
> style={{
|
||||
> position: "relative",
|
||||
> backgroundClip: "border-box",
|
||||
> borderRadius: "6rem",
|
||||
> }}
|
||||
> width={80}
|
||||
> />
|
||||
> <div
|
||||
> style={{
|
||||
> display: "flex",
|
||||
> flexDirection: "column",
|
||||
> textAlign: "left",
|
||||
> fontFamily: fonts[0].name,
|
||||
> }}
|
||||
> >
|
||||
> <h2
|
||||
> style={{
|
||||
> color: cfg.theme.colors[colorScheme].light,
|
||||
> fontSize: "3rem",
|
||||
> fontWeight: 700,
|
||||
> marginRight: "4rem",
|
||||
> fontFamily: fonts[0].name,
|
||||
> }}
|
||||
> >
|
||||
> {title}
|
||||
> </h2>
|
||||
> <ul
|
||||
> style={{
|
||||
> color: cfg.theme.colors[colorScheme].gray,
|
||||
> gap: "1rem",
|
||||
> fontSize: "1.5rem",
|
||||
> fontFamily: fonts[1].name,
|
||||
> }}
|
||||
> >
|
||||
> {Li.map((item, index) => {
|
||||
> if (item) {
|
||||
> return <li key={index}>{item}</li>
|
||||
> }
|
||||
> })}
|
||||
> </ul>
|
||||
> </div>
|
||||
> <p
|
||||
> style={{
|
||||
> color: cfg.theme.colors[colorScheme].light,
|
||||
> fontSize: "1.5rem",
|
||||
> overflow: "hidden",
|
||||
> marginRight: "8rem",
|
||||
> textOverflow: "ellipsis",
|
||||
> display: "-webkit-box",
|
||||
> WebkitLineClamp: 7,
|
||||
> WebkitBoxOrient: "vertical",
|
||||
> lineClamp: 7,
|
||||
> fontFamily: fonts[1].name,
|
||||
> }}
|
||||
> >
|
||||
> {description}
|
||||
> </p>
|
||||
> </div>
|
||||
> </div>
|
||||
> )
|
||||
> }
|
||||
> ```
|
||||
BIN
docs/images/custom-social-image-preview-dark.png
Normal file
BIN
docs/images/custom-social-image-preview-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
docs/images/custom-social-image-preview-light.png
Normal file
BIN
docs/images/custom-social-image-preview-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
BIN
docs/images/social-image-preview-dark.png
Normal file
BIN
docs/images/social-image-preview-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
BIN
docs/images/social-image-preview-light.png
Normal file
BIN
docs/images/social-image-preview-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
648
package-lock.json
generated
648
package-lock.json
generated
|
|
@ -58,7 +58,9 @@
|
|||
"remark-smartypants": "^3.0.2",
|
||||
"rfdc": "^1.4.1",
|
||||
"rimraf": "^6.0.1",
|
||||
"satori": "^0.10.14",
|
||||
"serve-handler": "^6.1.6",
|
||||
"sharp": "^0.33.5",
|
||||
"shiki": "^1.22.2",
|
||||
"source-map-support": "^0.5.21",
|
||||
"to-vfile": "^8.0.0",
|
||||
|
|
@ -286,6 +288,16 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/@emnapi/runtime": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
|
||||
"integrity": "sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.24.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
|
||||
|
|
@ -690,6 +702,367 @@
|
|||
"mlly": "^1.7.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-darwin-arm64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
|
||||
"integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-darwin-arm64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-darwin-x64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
|
||||
"integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-darwin-x64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-darwin-arm64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
|
||||
"integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-darwin-x64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
|
||||
"integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linux-arm": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
|
||||
"integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linux-arm64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
|
||||
"integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linux-s390x": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
|
||||
"integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linux-x64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
|
||||
"integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linuxmusl-arm64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
|
||||
"integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linuxmusl-x64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
|
||||
"integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linux-arm": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
|
||||
"integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linux-arm": "1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linux-arm64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
|
||||
"integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linux-arm64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linux-s390x": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
|
||||
"integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linux-s390x": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linux-x64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
|
||||
"integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linux-x64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linuxmusl-arm64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
|
||||
"integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linuxmusl-x64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
|
||||
"integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linuxmusl-x64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-wasm32": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
|
||||
"integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
|
||||
"cpu": [
|
||||
"wasm32"
|
||||
],
|
||||
"license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"@emnapi/runtime": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-win32-ia32": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
|
||||
"integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"license": "Apache-2.0 AND LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-win32-x64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
|
||||
"integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "Apache-2.0 AND LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@isaacs/cliui": {
|
||||
"version": "8.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
|
||||
|
|
@ -1256,6 +1629,22 @@
|
|||
"resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz",
|
||||
"integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA=="
|
||||
},
|
||||
"node_modules/@shuding/opentype.js": {
|
||||
"version": "1.4.0-beta.0",
|
||||
"resolved": "https://registry.npmjs.org/@shuding/opentype.js/-/opentype.js-1.4.0-beta.0.tgz",
|
||||
"integrity": "sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fflate": "^0.7.3",
|
||||
"string.prototype.codepointat": "^0.2.1"
|
||||
},
|
||||
"bin": {
|
||||
"ot": "bin/ot"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@sindresorhus/merge-streams": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
|
||||
|
|
@ -1852,6 +2241,15 @@
|
|||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/camelize": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
|
||||
"integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/ccount": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
|
||||
|
|
@ -2027,6 +2425,19 @@
|
|||
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/color": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
|
||||
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1",
|
||||
"color-string": "^1.9.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
|
|
@ -2043,6 +2454,16 @@
|
|||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||
},
|
||||
"node_modules/color-string": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
|
||||
"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-name": "^1.0.0",
|
||||
"simple-swizzle": "^0.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/colorjs.io": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
|
||||
|
|
@ -2126,6 +2547,38 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/css-background-parser": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-background-parser/-/css-background-parser-0.1.0.tgz",
|
||||
"integrity": "sha512-2EZLisiZQ+7m4wwur/qiYJRniHX4K5Tc9w93MT3AS0WS1u5kaZ4FKXlOTBhOjc+CgEgPiGY+fX1yWD8UwpEqUA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/css-box-shadow": {
|
||||
"version": "1.0.0-3",
|
||||
"resolved": "https://registry.npmjs.org/css-box-shadow/-/css-box-shadow-1.0.0-3.tgz",
|
||||
"integrity": "sha512-9jaqR6e7Ohds+aWwmhe6wILJ99xYQbfmK9QQB9CcMjDbTxPZjwEmUQpU91OG05Xgm8BahT5fW+svbsQGjS/zPg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/css-color-keywords": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
|
||||
"integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/css-to-react-native": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
|
||||
"integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"camelize": "^1.0.0",
|
||||
"css-color-keywords": "^1.0.0",
|
||||
"postcss-value-parser": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/css-tree": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
|
||||
|
|
@ -2824,6 +3277,12 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/escape-html": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
|
||||
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/escape-string-regexp": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
|
||||
|
|
@ -2967,6 +3426,12 @@
|
|||
"webidl-conversions": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fflate": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.7.4.tgz",
|
||||
"integrity": "sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fill-range": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
|
|
@ -3504,6 +3969,18 @@
|
|||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/hex-rgb": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz",
|
||||
"integrity": "sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/html-encoding-sniffer": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
|
||||
|
|
@ -3637,6 +4114,12 @@
|
|||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/is-arrayish": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
|
||||
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/is-core-module": {
|
||||
"version": "2.13.1",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
|
||||
|
|
@ -4085,6 +4568,25 @@
|
|||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/linebreak": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
|
||||
"integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"base64-js": "0.0.8",
|
||||
"unicode-trie": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/linebreak/node_modules/base64-js": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
|
||||
"integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/local-pkg": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
|
||||
|
|
@ -5284,6 +5786,22 @@
|
|||
"integrity": "sha512-VgXbyrSNsml4eHWIvxxG/nTL4wgybMTXCV2Un/+yEc3aDKKU6nQBZjbeP3Pl3qm9Qg92X/1ng4ffvCeD/zwHgg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/pako": {
|
||||
"version": "0.2.9",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
|
||||
"integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/parse-css-color": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/parse-css-color/-/parse-css-color-0.2.1.tgz",
|
||||
"integrity": "sha512-bwS/GGIFV3b6KS4uwpzCFj4w297Yl3uqnSgIPsoQkx7GMLROXfMnWvxfNkL0oh8HVhZA4hvJoEoEIqonfJ3BWg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-name": "^1.1.4",
|
||||
"hex-rgb": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/parse-entities": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
|
||||
|
|
@ -5467,6 +5985,12 @@
|
|||
"points-on-curve": "0.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-value-parser": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
|
||||
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/preact": {
|
||||
"version": "10.24.3",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz",
|
||||
|
|
@ -6441,6 +6965,33 @@
|
|||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/satori": {
|
||||
"version": "0.10.14",
|
||||
"resolved": "https://registry.npmjs.org/satori/-/satori-0.10.14.tgz",
|
||||
"integrity": "sha512-abovcqmwl97WKioxpkfuMeZmndB1TuDFY/R+FymrZyiGP+pMYomvgSzVPnbNMWHHESOPosVHGL352oFbdAnJcA==",
|
||||
"license": "MPL-2.0",
|
||||
"dependencies": {
|
||||
"@shuding/opentype.js": "1.4.0-beta.0",
|
||||
"css-background-parser": "^0.1.0",
|
||||
"css-box-shadow": "1.0.0-3",
|
||||
"css-to-react-native": "^3.0.0",
|
||||
"emoji-regex": "^10.2.1",
|
||||
"escape-html": "^1.0.3",
|
||||
"linebreak": "^1.1.0",
|
||||
"parse-css-color": "^0.2.1",
|
||||
"postcss-value-parser": "^4.2.0",
|
||||
"yoga-wasm-web": "^0.3.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/satori/node_modules/emoji-regex": {
|
||||
"version": "10.4.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
|
||||
"integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/saxes": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
|
||||
|
|
@ -6464,6 +7015,18 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "7.6.3",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
|
||||
"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
|
||||
"license": "ISC",
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/serve-handler": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.6.tgz",
|
||||
|
|
@ -6498,6 +7061,54 @@
|
|||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/sharp": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
|
||||
"integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
|
||||
"hasInstallScript": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"color": "^4.2.3",
|
||||
"detect-libc": "^2.0.3",
|
||||
"semver": "^7.6.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-darwin-arm64": "0.33.5",
|
||||
"@img/sharp-darwin-x64": "0.33.5",
|
||||
"@img/sharp-libvips-darwin-arm64": "1.0.4",
|
||||
"@img/sharp-libvips-darwin-x64": "1.0.4",
|
||||
"@img/sharp-libvips-linux-arm": "1.0.5",
|
||||
"@img/sharp-libvips-linux-arm64": "1.0.4",
|
||||
"@img/sharp-libvips-linux-s390x": "1.0.4",
|
||||
"@img/sharp-libvips-linux-x64": "1.0.4",
|
||||
"@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
|
||||
"@img/sharp-libvips-linuxmusl-x64": "1.0.4",
|
||||
"@img/sharp-linux-arm": "0.33.5",
|
||||
"@img/sharp-linux-arm64": "0.33.5",
|
||||
"@img/sharp-linux-s390x": "0.33.5",
|
||||
"@img/sharp-linux-x64": "0.33.5",
|
||||
"@img/sharp-linuxmusl-arm64": "0.33.5",
|
||||
"@img/sharp-linuxmusl-x64": "0.33.5",
|
||||
"@img/sharp-wasm32": "0.33.5",
|
||||
"@img/sharp-win32-ia32": "0.33.5",
|
||||
"@img/sharp-win32-x64": "0.33.5"
|
||||
}
|
||||
},
|
||||
"node_modules/sharp/node_modules/detect-libc": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
|
||||
"integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
|
|
@ -6541,6 +7152,15 @@
|
|||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/simple-swizzle": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
|
||||
"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-arrayish": "^0.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/sisteransi": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
|
||||
|
|
@ -6671,6 +7291,12 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/string.prototype.codepointat": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz",
|
||||
"integrity": "sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/stringify-entities": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.3.tgz",
|
||||
|
|
@ -6783,6 +7409,12 @@
|
|||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-inflate": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
|
||||
"integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tinyexec": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
|
||||
|
|
@ -7341,6 +7973,16 @@
|
|||
"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/unicode-trie": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
|
||||
"integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"pako": "^0.2.5",
|
||||
"tiny-inflate": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/unicorn-magic": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz",
|
||||
|
|
@ -7942,6 +8584,12 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/yoga-wasm-web": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/yoga-wasm-web/-/yoga-wasm-web-0.3.3.tgz",
|
||||
"integrity": "sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/zwitch": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
|
||||
|
|
|
|||
|
|
@ -84,7 +84,9 @@
|
|||
"remark-smartypants": "^3.0.2",
|
||||
"rfdc": "^1.4.1",
|
||||
"rimraf": "^6.0.1",
|
||||
"satori": "^0.10.14",
|
||||
"serve-handler": "^6.1.6",
|
||||
"sharp": "^0.33.5",
|
||||
"shiki": "^1.22.2",
|
||||
"source-map-support": "^0.5.21",
|
||||
"to-vfile": "^8.0.0",
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ const config: QuartzConfig = {
|
|||
baseUrl: "quartz.jzhao.xyz",
|
||||
ignorePatterns: ["private", "templates", ".obsidian"],
|
||||
defaultDateType: "created",
|
||||
generateSocialImages: false,
|
||||
theme: {
|
||||
fontOrigin: "googleFonts",
|
||||
cdnCaching: true,
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { ValidDateType } from "./components/Date"
|
|||
import { QuartzComponent } from "./components/types"
|
||||
import { ValidLocale } from "./i18n"
|
||||
import { PluginTypes } from "./plugins/types"
|
||||
import { SocialImageOptions } from "./util/og"
|
||||
import { Theme } from "./util/theme"
|
||||
|
||||
export type Analytics =
|
||||
|
|
@ -60,11 +61,15 @@ export interface GlobalConfiguration {
|
|||
* Quartz will avoid using this as much as possible and use relative URLs most of the time
|
||||
*/
|
||||
baseUrl?: string
|
||||
/**
|
||||
* Whether to generate social images (Open Graph and Twitter standard) for link previews
|
||||
*/
|
||||
generateSocialImages: boolean | Partial<SocialImageOptions>
|
||||
theme: Theme
|
||||
/**
|
||||
* Allow to translate the date in the language of your choice.
|
||||
* Also used for UI translation (default: en-US)
|
||||
* Need to be formated following BCP 47: https://en.wikipedia.org/wiki/IETF_language_tag
|
||||
* Need to be formatted following BCP 47: https://en.wikipedia.org/wiki/IETF_language_tag
|
||||
* The first part is the language (en) and the second part is the script/region (US)
|
||||
* Language Codes: https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes
|
||||
* Region Codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
|
||||
|
|
|
|||
|
|
@ -356,6 +356,15 @@ export async function handleBuild(argv) {
|
|||
source: "**/*.*",
|
||||
headers: [{ key: "Content-Disposition", value: "inline" }],
|
||||
},
|
||||
{
|
||||
source: "**/*.webp",
|
||||
headers: [{ key: "Content-Type", value: "image/webp" }],
|
||||
},
|
||||
// fixes bug where avif images are displayed as text instead of images (future proof)
|
||||
{
|
||||
source: "**/*.avif",
|
||||
headers: [{ key: "Content-Type", value: "image/avif" }],
|
||||
},
|
||||
],
|
||||
})
|
||||
const status = res.statusCode
|
||||
|
|
|
|||
|
|
@ -3,14 +3,118 @@ import { FullSlug, joinSegments, pathToRoot } from "../util/path"
|
|||
import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources"
|
||||
import { googleFontHref } from "../util/theme"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import satori, { SatoriOptions } from "satori"
|
||||
import fs from "fs"
|
||||
import sharp from "sharp"
|
||||
import { ImageOptions, SocialImageOptions, getSatoriFont, defaultImage } from "../util/og"
|
||||
import { unescapeHTML } from "../util/escape"
|
||||
|
||||
/**
|
||||
* Generates social image (OG/twitter standard) and saves it as `.webp` inside the public folder
|
||||
* @param opts options for generating image
|
||||
*/
|
||||
async function generateSocialImage(
|
||||
{ cfg, description, fileName, fontsPromise, title, fileData }: ImageOptions,
|
||||
userOpts: SocialImageOptions,
|
||||
imageDir: string,
|
||||
) {
|
||||
const fonts = await fontsPromise
|
||||
const { width, height } = userOpts
|
||||
|
||||
// JSX that will be used to generate satori svg
|
||||
const imageComponent = userOpts.imageStructure(cfg, userOpts, title, description, fonts, fileData)
|
||||
|
||||
const svg = await satori(imageComponent, { width, height, fonts })
|
||||
|
||||
// Convert svg directly to webp (with additional compression)
|
||||
const compressed = await sharp(Buffer.from(svg)).webp({ quality: 40 }).toBuffer()
|
||||
|
||||
// Write to file system
|
||||
const filePath = joinSegments(imageDir, `${fileName}.${extension}`)
|
||||
fs.writeFileSync(filePath, compressed)
|
||||
}
|
||||
|
||||
const extension = "webp"
|
||||
|
||||
const defaultOptions: SocialImageOptions = {
|
||||
colorScheme: "lightMode",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
imageStructure: defaultImage,
|
||||
excludeRoot: false,
|
||||
}
|
||||
|
||||
export default (() => {
|
||||
const Head: QuartzComponent = ({ cfg, fileData, externalResources }: QuartzComponentProps) => {
|
||||
let fontsPromise: Promise<SatoriOptions["fonts"]>
|
||||
|
||||
let fullOptions: SocialImageOptions
|
||||
const Head: QuartzComponent = ({
|
||||
cfg,
|
||||
fileData,
|
||||
externalResources,
|
||||
ctx,
|
||||
}: QuartzComponentProps) => {
|
||||
// Initialize options if not set
|
||||
if (!fullOptions) {
|
||||
if (typeof cfg.generateSocialImages !== "boolean") {
|
||||
fullOptions = { ...defaultOptions, ...cfg.generateSocialImages }
|
||||
} else {
|
||||
fullOptions = defaultOptions
|
||||
}
|
||||
}
|
||||
|
||||
// Memoize google fonts
|
||||
if (!fontsPromise && cfg.generateSocialImages) {
|
||||
fontsPromise = getSatoriFont(cfg.theme.typography.header, cfg.theme.typography.body)
|
||||
}
|
||||
|
||||
const slug = fileData.filePath
|
||||
// since "/" is not a valid character in file names, replace with "-"
|
||||
const fileName = slug?.replaceAll("/", "-")
|
||||
|
||||
// Get file description (priority: frontmatter > fileData > default)
|
||||
const fdDescription =
|
||||
fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description
|
||||
const titleSuffix = cfg.pageTitleSuffix ?? ""
|
||||
const title =
|
||||
(fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title) + titleSuffix
|
||||
const description =
|
||||
fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description
|
||||
let description = ""
|
||||
if (fdDescription) {
|
||||
description = unescapeHTML(fdDescription)
|
||||
}
|
||||
|
||||
if (fileData.frontmatter?.socialDescription) {
|
||||
description = fileData.frontmatter?.socialDescription as string
|
||||
} else if (fileData.frontmatter?.description) {
|
||||
description = fileData.frontmatter?.description
|
||||
}
|
||||
|
||||
const fileDir = joinSegments(ctx.argv.output, "static", "social-images")
|
||||
if (cfg.generateSocialImages) {
|
||||
// Generate folders for social images (if they dont exist yet)
|
||||
if (!fs.existsSync(fileDir)) {
|
||||
fs.mkdirSync(fileDir, { recursive: true })
|
||||
}
|
||||
|
||||
if (fileName) {
|
||||
// Generate social image (happens async)
|
||||
generateSocialImage(
|
||||
{
|
||||
title,
|
||||
description,
|
||||
fileName,
|
||||
fileDir,
|
||||
fileExt: extension,
|
||||
fontsPromise,
|
||||
cfg,
|
||||
fileData,
|
||||
},
|
||||
fullOptions,
|
||||
fileDir,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const { css, js } = externalResources
|
||||
|
||||
const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
|
||||
|
|
@ -18,7 +122,37 @@ export default (() => {
|
|||
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 ogImageDefaultPath = `https://${cfg.baseUrl}/static/og-image.png`
|
||||
// "static/social-images/slug-filename.md.webp"
|
||||
const ogImageGeneratedPath = `https://${cfg.baseUrl}/${fileDir.replace(
|
||||
`${ctx.argv.output}/`,
|
||||
"",
|
||||
)}/${fileName}.${extension}`
|
||||
|
||||
// Use default og image if filePath doesnt exist (for autogenerated paths with no .md file)
|
||||
const useDefaultOgImage = fileName === undefined || !cfg.generateSocialImages
|
||||
|
||||
// Path to og/social image (priority: frontmatter > generated image (if enabled) > default image)
|
||||
let ogImagePath = useDefaultOgImage ? ogImageDefaultPath : ogImageGeneratedPath
|
||||
|
||||
// TODO: could be improved to support external images in the future
|
||||
// Aliases for image and cover handled in `frontmatter.ts`
|
||||
const frontmatterImgUrl = fileData.frontmatter?.socialImage
|
||||
|
||||
// Override with default og image if config option is set
|
||||
if (fileData.slug === "index") {
|
||||
ogImagePath = ogImageDefaultPath
|
||||
}
|
||||
|
||||
// Override with frontmatter url if existing
|
||||
if (frontmatterImgUrl) {
|
||||
ogImagePath = `https://${cfg.baseUrl}/static/${frontmatterImgUrl}`
|
||||
}
|
||||
|
||||
// Url of current page
|
||||
const socialUrl =
|
||||
fileData.slug === "404" ? url.toString() : joinSegments(url.toString(), fileData.slug!)
|
||||
|
||||
return (
|
||||
<head>
|
||||
|
|
@ -32,11 +166,35 @@ export default (() => {
|
|||
</>
|
||||
)}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
{/* OG/Twitter meta tags */}
|
||||
<meta name="og:site_name" content={cfg.pageTitle}></meta>
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
<meta property="og:description" content={description} />
|
||||
{cfg.baseUrl && <meta property="og:image" content={ogImagePath} />}
|
||||
<meta property="og:width" content="1200" />
|
||||
<meta property="og:height" content="675" />
|
||||
<meta property="og:image:type" content={`image/${extension}`} />
|
||||
<meta property="og:image:alt" content={description} />
|
||||
{/* Dont set width and height if unknown (when using custom frontmatter image) */}
|
||||
{!frontmatterImgUrl && (
|
||||
<>
|
||||
<meta property="og:image:width" content={fullOptions.width.toString()} />
|
||||
<meta property="og:image:height" content={fullOptions.height.toString()} />
|
||||
<meta property="og:width" content={fullOptions.width.toString()} />
|
||||
<meta property="og:height" content={fullOptions.height.toString()} />
|
||||
</>
|
||||
)}
|
||||
<meta property="og:image:url" content={ogImagePath} />
|
||||
{cfg.baseUrl && (
|
||||
<>
|
||||
<meta name="twitter:image" content={ogImagePath} />
|
||||
<meta property="og:image" content={ogImagePath} />
|
||||
<meta property="twitter:domain" content={cfg.baseUrl}></meta>
|
||||
<meta property="og:url" content={socialUrl}></meta>
|
||||
<meta property="twitter:url" content={socialUrl}></meta>
|
||||
</>
|
||||
)}
|
||||
<link rel="icon" href={iconPath} />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="generator" content="Quartz" />
|
||||
|
|
|
|||
|
|
@ -71,6 +71,10 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options>> = (userOpts)
|
|||
const cssclasses = coerceToArray(coalesceAliases(data, ["cssclasses", "cssclass"]))
|
||||
if (cssclasses) data.cssclasses = cssclasses
|
||||
|
||||
const socialImage = coalesceAliases(data, ["socialImage", "image", "cover"])
|
||||
|
||||
if (socialImage) data.socialImage = socialImage
|
||||
|
||||
// fill in frontmatter
|
||||
file.data.frontmatter = data as QuartzPluginData["frontmatter"]
|
||||
}
|
||||
|
|
@ -93,6 +97,7 @@ declare module "vfile" {
|
|||
lang: string
|
||||
enableToc: string
|
||||
cssclasses: string[]
|
||||
socialImage: string
|
||||
comments: boolean | string
|
||||
}>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,3 +6,12 @@ export const escapeHTML = (unsafe: string) => {
|
|||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'")
|
||||
}
|
||||
|
||||
export const unescapeHTML = (html: string) => {
|
||||
return html
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll(""", '"')
|
||||
.replaceAll("'", "'")
|
||||
}
|
||||
|
|
|
|||
200
quartz/util/og.tsx
Normal file
200
quartz/util/og.tsx
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
import { FontWeight, SatoriOptions } from "satori/wasm"
|
||||
import { GlobalConfiguration } from "../cfg"
|
||||
import { QuartzPluginData } from "../plugins/vfile"
|
||||
import { JSXInternal } from "preact/src/jsx"
|
||||
import { ThemeKey } from "./theme"
|
||||
|
||||
/**
|
||||
* Get an array of `FontOptions` (for satori) given google font names
|
||||
* @param headerFontName name of google font used for header
|
||||
* @param bodyFontName name of google font used for body
|
||||
* @returns FontOptions for header and body
|
||||
*/
|
||||
export async function getSatoriFont(headerFontName: string, bodyFontName: string) {
|
||||
const headerWeight = 700 as FontWeight
|
||||
const bodyWeight = 400 as FontWeight
|
||||
|
||||
// Fetch fonts
|
||||
const headerFont = await fetchTtf(headerFontName, headerWeight)
|
||||
const bodyFont = await fetchTtf(bodyFontName, bodyWeight)
|
||||
|
||||
// Convert fonts to satori font format and return
|
||||
const fonts: SatoriOptions["fonts"] = [
|
||||
{ name: headerFontName, data: headerFont, weight: headerWeight, style: "normal" },
|
||||
{ name: bodyFontName, data: bodyFont, weight: bodyWeight, style: "normal" },
|
||||
]
|
||||
return fonts
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the `.ttf` file of a google font
|
||||
* @param fontName name of google font
|
||||
* @param weight what font weight to fetch font
|
||||
* @returns `.ttf` file of google font
|
||||
*/
|
||||
async function fetchTtf(fontName: string, weight: FontWeight): Promise<ArrayBuffer> {
|
||||
try {
|
||||
// Get css file from google fonts
|
||||
const cssResponse = await fetch(`https://fonts.googleapis.com/css?family=${fontName}:${weight}`)
|
||||
const css = await cssResponse.text()
|
||||
|
||||
// Extract .ttf url from css file
|
||||
const urlRegex = /url\((https:\/\/fonts.gstatic.com\/s\/.*?.ttf)\)/g
|
||||
const match = urlRegex.exec(css)
|
||||
|
||||
if (!match) {
|
||||
throw new Error("Could not fetch font")
|
||||
}
|
||||
|
||||
// Retrieve font data as ArrayBuffer
|
||||
const fontResponse = await fetch(match[1])
|
||||
|
||||
// fontData is an ArrayBuffer containing the .ttf file data (get match[1] due to google fonts response format, always contains link twice, but second entry is the "raw" link)
|
||||
const fontData = await fontResponse.arrayBuffer()
|
||||
|
||||
return fontData
|
||||
} catch (error) {
|
||||
throw new Error(`Error fetching font: ${error}`)
|
||||
}
|
||||
}
|
||||
|
||||
export type SocialImageOptions = {
|
||||
/**
|
||||
* What color scheme to use for image generation (uses colors from config theme)
|
||||
*/
|
||||
colorScheme: ThemeKey
|
||||
/**
|
||||
* Height to generate image with in pixels (should be around 630px)
|
||||
*/
|
||||
height: number
|
||||
/**
|
||||
* Width to generate image with in pixels (should be around 1200px)
|
||||
*/
|
||||
width: number
|
||||
/**
|
||||
* Whether to use the auto generated image for the root path ("/", when set to false) or the default og image (when set to true).
|
||||
*/
|
||||
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,
|
||||
) => JSXInternal.Element
|
||||
}
|
||||
|
||||
export type UserOpts = Omit<SocialImageOptions, "imageStructure">
|
||||
|
||||
export type ImageOptions = {
|
||||
/**
|
||||
* what title to use as header in image
|
||||
*/
|
||||
title: string
|
||||
/**
|
||||
* what description to use as body in image
|
||||
*/
|
||||
description: string
|
||||
/**
|
||||
* what fileName to use when writing to disk
|
||||
*/
|
||||
fileName: string
|
||||
/**
|
||||
* what directory to store image in
|
||||
*/
|
||||
fileDir: string
|
||||
/**
|
||||
* what file extension to use (should be `webp` unless you also change sharp conversion)
|
||||
*/
|
||||
fileExt: string
|
||||
/**
|
||||
* header + body font to be used when generating satori image (as promise to work around sync in component)
|
||||
*/
|
||||
fontsPromise: Promise<SatoriOptions["fonts"]>
|
||||
/**
|
||||
* `GlobalConfiguration` of quartz (used for theme/typography)
|
||||
*/
|
||||
cfg: GlobalConfiguration
|
||||
/**
|
||||
* full file data of current page
|
||||
*/
|
||||
fileData: QuartzPluginData
|
||||
}
|
||||
|
||||
// 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,
|
||||
) => {
|
||||
// How many characters are allowed before switching to smaller font
|
||||
const fontBreakPoint = 22
|
||||
const useSmallerFont = title.length > fontBreakPoint
|
||||
|
||||
// Setup to access image
|
||||
const iconPath = `https://${cfg.baseUrl}/static/icon.png`
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
backgroundColor: cfg.theme.colors[colorScheme].light,
|
||||
gap: "2rem",
|
||||
paddingTop: "1.5rem",
|
||||
paddingBottom: "1.5rem",
|
||||
paddingLeft: "5rem",
|
||||
paddingRight: "5rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
width: "100%",
|
||||
flexDirection: "row",
|
||||
gap: "2.5rem",
|
||||
}}
|
||||
>
|
||||
<img src={iconPath} width={135} height={135} />
|
||||
<p
|
||||
style={{
|
||||
color: cfg.theme.colors[colorScheme].dark,
|
||||
fontSize: useSmallerFont ? 70 : 82,
|
||||
fontFamily: fonts[0].name,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
color: cfg.theme.colors[colorScheme].dark,
|
||||
fontSize: 44,
|
||||
lineClamp: 3,
|
||||
fontFamily: fonts[1].name,
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in a new issue