bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-27 01:21:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add preview and side margins

Browse source
This commit is contained in:
Bart van der Braak 2024-01-22 09:46:02 +01:00
parent 791d2cae8f
commit b5b12ae5d5
2 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/lib/components/site/opengraph-image.svelte
View file

@ -7,16 +7,16 @@
export let imageData: string = '';
</script>
<div class="flex h-full w-full items-center justify-center bg-black">
<div class="flex flex-row items-center rounded-lg p-4 shadow-md">
<div class="ml-10 flex w-7/12 flex-col">
<div class="flex h-full w-full items-center justify-center bg-black px-24">
<div class="flex flex-row items-center rounded-lg shadow-md">
<div class="flex w-7/12 flex-col">
<Icons.logo />
<h2 class="leading-tighter mb-0 text-6xl font-bold tracking-tighter text-white">{title}</h2>
<h2 class="mb-0 text-6xl font-bold leading-tight tracking-tighter text-white">{title}</h2>
<p class="mt-0 text-3xl font-thin text-gray-400">
{subTitle}
</p>
</div>
<div class="mt-0 flex w-5/12">
<div class="mb--50 mt-0 flex w-5/12">
<img class="rounded-xl" src={`data:image/jpeg;base64,${imageData}`} width={400} alt="" />
</div>
</div>

10
src/routes/og.png/preview/+page.svelte
View file

@ -1,7 +1,11 @@
<script>
import { OgImage } from '$lib/components/site';
import meInline from '$lib/assets/og/me-inline.jpg';
import fs from 'fs';
import path from 'path';
const imageData = fs.readFileSync(path.join(process.cwd(), meInline), 'base64');
</script>
<div class="h-[630px] w-[1200px]">
<OgImage />
</div>
<section class="h-[630px] w-[1200px]">
<OgImage {imageData} />
</section>