Generate og images & adjust color

Author: skryukov

docs/.vitepress/config.mts

@@ -1,3 +1,7 @@
+import { buildEndGenerateOpenGraphImages } from '@nolebase/vitepress-plugin-og-image'
+import fs from 'fs-extra'
+import { createRequire } from 'node:module'
+import path from 'path'
 import { defineConfig } from 'vitepress'
 import llmstxt from 'vitepress-plugin-llms'
 import { availableSinceMarkdownPlugin } from './availableSinceMarkdownPlugin'
@@ -6,7 +10,9 @@ import { tabsMarkdownPlugin } from './vitepress-plugin-tabs/tabsMarkdownPlugin'
 const title = 'Inertia Rails'
 const description = 'Documentation for Inertia.js Rails adapter'
 const site = 'https://inertia-rails.dev'
-const image = `${site}/og_image.jpg`
+
+const image = `${site}/og-image.png`
+const require = createRequire(import.meta.url)
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -215,4 +221,40 @@ export default defineConfig({
       { icon: 'discord', link: 'https://discord.gg/inertiajs' },
     ],
   },
+  async buildEnd(siteconfig) {
+    async function loadSvgFontBuffers() {
+      const interFontFilesDirectoryPath = path.join(
+        require.resolve('@fontsource/inter'),
+        '..',
+        'files',
+      )
+      const interFontFilePaths = [
+        'inter-latin-500-normal.woff2',
+        'inter-latin-800-normal.woff2',
+      ]
+
+      return await Promise.all(
+        interFontFilePaths.map((filename) =>
+          fs.readFile(path.join(interFontFilesDirectoryPath, filename)),
+        ),
+      )
+    }
+
+    await buildEndGenerateOpenGraphImages({
+      baseUrl: 'https://inertia-rails.dev',
+      svgFontBuffers: await loadSvgFontBuffers(),
+      category: {
+        byPathPrefix: [
+          {
+            prefix: '/guide',
+            text: 'Guide',
+          },
+          {
+            prefix: '/cookbook',
+            text: 'Cookbook',
+          },
+        ],
+      },
+    })(siteconfig)
+  },
 })

docs/.vitepress/theme/style.css

@@ -48,9 +48,9 @@
   --vp-c-default-2: var(--vp-c-gray-2);
   --vp-c-default-3: var(--vp-c-gray-3);
   --vp-c-default-soft: var(--vp-c-gray-soft);
-  --vp-c-brand-1: rgb(37 99 235);
-  --vp-c-brand-2: rgb(52 109 243);
-  --vp-c-brand-3: rgb(68 125 259);
+  --vp-c-brand-1: rgb(37, 99, 235);
+  --vp-c-brand-2: rgb(53 109 243);
+  --vp-c-brand-3: rgb(69 125 260);
   --vp-c-brand-soft: var(--vp-c-purple-soft);
 
   --vp-c-tip-1: var(--vp-c-brand-1);
@@ -76,13 +76,13 @@
 :root {
   --vp-button-brand-border: transparent;
   --vp-button-brand-text: var(--vp-c-white);
-  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-bg: var(--vp-c-brand-1);
   --vp-button-brand-hover-border: transparent;
   --vp-button-brand-hover-text: var(--vp-c-white);
   --vp-button-brand-hover-bg: var(--vp-c-brand-2);
   --vp-button-brand-active-border: transparent;
   --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+  --vp-button-brand-active-bg: var(--vp-c-brand-3);
 }
 
 /**

docs/guide/index.md docs/guide.mddocs/guide/index.md renamed to docs/guide.md

@@ -5,7 +5,7 @@ We've setup a demo app for Inertia.js called [Ping CRM](https://demo.inertiajs.c
 > [!NOTE]
 > The Ping CRM demo is hosted on Heroku and the database is reset every hour. Please be respectful when editing data.
 
-[![Ping CRM demo](/pingcrm.png)](https://demo.inertiajs.com/login)
+[![Ping CRM demo](/images/pingcrm.png)](https://demo.inertiajs.com/login)
 
 In addition to the Vue version of Ping CRM, we also maintain a Svelte version of the application, which you can find [on GitHub](https://github.com/inertiajs/pingcrm-svelte).