bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-28 10:01:21 +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 = ''; export let imageData: string = '';
</script> </script>
<div class="flex h-full w-full items-center justify-center bg-black"> <div class="flex h-full w-full items-center justify-center bg-black px-24">
<div class="flex flex-row items-center rounded-lg p-4 shadow-md"> <div class="flex flex-row items-center rounded-lg shadow-md">
<div class="ml-10 flex w-7/12 flex-col"> <div class="flex w-7/12 flex-col">
<Icons.logo /> <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"> <p class="mt-0 text-3xl font-thin text-gray-400">
{subTitle} {subTitle}
</p> </p>
</div> </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="" /> <img class="rounded-xl" src={`data:image/jpeg;base64,${imageData}`} width={400} alt="" />
</div> </div>
</div> </div>

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

@ -1,7 +1,11 @@
<script> <script>
import { OgImage } from '$lib/components/site'; 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> </script>
<div class="h-[630px] w-[1200px]"> <section class="h-[630px] w-[1200px]">
<OgImage /> <OgImage {imageData} />
</div> </section>