diff --git a/nix/default.nix b/nix/default.nix index 4f9786b..8ff5c2e 100644 --- a/nix/default.nix +++ b/nix/default.nix @@ -11,7 +11,7 @@ let in stdenvNoCC.mkDerivation (finalAttrs: { pname = "isabelroses-website"; - version = "0.9.2"; + version = "0.9.3"; src = ../.; diff --git a/public/svg/nix.svg b/public/svg/nix.svg new file mode 100644 index 0000000..3a2da9f --- /dev/null +++ b/public/svg/nix.svg @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/src/consts.ts b/src/consts.ts index 2ef6d87..ccaa9b0 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -1,8 +1,5 @@ -// Place any global data in this file. -// You can import this data from anywhere in your site by using the `import` keyword. - export const SITE_TITLE = "isabel roses"; -export const SITE_DESCRIPTION = "A website documenting my development journey"; +export const SITE_DESCRIPTION = "the nix witch"; export const PROJECTS = [ { diff --git a/src/lib/opengraph.tsx b/src/lib/opengraph.tsx index 21fc59a..39f5b50 100644 --- a/src/lib/opengraph.tsx +++ b/src/lib/opengraph.tsx @@ -3,7 +3,17 @@ import React from 'react'; import { readFile } from "node:fs/promises"; import { Resvg } from "@resvg/resvg-js"; -export const generateOpenGraph = async (title: string, description: string) => { +export const generateOpenGraph = async (title: string, description: string, date?: Date) => { + const nixLogoSvg = await readFile("./public/svg/nix.svg", "utf-8"); + const nixLogoDataUrl = `data:image/svg+xml;base64,${Buffer.from(nixLogoSvg).toString('base64')}`; + + const formattedDate = date ? + new Date(date).toLocaleDateString('en-GB', { + year: 'numeric', + month: 'long', + day: 'numeric', + }) : null; + const svg = await satori(
{ width: '100%', display: 'flex', flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', backgroundColor: '#000', - fontWeight: 600, + color: '#d1d5db', + padding: '60px', + fontFamily: 'IBM Plex Mono', }} > -
{title}
-
- {description.length <= 60 ? description : description.substring(0, 57) + "..."} +
+ Nix Logo +
+ isabelroses.com +
+
+
+

30 ? '42px' : '52px', + fontWeight: '700', + color: '#ffffff', + margin: '0', + lineHeight: 1.1, + maxWidth: '90%', + letterSpacing: '-0.02em', + }} + > + {title} +

+

+ {description.length <= 100 ? description : description.substring(0, 97) + "..."} +

+ {formattedDate && ( +
+ {formattedDate} +
+ )}
, { - width: 800, - height: 400, + width: 1200, + height: 630, fonts: [ { name: "IBM Plex Mono", @@ -36,10 +120,11 @@ export const generateOpenGraph = async (title: string, description: string) => { } ); - const resvg = new Resvg(svg, null) - const pngData = resvg.render() - const pngBuffer = pngData.asPng() + const resvg = new Resvg(svg, { + background: '#000000', + }); + const pngData = resvg.render(); + const pngBuffer = pngData.asPng(); return pngBuffer; -} - +} \ No newline at end of file diff --git a/src/pages/blog/[...slug].png.ts b/src/pages/blog/[...slug].png.ts index 9baca57..4bd20b7 100644 --- a/src/pages/blog/[...slug].png.ts +++ b/src/pages/blog/[...slug].png.ts @@ -13,11 +13,14 @@ export async function getStaticPaths() { export const GET: APIRoute = async ({ params }) => { const postData = posts.find((post) => post.id === params.slug); - const png = await generateOpenGraph(postData.data.title, postData.data.description); + const png = await generateOpenGraph( + postData.data.title, + postData.data.description, + postData.data.date + ); return new Response(png, { status: 200, headers: { "Content-Type": "image/png" }, }); -}; - +}; \ No newline at end of file