nuxt-og-image 6.5.3 → 6.7.0

package/README.md

@@ -47,6 +47,8 @@ npx nuxi@latest module add og-image
 > npx skilld add nuxt-og-image
 > ```
 
+💡 Built your OG images? Check how they render across Twitter, Facebook, LinkedIn and Slack with the free [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger), or monitor them site-wide with [Nuxt SEO Pro](https://nuxtseo.com/pro).
+
 ## Documentation
 
 [📖 Read the full documentation](https://nuxtseo.com/og-image/getting-started/installation) for more information.

package/dist/chunks/tw4.cjs

@@ -4,7 +4,8 @@ const promises = require('node:fs/promises');
 const node_url = require('node:url');
 const exsolve = require('exsolve');
 const pathe = require('pathe');
-const module$1 = require('../shared/nuxt-og-image.CfTPCtaS.cjs');
+const module$1 = require('../shared/nuxt-og-image.yDJBWXBt.cjs');
+require('node:crypto');
 require('node:fs');
 require('@nuxt/kit');
 require('defu');
@@ -12,12 +13,14 @@ require('nuxt-site-config/kit');
 require('ohash');
 require('pkg-types');
 require('std-env');
-require('node:crypto');
 require('oxc-walker');
-require('nuxtseo-shared/kit');
+require('../shared/nuxt-og-image.RI9DgjgV.cjs');
+require('magicast');
+require('magicast/helpers');
 require('../../dist/runtime/logger.js');
-require('chrome-launcher');
 require('nypm');
+require('nuxtseo-shared/kit');
+require('chrome-launcher');
 require('nuxtseo-shared/devtools');
 require('unstorage');
 require('unstorage/drivers/fs-lite');
@@ -30,9 +33,6 @@ require('@vue/compiler-sfc');
 require('ofetch');
 require('ultrahtml');
 require('../../dist/runtime/server/og-image/core/transforms/emojis/emoji-utils.js');
-require('../shared/nuxt-og-image.CMYbz66P.cjs');
-require('magicast');
-require('magicast/helpers');
 
 const RE_GRADIENT_STOP_PREFIX = /^(from|via|to)-/;
 const RE_COLOR_SHADE = /^(.+)-(\d+)$/;

package/dist/chunks/tw4.mjs

@@ -2,7 +2,8 @@ import { readFile } from 'node:fs/promises';
 import { pathToFileURL } from 'node:url';
 import { resolveModulePath } from 'exsolve';
 import { dirname, join } from 'pathe';
-import { e as extractVariantBaseClasses, r as resolveVariantPrefixes, h as resolveExtractedVars, i as resolveVarsDeep, s as simplifyCss, p as postProcessStyles, l as loadLightningCss, a as extractCssVars, c as extractUniversalVars, d as extractPerClassVars, g as extractVarsFromCss, f as extractClassStyles } from '../shared/nuxt-og-image.DdbTs-xp.mjs';
+import { e as extractVariantBaseClasses, r as resolveVariantPrefixes, h as resolveExtractedVars, i as resolveVarsDeep, s as simplifyCss, p as postProcessStyles, l as loadLightningCss, a as extractCssVars, c as extractUniversalVars, d as extractPerClassVars, g as extractVarsFromCss, f as extractClassStyles } from '../shared/nuxt-og-image.CPSxZhVO.mjs';
+import 'node:crypto';
 import 'node:fs';
 import '@nuxt/kit';
 import 'defu';
@@ -10,12 +11,14 @@ import 'nuxt-site-config/kit';
 import 'ohash';
 import 'pkg-types';
 import 'std-env';
-import 'node:crypto';
 import 'oxc-walker';
-import 'nuxtseo-shared/kit';
+import '../shared/nuxt-og-image.DM30kcDz.mjs';
+import 'magicast';
+import 'magicast/helpers';
 import '../../dist/runtime/logger.js';
-import 'chrome-launcher';
 import 'nypm';
+import 'nuxtseo-shared/kit';
+import 'chrome-launcher';
 import 'nuxtseo-shared/devtools';
 import 'unstorage';
 import 'unstorage/drivers/fs-lite';
@@ -28,9 +31,6 @@ import '@vue/compiler-sfc';
 import 'ofetch';
 import 'ultrahtml';
 import '../../dist/runtime/server/og-image/core/transforms/emojis/emoji-utils.js';
-import '../shared/nuxt-og-image.CJa2KCie.mjs';
-import 'magicast';
-import 'magicast/helpers';
 
 const RE_GRADIENT_STOP_PREFIX = /^(from|via|to)-/;
 const RE_COLOR_SHADE = /^(.+)-(\d+)$/;

package/dist/chunks/uno.cjs

@@ -3,7 +3,8 @@
 const promises = require('node:fs/promises');
 const defu = require('defu');
 const logger_js = require('../../dist/runtime/logger.js');
-const module$1 = require('../shared/nuxt-og-image.CfTPCtaS.cjs');
+const module$1 = require('../shared/nuxt-og-image.yDJBWXBt.cjs');
+require('node:crypto');
 require('node:fs');
 require('node:url');
 require('@nuxt/kit');
@@ -12,11 +13,13 @@ require('ohash');
 require('pathe');
 require('pkg-types');
 require('std-env');
-require('node:crypto');
 require('oxc-walker');
+require('../shared/nuxt-og-image.RI9DgjgV.cjs');
+require('magicast');
+require('magicast/helpers');
+require('nypm');
 require('nuxtseo-shared/kit');
 require('chrome-launcher');
-require('nypm');
 require('nuxtseo-shared/devtools');
 require('unstorage');
 require('unstorage/drivers/fs-lite');
@@ -30,9 +33,6 @@ require('ofetch');
 require('ultrahtml');
 require('../../dist/runtime/server/og-image/core/transforms/emojis/emoji-utils.js');
 require('exsolve');
-require('../shared/nuxt-og-image.CMYbz66P.cjs');
-require('magicast');
-require('magicast/helpers');
 
 const RE_SVG_DATA_URL = /url\("data:image\/svg\+xml[;,]([^"]+)"\)/;
 const RE_UTF8_PREFIX = /^utf8,/;

package/dist/chunks/uno.mjs

@@ -1,7 +1,8 @@
 import { readFile } from 'node:fs/promises';
 import { defu } from 'defu';
 import { logger } from '../../dist/runtime/logger.js';
-import { e as extractVariantBaseClasses, s as simplifyCss, a as extractCssVars, b as extractPropertyInitialValues, c as extractUniversalVars, d as extractPerClassVars, f as extractClassStyles, p as postProcessStyles, r as resolveVariantPrefixes, g as extractVarsFromCss, h as resolveExtractedVars } from '../shared/nuxt-og-image.DdbTs-xp.mjs';
+import { e as extractVariantBaseClasses, s as simplifyCss, a as extractCssVars, b as extractPropertyInitialValues, c as extractUniversalVars, d as extractPerClassVars, f as extractClassStyles, p as postProcessStyles, r as resolveVariantPrefixes, g as extractVarsFromCss, h as resolveExtractedVars } from '../shared/nuxt-og-image.CPSxZhVO.mjs';
+import 'node:crypto';
 import 'node:fs';
 import 'node:url';
 import '@nuxt/kit';
@@ -10,11 +11,13 @@ import 'ohash';
 import 'pathe';
 import 'pkg-types';
 import 'std-env';
-import 'node:crypto';
 import 'oxc-walker';
+import '../shared/nuxt-og-image.DM30kcDz.mjs';
+import 'magicast';
+import 'magicast/helpers';
+import 'nypm';
 import 'nuxtseo-shared/kit';
 import 'chrome-launcher';
-import 'nypm';
 import 'nuxtseo-shared/devtools';
 import 'unstorage';
 import 'unstorage/drivers/fs-lite';
@@ -28,9 +31,6 @@ import 'ofetch';
 import 'ultrahtml';
 import '../../dist/runtime/server/og-image/core/transforms/emojis/emoji-utils.js';
 import 'exsolve';
-import '../shared/nuxt-og-image.CJa2KCie.mjs';
-import 'magicast';
-import 'magicast/helpers';
 
 const RE_SVG_DATA_URL = /url\("data:image\/svg\+xml[;,]([^"]+)"\)/;
 const RE_UTF8_PREFIX = /^utf8,/;

package/dist/cli.cjs

@@ -10,10 +10,14 @@ const nypm = require('nypm');
 const oxcWalker = require('oxc-walker');
 const pathe = require('pathe');
 const ultrahtml = require('ultrahtml');
-const fonts = require('./shared/nuxt-og-image.CMYbz66P.cjs');
+const dependencies = require('./shared/nuxt-og-image.RI9DgjgV.cjs');
 require('magicast');
 require('magicast/helpers');
 require('../dist/runtime/logger.js');
+require('std-env');
+require('defu');
+require('nuxtseo-shared/kit');
+require('chrome-launcher');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopNamespaceCompat(e) {
@@ -189,11 +193,14 @@ const RENDERERS = [
   }
 ];
 const EDGE_PRESETS = ["cloudflare", "cloudflare-pages", "cloudflare-module", "vercel-edge", "netlify-edge"];
-function getRendererDeps(renderer, isEdge) {
+function getRendererDeps(renderer, isEdge, options = {}) {
   switch (renderer) {
     case "satori":
       return isEdge ? ["satori", "@resvg/resvg-js", "@resvg/resvg-wasm"] : ["satori", "@resvg/resvg-js"];
     case "takumi":
+      if (options.installSpec) {
+        return isEdge ? [dependencies.TAKUMI_CORE_INSTALL_SPEC, dependencies.TAKUMI_WASM_INSTALL_SPEC] : [dependencies.TAKUMI_CORE_INSTALL_SPEC];
+      }
       return isEdge ? ["@takumi-rs/core", "@takumi-rs/wasm"] : ["@takumi-rs/core"];
     case "browser":
       return isEdge ? [] : ["playwright-core"];
@@ -554,7 +561,7 @@ async function installRendererDeps(renderers, isEdge) {
   const pmName = pm?.name || "npm";
   const allDeps = [];
   for (const renderer of renderers) {
-    allDeps.push(...getRendererDeps(renderer, isEdge));
+    allDeps.push(...getRendererDeps(renderer, isEdge, { installSpec: true }));
   }
   const uniqueDeps = [...new Set(allDeps)];
   if (uniqueDeps.length === 0)
@@ -706,7 +713,7 @@ async function runMigrate(args2) {
     if (dryRun) {
       p__namespace.log.info(`Would remove defaults.component: '${migrationCheck.defaultComponentName}'`);
     } else {
-      const result = await fonts.migrateDefaultsComponent(cwd).catch((err) => {
+      const result = await dependencies.migrateDefaultsComponent(cwd).catch((err) => {
         p__namespace.log.warn(`Failed to migrate defaults.component: ${err.message}`);
         return { migrated: false, componentName: null, message: err.message };
       });
@@ -720,7 +727,7 @@ async function runMigrate(args2) {
     if (dryRun) {
       p__namespace.log.info("Would migrate ogImage.fonts to @nuxt/fonts config");
     } else {
-      const result = await fonts.migrateFontsConfig(cwd).catch((err) => {
+      const result = await dependencies.migrateFontsConfig(cwd).catch((err) => {
         p__namespace.log.warn(`Failed to migrate fonts config: ${err.message}`);
         return { migrated: false, message: err.message };
       });

package/dist/cli.mjs

@@ -8,10 +8,14 @@ import { detectPackageManager, removeDependency, addDependency } from 'nypm';
 import { parseAndWalk } from 'oxc-walker';
 import { dirname, resolve, join, relative, basename } from 'pathe';
 import { parse, walkSync, ELEMENT_NODE } from 'ultrahtml';
-import { m as migrateDefaultsComponent, a as migrateFontsConfig } from './shared/nuxt-og-image.CJa2KCie.mjs';
+import { m as migrateDefaultsComponent, a as migrateFontsConfig, T as TAKUMI_CORE_INSTALL_SPEC, b as TAKUMI_WASM_INSTALL_SPEC } from './shared/nuxt-og-image.DM30kcDz.mjs';
 import 'magicast';
 import 'magicast/helpers';
 import '../dist/runtime/logger.js';
+import 'std-env';
+import 'defu';
+import 'nuxtseo-shared/kit';
+import 'chrome-launcher';
 
 const __dirname$1 = dirname(fileURLToPath(import.meta.url));
 const communityDir = resolve(__dirname$1, "runtime/app/components/Templates/Community");
@@ -172,11 +176,14 @@ const RENDERERS = [
   }
 ];
 const EDGE_PRESETS = ["cloudflare", "cloudflare-pages", "cloudflare-module", "vercel-edge", "netlify-edge"];
-function getRendererDeps(renderer, isEdge) {
+function getRendererDeps(renderer, isEdge, options = {}) {
   switch (renderer) {
     case "satori":
       return isEdge ? ["satori", "@resvg/resvg-js", "@resvg/resvg-wasm"] : ["satori", "@resvg/resvg-js"];
     case "takumi":
+      if (options.installSpec) {
+        return isEdge ? [TAKUMI_CORE_INSTALL_SPEC, TAKUMI_WASM_INSTALL_SPEC] : [TAKUMI_CORE_INSTALL_SPEC];
+      }
       return isEdge ? ["@takumi-rs/core", "@takumi-rs/wasm"] : ["@takumi-rs/core"];
     case "browser":
       return isEdge ? [] : ["playwright-core"];
@@ -537,7 +544,7 @@ async function installRendererDeps(renderers, isEdge) {
   const pmName = pm?.name || "npm";
   const allDeps = [];
   for (const renderer of renderers) {
-    allDeps.push(...getRendererDeps(renderer, isEdge));
+    allDeps.push(...getRendererDeps(renderer, isEdge, { installSpec: true }));
   }
   const uniqueDeps = [...new Set(allDeps)];
   if (uniqueDeps.length === 0)

package/dist/devtools/components/og-image/AddComponentDialog.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { AddComponentResult } from '../../lib/og-image/templates'
+import { computed, ref, watch } from 'vue'
+import { AddComponentDialogPromise } from '../../lib/og-image/templates'
+
+function handleClose(_a: unknown, resolve: (value: AddComponentResult | false) => void) {
+  resolve(false)
+}
+
+const RE_WORD_CHARS_ONLY = /^\w+$/
+
+const componentName = ref('')
+const nameError = ref('')
+
+function validateName(value: string): string {
+  if (!value.trim())
+    return 'Name is required'
+  if (!RE_WORD_CHARS_ONLY.test(value.trim()))
+    return 'Only letters, numbers, and underscores allowed'
+  return ''
+}
+
+watch(componentName, (v) => {
+  nameError.value = v ? validateName(v) : ''
+})
+
+const previewName = computed(() => {
+  const name = componentName.value.trim()
+  if (!name)
+    return ''
+  return name.charAt(0).toUpperCase() + name.slice(1)
+})
+
+function submit(resolve: (value: AddComponentResult | false) => void) {
+  const name = componentName.value.trim()
+  const error = validateName(name)
+  if (error) {
+    nameError.value = error
+    return
+  }
+  resolve({ name: name.charAt(0).toUpperCase() + name.slice(1) })
+  componentName.value = ''
+  nameError.value = ''
+}
+</script>
+
+<template>
+  <AddComponentDialogPromise v-slot="{ resolve }">
+    <UModal
+      :open="true"
+      title="Create OG Image Component"
+      @update:open="handleClose('a', resolve)"
+      @close="handleClose('b', resolve)"
+    >
+      <template #body>
+        <div class="flex flex-col gap-4">
+          <UFormField label="Component Name" :error="nameError" hint="Auto-capitalized to PascalCase">
+            <UInput
+              v-model="componentName"
+              placeholder="MyOgImage"
+              autofocus
+              class="w-full"
+              @keydown.enter="submit(resolve)"
+            />
+          </UFormField>
+
+          <div v-if="previewName" class="text-xs text-[var(--color-text-subtle)] font-mono bg-[var(--color-surface-sunken)] rounded-lg px-3 py-2">
+            defineOgImage('{{ previewName }}')
+          </div>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="flex justify-end gap-3">
+          <UButton variant="ghost" color="neutral" @click="resolve(false)">
+            Cancel
+          </UButton>
+          <UButton color="primary" :disabled="!componentName.trim() || !!nameError" @click="submit(resolve)">
+            Create
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+  </AddComponentDialogPromise>
+</template>

package/dist/devtools/components/og-image/BlueskyCardRenderer.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="bluesky-card">
+    <div class="bluesky-image">
+      <slot />
+      <div class="bluesky-image-overlay" />
+    </div>
+    <div class="bluesky-content">
+      <p class="bluesky-title">
+        <slot name="title" />
+      </p>
+      <p class="bluesky-description">
+        <slot name="description" />
+      </p>
+      <div class="bluesky-domain">
+        <svg class="bluesky-globe" viewBox="0 0 16 16" fill="none">
+          <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.3" />
+          <ellipse cx="8" cy="8" rx="3.5" ry="7" stroke="currentColor" stroke-width="1.3" />
+          <line x1="1.5" y1="5.5" x2="14.5" y2="5.5" stroke="currentColor" stroke-width="1.3" />
+          <line x1="1.5" y1="10.5" x2="14.5" y2="10.5" stroke="currentColor" stroke-width="1.3" />
+        </svg>
+        <slot name="siteName" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.bluesky-card {
+  width: 100%;
+  max-width: 513px;
+  margin: 0 auto;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid oklch(88% 0.01 260);
+  background: oklch(100% 0 0);
+  box-shadow: 0 4px 24px oklch(0% 0 0 / 0.08);
+  font-family: 'Hubot Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.dark .bluesky-card {
+  background: #171d27;
+  border-color: rgb(44, 58, 78);
+  box-shadow: 0 4px 24px oklch(0% 0 0 / 0.25);
+}
+
+.bluesky-image {
+  aspect-ratio: 2 / 1;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: oklch(96% 0.01 260);
+}
+
+.dark .bluesky-image {
+  background: oklch(22% 0.02 260);
+}
+
+.bluesky-image img,
+.bluesky-image > *:first-child:not(.bluesky-image-overlay) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.bluesky-image-overlay {
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.05);
+  pointer-events: none;
+}
+
+.dark .bluesky-image-overlay {
+  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.05);
+}
+
+.bluesky-content {
+  padding: 12px 14px;
+}
+
+.bluesky-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: oklch(15% 0.02 260);
+  margin: 0 0 2px;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .bluesky-title {
+  color: oklch(95% 0.01 260);
+}
+
+.bluesky-description {
+  font-size: 13px;
+  color: oklch(50% 0.02 260);
+  margin: 0 0 8px;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .bluesky-description {
+  color: oklch(65% 0.02 260);
+}
+
+.bluesky-domain {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11.3px;
+  letter-spacing: 0px;
+  color: rgb(171, 184, 201);
+  padding-top: 8px;
+  border-top: 1px solid oklch(92% 0.01 260);
+}
+
+.dark .bluesky-domain {
+  border-top-color: oklch(28% 0.02 260);
+}
+
+.bluesky-globe {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+}
+</style>

package/dist/devtools/components/og-image/CreateOgImageDialog.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { GlobalDebugResponse } from '../../lib/og-image/types'
+import { computed, ref, watch } from 'vue'
+import { inject } from '#imports'
+import { GlobalDebugKey } from '../../lib/og-image/keys'
+import { CreateOgImageDialogPromise } from '../../lib/og-image/templates'
+
+function handleClose(_a: unknown, resolve: (value: string | false) => void) {
+  resolve(false)
+}
+
+const globalDebug = inject(GlobalDebugKey) as Ref<GlobalDebugResponse | null>
+
+const componentDirs = computed(() => globalDebug.value?.runtimeConfig?.componentDirs || [])
+const selected = ref(componentDirs.value[0])
+watch(componentDirs, (dirs) => {
+  if (!selected.value && dirs.length > 0)
+    selected.value = dirs[0]
+})
+</script>
+
+<template>
+  <CreateOgImageDialogPromise v-slot="{ resolve, args }">
+    <UModal
+      :open="true"
+      title="Eject Component"
+      description="Copy a community template to an OG Image component directory in your project. You can configure directories using componentDirs in nuxt.config."
+      @update:open="handleClose('a', resolve)"
+      @close="handleClose('b', resolve)"
+    >
+      <template #body>
+        <URadioGroup
+          v-model="selected"
+          :items="componentDirs.map((dir: string) => ({
+            label: `./components/${dir}/${args[0]}.vue`,
+            value: dir,
+          }))"
+          variant="card"
+          legend="Choose Output Path"
+        />
+      </template>
+
+      <template #footer>
+        <div class="flex justify-end gap-3">
+          <UButton variant="ghost" color="neutral" @click="resolve(false)">
+            Cancel
+          </UButton>
+          <UButton color="primary" @click="resolve(selected || false)">
+            Create Component
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+  </CreateOgImageDialogPromise>
+</template>

package/dist/devtools/components/og-image/DiscordCardRenderer.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="discord-card">
+    <div class="discord-body">
+      <div class="discord-sitename">
+        <slot name="siteName" />
+      </div>
+      <div class="discord-title">
+        <slot name="title" />
+      </div>
+      <div class="discord-description">
+        <slot name="description" />
+      </div>
+      <div class="discord-image">
+        <slot />
+        <div class="discord-image-overlay" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.discord-card {
+  display: flex;
+  max-width: 432px;
+  margin: 0 auto;
+  border-radius: 8px;
+  border: 1px solid #e3e5e8;
+  border-left: 4px solid #e3e5e8;
+  background: #f2f3f5;
+  overflow: hidden;
+  font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.dark .discord-card {
+  background: #2b2d31;
+  border-color: #232428;
+  border-left-color: #1e1f22;
+}
+
+.discord-body {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 16px 16px 12px;
+}
+
+.discord-sitename {
+  font-size: 12px;
+  font-weight: 400;
+  color: #4e5058;
+  margin-bottom: 2px;
+  line-height: 16px;
+}
+
+.dark .discord-sitename {
+  color: #b5bac1;
+}
+
+.discord-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #006ce7;
+  cursor: pointer;
+  margin-bottom: 4px;
+  line-height: 22px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.dark .discord-title {
+  color: #00a8fc;
+}
+
+.discord-title:hover {
+  text-decoration: underline;
+}
+
+.discord-description {
+  font-size: 14px;
+  color: #313338;
+  line-height: 18px;
+  margin-bottom: 16px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: pre-wrap;
+}
+
+.dark .discord-description {
+  color: #dbdee1;
+}
+
+.discord-image {
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  max-width: 400px;
+  max-height: 300px;
+}
+
+.discord-image img,
+.discord-image > *:first-child:not(.discord-image-overlay) {
+  max-width: 100%;
+  max-height: 300px;
+  border-radius: 4px;
+  display: block;
+}
+
+.discord-image-overlay {
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.04);
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.dark .discord-image-overlay {
+  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.06);
+}
+</style>