diff --git a/.github/logo/icon-extras.png b/.github/logo/icon-extras.png new file mode 100644 index 0000000..503a47d Binary files /dev/null and b/.github/logo/icon-extras.png differ diff --git a/.github/logo/modstore.png b/.github/logo/modstore.png new file mode 100644 index 0000000..691d7c3 Binary files /dev/null and b/.github/logo/modstore.png differ diff --git a/.github/logo/modstore@2x.png b/.github/logo/modstore@2x.png new file mode 100644 index 0000000..106d5f5 Binary files /dev/null and b/.github/logo/modstore@2x.png differ diff --git a/README.md b/README.md index f049916..419fa4d 100644 --- a/README.md +++ b/README.md @@ -338,7 +338,7 @@ npm run typecheck # tsc: the code, and the built public types as a site sees npm test # Vitest vendor/bin/phpunit # PHPUnit npm run screenshots # screenshots of the notifications in docs/images/, after changing their styles -npm run logo # the logo, the square mark and the social previews in .github/logo/ (needs the network for Google Fonts) +npm run logo # the logo, the square mark, the pictures for modstore.pro and extras.modx.com and the social previews in .github/logo/ (needs the network for Google Fonts) ``` ### Local sites diff --git a/README.ru.md b/README.ru.md index 841c9bb..03e8314 100644 --- a/README.ru.md +++ b/README.ru.md @@ -338,7 +338,7 @@ npm run typecheck # tsc: код и собранные публичные ти npm test # Vitest vendor/bin/phpunit # PHPUnit npm run screenshots # снимки уведомлений в docs/images/, после правок их стилей -npm run logo # логотип, квадратный знак и превью ссылок в .github/logo/ (нужна сеть для Google Fonts) +npm run logo # логотип, квадратный знак, картинки для modstore.pro и extras.modx.com и превью ссылок в .github/logo/ (нужна сеть для Google Fonts) ``` ### Локальные сайты diff --git a/_build/logo.mjs b/_build/logo.mjs index 9ab47c5..b5e4c41 100644 --- a/_build/logo.mjs +++ b/_build/logo.mjs @@ -10,11 +10,17 @@ // General > Social preview) // icon-.png the mark alone (icon.svg), square and // transparent: 64, 128, 256, 512, 1024 +// modstore.png, modstore@2x.png 320x240 and 640x480 on white, the size +// modstore.pro takes for the logo of a +// package +// icon-extras.png 512x512 on white, the mark at 72% of the +// side: the icon of a package on +// extras.modx.com // // The fonts come from Google Fonts. Without them the script stops before it // writes anything, rather than leaving logos in fallback fonts. -import { writeFileSync } from 'node:fs' +import { readFileSync, writeFileSync } from 'node:fs' import { pathToFileURL } from 'node:url' import { chromium } from '@playwright/test' @@ -51,6 +57,37 @@ async function iconPng (size) { return png } +// The mark on white, 368px of a 512px square: the icon of a package on +// extras.modx.com. The site shows the icon on a coloured box, so the square is +// opaque, and the mark takes 72% of it like the icons of the other packages of +// the author, so the list of their extras looks alike. +async function extrasIcon () { + const page = await browser.newPage({ viewport: { width: 512, height: 512 } }) + const svg = readFileSync(`${dir}/icon.svg`, 'utf8').replace(/width="76" height="76"/, 'width="368" height="368"') + await page.setContent(`${svg}`) + const png = await page.screenshot() + await page.close() + return png +} + +// The logo on white, centred on a 320x240 card: the logo of a package on +// modstore.pro. The mark and the wordmark keep the sizes of the other packages +// of the author, so the tiles of the catalogue look alike. +async function modstore (scale) { + const page = await browser.newPage({ viewport: { width: 320, height: 240 }, deviceScaleFactor: scale }) + await page.goto(url) + await page.waitForSelector('body[data-ready]') + await page.evaluate(() => { + document.documentElement.style.cssText = 'width: 320px; height: 240px; background: #fff' + document.body.style.cssText = 'margin: 0; width: 320px; height: 240px; background: #fff; overflow: hidden' + document.querySelector('.logo').style.height = '240px' + }) + await requireFonts(page, ['Outfit', 'JetBrains Mono']) + const png = await page.screenshot() + await page.close() + return png +} + // The logo on white, centred on a 1280x640 card: GitHub's size for the preview. async function social (text) { const page = await browser.newPage({ viewport: { width: 1280, height: 640 } }) @@ -82,6 +119,9 @@ try { 'logo@2x.png': await logo(2), 'logo-dark.png': await logo(1, '?dark'), 'logo-dark@2x.png': await logo(2, '?dark'), + 'modstore.png': await modstore(1), + 'modstore@2x.png': await modstore(2), + 'icon-extras.png': await extrasIcon(), 'social-en.png': await social('MODX forms without a page reload, protected from spam'), 'social-ru.png': await social('Формы MODX без перезагрузки страницы, с защитой от спама'), ...Object.fromEntries(await Promise.all([64, 128, 256, 512, 1024].map(async size => [`icon-${size}.png`, await iconPng(size)]))),