#3104 Render images with resvg in issuebot

Author: thekingofcity

.github/workflows/issuebot.yml

@@ -11,14 +11,14 @@ jobs:
     outputs:
       sanityCheck: ${{ steps.sanity_check.outputs.message }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v5
         with:
           token: ${{ secrets.RMG_BUILD_AND_RELEASE }}
           fetch-depth: 0 # Fetch all to get authors of every template.
 
       - uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
 
       - run: npm ci
         working-directory: scripts
@@ -47,7 +47,7 @@ jobs:
       - name: Install Noto CJK fonts
         run: sudo apt install -y fonts-noto-cjk
 
-      - name: Make metadata and images
+      - name: Make metadata and SVG
         run: node --loader ts-node/esm ./issuebot.ts
         working-directory: scripts
         env:
@@ -57,6 +57,53 @@ jobs:
           USER_ID: ${{ github.event.issue.user.id }}
         id: bot
 
+      - name: Download resvg
+        run: |
+          wget https://github.com/linebender/resvg/releases/download/v0.45.1/resvg-linux-x86_64.tar.gz
+          tar -xzf resvg-linux-x86_64.tar.gz
+          chmod +x resvg
+        working-directory: scripts
+
+      - name: Clone RMP
+        uses: actions/checkout@v5
+        with:
+          token: ${{ secrets.RMG_BUILD_AND_RELEASE }}
+          repository: railmapgen/rmp
+          path: rmp
+
+      - name: Clone RMT
+        uses: actions/checkout@v5
+        with:
+          token: ${{ secrets.RMG_BUILD_AND_RELEASE }}
+          repository: railmapgen/railmapgen.github.io
+          path: rmt
+
+      - name: Copy fonts
+        run: |
+          mkdir -p fonts
+          ls ../rmp/public/fonts/
+          ls ../rmt/public/fonts/
+          cp -r ../rmp/public/fonts/* ./fonts/
+          cp ../rmt/public/fonts/*.ttf ./fonts/
+          tree /usr/share/fonts
+          echo "Copy system Noto CJK fonts for fallback"
+          sudo find /usr/share/fonts -name "NotoSans*.ttf" -o -name "NotoSansCJK*.ttc" -o -name "NotoSerif*.ttf" -o -name "NotoSerifCJK*.ttc" | xargs -I {} sudo cp {} ./fonts/ || true
+          ls fonts/
+        working-directory: scripts
+
+      - name: Convert SVG to PNG using resvg
+        run: |
+          SVG_FILE=$(ls $HOME/Downloads/RMP_*.svg | head -n 1)
+          CITY_NAME=$(basename "$SVG_FILE" .svg | sed 's/RMP_//')
+          ./resvg --skip-system-fonts --use-fonts-dir fonts --list-fonts
+          ./resvg --skip-system-fonts --use-fonts-dir fonts --sans-serif-family "Noto Sans CJK SC" --background white -z 2 "$SVG_FILE" "$HOME/Downloads/${CITY_NAME}.png"
+          cp "$HOME/Downloads/${CITY_NAME}.png" ../public/resources/thumbnails/
+        working-directory: scripts
+
+      - name: Generate thumbnail
+        run: node --loader ts-node/esm ./make-thumbnail.ts
+        working-directory: scripts
+
       - name: Make logins
         run: |
           node ./loginbot.js

scripts/images.ts

@@ -7,7 +7,7 @@ import { resolve } from 'path';
 import { Browser, Builder, By, Capabilities, until } from 'selenium-webdriver';
 import sharp from 'sharp';
 
-export const makeImage = async (filePath: string) => {
+export const makeImage = async (filePath: string, svg = false) => {
     const capabilities = new Capabilities();
     capabilities.set('browserName', Browser.FIREFOX);
     // https://developer.mozilla.org/en-US/docs/Web/WebDriver/Capabilities/firefoxOptions
@@ -38,6 +38,13 @@ export const makeImage = async (filePath: string) => {
         "//button[contains(@class, 'chakra-menu__menuitem')][starts-with(@id, 'menu-list-download-menuitem-')][3]";
     await driver.findElement(By.xpath(exportImageButtonXPath)).click();
 
+    if (svg) {
+        const dropdownXpath = '/html/body/div[7]/div[3]/div/section/div/div[1]/div/div/select';
+        await driver.findElement(By.xpath(dropdownXpath)).click();
+        const option2Xpath = '/html/body/div[7]/div[3]/div/section/div/div[1]/div/div/select/option[2]';
+        await driver.findElement(By.xpath(option2Xpath)).click();
+    }
+
     driver.findElement(By.xpath('/html/body/div[7]/div[3]/div/section/div/div[3]/label/span[2]')).click();
     driver.findElement(By.xpath('/html/body/div[7]/div[3]/div/section/div/label[2]/span[1]')).click();
 
@@ -47,9 +54,9 @@ export const makeImage = async (filePath: string) => {
     let retry = 0;
     while (retry < 3) {
         retry += 1;
-        await new Promise(r => setTimeout(r, 20000));
+        await new Promise(r => setTimeout(r, svg ? 5000 : 20000));
         const files = await readdir(resolve(homedir(), 'Downloads'));
-        const filename = files.find(s => s.startsWith('RMP_') && s.endsWith('.png'));
+        const filename = files.find(s => s.startsWith('RMP_') && s.endsWith(svg ? '.svg' : '.png'));
         if (!filename) continue;
 
         await driver.quit();

scripts/issuebot.ts

@@ -80,10 +80,8 @@ export const main = async () => {
     if (!existsSync(resolve('..', 'public', 'resources', 'thumbnails')))
         await mkdir(resolve('..', 'public', 'resources', 'thumbnails'));
     if (!existsSync(resolve(homedir(), 'Downloads'))) await mkdir(resolve(homedir(), 'Downloads'));
-    const image = await makeImage(resolve('..', 'public', 'resources', type, `${cityName}.json`));
-    await writeFile(resolve('..', 'public', 'resources', 'thumbnails', `${cityName}.png`), image);
-    const thumbnail = await makeThumbnail(image);
-    await writeFile(resolve('..', 'public', 'resources', 'thumbnails', `${cityName}@300.png`), thumbnail);
+    const imageSVG = await makeImage(resolve('..', 'public', 'resources', type, `${cityName}.json`), true);
+    await writeFile(resolve(homedir(), 'Downloads', `RMP_${cityName}.svg`), imageSVG);
 
     execSync(`git checkout -b bot-${process.env.ISSUE_NUMBER}`);
 

scripts/make-thumbnail.ts

@@ -0,0 +1,26 @@
+import { readFile, writeFile, readdir } from 'fs/promises';
+import { resolve } from 'path';
+import { homedir } from 'os';
+import sharp from 'sharp';
+
+const makeThumbnail = async (image: Buffer): Promise<Buffer> => {
+    const img = sharp(image, { limitInputPixels: 1024000000 });
+    const metadata = await img.metadata();
+    const width = Math.floor((metadata.width! * 2) / 3);
+    const height = Math.floor((metadata.height! * 2) / 3);
+    const sideLength = Math.min(width, height);
+    const left = Math.floor((metadata.width! - sideLength) / 2);
+    const top = Math.floor((metadata.height! - sideLength) / 2);
+    return await img.extract({ width: sideLength, height: sideLength, left, top }).resize(300, 300).toBuffer();
+};
+
+const directory = resolve(homedir(), 'Downloads');
+const files = await readdir(directory);
+const pngFile = files.find(s => s.endsWith('.png') && !s.includes('@300'));
+if (!pngFile) throw new Error('PNG file not found');
+
+const cityName = pngFile.replace('.png', '');
+const image = await readFile(resolve(directory, pngFile));
+const thumbnail = await makeThumbnail(image);
+await writeFile(resolve('..', 'public', 'resources', 'thumbnails', `${cityName}@300.png`), thumbnail);
+console.log('Thumbnail generated successfully');