feat: avatar support

moeru-ai · Dec 26, 2024 · 0b7f1cc · 0b7f1cc
1 parent cc57670
commit 0b7f1cc
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 51 deletions.
diff --git a/docs/public/characters/existing/misc/tsukuyomi_chan.png b/docs/public/characters/existing/misc/tsukuyomi_chan.png
diff --git a/docs/src/components/starlight/PageTitle.astro b/docs/src/components/starlight/PageTitle.astro
@@ -13,15 +13,18 @@ const { data } = Astro.props.entry;
 {
   data.type === 'character'
   ? (
-    <div class="wrapper">
-      <Default {...Astro.props}>
-        <slot />
-      </Default>
-      <div class="integration-metadata">
-        <Badge
-          text={`v${data.chara_version}`}
-          variant={data.chara_version?.startsWith('0.0') ? 'caution' : data.chara_version?.startsWith('0') ? 'tip' : 'success'}
-        />
+    <div class="flex items-center gap-6">
+      {data.avatar && <img class="w-20 rounded-xs" src={data.avatar} />}
+      <div class="wrapper pb-4">
+        <Default {...Astro.props}>
+          <slot />
+        </Default>
+        <div class="integration-metadata">
+          <Badge
+            text={`v${data.chara_version}`}
+            variant={data.chara_version?.startsWith('0.0') ? 'caution' : data.chara_version?.startsWith('0') ? 'tip' : 'success'}
+          />
+        </div>
       </div>
     </div>
   )

diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts
@@ -5,6 +5,8 @@ export const collections = {
   docs: defineCollection({
     schema: docsSchema({
       extend: z.object({
+        // character avatar
+        avatar: z.string().optional(),
         chara_version: z.string().optional(),
         type: z.string().optional(),
       }),

diff --git a/docs/src/pages/characters/[pkg]/[category]/[character].astro b/docs/src/pages/characters/[pkg]/[category]/[character].astro
@@ -29,6 +29,7 @@ const { json } = Astro.props as { json: Card }
 
 <StarlightPage
   frontmatter={{
+    avatar: json.metadata?.avatar as string || undefined,
     chara_version: json.version,
     description: json.notes,
     editUrl: `https://github.com/moeru-ai/deck/edit/main/packages/characters-${pkg}/src/${category}/${character}/index.ts`,

diff --git a/docs/src/pages/characters/og/[...slug].ts b/docs/src/pages/characters/og/[...slug].ts
@@ -25,50 +25,56 @@ const families = [
 ]
 
 export const { GET, getStaticPaths } = OGImageRoute({
-  getImageOptions: (_path, page: Card) => ({
-    // 134 Glass Water from https://webgradients.com/
-    bgGradient: [[255, 255, 255], [223, 233, 243]],
-    bgImage: {
-      fit: 'fill',
-      path: './public/moeru-ai-og.png',
-      position: 'center',
-    },
-    description: page.notes,
-    font: {
-      description: {
-        // 076 Premium Dark from https://webgradients.com/
-        color: [67, 67, 67],
-        families,
-        size: 24,
+  getImageOptions: (_path, page: Card) => {
+    const { avatar } = page.metadata as { avatar?: string }
+
+    return {
+      // 134 Glass Water from https://webgradients.com/
+      bgGradient: [[255, 255, 255], [223, 233, 243]],
+      bgImage: {
+        fit: 'fill',
+        path: './public/moeru-ai-og.png',
+        position: 'center',
       },
-      title: {
-        color: [0, 0, 0],
-        families,
-        lineHeight: 3, // if no logo
-        weight: 'Bold',
+      description: page.notes,
+      font: {
+        description: {
+          // 076 Premium Dark from https://webgradients.com/
+          color: [67, 67, 67],
+          families,
+          size: 24,
+        },
+        title: {
+          color: [0, 0, 0],
+          families,
+          lineHeight: avatar ? 1 : 3,
+          weight: 'Bold',
+        },
       },
-    },
-    fonts: [
-      // astro docs assets
-      'https://cdn.jsdelivr.net/gh/withastro/docs/src/pages/open-graph/_fonts/noto-sans/noto-500-normal.ttf',
-      'https://cdn.jsdelivr.net/gh/withastro/docs/src/pages/open-graph/_fonts/noto-sans/chinese-simplified-500-normal.ttf',
-      // 'https://cdn.jsdelivr.net/gh/withastro/docs/src/pages/open-graph/_fonts/noto-sans/chinese-traditional-500-normal.ttf',
-      'https://cdn.jsdelivr.net/gh/withastro/docs/src/pages/open-graph/_fonts/noto-sans/japanese-500-normal.ttf',
-      // fontsource api
-      // 'https://api.fontsource.org/v1/fonts/noto-sans/latin-400-normal.ttf',
-      // 'https://api.fontsource.org/v1/fonts/noto-sans-sc/chinese-simplified-400-normal.ttf',
-      // 'https://api.fontsource.org/v1/fonts/noto-sans-tc/chinese-traditional-400-normal.ttf',
-      // 'https://api.fontsource.org/v1/fonts/noto-sans-jp/japanese-400-normal.ttf',
-    ],
-    format: 'WEBP',
-    // logo: {
-    //   path: './public/characters/existing/blue_archive/hatsune_miku.png',
-    //   size: [144],
-    // },
-    padding: 72,
-    quality: 90,
-    title: page.name,
-  }),
+      fonts: [
+        // astro docs assets
+        'https://cdn.jsdelivr.net/gh/withastro/docs/src/pages/open-graph/_fonts/noto-sans/noto-500-normal.ttf',
+        'https://cdn.jsdelivr.net/gh/withastro/docs/src/pages/open-graph/_fonts/noto-sans/chinese-simplified-500-normal.ttf',
+        // 'https://cdn.jsdelivr.net/gh/withastro/docs/src/pages/open-graph/_fonts/noto-sans/chinese-traditional-500-normal.ttf',
+        'https://cdn.jsdelivr.net/gh/withastro/docs/src/pages/open-graph/_fonts/noto-sans/japanese-500-normal.ttf',
+        // fontsource api
+        // 'https://api.fontsource.org/v1/fonts/noto-sans/latin-400-normal.ttf',
+        // 'https://api.fontsource.org/v1/fonts/noto-sans-sc/chinese-simplified-400-normal.ttf',
+        // 'https://api.fontsource.org/v1/fonts/noto-sans-tc/chinese-traditional-400-normal.ttf',
+        // 'https://api.fontsource.org/v1/fonts/noto-sans-jp/japanese-400-normal.ttf',
+      ],
+      format: 'WEBP',
+      logo: avatar
+        ? {
+            path: `./public${avatar}`,
+            size: [144],
+          }
+        : undefined,
+      padding: 72,
+      quality: 90,
+      title: page.name,
+    }
+  },
 
   getSlug: (path, _page: Card) => `${path}.webp`,
 

diff --git a/packages/characters-existing/src/blue_archive/hatsune_miku/index.ts b/packages/characters-existing/src/blue_archive/hatsune_miku/index.ts
@@ -30,6 +30,9 @@ export const hatsune_miku = defineCard({
     momotalk_4,
     virtual_idol_stage,
   ],
+  metadata: {
+    avatar: '/characters/existing/blue_archive/hatsune_miku.png',
+  },
   name: 'Miku Hatsune',
   nickname: 'Miku',
   notes: 'Hatsune Miku from "Blue Archive".',

diff --git a/packages/characters-existing/src/misc/tsukuyomi_chan/index.ts b/packages/characters-existing/src/misc/tsukuyomi_chan/index.ts
@@ -12,6 +12,7 @@ export const tsukuyomi_chan = defineCard({
   description,
   greetings: [chat.msg`Hello, My name is Tsukuyomi-chan. Is there anything I can do to help? I would like to help you in any way I can.`],
   metadata: {
+    'avatar': '/characters/existing/misc/tsukuyomi_chan.png',
     'license.link': 'https://tyc.rei-yumesaki.net/about/terms/',
     'license.name': 'Tsukuyomi-chan Character License',
   },