LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-06 04:21:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

add emoji tags to generated banner images

Browse Source
This commit is contained in:
James Fenn
2023-10-03 16:44:09 -04:00
parent 49150bbb62
commit 34977c078d
3 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
build-scripts/social-previews/layouts/banner-css.ts
View File

@@ -1,8 +1,8 @@
export default `
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:wght@400;700&display=swap');
* {
font-family: 'Roboto Mono', monospace;
font-family: inherit;
}
pre {
@@ -111,13 +111,21 @@ pre code::before {
position: absolute;
top: calc(50% + var(--y));
left: calc(50% + var(--x));
filter: grayscale(1);
}
.rect svg {
margin: 20px;
width: calc(100% - 40px);
height: calc(100% - 40px);
filter: grayscale(1);
}
.rect.emoji {
font-family: 'Noto Color Emoji';
font-size: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.tags {

27
build-scripts/social-previews/layouts/banner.tsx
View File

@@ -5,6 +5,8 @@ import classnames from "classnames";
import tags from "../../../content/data/tags.json";
import fs from "fs";
const TAG_SVG_DEFAULT = fs.readFileSync("public/stickers/role_devops.svg", "utf-8");
function BannerCodeScreen({
post,
postHtml,
@@ -18,11 +20,11 @@ function BannerCodeScreen({
const rotY = (post.title.length * 3) % 20;
const tagInfo = post.tags.map(tag => tags[tag])
.filter(t => t?.image && t?.shownWithBranding)[0];
.filter(t => t?.emoji || (t?.image && t?.shownWithBranding))[0];
const tagSvg = tagInfo
const tagSvg = tagInfo?.image
? fs.readFileSync("public" + tagInfo.image, "utf-8")
: fs.readFileSync("public/stickers/role_devops.svg", "utf-8");
: TAG_SVG_DEFAULT;
const theme = post.title.length % 3;
@@ -45,11 +47,20 @@ function BannerCodeScreen({
))}
</div>
</div>
<div
class="rect"
style="--z: 60px; --x: -80px; --y: -150px;"
dangerouslySetInnerHTML={{ __html: tagSvg }}
/>
{tagInfo?.emoji ? (
<div
class="rect emoji"
style="--z: 60px; --x: -80px; --y: -150px;"
>
{tagInfo.emoji}
</div>
) : (
<div
class="rect"
style="--z: 60px; --x: -80px; --y: -150px;"
dangerouslySetInnerHTML={{ __html: tagSvg }}
/>
)}
</div>
</>
);

2
build-scripts/social-previews/layouts/twitter-preview-css.ts
View File

@@ -1,5 +1,5 @@
export default `
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@700;800&family=Noto+Color+Emoji&family=Roboto+Mono:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@700;800&family=Noto+Color+Emoji&family=Roboto+Mono:wght@400;700&display=swap');
* {
font-family: inherit;