Skip to content

Commit

Permalink
fix: visual issues on tags and metadata area
Browse files Browse the repository at this point in the history
paring-chan committed Sep 8, 2024

Verified

This commit was signed with the committer’s verified signature.
paring-chan 파링
1 parent 4e46bdf commit 14063a2
Showing 36 changed files with 365 additions and 184 deletions.
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -2,9 +2,9 @@
"name": "adofai-gg-opengraph",
"packageManager": "[email protected]",
"devDependencies": {
"@types/node": "^22.5.0",
"@types/react": "^18.3.4",
"concurrently": "^8.2.2",
"@types/node": "^22.5.4",
"@types/react": "^18.3.5",
"concurrently": "^9.0.0",
"nodemon": "^3.1.4",
"prettier": "^3.3.3",
"tslib": "^2.7.0",
@@ -13,15 +13,15 @@
"dependencies": {
"@fastify/caching": "^8.4.0",
"@fastify/type-provider-typebox": "^4.1.0",
"@resvg/resvg-js": "^2.6.2",
"@sinclair/typebox": "^0.33.7",
"axios": "^1.7.5",
"@sinclair/typebox": "^0.33.9",
"axios": "^1.7.7",
"dayjs": "^1.11.13",
"dotenv": "^16.4.5",
"fastify": "^4.28.1",
"node-fetch": "^3.3.2",
"react": "^18.3.1",
"satori": "^0.10.14"
"satori": "^0.10.14",
"sharp": "^0.33.5"
},
"scripts": {
"dev": "concurrently --handle-input \"tsc && nodemon dist\" \"tsc -w\"",
410 changes: 254 additions & 156 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

Binary file added resources/tagIcons/1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/10.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/11.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/12.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/13.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/14.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/15.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/17.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/18.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/19.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/20.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/21.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/22.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/23.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/24.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/25.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/7.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/8.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/9.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/tagIcons/empty.png
Binary file added resources/tagIcons/exclude.png
Binary file added resources/tagIcons/include.png
Binary file added resources/tagIcons/lengthMedium.png
Binary file added resources/tagIcons/sw.png
90 changes: 74 additions & 16 deletions src/generator/components/LevelDetailsArea.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,56 @@
import React from 'react'
import { Level } from '../../types.js'
import { getDifficulty } from '../../utils.js'
import { getDifficulty, tagIconsDir } from '../../utils.js'
import { icons } from '../../icons.js'
import dayjs from 'dayjs'
import { pathToFileURL } from 'url'
import path from 'path'
import { readFile } from 'fs/promises'

const ignoredTags: string[] = ['11', '1']
const warningTags: string[] = ['25']
const dangerTags: string[] = ['4', 'sw']

const allTags: string[] = [
'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',
'empty',
'sw',
]

const tagIconCache = new Map<string, string>()

await Promise.all(
allTags.map(async (x) => {
const buf = await readFile(path.join(tagIconsDir, `${x}.png`))
const url = `data:image/png;base64,${buf.toString('base64')}`
tagIconCache.set(x, url)
}),
)

const LevelStat: React.FC<{
label: React.ReactNode
value: React.ReactNode
@@ -91,7 +134,7 @@ export const LevelDetailsArea: React.FC<{ level: Level }> = ({ level }) => {
display: 'flex',
width: '100%',
height: 72,
background: 'black',
background: 'rgba(0, 0, 0, 0.95)',
borderRadius: 12,
alignItems: 'center',
position: 'relative',
@@ -146,23 +189,38 @@ export const LevelDetailsArea: React.FC<{ level: Level }> = ({ level }) => {
}}
>
{tagIds.map((x, i) => (
<img
<div
key={i}
src={`https://raw.githubusercontent.com/ADOFAI-gg/Adofai-gg-assets/main/tagIcons/${x}.svg`}
width={32}
height={32}
style={
dangerTags.includes(x)
? {
filter: `invert(48%) sepia(70%) saturate(5132%) hue-rotate(332deg) brightness(97%) contrast(97%)`,
}
style={{
width: 32,
height: 32,
maskImage: `url(${tagIconCache.get(x)})`,
background: dangerTags.includes(x)
? '#F54F51'
: warningTags.includes(x)
? {
filter: `invert(75%) sepia(29%) saturate(638%) hue-rotate(6deg) brightness(112%) contrast(106%)`,
}
: {}
}
? '#FFE76E'
: 'white',
maskRepeat: 'no-repeat',
maskSize: '32px 32px',
}}
/>
// <img
// key={i}
// src={`https://raw.githubusercontent.com/ADOFAI-gg/Adofai-gg-assets/main/tagIcons/${x}.svg`}
// width={32}
// height={32}
// style={
// dangerTags.includes(x)
// ? {
// filter: `invert(48%) sepia(70%) saturate(5132%) hue-rotate(332deg) brightness(97%) contrast(97%)`,
// }
// : warningTags.includes(x)
// ? {
// filter: `invert(75%) sepia(29%) saturate(638%) hue-rotate(6deg) brightness(112%) contrast(106%)`,
// }
// : {}
// }
// />
))}
</div>
</div>
12 changes: 10 additions & 2 deletions src/generator/components/LevelMetadataArea.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,14 @@ const LevelAuthors: React.FC<{ icon: string; members: string[] }> = ({
members,
}) => {
return (
<div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
<div
style={{
display: 'flex',
gap: 4,
alignItems: 'center',
lineHeight: '120%',
}}
>
<img src={icon} width={18} height={18} />
<div>{members.join(' & ')}</div>
</div>
@@ -34,7 +41,7 @@ export const LevelMetadataArea: React.FC<{ level: Level }> = ({ level }) => {
style={{
display: 'flex',
filter:
'drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.4)) drop-shadow(0px 0px 32px rgba(0, 0, 0, 0.6))',
'drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.4)) drop-shadow(0px 0px 32px rgba(0, 0, 0, 0.8))',
gap: 4,
flexDirection: 'column',
}}
@@ -63,6 +70,7 @@ export const LevelMetadataArea: React.FC<{ level: Level }> = ({ level }) => {
fontSize: 48,
fontWeight: 700,
lineClamp: '2 "..."',
lineHeight: '120%',
}}
>
{level.title}
21 changes: 18 additions & 3 deletions src/routes/levels.ts
Original file line number Diff line number Diff line change
@@ -6,7 +6,12 @@ import DayJsUTC from 'dayjs/plugin/utc.js'
import fetch from 'node-fetch'
import { TypeBoxTypeProvider } from '@fastify/type-provider-typebox'
import { generateSVG } from '../generator/index.js'
import { renderAsync } from '@resvg/resvg-js'
import sharp from 'sharp'
import { mkdtemp, unlink, writeFile } from 'fs/promises'
import { join } from 'path'
import { tmpdir } from 'os'

const instanceId = Date.now()

// @ts-expect-error
global.fetch = fetch
@@ -44,9 +49,19 @@ export const levels: FastifyPluginAsync = async (_server) => {
}

const generated = await generateSVG(id)
const img = (await renderAsync(generated)).asPng()

return reply.header('Content-Type', 'image/png').send(img)
const file = join(tmpdir(), `adofaigg-og-${instanceId}.${req.id}.svg`)

try {
await writeFile(file, generated)

const img = await sharp(file).png().toBuffer()
return reply.header('Content-Type', 'image/png').send(img)
} finally {
await unlink(file).catch((e) =>
console.warn('Failed to unlink image file', e),
)
}
},
)
}
2 changes: 2 additions & 0 deletions src/utils.ts
Original file line number Diff line number Diff line change
@@ -10,6 +10,8 @@ export const resourcesDir = path.join(
'../resources',
)

export const tagIconsDir = path.join(resourcesDir, 'tagIcons')

export const fontsDir = path.join(resourcesDir, 'fonts')
const ibmPlexSansKRDir = path.join(fontsDir, 'IBMPlexSansKR')
const ibmPlexSansJPDir = path.join(fontsDir, 'IBMPlexSansJP')

0 comments on commit 14063a2

Please sign in to comment.