isle/og-images.config.js at main · laymonage/isle · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// ./og-images.config.js

import { readFileSync } from 'node:fs';
import { fetchFont, html, OG_SIZE, styled } from 'og-images-generator';

const backgroundImage = readFileSync('./public/bg.svg', {
  encoding: 'base64',
});

const container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 100%;
  padding: 4rem;
  color: white;
  background-image: url('data:image/svg+xml;base64,${backgroundImage}');
  background-color: rgb(17, 24, 39);
  background-position: 60% 42%;
  background-repeat: no-repeat;
  border-left: 1.5rem solid rgb(71, 85, 105);
`;

const title = styled.div`
  font-size: 4.5rem;
  font-weight: 600;
  letter-spacing: -0.042em;
`;

const description = styled.div`
  font-size: 2.25rem;
  letter-spacing: -0.042em;
`;

/** @type {import('og-images-generator').Template} */
export const template = ({ page: { path, meta } }) =>
  html`<div style=${container}>
    <h1 style=${title}>
      ${
        path === 'index.html'
          ? `laymonage's personal website`
          : (meta?.tags?.['og:title'] ?? 'Untitled')
      }
    </h1>
    <p style=${description}>laymonage.com${(
      `/${
        path.endsWith('index.html')
          ? path.slice(0, 'index.html'.length * -1)
          : path
      }`
    ).slice(0, -1)}</p>
  </div>`;

const fonts = [
  {
    name: 'Source Sans Pro',
    url: 'https://cdn.jsdelivr.net/fontsource/fonts/source-sans-pro@latest/latin-400-normal.ttf',
    weight: 400,
  },
  {
    name: 'Source Sans Pro',
    url: 'https://cdn.jsdelivr.net/fontsource/fonts/source-sans-pro@latest/latin-600-normal.ttf',
    weight: 600,
  },
];

/** @type {import('og-images-generator').RenderOptions} */
export const renderOptions = {
  satori: {
    fonts: await Promise.all(
      fonts.map(async ({ name, weight, url }) => ({
        name,
        weight,
        data: await fetchFont(url),
      })),
    ),
    ...OG_SIZE,
  },
};