Add open graph image to website

fabian-hiller · Jan 9, 2024 · eb736d9 · eb736d9
1 parent a5406f1
commit eb736d9
Show file tree

Hide file tree

Showing 6 changed files with 306 additions and 24 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/package.json b/website/package.json
@@ -39,6 +39,7 @@
     "@types/node": "^20.4.2",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
+    "@vercel/og": "^0.6.2",
     "autoprefixer": "^10.4.14",
     "dotenv": "^16.3.1",
     "eslint": "^8.45.0",

diff --git a/website/src/components/Head.tsx b/website/src/components/Head.tsx
@@ -12,7 +12,9 @@ export const Head = component$(() => {
 
   return (
     <head>
-      <title>{head.title}</title>
+      <title>
+        {location.url.pathname === '/' ? head.title : `${head.title} | Valibot`}
+      </title>
 
       <meta charSet="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -27,6 +29,20 @@ export const Head = component$(() => {
       <link rel="apple-touch-icon" sizes="180x180" href="/icon-180px.jpg" />
       <link rel="manifest" href="/manifest.json" />
 
+      <meta
+        property="og:image"
+        content={
+          location.url.pathname === '/'
+            ? '/og-image'
+            : `/og-image?title=${encodeURIComponent(
+                head.title
+              )}&description=${encodeURIComponent(
+                head.meta.find((item) => item.name === 'description')
+                  ?.content || ''
+              )}`
+        }
+      />
+
       <script
         async
         src="https://umami.valibot.dev/script.js"
@@ -41,20 +57,8 @@ export const Head = component$(() => {
         <script dangerouslySetInnerHTML="document.documentElement.classList.remove('dark')" />
       )}
 
-      {[...head.meta, ...(head.frontmatter.meta || [])].map(
-        ({ key, ...props }) => (
-          <meta key={key} {...props} />
-        )
-      )}
-
-      {/* TODO: Check if we really need this code */}
-      {head.links.map(({ key, ...props }) => (
-        <link key={key} {...props} />
-      ))}
-
-      {/* TODO: Check if we really need this code */}
-      {head.styles.map(({ key, style, ...props }) => (
-        <style key={key} {...props} dangerouslySetInnerHTML={style} />
+      {head.meta.map(({ key, ...props }) => (
+        <meta key={key} {...props} />
       ))}
     </head>
   );

diff --git a/website/src/routes/layout.tsx b/website/src/routes/layout.tsx
@@ -1,15 +1,6 @@
 import { component$, Slot, useSignal } from '@builder.io/qwik';
-import { type DocumentHead } from '@builder.io/qwik-city';
 import { DocSearch, Footer, Header, RoutingIndicator } from '~/components';
 
-export const head: DocumentHead = (request) => ({
-  // Add name of site to title of subpages
-  title:
-    request.url.pathname === '/'
-      ? request.head.title
-      : `${request.head.title} | Valibot`,
-});
-
 export default component$(() => {
   // Use search open signal
   const searchOpen = useSignal(false);