Add open graph image to website

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

Hide file tree

Showing 5 changed files with 307 additions and 24 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/package.json b/website/package.json
@@ -34,6 +34,7 @@
  "@builder.io/qwik-city": "1.1.5",
  "@mapbox/rehype-prism": "^0.8.0",
  "@netlify/edge-functions": "^2.0.0",
+ "@resvg/resvg-wasm": "^2.6.0",
  "@types/eslint": "^8.44.0",
  "@types/mapbox__rehype-prism": "^0.8.0",
  "@types/node": "^20.4.2",
@@ -48,6 +49,7 @@
  "postcss": "^8.4.27",
  "prettier": "2.8.8",
  "rehype-external-links": "^2.1.0",
+ "satori": "^0.10.11",
  "tailwindcss": "^3.3.3",
  "tsm": "^2.3.0",
  "typescript": "^5.3.3",

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);