mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Fixing up the og image generation, add svg background, add more input params.
This commit is contained in:
parent
eac61fffe3
commit
9298a88ba7
5 changed files with 84 additions and 33 deletions
|
|
@ -1,36 +1,45 @@
|
|||
<script lang="ts">
|
||||
export let title: string;
|
||||
export let header: string;
|
||||
export let page: string;
|
||||
export let image: string;
|
||||
export let description: string;
|
||||
export let content: string;
|
||||
export let width = 1200;
|
||||
export let height = 630;
|
||||
export let url: string;
|
||||
</script>
|
||||
|
||||
<div class="social-card">
|
||||
<div class="social-card" style={`width: ${width}px; height: ${height}px;`}>
|
||||
<div class="social-card-header">
|
||||
<div class="social-card-title">
|
||||
<div class="social-card-image">
|
||||
<img src={image || '/images/bored-game.png'} alt="Bored Game" />
|
||||
</div>
|
||||
<p>{title}</p>
|
||||
<h1>{header}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social-card-content">
|
||||
<p>{description}</p>
|
||||
<h2 class="page">{page}</h2>
|
||||
<p class="content">{content}</p>
|
||||
</div>
|
||||
<div class="social-card-footer">
|
||||
<footer>
|
||||
<p>Bored Game © {new Date().getFullYear()} | Built by Bradley Shellnut | {url || 'https://boredgame.vercel.app'}</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
src: url('/src/lib/NotoSans-Regular.ttf');
|
||||
font-family: 'Fira Sans';
|
||||
src: url('/src/lib/FiraSans-Bold.ttf');
|
||||
}
|
||||
|
||||
.social-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
width: 350px;
|
||||
justify-content: space-between;
|
||||
background-color: #DFDBE5;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.17' fill-rule='evenodd'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.social-card-header {
|
||||
|
|
@ -42,24 +51,48 @@
|
|||
|
||||
.social-card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
place-items: center;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.875rem; /* 30px */
|
||||
line-height: 2.25rem; /* 36px */
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.social-card-image {
|
||||
display: flex;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.social-card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
padding: 1.5rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
font-size: 3.75rem; /* 60px */
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 1.25rem; /* 20px */
|
||||
line-height: 1.75rem; /* 28px */
|
||||
}
|
||||
|
||||
.social-card-footer {
|
||||
display: flex;
|
||||
padding: 1.5rem;
|
||||
padding-top: 0;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
BIN
src/lib/fonts/FiraSans-Bold.ttf
Normal file
BIN
src/lib/fonts/FiraSans-Bold.ttf
Normal file
Binary file not shown.
|
|
@ -3,6 +3,13 @@ import { search_schema } from '$lib/zodValidation';
|
|||
import type { MetaTagsProps } from 'svelte-meta-tags';
|
||||
|
||||
export const load = async ({ fetch, url }) => {
|
||||
const image = {
|
||||
url: `${
|
||||
new URL(url.pathname, url.origin).href
|
||||
}og?header=Bored Game&page=Home&content=Keep track of your games`,
|
||||
width: 1200,
|
||||
height: 630
|
||||
};
|
||||
const metaTags: MetaTagsProps = Object.freeze({
|
||||
title: 'Home',
|
||||
description: 'Home page',
|
||||
|
|
@ -12,15 +19,19 @@ export const load = async ({ fetch, url }) => {
|
|||
locale: 'en_US',
|
||||
title: 'Home',
|
||||
description: 'Bored Game, keep track of your games',
|
||||
images: [
|
||||
{
|
||||
url: `${
|
||||
new URL(url.pathname, url.origin).href
|
||||
}og?title=Home | Bored Game&description=Bored Game, keep track of your games`,
|
||||
width: 1200,
|
||||
height: 630
|
||||
}
|
||||
]
|
||||
images: [image],
|
||||
siteName: 'Bored Game'
|
||||
},
|
||||
twitter: {
|
||||
handle: '@boredgame',
|
||||
site: '@boredgame',
|
||||
cardType: 'summary_large_image',
|
||||
title: 'Home | Bored Game',
|
||||
description: 'Bored Game, keep track of your games',
|
||||
image: `${
|
||||
new URL(url.pathname, url.origin).href
|
||||
}og?header=Bored Game&page=Home&content=Keep track of your games`,
|
||||
imageAlt: 'Home | Bored Game'
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// import TextSearch from '$lib/components/search/textSearch/index.svelte';
|
||||
import SocialImageCard from '$components/socialImageCard.svelte';
|
||||
import RandomSearch from '$lib/components/search/random/index.svelte';
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import logo from '$lib/assets/bored-game.png';
|
||||
|
||||
// import Random from '$lib/components/random/index.svelte';
|
||||
|
|
@ -27,8 +26,7 @@
|
|||
<!-- <TextSearch showButton advancedSearch data={data.form} /> -->
|
||||
</div>
|
||||
|
||||
<SocialImageCard title="Home | Bored Game" icon={logo}>
|
||||
<h2>Bored Game, keep track of your games!</h2>
|
||||
<SocialImageCard header="Bored Game" page="Home" content="Test" image={logo} width={1200} height={630}>
|
||||
</SocialImageCard>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -11,9 +11,18 @@ const width = 1200;
|
|||
export const GET: RequestHandler = async ({ url }) => {
|
||||
try {
|
||||
const ogImage = `${new URL(url.origin).href}images/bored-game.png`;
|
||||
const title = url.searchParams.get('title') ?? undefined;
|
||||
const description = url.searchParams.get('description') ?? '';
|
||||
const result = SocialImageCard.render({ title, image: ogImage, description });
|
||||
const header = url.searchParams.get('header') ?? undefined;
|
||||
const page = url.searchParams.get('page') ?? undefined;
|
||||
const content = url.searchParams.get('content') ?? '';
|
||||
const result = SocialImageCard.render({
|
||||
header,
|
||||
page,
|
||||
content,
|
||||
image: ogImage,
|
||||
width,
|
||||
height,
|
||||
url: new URL(url.origin).href
|
||||
});
|
||||
console.log('result', result);
|
||||
const element = toReactNode(`${result.html}<style>${result.css.code}</style>`);
|
||||
const svg = await satori(element, {
|
||||
|
|
|
|||
Loading…
Reference in a new issue