Skip to content

Commit

Permalink
Add open graph image to website
Browse files Browse the repository at this point in the history
  • Loading branch information
fabian-hiller committed Jan 9, 2024
1 parent a5406f1 commit eb736d9
Show file tree
Hide file tree
Showing 6 changed files with 306 additions and 24 deletions.
122 changes: 122 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
34 changes: 19 additions & 15 deletions website/src/components/Head.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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"
Expand All @@ -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>
);
Expand Down
9 changes: 0 additions & 9 deletions website/src/routes/layout.tsx
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
Loading

0 comments on commit eb736d9

Please sign in to comment.