Skip to content

Commit 8554d6a

Browse files
tuhinpaltuhinpal
committed
Added persian blue theme & some breaking changes
1 parent 31ffcab commit 8554d6a

File tree

6 files changed

+97
-10
lines changed

6 files changed

+97
-10
lines changed

‎api/generate/[type]/[name].js

+9-2
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,19 @@ module.exports = async function (req, res) {
1212
const base = getRootPath();
1313
try {
1414
var template = readFileSync(
15-
join(__dirname, "..", "..", "..", "template", `${name}.html`),
15+
join(
16+
__dirname,
17+
"..",
18+
"..",
19+
"..",
20+
"template",
21+
`${name.replace(`.${type}`, "")}.html` // remove .png/svg/html
22+
),
1623
"utf-8"
1724
);
1825

1926
template = templateEngine(template, {
20-
icon: icon || `${base}/icon/think.svg`,
27+
icon: icon || "",
2128
title: title || "Dynamic Image.",
2229
content: content || "Dynamically generate images",
2330
base,

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<meta property="og:title" content="Dynamic Image | Generate images from text dynamically" />
2828
<meta property="og:description"
2929
content="Dynamic Image is a tool to generate an image from a text with many awesome themes." />
30-
<meta property="og:image" content="https://dynamic-image.vercel.app/api/generate/png/yellowish-yellow" />
30+
<meta property="og:image" content="https://dynamic-image.vercel.app/api/generate/png/yellowish-yellow.png?icon=https%3A%2F%2Fdynamic-image.vercel.app%2Ficon%2Fthink.svg" />
3131
<meta property="og:url" content="https://dynamic-image.vercel.app/" />
3232
<meta property="og:locale" content="en_IN" />
3333
<meta property="og:image:width" content="1920" />

‎public/js/home.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,9 @@ function generate() {
7575
}
7676

7777
var urls = {
78-
html: `${base}api/generate/html/${theme}?${options}`,
79-
svg: `${base}api/generate/svg/${theme}?${options}`,
80-
png: `${base}api/generate/png/${theme}?${options}`,
78+
html: `${base}api/generate/html/${theme}.html?${options}`,
79+
svg: `${base}api/generate/svg/${theme}.svg?${options}`,
80+
png: `${base}api/generate/png/${theme}.png?${options}`,
8181
};
8282

8383
document.getElementById("html").href = urls.html;

‎template/persian-blue.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600;800&display=swap" rel="stylesheet" />
10+
<link rel="stylesheet" href="{{base}}/css/base.css" />
11+
<title>Persian Blue</title>
12+
<style>
13+
body {
14+
background-color: #1c39bb;
15+
color: #f4f4f4;
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
height: 98vh;
20+
font-family: "Poppins", sans-serif;
21+
font-weight: 500;
22+
overflow: hidden;
23+
}
24+
25+
main {
26+
position: fixed;
27+
z-index: 100;
28+
margin-top: -3rem;
29+
width: 100%;
30+
display: flex;
31+
flex-direction: column;
32+
justify-content: center;
33+
align-items: center;
34+
padding: 0 5%;
35+
overflow: hidden;
36+
}
37+
38+
p {
39+
text-align: center;
40+
margin: 0;
41+
}
42+
43+
.title {
44+
font-size: 145px;
45+
max-width: 90%;
46+
letter-spacing: 1.8px;
47+
font-weight: 800;
48+
margin-bottom: 5px;
49+
overflow: hidden;
50+
text-overflow: ellipsis;
51+
white-space: nowrap;
52+
}
53+
54+
.content {
55+
font-weight: 300;
56+
font-size: 24px;
57+
max-width: 85%;
58+
display: -webkit-box;
59+
margin: 0 auto;
60+
-webkit-line-clamp: 2;
61+
-webkit-box-orient: vertical;
62+
overflow: hidden;
63+
text-overflow: ellipsis;
64+
}
65+
66+
.yellow {
67+
color: #ffed75;
68+
}
69+
</style>
70+
</head>
71+
72+
<body
73+
onload="var word = '{{title}}'.split(' '); document.getElementById('title').innerHTML = `<span class='yellow'>${word.shift()}</span> ${word.join(' ')}`">
74+
<main>
75+
<p id="title" class="title"></p>
76+
<p class="content">{{content}}</p>
77+
</main>
78+
</body>
79+
80+
</html>

‎template/pretty-simple.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
}
8888
</style>
8989
</head>
90-
<body>
90+
<body onload="'{{icon}}' === '' && document.getElementById('icon').remove()">
9191
<div class="background">
9292
<svg
9393
class="one"
@@ -207,7 +207,7 @@
207207
</svg>
208208
</div>
209209
<main>
210-
<img src="{{icon}}" alt="Icon" />
210+
<img id="icon" src="{{icon}}" alt="Icon" />
211211
<p class="title">{{title}}</p>
212212
<p class="content">{{content}}</p>
213213
</main>

‎template/yellowish-yellow.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@
6464
}
6565
</style>
6666
</head>
67-
<body>
67+
<body onload="'{{icon}}' === '' && document.getElementById('icon').remove()">
6868
<main>
6969
<div class="logoside">
70-
<img src="{{icon}}" alt="Icon" />
70+
<img id="icon" src="{{icon}}" alt="Icon" />
7171
</div>
7272
<div class="contentside">
7373
<p class="title">{{title}}</p>

0 commit comments

Comments
 (0)