feat(stage-web,docs): configured open graph protocol image

2025-11-27 00:40:16 +08:00
parent bfdd8574fe
commit c3a4b29991
5 changed files with 34 additions and 19 deletions
@@ -3,12 +3,26 @@
  <head>
    <meta charset="UTF-8" />
    <title>AIRI</title>
-    <meta name="description" content="Open source attempt to create cyber companion">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <meta name="theme-color" content="rgb(18,18,18)" id="themeColor" />
+    <meta name="description" content="Open source attempt to create cyber companion.">
    <meta name="apple-mobile-web-app-title" content="AIRI" />
+    <meta name="theme-color" content="rgb(18,18,18)" id="themeColor" />
+
+    <!-- Open Graph Protocol -->
+    <meta property="og:title" content="AIRI">
+    <meta property="og:site_name" content="AIRI">
+    <meta property="og:image" content="https://airi.moeru.ai/open-graph.png">
+    <meta property="og:description" content="Top 1 open source attempt to create cyber companion, capable of playing Minecraft, Factorio, Balatro, etc. .">
+    <meta property="og:url" content="https://airi.moeru.ai/docs/en/">
+
+    <!-- Open Graph Protocol extension, Twitter cards -->
+    <meta name="twitter:title" content="AIRI">
+    <meta name="twitter:description" content="Top 1 open source attempt to create cyber companion, capable of playing Minecraft, Factorio, Balatro, etc. .">
+    <meta name="twitter:image" content="https://airi.moeru.ai/open-graph.png">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:creator" content="Moeru AI">
    <script>
      ;(function () {
        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -19,9 +19,9 @@ import {
  github,
  ogImage,
  ogUrl,
-  rekaDescription,
-  rekaName,
-  rekaShortName,
+  projectDescription,
+  projectName,
+  projectShortName,
  releases,
  x,
 } from './meta'
@@ -39,22 +39,23 @@ function withBase(url: string) {
 export default defineConfig({
  cleanUrls: true,
  ignoreDeadLinks: true,
-  title: rekaName,
-  description: rekaDescription,
-  titleTemplate: rekaShortName,
+  title: projectName,
+  description: projectDescription,
+  titleTemplate: projectShortName,
  head: [
    ['meta', { name: 'theme-color', content: '#0b0d0f' }],
    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg', sizes: 'any' }],
    ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' }],
-    ['meta', { name: 'apple-mobile-web-app-title', content: rekaName }],
-    ['meta', { name: 'author', content: `${teamMembers.map(c => c.name).join(', ')} and ${rekaName} contributors` }],
+    ['meta', { name: 'apple-mobile-web-app-title', content: projectName }],
+    ['meta', { name: 'author', content: `${teamMembers.map(c => c.name).join(', ')} and ${projectName} contributors` }],
    ['meta', { name: 'keywords', content: '' }],
-    ['meta', { property: 'og:title', content: rekaName }],
-    ['meta', { property: 'og:description', content: rekaDescription }],
-    ['meta', { property: 'og:url', content: ogUrl }],
+    ['meta', { property: 'og:title', content: projectName }],
+    ['meta', { property: 'og:site_name', content: projectName }],
    ['meta', { property: 'og:image', content: ogImage }],
-    ['meta', { name: 'twitter:title', content: rekaName }],
-    ['meta', { name: 'twitter:description', content: rekaDescription }],
+    ['meta', { property: 'og:description', content: projectDescription }],
+    ['meta', { property: 'og:url', content: ogUrl }],
+    ['meta', { name: 'twitter:title', content: projectName }],
+    ['meta', { name: 'twitter:description', content: projectDescription }],
    ['meta', { name: 'twitter:image', content: ogImage }],
    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
    ['link', { rel: 'mask-icon', href: '/logo.svg', color: '#ffffff' }],
@@ -1,14 +1,14 @@
 // noinspection ES6PreferShortImport: IntelliJ IDE hint to avoid warning to use `~/contributors`, will fail on build if changed

 /* Texts */
-export const rekaName = 'Project AIRI'
-export const rekaShortName = 'AIRI'
-export const rekaDescription
+export const projectName = 'Project AIRI'
+export const projectShortName = 'AIRI'
+export const projectDescription
  = 'An open-source attempt to re-create Neuro-sama, the most famous AI VTuber on this earth, but also forming a cyber companion for everyone.'

 /* vitepress head */
 export const ogUrl = 'https://airi.moeru.ai/docs/'
-export const ogImage = `${ogUrl}og.jpg`
+export const ogImage = `${ogUrl}open-graph.png`

 /* GitHub and social links */
 export const github = 'https://github.com/moeru-ai/airi'