takumi-cli/example/twitter-images/components/x-post-image.tsx at master · christopher-kapic/takumi-cli · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import { readFile } from "node:fs/promises";

export const name = "x-post-image";

export const width = 1200;
export const height = 630;

export const fonts = [];

export const persistentImages = [
  {
    src: "takumi.svg",
    data: await readFile("../../assets/images/takumi.svg"),
  },
  {
    src: "fuma.jpg",
    data: await readFile("../../assets/images/fuma.jpg"),
  },
  {
    src: "large.jpg",
    data: await readFile("../../assets/images/fumadocs-core-v16.jpg"),
  },
];

// https://x.com/kanewang_/status/1976314376102740338
export default function XPostImage() {
  return (
    <div
      style={{
        backgroundColor: "black",
        width: "100%",
        height: "100%",
        flexDirection: "column",
        padding: "3rem",
        paddingBottom: 0,
      }}
    >
      <div
        style={{
          marginBottom: "2rem",
          gap: "2rem",
          alignItems: "center",
        }}
      >
        <img
          src="fuma.jpg"
          alt="Fuma Nama"
          style={{
            width: 120,
            height: 120,
            borderRadius: "50%",
          }}
        />
        <div
          style={{
            flexDirection: "column",
            fontSize: "3rem",
            flexGrow: 1,
            gap: "0.5rem",
          }}
        >
          <span
            style={{
              color: "white",
              fontWeight: 700,
            }}
          >
            Fuma Nama
          </span>
          <span
            style={{
              marginTop: 0,
              color: "gray",
              fontWeight: 300,
            }}
          >
            @fuma_nama
          </span>
        </div>
        <img
          src="takumi.svg"
          alt="Takumi"
          style={{
            width: 64,
            height: 64,
          }}
        />
      </div>
      <span
        style={{
          lineClamp: 1,
          textOverflow: "ellipsis",
          fontSize: "4rem",
          color: "white",
          fontWeight: 300,
          marginBottom: "1rem",
        }}
      >
        My favourite part of the year
      </span>
      <div
        style={{
          width: "100%",
          flexGrow: 1,
        }}
      >
        <img
          src="large.jpg"
          style={{
            width: "100%",
            borderRadius: "2rem",
            border: "2px solid dimgray",
          }}
          alt="content"
        />
      </div>
      <div
        style={{
          position: "absolute",
          width: "100%",
          height: "50%",
          bottom: 0,
          backgroundImage: "linear-gradient(to top, black, transparent)",
        }}
      />
    </div>
  );
}