Riebeckite
Menu
Color mode

Discord Embed

Completes each page's <head> for Discord link previews.

Discord's Discordbot reads the shared page's <head> metadata to build its preview card. The seo plugin already emits the shared og:* and twitter:* tags, so this plugin adds only the Discord-specific pieces that are missing:

  • <meta name="theme-color">, which Discord uses for the embed's left border color;
  • og:image:alt (and optionally og:image:width / og:image:height).

日本語

Usage

ts
import { defineConfig } from "@riebeckite/core";
import { discordEmbed } from "@riebeckite/plugin-discord-embed";
 
export default defineConfig({
  // ...
  plugins: [discordEmbed()],
});

Options

Option Type Default Description
themeColor string "#5865F2" Embed accent color. Discord blurple
imageAlt boolean true Emit og:image:alt when the entry has an image
imageDimensions boolean true Emit og:image:width / og:image:height when the entry's image dimensions are known

themeColor accepts #rgb, #rgba, #rrggbb, or #rrggbbaa.

Frontmatter

Field Use
theme_color / themeColor / discord_color Override the embed color for one entry
ogImage / image Mark that the entry has an image, enabling the image tags
ogImageWidth / imageWidth Image width
ogImageHeight / imageHeight Image height

The color resolves from the frontmatter override first, then the themeColor option. An invalid frontmatter color records a discord-embed-invalid-color diagnostic (warning) and falls back to the option default.

Emitted tags

The onManifestCreated hook assigns entry.headTags for every entry:

html
<meta name="theme-color" content="#1ABC9C" />
<meta property="og:image:alt" content="Article title" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

The site shell renders headTags

This plugin does not own the <head>. It provides ContentManifestEntry.headTags; whether to render them is the site's decision. A site route sets c.set("headTags", entry.headTags ?? []), and app/routes/_renderer.tsx maps them to <meta> / <link> / <script>. See HonoX Integration, section "Site application contract", for details.

Exports

  • discordEmbed(options?) / discordEmbedPlugin(options?) — plugin factory
  • buildDiscordHeadTags(entry, options, diagnostics) — build one entry's head tags
  • resolveDiscordEmbedOptions(options?) — resolve defaults
  • Types: DiscordEmbedOptions, ResolvedDiscordEmbedOptions

See also

History

1 changesCollapseExpand
1 + <!-- Generated from packages/plugins/discord-embed/README.md. Do not edit this page directly; edit the package README and run `pnpm docs:sync`. -->
2 +
3 + # Discord Embed
4 +
5 + Completes each page's `<head>` for Discord link previews.
6 +
7 + Discord's `Discordbot` reads the shared page's `<head>` metadata to build its
8 + preview card. The `seo` plugin already emits the shared `og:*` and `twitter:*`
9 + tags, so this plugin adds only the Discord-specific pieces that are missing:
10 +
11 + - `<meta name="theme-color">`, which Discord uses for the embed's left border
12 + color;
13 + - `og:image:alt` (and optionally `og:image:width` / `og:image:height`).
14 +
15 + [日本語](./discord-embed.md)
16 +
17 + ## Usage
18 +
19 + ```ts
20 + import { defineConfig } from "@riebeckite/core";
21 + import { discordEmbed } from "@riebeckite/plugin-discord-embed";
22 +
23 + export default defineConfig({
24 + // ...
25 + plugins: [discordEmbed()],
26 + });
27 + ```
28 +
29 + ## Options
30 +
31 + | Option | Type | Default | Description |
32 + | ------ | ---- | ------- | ----------- |
33 + | `themeColor` | `string` | `"#5865F2"` | Embed accent color. Discord blurple |
34 + | `imageAlt` | `boolean` | `true` | Emit `og:image:alt` when the entry has an image |
35 + | `imageDimensions` | `boolean` | `true` | Emit `og:image:width` / `og:image:height` when the entry's image dimensions are known |
36 +
37 + `themeColor` accepts `#rgb`, `#rgba`, `#rrggbb`, or `#rrggbbaa`.
38 +
39 + ## Frontmatter
40 +
41 + | Field | Use |
42 + | ----- | --- |
43 + | `theme_color` / `themeColor` / `discord_color` | Override the embed color for one entry |
44 + | `ogImage` / `image` | Mark that the entry has an image, enabling the image tags |
45 + | `ogImageWidth` / `imageWidth` | Image width |
46 + | `ogImageHeight` / `imageHeight` | Image height |
47 +
48 + The color resolves from the frontmatter override first, then the `themeColor`
49 + option. An invalid frontmatter color records a
50 + `discord-embed-invalid-color` diagnostic (warning) and falls back to the option
51 + default.
52 +
53 + ## Emitted tags
54 +
55 + The `onManifestCreated` hook assigns `entry.headTags` for every entry:
56 +
57 + ```html
58 + <meta name="theme-color" content="#1ABC9C" />
59 + <meta property="og:image:alt" content="Article title" />
60 + <meta property="og:image:width" content="1200" />
61 + <meta property="og:image:height" content="630" />
62 + ```
63 +
64 + ## The site shell renders `headTags`
65 +
66 + This plugin does not own the `<head>`. It provides
67 + `ContentManifestEntry.headTags`; whether to render them is the site's decision.
68 + A site route sets `c.set("headTags", entry.headTags ?? [])`, and
69 + `app/routes/_renderer.tsx` maps them to `<meta>` / `<link>` / `<script>`.
70 + See [HonoX Integration](../framework/honox-integration.en.md), section
71 + "Site application contract", for details.
72 +
73 + ## Exports
74 +
75 + - `discordEmbed(options?)` / `discordEmbedPlugin(options?)` — plugin factory
76 + - `buildDiscordHeadTags(entry, options, diagnostics)` — build one entry's head
77 + tags
78 + - `resolveDiscordEmbedOptions(options?)` — resolve defaults
79 + - Types: `DiscordEmbedOptions`, `ResolvedDiscordEmbedOptions`
80 +
81 + ## See also
82 +
83 + - [HonoX Integration](../framework/honox-integration.en.md)
84 + - [Plugin system](../reference/plugin-api.en.md)
85 +