root/og
1
0
Fork 0
Code Issues Pull requests Activity

switch to eta

Browse source
This commit is contained in:
hazycora 2023-08-02 17:37:47 -05:00
parent c0faaf51ff
commit 578279a07d
No known key found for this signature in database
GPG key ID: 215AF1F81F86940E
7 changed files with 2784 additions and 1016 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
assets/style.css Normal file
View file

@ -0,0 +1,38 @@
p {
margin: 0;
}
.main {
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
background-color: #1b171f;
width: 1200px;
height: 600px;
}
.contents {
display: flex;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
width: 800px;
gap: 10px;
}
.graphics {
display: flex;
justify-content: flex-end;
align-items: flex-start;
width: 240px;
}
.graphics > img {
border-radius: 100%;
width: 120px;
height: 120px;
}

35
lib/render.js Normal file
View file

@ -0,0 +1,35 @@
import html2png from '@besties/html2png'
import fs from 'node:fs'
const figtreeRegular = fs.readFileSync('./assets/Figtree-Regular.woff')
const figtreeMedium = fs.readFileSync('./assets/Figtree-Medium.woff')
const figtreeExtraBold = fs.readFileSync('./assets/Figtree-ExtraBold.woff')
const css = fs.readFileSync('./assets/style.css', 'utf8')
const renderOptions = {
fonts: [
{
name: 'Figtree',
data: figtreeRegular,
weight: 400,
style: 'normal'
},
{
name: 'Figtree',
data: figtreeMedium,
weight: 500,
style: 'normal'
},
{
name: 'Figtree',
data: figtreeExtraBold,
weight: 800,
style: 'normal'
}
]
}
export default function (html) {
return html2png(html, css, renderOptions)
}

3578
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -15,6 +15,7 @@
"license": "ISC",
"dependencies": {
"@besties/html2png": "^0.1.2",
"eta": "^3.1.0",
"express": "^4.18.2"
},
"type": "module",

8
pnpm-lock.yaml
View file

@ -8,6 +8,9 @@ dependencies:
'@besties/html2png':
specifier: ^0.1.2
version: 0.1.2
eta:
specifier: ^3.1.0
version: 3.1.0
express:
specifier: ^4.18.2
version: 4.18.2
@ -635,6 +638,11 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/eta@3.1.0:
resolution: {integrity: sha512-my4rbVATtKt9P7oNH6NkynI2bMY081ak9mZfX5Hh2tZ0HHCMhhFKYh6KH9NyUTRMTgohYd2Pd8lA2b9IbR0WrA==}
engines: {node: '>=6.0.0'}
dev: false
/etag@1.8.1:
resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
engines: {node: '>= 0.6'}

126
server.js
View file

@ -1,33 +1,13 @@
import html2png from '@besties/html2png'
import express from 'express'
import fs from 'node:fs'
import { Eta } from 'eta'
import render from './lib/render.js'
const eta = new Eta({
views: 'views',
cache: false
})
const app = express()
const figtreeRegular = fs.readFileSync('./assets/Figtree-Regular.woff')
const figtreeMedium = fs.readFileSync('./assets/Figtree-Medium.woff')
const figtreeExtraBold = fs.readFileSync('./assets/Figtree-ExtraBold.woff')
const ATTR_REGEX = /["&]/g
const CONTENT_REGEX = /[&<]/g
function escape(value, is_attr = false) {
const str = String(value)
const pattern = is_attr ? ATTR_REGEX : CONTENT_REGEX
pattern.lastIndex = 0
let escaped = ''
let last = 0
while (pattern.test(str)) {
const i = pattern.lastIndex - 1
const ch = str[i]
escaped +=
// eslint-disable-next-line unicorn/prefer-string-slice
str.substring(last, i) +
(ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : '&lt;')
last = i + 1
}
return escaped + str.slice(Math.max(0, last))
}
app.get('/', function (req, res) {
res.redirect('https://git.gay/gitgay/og.git')
})
@ -37,97 +17,9 @@ app.get('/:owner/:repo', async function (req, res) {
`https://git.gay/api/v1/repos/${req.params.owner}/${req.params.repo}`
)
const repo = await repoResp.json()
let infoHtml = `
<p style="font-size: 36px; color: #9A8FA7;">${escape(
repo.owner.full_name
)} ${escape(`@${repo.owner.login}`)}</p>
<p style="font-weight: 800; font-size: 4.5rem; line-height: 1.2em;">${escape(
repo.name
)}</p>
`
if (repo.description)
infoHtml = `${infoHtml}<p style="font-size: 42px; font-weight: 500; color: #9A8FA7;">${escape(
repo.description
)}</p>`
const img = await html2png(
`<div class="main">
<div class="contents">
<div class="info">
${infoHtml}
</div>
<div class="graphics">
<img width="120" height="120" src="${escape(
repo.avatar_url || repo.owner.avatar_url,
true
)}"></img>
</div>
</div>
</div>`,
`p {
margin: 0;
}
.main {
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
background-color: #1B171F;
width: 1200px;
height: 600px;
}
.contents {
display: flex;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
width: 800px;
gap: 10px;
}
.graphics {
display: flex;
justify-content: flex-end;
align-items: flex-start;
width: 240px;
}
.graphics > img {
border-radius: 100%;
width: 120px;
height: 120px;
}`,
{
fonts: [
{
name: 'Figtree',
data: figtreeRegular,
weight: 400,
style: 'normal'
},
{
name: 'Figtree',
data: figtreeMedium,
weight: 500,
style: 'normal'
},
{
name: 'Figtree',
data: figtreeExtraBold,
weight: 800,
style: 'normal'
}
]
}
)
res.send(img)
res.type('png')
res.set('Content-Disposition', 'inline')
res.send(await render(await eta.renderAsync('repo', { repo })))
})
app.listen(8085)

14
views/repo.eta Normal file
View file

@ -0,0 +1,14 @@
<div class="main">
<div class="contents">
<div class="info">
<p style="font-size: 36px; color: #9A8FA7;"><%= it.repo.owner.full_name %> @<%= it.repo.owner.login %></p>
<p style="font-weight: 800; font-size: 4.5rem; line-height: 1.2em;"><%= it.repo.name %></p>
<% if (it.repo.description) { %>
<p style="font-size: 42px; font-weight: 500; color: #9A8FA7;"><%= it.repo.description %></p>
<% } %>
</div>
<div class="graphics">
<img width="120" height="120" src="<%= it.repo.avatar_url || it.repo.owner.avatar_url %>"></img>
</div>
</div>
</div>