rework to use new @besties/html2png
This commit is contained in:
hazycora
parent
7d6cf5b09f
commit
cc40eb1fff
7 changed files with 97 additions and 172 deletions
101
assets/style.css
101
assets/style.css
|
|
@ -1,7 +1,9 @@
|
|||
div {
|
||||
display: flex;
|
||||
}
|
||||
p {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
background-color: #10121d;
|
||||
display: flex;
|
||||
|
|
@ -10,7 +12,6 @@ p {
|
|||
width: 1200px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.main {
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
|
|
@ -21,37 +22,31 @@ p {
|
|||
width: 1050px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.has-languages .main {
|
||||
height: 576px;
|
||||
}
|
||||
|
||||
.contents {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
.graphics {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.graphics > img {
|
||||
border-radius: 100%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 900px;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
font-weight: 800;
|
||||
|
|
@ -59,64 +54,16 @@ p {
|
|||
line-height: 1em;
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
|
||||
.issue .title {
|
||||
display: flex;
|
||||
column-gap: 0.25em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.repo .title {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title span.word {
|
||||
max-width: 100%;
|
||||
padding: 2rem 0;
|
||||
margin: -2rem 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title span.word:last-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.issue .number {
|
||||
font-weight: 400;
|
||||
color: #6d728f;
|
||||
}
|
||||
|
||||
.repo .author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
color: #aeb3d0;
|
||||
}
|
||||
|
||||
.repo .author .username {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 400;
|
||||
color: #6d728f;
|
||||
}
|
||||
|
||||
.issue .repo-name {
|
||||
font-size: 2.5rem;
|
||||
color: #6d728f;
|
||||
}
|
||||
.commit .repo-name {
|
||||
font-size: 2.5rem;
|
||||
color: #6d728f;
|
||||
}
|
||||
|
||||
.repo .repo-name {
|
||||
font-weight: 800;
|
||||
font-size: 4.5rem;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.description {
|
||||
width: 100%;
|
||||
padding: 0.5em 0;
|
||||
|
|
@ -130,21 +77,9 @@ p {
|
|||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.is-debug .description {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.languages {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.language {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.info-line {
|
||||
display: flex;
|
||||
font-size: 1.75rem;
|
||||
|
|
@ -153,32 +88,24 @@ p {
|
|||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-line:last-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.info-line .author {
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.info-line .avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.fact {
|
||||
.languages {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-right: 0.5em;
|
||||
font-size: 1.5rem;
|
||||
flex-direction: column;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.fact-heading {
|
||||
color: #8c91af;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
.language {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
import html2png, { renderHtml as htmlParser } from '@besties/html2png'
|
||||
import fs from 'node:fs'
|
||||
|
||||
const css = fs.readFileSync('./assets/style.css', 'utf8')
|
||||
const style = fs.readFileSync('./assets/style.css', 'utf8')
|
||||
|
||||
export default async function (html, options = {}) {
|
||||
return html2png(html, css, options)
|
||||
return html2png(`<style>${style}</style>${html}`, options)
|
||||
}
|
||||
|
||||
export async function renderHtml(html) {
|
||||
return htmlParser(
|
||||
html,
|
||||
await fs.promises.readFile('./assets/style.css', 'utf8')
|
||||
).outerHTML
|
||||
const styleNow = await fs.promises.readFile('./assets/style.css', 'utf8')
|
||||
return await htmlParser(`<style>${styleNow}</style>${html}`)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,10 +16,11 @@
|
|||
"author": "besties",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@besties/html2png": "^0.2.0",
|
||||
"@besties/html2png": "^1.0.0",
|
||||
"dotenv": "^16.3.1",
|
||||
"eta": "^3.1.0",
|
||||
"express": "^4.18.2",
|
||||
"html2png": "link:../../besties/html2png",
|
||||
"node-fetch": "^3.3.2"
|
||||
},
|
||||
"type": "module",
|
||||
|
|
|
|||
94
pnpm-lock.yaml
generated
94
pnpm-lock.yaml
generated
|
|
@ -6,8 +6,8 @@ settings:
|
|||
|
||||
dependencies:
|
||||
'@besties/html2png':
|
||||
specifier: ^0.2.0
|
||||
version: 0.2.0
|
||||
specifier: ^1.0.0
|
||||
version: 1.0.0
|
||||
dotenv:
|
||||
specifier: ^16.3.1
|
||||
version: 16.3.1
|
||||
|
|
@ -17,6 +17,9 @@ dependencies:
|
|||
express:
|
||||
specifier: ^4.18.2
|
||||
version: 4.18.2
|
||||
html2png:
|
||||
specifier: link:../../besties/html2png
|
||||
version: link:../../besties/html2png
|
||||
node-fetch:
|
||||
specifier: ^3.3.2
|
||||
version: 3.3.2
|
||||
|
|
@ -63,14 +66,15 @@ packages:
|
|||
js-tokens: 4.0.0
|
||||
dev: true
|
||||
|
||||
/@besties/html2png@0.2.0:
|
||||
resolution: {integrity: sha512-Qp1KRLsYtLyd+ojDsqZAnINcsfCb9Ccd2kxep2oTp1wEsigGaRWYNG3kXekvJAuU3KMLz91icjMWW0lMUXjSfQ==}
|
||||
/@besties/html2png@1.0.0:
|
||||
resolution: {integrity: sha512-34dB4CxXL5xA/rJtpqI4UVp62DeQf2DQY3t37xSwar1nUde+i8VCCrRb6NfvZK7pz3v7gHk1M4uA7JDZpeWqKw==}
|
||||
dependencies:
|
||||
'@resvg/resvg-wasm': 2.4.1
|
||||
html-minifier: 4.0.0
|
||||
html-entities: 2.4.0
|
||||
import-meta-resolve: 3.0.0
|
||||
node-html-parser: 6.1.5
|
||||
satori: 0.10.2
|
||||
node-html-parser: 6.1.8
|
||||
satori: 0.10.4
|
||||
ultrahtml: 1.4.0
|
||||
dev: false
|
||||
|
||||
/@eslint-community/eslint-utils@4.4.0(eslint@8.46.0):
|
||||
|
|
@ -289,13 +293,6 @@ packages:
|
|||
engines: {node: '>=6'}
|
||||
dev: true
|
||||
|
||||
/camel-case@3.0.0:
|
||||
resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
|
||||
dependencies:
|
||||
no-case: 2.3.2
|
||||
upper-case: 1.1.3
|
||||
dev: false
|
||||
|
||||
/camelize@1.0.1:
|
||||
resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
|
||||
dev: false
|
||||
|
|
@ -322,13 +319,6 @@ packages:
|
|||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/clean-css@4.2.4:
|
||||
resolution: {integrity: sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==}
|
||||
engines: {node: '>= 4.0'}
|
||||
dependencies:
|
||||
source-map: 0.6.1
|
||||
dev: false
|
||||
|
||||
/clean-regexp@1.0.0:
|
||||
resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
|
||||
engines: {node: '>=4'}
|
||||
|
|
@ -356,10 +346,6 @@ packages:
|
|||
/color-name@1.1.4:
|
||||
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
|
||||
|
||||
/commander@2.20.3:
|
||||
resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
|
||||
dev: false
|
||||
|
||||
/concat-map@0.0.1:
|
||||
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
|
||||
dev: true
|
||||
|
|
@ -905,18 +891,8 @@ packages:
|
|||
resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
|
||||
dev: true
|
||||
|
||||
/html-minifier@4.0.0:
|
||||
resolution: {integrity: sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==}
|
||||
engines: {node: '>=6'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
camel-case: 3.0.0
|
||||
clean-css: 4.2.4
|
||||
commander: 2.20.3
|
||||
he: 1.2.0
|
||||
param-case: 2.1.1
|
||||
relateurl: 0.2.7
|
||||
uglify-js: 3.17.4
|
||||
/html-entities@2.4.0:
|
||||
resolution: {integrity: sha512-igBTJcNNNhvZFRtm8uA6xMY6xYleeDwn3PeBCkDz7tHttv4F2hsDI2aPgNERWzvRcNYHNT3ymRaQzllmXj4YsQ==}
|
||||
dev: false
|
||||
|
||||
/http-errors@2.0.0:
|
||||
|
|
@ -1092,10 +1068,6 @@ packages:
|
|||
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
|
||||
dev: true
|
||||
|
||||
/lower-case@1.1.4:
|
||||
resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
|
||||
dev: false
|
||||
|
||||
/lru-cache@6.0.0:
|
||||
resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -1167,12 +1139,6 @@ packages:
|
|||
engines: {node: '>= 0.6'}
|
||||
dev: false
|
||||
|
||||
/no-case@2.3.2:
|
||||
resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
|
||||
dependencies:
|
||||
lower-case: 1.1.4
|
||||
dev: false
|
||||
|
||||
/node-domexception@1.0.0:
|
||||
resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
|
||||
engines: {node: '>=10.5.0'}
|
||||
|
|
@ -1187,8 +1153,8 @@ packages:
|
|||
formdata-polyfill: 4.0.10
|
||||
dev: false
|
||||
|
||||
/node-html-parser@6.1.5:
|
||||
resolution: {integrity: sha512-fAaM511feX++/Chnhe475a0NHD8M7AxDInsqQpz6x63GRF7xYNdS8Vo5dKsIVPgsOvG7eioRRTZQnWBrhDHBSg==}
|
||||
/node-html-parser@6.1.8:
|
||||
resolution: {integrity: sha512-bi3ChNi5Ne8XM2vDPvE2TOS6+AjgD9ASRJ81P1+45VTe9odNbsNb3SvVZzHho4qnu5gJ1yUYLGlQZ7tveSYNSg==}
|
||||
dependencies:
|
||||
css-select: 5.1.0
|
||||
he: 1.2.0
|
||||
|
|
@ -1275,12 +1241,6 @@ packages:
|
|||
resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
|
||||
dev: false
|
||||
|
||||
/param-case@2.1.1:
|
||||
resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
|
||||
dependencies:
|
||||
no-case: 2.3.2
|
||||
dev: false
|
||||
|
||||
/parent-module@1.0.1:
|
||||
resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
|
||||
engines: {node: '>=6'}
|
||||
|
|
@ -1423,11 +1383,6 @@ packages:
|
|||
jsesc: 0.5.0
|
||||
dev: true
|
||||
|
||||
/relateurl@0.2.7:
|
||||
resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
|
||||
engines: {node: '>= 0.10'}
|
||||
dev: false
|
||||
|
||||
/resolve-from@4.0.0:
|
||||
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
|
||||
engines: {node: '>=4'}
|
||||
|
|
@ -1468,8 +1423,8 @@ packages:
|
|||
resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
|
||||
dev: false
|
||||
|
||||
/satori@0.10.2:
|
||||
resolution: {integrity: sha512-38povLat5QMuKiKBudM/oIk+a0Z5tEfHh8oD/bsh58L0jlOXxfuhAVpDtlG3M0g5FGLajIV0LaKQftXtaYoSUQ==}
|
||||
/satori@0.10.4:
|
||||
resolution: {integrity: sha512-GJNIsuiXhiC9kWGLvz04Op5DZy2UFYZAWsuUtkTlQt3r15o0K96PeD+FMfGN4luMPUHc4uV9gXqAoPxOK0omSw==}
|
||||
engines: {node: '>=16'}
|
||||
dependencies:
|
||||
'@shuding/opentype.js': 1.4.0-beta.0
|
||||
|
|
@ -1554,11 +1509,6 @@ packages:
|
|||
object-inspect: 1.12.3
|
||||
dev: false
|
||||
|
||||
/source-map@0.6.1:
|
||||
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: false
|
||||
|
||||
/spdx-correct@3.2.0:
|
||||
resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
|
||||
dependencies:
|
||||
|
|
@ -1671,10 +1621,8 @@ packages:
|
|||
mime-types: 2.1.35
|
||||
dev: false
|
||||
|
||||
/uglify-js@3.17.4:
|
||||
resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
|
||||
engines: {node: '>=0.8.0'}
|
||||
hasBin: true
|
||||
/ultrahtml@1.4.0:
|
||||
resolution: {integrity: sha512-2SbudS8oD4GNq4en+3ivp25JTCwP5O2soJhIBxGJrjojjLVaLcP84xVU6Xdf0wKMhZvr68rTtrXtO6uvEr2llQ==}
|
||||
dev: false
|
||||
|
||||
/unicode-trie@2.0.0:
|
||||
|
|
@ -1689,10 +1637,6 @@ packages:
|
|||
engines: {node: '>= 0.8'}
|
||||
dev: false
|
||||
|
||||
/upper-case@1.1.3:
|
||||
resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
|
||||
dev: false
|
||||
|
||||
/uri-js@4.4.1:
|
||||
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
|
||||
dependencies:
|
||||
|
|
|
|||
|
|
@ -31,3 +31,9 @@
|
|||
<p><%= it.commit.sha.slice(0, 7) %></p>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.commit .repo-name {
|
||||
font-size: 2.5rem;
|
||||
color: #6d728f;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -39,3 +39,18 @@
|
|||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.issue .title {
|
||||
display: flex;
|
||||
column-gap: 0.25em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.issue .number {
|
||||
font-weight: 400;
|
||||
color: #6d728f;
|
||||
}
|
||||
.issue .repo-name {
|
||||
font-size: 2.5rem;
|
||||
color: #6d728f;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -45,3 +45,37 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.repo .title {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.repo .author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
color: #aeb3d0;
|
||||
}
|
||||
.repo .author .username {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 400;
|
||||
color: #6d728f;
|
||||
}
|
||||
.repo .repo-name {
|
||||
font-weight: 800;
|
||||
font-size: 4.5rem;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
.fact {
|
||||
display: flex;
|
||||
margin-right: 0.5em;
|
||||
font-size: 1.5rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
.fact-heading {
|
||||
color: #8c91af;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue