Hugging Face's logo

Spaces:
enzostvs
/
hugger-roaster
Running

App Files Community
1
enzostvs HF staff commited on
Commit
6d0cfd2
•
1 Parent(s): aaa3467

metadata

Browse files
Files changed (1) hide show
  1. app/api/og/[slug]/route.tsx +79 -46
app/api/og/[slug]/route.tsx CHANGED
@@ -1,8 +1,9 @@
1
  import { getRoast } from "@/app/actions/roast";
 
2
  import { ImageResponse } from "next/og";
3
  import { NextRequest } from "next/server";
4
- // App router includes @vercel/og.
5
- // No need to install it.
6
 
7
  export async function GET(
8
  request: NextRequest,
@@ -21,10 +22,10 @@ export async function GET(
21
  style={{
22
  fontSize: 40,
23
  color: "black",
24
- background: "white",
25
  width: "100%",
26
  height: "100%",
27
- padding: "60px 60px",
28
  textAlign: "left",
29
  justifyContent: "center",
30
  alignItems: "flex-start",
@@ -33,51 +34,83 @@ export async function GET(
33
  flexDirection: "column",
34
  }}
35
  >
36
- <p
37
- style={{
38
- letterSpacing: 10,
39
- fontSize: 26,
40
- margin: 0,
41
- marginBottom: 20,
42
- color: "#71717a",
43
- }}
44
- >
45
- HUGGER ROASTER
46
- </p>
47
- <p
48
- style={{
49
- fontSize: 40,
50
- margin: 0,
51
- lineHeight: 1.3,
52
- color: "##27272a",
53
- whiteSpace: "break-spaces",
54
- lineClamp: 2,
55
- }}
56
- >
57
- {roast.data.text}...
58
- </p>
59
- <p
60
- style={{
61
- position: "absolute",
62
- bottom: -100,
63
- right: -10,
64
- fontSize: 240,
65
- opacity: 0.5,
66
- }}
67
- >
68
- 🧨
69
- </p>
70
  <div
71
  style={{
72
- width: "100vw",
73
- height: "200px",
74
- background:
75
- "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 100%)",
76
- position: "absolute",
77
- bottom: 0,
78
- left: 0,
 
 
 
 
 
 
 
79
  }}
80
- ></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
  </div>
82
  ),
83
  {
 
1
  import { getRoast } from "@/app/actions/roast";
2
+ import Image from "next/image";
3
  import { ImageResponse } from "next/og";
4
  import { NextRequest } from "next/server";
5
+
6
+ import Logo from "@/assets/logo.svg";
7
 
8
  export async function GET(
9
  request: NextRequest,
 
22
  style={{
23
  fontSize: 40,
24
  color: "black",
25
+ background: "#f4f4f5",
26
  width: "100%",
27
  height: "100%",
28
+ padding: "40px",
29
  textAlign: "left",
30
  justifyContent: "center",
31
  alignItems: "flex-start",
 
34
  flexDirection: "column",
35
  }}
36
  >
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  <div
38
  style={{
39
+ overflow: "hidden",
40
+ position: "relative",
41
+ width: "100%",
42
+ height: "100%",
43
+ display: "flex",
44
+ flexDirection: "column",
45
+ justifyContent: "center",
46
+ alignItems: "flex-start",
47
+ // border: "1px solid #d4d4d8",
48
+ background: "white",
49
+ borderRadius: 40,
50
+ padding: "50px 40px",
51
+ boxShadow:
52
+ "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
53
  }}
54
+ >
55
+ <div
56
+ style={{
57
+ letterSpacing: 10,
58
+ fontSize: 26,
59
+ margin: 0,
60
+ marginBottom: 20,
61
+ color: "#71717a",
62
+ display: "flex",
63
+ alignItems: "center",
64
+ justifyContent: "flex-start",
65
+ }}
66
+ >
67
+ <img
68
+ src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
69
+ alt="logo hugging face"
70
+ style={{
71
+ width: 50,
72
+ height: 50,
73
+ marginRight: 20,
74
+ objectFit: "contain",
75
+ }}
76
+ />
77
+ HUGGER ROASTER
78
+ </div>
79
+ <p
80
+ style={{
81
+ fontSize: 35,
82
+ margin: 0,
83
+ lineHeight: 1.4,
84
+ color: "#3f3f46",
85
+ whiteSpace: "break-spaces",
86
+ lineClamp: 2,
87
+ }}
88
+ >
89
+ {roast.data.text}...
90
+ </p>
91
+ <p
92
+ style={{
93
+ position: "absolute",
94
+ bottom: -100,
95
+ right: -10,
96
+ fontSize: 240,
97
+ opacity: 0.5,
98
+ }}
99
+ >
100
+ 🧨
101
+ </p>
102
+ <div
103
+ style={{
104
+ width: "100vw",
105
+ height: "200px",
106
+ background:
107
+ "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 100%)",
108
+ position: "absolute",
109
+ bottom: 0,
110
+ left: 0,
111
+ }}
112
+ ></div>
113
+ </div>
114
  </div>
115
  ),
116
  {