GulomovCreative · GulomovCreative · Sep 25, 2026 · Sep 25, 2026
diff --git a/.github/logo/icon-extras.png b/.github/logo/icon-extras.png
diff --git a/.github/logo/modstore.png b/.github/logo/modstore.png
diff --git a/.github/logo/modstore@2x.png b/.github/logo/modstore@2x.png
diff --git 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
@@ -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
@@ -10,11 +10,17 @@
 //                                    General > Social preview)
 //   icon-<size>.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(`<body style="margin: 0; width: 512px; height: 512px; display: grid; place-items: center; background: #fff">${svg}</body>`)
+  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)]))),