feat: added open graph

.vitepress/config.ts

@@ -10,7 +10,7 @@ import { generateRpcDocs } from './scripts/rpc-docs'
 
 // @unocss-include
 
-const baseUrl = '/nimiq-developer-center/'
+export const baseUrl = '/nimiq-developer-center/'
 
 // https://vitepress.dev/reference/site-config
 export default async () => {

.vitepress/vite.config.ts

@@ -1,14 +1,20 @@
 import { URL, fileURLToPath } from 'node:url'
 import { env } from 'node:process'
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
 import { defineConfig } from 'vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import VueDevTools from 'vite-plugin-vue-devtools'
 import UnoCSS from 'unocss/vite'
 import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
 import { postcssIsolateStyles } from 'vitepress'
+import ogPlugin from 'vite-plugin-open-graph'
 import { version } from '../package.json'
 import { getGitStats } from './scripts/git-stats'
+import { baseUrl } from './config'
+
+const pkg = JSON.parse(readFileSync(join(__dirname, '../package.json'), 'utf-8')) as { title: string, description: string, homepage: string }
 
 export default defineConfig(async ({ mode }) => {
   const environment = env.DEPLOYMENT_ENV || mode
@@ -73,6 +79,24 @@ export default defineConfig(async ({ mode }) => {
         },
       },
 
+      ogPlugin({
+        basic: {
+          title: pkg.title,
+          description: pkg.description,
+          url: pkg.homepage,
+          image: `${baseUrl}og-image.png`,
+          siteName: pkg.title,
+          determiner: 'the',
+          locale: 'en_US',
+          type: 'website',
+        },
+        twitter: {
+          card: 'summary_large_image',
+          site: '@nimiq',
+          creator: '@nimiq',
+          title: pkg.title,
+        },
+      }),
     ],
     resolve: {
       alias: [

package.json

@@ -1,12 +1,14 @@
 {
   "name": "nimiq-developer-center",
+  "title": "Nimiq Developer Center",
   "type": "module",
   "version": "0.0.1-alpha",
-  "description": "The Nimiq Developer Center is the central place for developers to learn about Nimiq, its technology, and how to build with it.",
+  "description": "Guides, resources and tips on how to create with Nimiq. Start building the future now!",
   "author": {
     "name": "Nimiq",
     "url": "https://nimiq.com"
   },
+  "homepage": "https://onmax.github.io/nimiq-developer-center/",
   "scripts": {
     "dev": "vitepress dev",
     "build": "vitepress build",
@@ -59,6 +61,7 @@
     "unplugin-vue-components": "^0.26.0",
     "vite": "5.1.6",
     "vite-plugin-image-optimizer": "^1.1.7",
+    "vite-plugin-open-graph": "^2.0.4",
     "vite-plugin-vue-devtools": "7.0.17",
     "vitepress": "1.0.0-rc.45"
   },