feat: enhance Open Graph image generation for homepage

- Added a new endpoint to render a homepage Open Graph image with site statistics and featured photos.
- Introduced a new template for the homepage Open Graph image, including site name, description, author avatar, and featured photos.
- Updated the Open Graph service to handle rendering of the new homepage image.
- Implemented emoji loading functionality for enhanced visual representation in Open Graph images.

Signed-off-by: Innei <[email protected]>

Author: Innei

apps/docs/contents/getting-started/quick-start.mdx

@@ -2,7 +2,7 @@
 title: Quick Start
 description: Get your gallery running in about 5 minutes.
 createdAt: 2025-11-14T22:20:00+08:00
-lastModified: 2025-11-23T19:40:52+08:00
+lastModified: 2025-11-25T17:23:59+08:00
 order: 2
 ---
 
@@ -109,3 +109,5 @@ Deploy to Vercel or any Node.js host. See [Vercel Deployment](/deployment/vercel
 - **Deploy**: Follow the [Deployment Guide](/deployment) for your platform
 - **Learn more**: Check out [Architecture](/architecture) and [Builder](/builder) documentation
 
+
+

apps/docs/contents/storage/providers/b2.mdx

@@ -2,7 +2,7 @@
 title: B2 (Backblaze B2)
 description: Configure Backblaze B2 storage for cost-effective cloud storage.
 createdAt: 2025-11-14T22:10:00+08:00
-lastModified: 2025-11-23T19:40:52+08:00
+lastModified: 2025-11-25T17:23:59+08:00
 order: 33
 ---
 
@@ -94,3 +94,5 @@ Compare with AWS S3 to see which fits your usage pattern better.
 - B2 has generous rate limits, but very high concurrency may still hit limits
 - Reduce concurrency if needed
 
+
+

apps/docs/contents/storage/providers/eagle.mdx

@@ -2,7 +2,7 @@
 title: Eagle Storage
 description: Publish directly from an Eagle 4 library with filtering support.
 createdAt: 2025-11-14T22:10:00+08:00
-lastModified: 2025-11-23T19:40:52+08:00
+lastModified: 2025-11-25T17:23:59+08:00
 order: 36
 ---
 
@@ -163,3 +163,5 @@ This creates tags in the manifest based on folder structure, useful for organizi
 - Check that `baseUrl` matches your web server
 - Ensure the destination directory exists
 
+
+

apps/docs/contents/storage/providers/github.mdx

@@ -2,7 +2,7 @@
 title: GitHub Storage
 description: Use a GitHub repository as photo storage for simple deployments.
 createdAt: 2025-11-14T22:10:00+08:00
-lastModified: 2025-11-23T19:40:52+08:00
+lastModified: 2025-11-25T17:23:59+08:00
 order: 34
 ---
 
@@ -98,3 +98,5 @@ For private repositories:
 - Ensure no individual file exceeds ~100MB
 - Consider compressing large photos or using a different provider
 
+
+

apps/docs/contents/storage/providers/index.mdx

@@ -2,7 +2,7 @@
 title: Storage Providers
 description: Choose a storage provider for your photo collection.
 createdAt: 2025-11-14T22:40:00+08:00
-lastModified: 2025-11-24T22:26:48+08:00
+lastModified: 2025-11-25T17:23:59+08:00
 order: 30
 ---
 
@@ -109,3 +109,5 @@ export default defineBuilderConfig(() => ({
 Credentials and sensitive information should be stored in `.env` and referenced via `process.env`.
 
 See each provider's documentation for specific configuration options.
+
+

apps/docs/contents/storage/providers/local.mdx

@@ -2,7 +2,7 @@
 title: Local Storage
 description: Use local file system paths for development and self-hosting.
 createdAt: 2025-11-14T22:10:00+08:00
-lastModified: 2025-11-23T19:40:52+08:00
+lastModified: 2025-11-25T17:23:59+08:00
 order: 35
 ---
 
@@ -132,3 +132,5 @@ If you want to serve original photos:
 - Check that `baseUrl` matches your web server configuration
 - Ensure the destination directory exists
 
+
+

apps/docs/contents/storage/providers/s3.mdx

@@ -2,7 +2,7 @@
 title: S3 / S3-Compatible
 description: Configure S3 or S3-compatible storage for your photo collection.
 createdAt: 2025-11-14T22:10:00+08:00
-lastModified: 2025-11-23T19:40:52+08:00
+lastModified: 2025-11-25T17:23:59+08:00
 order: 32
 ---
 
@@ -119,3 +119,5 @@ This prevents processing temporary or system files.
 - For non-AWS services, ensure `endpoint` is correctly configured
 - Check that the endpoint URL format matches your provider's requirements
 
+
+

apps/landing/src/components/landing/NocturneSections.tsx

@@ -44,7 +44,7 @@ export const NocturneHero = () => {
         <div className="grid gap-6 lg:grid-cols-[1.35fr,1fr]">
           <div className="mt-4 aspect-4/3 w-full overflow-hidden rounded-2xl border border-white/10">
             <img
-              src="https://github.com/Afilmory/assets/blob/main/afilmory-readme.webp?raw=true"
+              src="https://cdn.jsdelivr.net/gh/Afilmory/assets/afilmory-readme.webp"
               alt={t('preview.imageAlt')}
               className="h-full w-full object-cover"
             />

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

@@ -7,6 +7,11 @@ import { OgService } from './og.service'
 export class OgController {
   constructor(private readonly ogService: OgService) {}
 
+  @Get('/')
+  async getHomepageOgImage(@ContextParam() context: Context) {
+    return await this.ogService.renderHomepage(context)
+  }
+
   @Get('/:photoId')
   async getOgImage(@ContextParam() context: Context, @Param('photoId') photoId: string) {
     return await this.ogService.render(context, photoId)

be/apps/core/src/modules/content/og/og.renderer.tsx

@@ -5,8 +5,9 @@ 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'
+import type { HomepageOgTemplateProps, OgTemplateProps } from './og.template'
+import { HomepageOgTemplate, OgTemplate } from './og.template'
+import { get_icon_code, load_emoji } from './tweemoji'
 
 interface RenderOgImageOptions {
   template: OgTemplateProps
@@ -29,3 +30,31 @@ export async function renderOgImage({ template, fonts }: RenderOgImageOptions):
 
   return renderer.render().asPng()
 }
+
+interface RenderHomepageOgImageOptions {
+  template: HomepageOgTemplateProps
+  fonts: SatoriOptions['fonts']
+}
+
+export async function renderHomepageOgImage({ template, fonts }: RenderHomepageOgImageOptions): Promise<Uint8Array> {
+  const svg = await satori(<HomepageOgTemplate {...template} />, {
+    width: 1200,
+    height: 628,
+    fonts,
+    embedFont: true,
+    async loadAdditionalAsset(code, segment) {
+      if (code === 'emoji' && segment) {
+        return `data:image/svg+xml;base64,${btoa(await load_emoji(get_icon_code(segment)))}`
+      }
+      return ''
+    },
+  })
+
+  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()
+}