feat(og): implement Open Graph image generation for photos

- Added OgModule with OgController and OgService to handle Open Graph image requests.
- Integrated Satori and Resvg for rendering images based on photo metadata.
- Created OgTemplate for structuring the Open Graph image layout.
- Enhanced error handling for photo retrieval and image generation processes.
- Updated package dependencies to include @resvg/resvg-js and satori for image processing.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/ssr/src/app/og/[photoId]/route.tsx

@@ -1,12 +1,14 @@
 import { readFileSync } from 'node:fs'
 
 import type { PhotoManifestItem } from '@afilmory/builder'
-import { generateRSSFeed } from '@afilmory/utils'
+import { tsImport } from 'tsx/esm/api'
 import type { Plugin } from 'vite'
 
 import type { SiteConfig } from '../../../../site.config'
 import { MANIFEST_PATH } from './__internal__/constants'
 
+const { generateRSSFeed } = await tsImport('@afilmory/utils', import.meta.url)
+
 export function createFeedSitemapPlugin(siteConfig: SiteConfig): Plugin {
   return {
     name: 'feed-sitemap-generator',

apps/web/plugins/vite/feed-sitemap.ts

@@ -72,7 +72,7 @@ export const ExifPanel: FC<{
       style={{
         pointerEvents: visible ? 'auto' : 'none',
         backgroundImage:
-          'linear-gradient(to bottom right, color-mix(in srgb, var(--color-background) 98%, transparent), color-mix(in srgb, var(--color-background) 95%, transparent))',
+          'linear-gradient(to bottom right, rgba(var(--color-materialMedium)), rgba(var(--color-materialThick)), transparent)',
         boxShadow:
           '0 8px 32px color-mix(in srgb, var(--color-accent) 8%, transparent), 0 4px 16px color-mix(in srgb, var(--color-accent) 6%, transparent), 0 2px 8px rgba(0, 0, 0, 0.1)',
       }}
@@ -101,7 +101,7 @@ export const ExifPanel: FC<{
 
       <ScrollArea
         rootClassName="flex-1 min-h-0 overflow-auto lg:overflow-hidden"
-        viewportClassName="px-4 pb-4 [&_*]:select-text"
+        viewportClassName="px-4 pb-4 **:select-text"
       >
         <div className={`space-y-${isMobile ? '3' : '4'}`}>
           {/* 基本信息和标签 - 合并到一个 section */}

apps/web/src/components/ui/photo-viewer/ExifPanel.tsx

@@ -93,7 +93,7 @@ export const GalleryThumbnail: FC<{
 
   return (
     <m.div
-      className="pb-safe border-accent/20 z-10 shrink-0 border-t backdrop-blur-2xl"
+      className="pb-safe border-accent/20 bg-material-medium z-10 shrink-0 border-t backdrop-blur-2xl"
       initial={{ y: 100, opacity: 0 }}
       animate={{
         y: visible ? 0 : 48,
@@ -103,8 +103,6 @@ export const GalleryThumbnail: FC<{
       transition={Spring.presets.smooth}
       style={{
         pointerEvents: visible ? 'auto' : 'none',
-        backgroundImage:
-          'linear-gradient(to bottom right, color-mix(in srgb, var(--color-background) 98%, transparent), color-mix(in srgb, var(--color-background) 95%, transparent))',
         boxShadow:
           '0 -8px 32px color-mix(in srgb, var(--color-accent) 8%, transparent), 0 -4px 16px color-mix(in srgb, var(--color-accent) 6%, transparent), 0 -2px 8px rgba(0, 0, 0, 0.1)',
       }}

apps/web/src/components/ui/photo-viewer/GalleryThumbnail.tsx

@@ -26,6 +26,7 @@
     "@afilmory/utils": "workspace:*",
     "@aws-sdk/client-s3": "3.921.0",
     "@hono/node-server": "^1.19.6",
+    "@resvg/resvg-js": "2.6.2",
     "better-auth": "1.3.34",
     "drizzle-orm": "^0.44.7",
     "hono": "4.10.4",
@@ -34,6 +35,7 @@
     "pg": "^8.16.3",
     "picocolors": "1.1.1",
     "reflect-metadata": "0.2.2",
+    "satori": "0.18.3",
     "tsyringe": "4.10.0",
     "zod": "^4.1.11"
   },

be/apps/core/package.json

@@ -12,6 +12,7 @@ import { CacheModule } from './cache/cache.module'
 import { DashboardModule } from './dashboard/dashboard.module'
 import { DataSyncModule } from './data-sync/data-sync.module'
 import { FeedModule } from './feed/feed.module'
+import { OgModule } from './og/og.module'
 import { OnboardingModule } from './onboarding/onboarding.module'
 import { PhotoModule } from './photo/photo.module'
 import { ReactionModule } from './reaction/reaction.module'
@@ -51,6 +52,7 @@ function createEventModuleOptions(redis: RedisAccessor) {
     TenantModule,
     DataSyncModule,
     FeedModule,
+    OgModule,
 
     // This must be last
     StaticWebModule,

be/apps/core/src/modules/index.module.ts

@@ -0,0 +1,14 @@
+import { ContextParam, Controller, Get, Param } from '@afilmory/framework'
+import type { Context } from 'hono'
+
+import { OgService } from './og.service'
+
+@Controller({ prefix: '/og', bypassGlobalPrefix: true })
+export class OgController {
+  constructor(private readonly ogService: OgService) {}
+
+  @Get('/:photoId')
+  async getOgImage(@ContextParam() context: Context, @Param('photoId') photoId: string) {
+    return await this.ogService.render(context, photoId)
+  }
+}

be/apps/core/src/modules/og/og.controller.ts

@@ -0,0 +1,13 @@
+import { Module } from '@afilmory/framework'
+
+import { ManifestModule } from '../manifest/manifest.module'
+import { SiteSettingModule } from '../site-setting/site-setting.module'
+import { OgController } from './og.controller'
+import { OgService } from './og.service'
+
+@Module({
+  imports: [ManifestModule, SiteSettingModule],
+  controllers: [OgController],
+  providers: [OgService],
+})
+export class OgModule {}

be/apps/core/src/modules/og/og.module.ts

@@ -0,0 +1,31 @@
+/** @jsxImportSource hono/jsx */
+import { Buffer } from 'node:buffer'
+
+import { Resvg } from '@resvg/resvg-js'
+import type { SatoriOptions } from 'satori'
+import satori from 'satori'
+
+import type { OgTemplateProps } from './og.template'
+import { OgTemplate } from './og.template'
+
+interface RenderOgImageOptions {
+  template: OgTemplateProps
+  fonts: SatoriOptions['fonts']
+}
+
+export async function renderOgImage({ template, fonts }: RenderOgImageOptions): Promise<Uint8Array> {
+  const svg = await satori(<OgTemplate {...template} />, {
+    width: 1200,
+    height: 628,
+    fonts,
+    embedFont: true,
+  })
+
+  const svgInput = typeof svg === 'string' ? svg : Buffer.from(svg)
+  const renderer = new Resvg(svgInput, {
+    fitTo: { mode: 'width', value: 1200 },
+    background: 'rgba(0,0,0,0)',
+  })
+
+  return renderer.render().asPng()
+}