Commit b7511595 authored by Guillaume Grossetie's avatar Guillaume Grossetie 🎧
Browse files

generate screenshots

parent 301c3b70
= Screenshot settings
== Requirements
- HiDPI screen (4K)
- DPI: 148
- Shutter (or smiliar) to take screenshots without the frame
- Firefox with dark color scheme
- Screenshot size: 2048x1152 (16/9)
- Screenshots should not include border radius or drop-shadow
- Node 16
- `npm i`
== Generate screenshots with frame
. Put images in the `img` directory
. Run `node index.js`
Screenshots are generated in the `dist` directory
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
padding: 0;
margin: 0;
}
.frame {
display: grid;
grid-template-rows: min-content 1fr;
height: 1152px;
width: 2048px;
}
.header {
position: relative;
}
.close {
position: absolute;
right: 50px;
top: 19px;
opacity: 0.9;
}
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 25px;
width: 2px;
background-color: #ffffff;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.content {
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
border-left: 1px solid rgba(27, 26, 33, 0.7);
border-right: 1px solid rgba(27, 26, 33, 0.7);
border-bottom: 1px solid rgba(27, 26, 33, 0.7);
}
</style>
</head>
<body>
<div class="frame">
<div class="header">
<div class="close"></div>
</div>
<div class="content"></div>
</div>
</body>
</html>
import puppeteer from 'puppeteer'
import { dirname, join } from 'path'
import { fileURLToPath } from 'url'
import { readdir } from 'fs/promises'
const __dirname = dirname(fileURLToPath(import.meta.url))
function getStyle(file) {
if (file.startsWith('man-page')) {
return `.content {
background-image: url("./img/${file}");
padding-left: 16px;
padding-top: 16px;
background-color: #242424;
}
.header {
height: 67px;
background-color: #1c1b22;
border-bottom: 4px solid #2a2932;
}`
}
if (file.startsWith('intellij')) {
return `.content {
background-image: url("./img/${file}");
height: 1152px;
border-left: 3px solid #272727;
border-right: 3px solid #272727;
border-bottom: 3px solid #272727;
}
.header {
height: 50px;
background: linear-gradient(#2a2a2a, #262626);
border-bottom: 4px solid #272727;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.close {
display: none;
}`
}
return `.content {
background-image: url("./img/${file}");
}`
}
try {
const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] })
const page = await browser.newPage()
await page.goto(`file://${join(__dirname, 'index.html')}`)
const files = await readdir(join(__dirname, 'img'))
for (const file of files) {
await page.addStyleTag({ content: getStyle(file) })
await page.screenshot({ path: join(__dirname, 'dist', file), fullPage: true, omitBackground: true })
await page.reload() // reset styles
}
await browser.close()
} catch (err) {
console.error('Something went wrong!', err)
process.exit(1)
}
This diff is collapsed.
{
"name": "asciidoc.org-screenshots",
"private": true,
"version": "1.0.0",
"type": "module",
"description": "",
"keywords": [],
"author": "",
"license": "EPL-2.0",
"devDependencies": {
"puppeteer": "^13.3.1"
}
}
...@@ -159,6 +159,12 @@ header .logo > img { ...@@ -159,6 +159,12 @@ header .logo > img {
} }
} }
.main > .hero .imageblock img {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
filter: drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.1));
}
.main h1 { .main h1 {
font-family: var(--brand-font-secondary); font-family: var(--brand-font-secondary);
font-size: 2.25em; font-size: 2.25em;
...@@ -331,19 +337,17 @@ section.about .columns > .column:first-child { ...@@ -331,19 +337,17 @@ section.about .columns > .column:first-child {
} }
section.about .columns > .column:nth-child(2) { section.about .columns > .column:nth-child(2) {
max-width: 850px; max-width: 1024px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
section.about .imageblock {
overflow: clip;
max-height: 750px;
}
section.about .imageblock img { section.about .imageblock img {
width: 100%; width: 100%;
margin-top: 0.5rem; margin-top: 0.5rem;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
filter: drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.1));
} }
section.about .tabset .content { section.about .tabset .content {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment