Добавляет кэш изображений в Github Actions (#395)

Author: monochromer

.github/workflows/check-image-cache.yml

@@ -0,0 +1,25 @@
+name: Check Image Cache
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 * * 4'
+
+jobs:
+  check-images-cache:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Cache images
+        id: images-cache
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-images
+        with:
+          path: '.cache/@11ty/_images'
+          enableCrossOsArchive: true
+          key: images-${{ hashFiles('src/articles/**/*.png', 'src/articles/**/*.jpg', 'src/articles/**/*.svg', 'src/articles/**/*.gif', 'src/people/**/*.jpg') }}
+      - name: check cache
+        if: steps.images-cache.outputs.cache-hit != 'true'
+        shell: bash
+        run: echo "Кэш изображений не найден

.github/workflows/deploy.yml

@@ -14,6 +14,13 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version-file: package.json
+      - name: Images cache
+        id: images-cache
+        uses: actions/cache@v4
+        with:
+          path: '.cache/@11ty/_images'
+          enableCrossOsArchive: true
+          key: images-${{ hashFiles('src/articles/**/*.png', 'src/articles/**/*.jpg', 'src/articles/**/*.svg', 'src/articles/**/*.gif', 'src/people/**/*.jpg') }}
       # Setup key
       - name: Setup key
         run: |

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+.cache

src/eleventy-config/transforms.js

@@ -1,5 +1,6 @@
 import path from 'node:path';
 import os from 'node:os';
+import fs from 'node:fs';
 import htmlmin from 'html-minifier-terser';
 import minifyXml from 'minify-xml';
 import { parseHTML } from 'linkedom';
@@ -11,12 +12,9 @@ const isProdMode = process.env.NODE_ENV === 'production';
 
 async function processImage({ imageElement, inputPath, options, attributes }) {
     const imageStats = await Image(inputPath, {
-        filenameFormat: (hash, src, width, format) => {
-            const extension = path.extname(src);
-            const name = path.basename(src, extension);
-            return `${hash}-${name}-${width}.${format}`;
-        },
-        ...options,
+        outputDir: '.cache/@11ty/_images',
+        urlPath: '/_images/',
+        ...options
     });
 
     const imageAttributes = Object.assign(
@@ -53,7 +51,6 @@ export default function(eleventyConfig) {
         }
 
         const articleSourceFolder = path.dirname(this.page.inputPath);
-        const outputArticleImagesFolder = path.join(path.dirname(this.page.outputPath), 'images');
 
         await Promise.all(images.map(async(image) => {
             const fullImagePath = path.join(articleSourceFolder, image.src);
@@ -69,8 +66,6 @@ export default function(eleventyConfig) {
                     formats: isProdMode && !isGif
                         ? ['svg', 'avif', 'webp', 'auto']
                         : ['svg', 'webp', 'auto'],
-                    outputDir: outputArticleImagesFolder,
-                    urlPath: 'images/',
                     svgShortCircuit: true,
                     sharpOptions: {
                         animated: true,
@@ -108,7 +103,6 @@ export default function(eleventyConfig) {
 
         await Promise.all(images.map(async(image) => {
             const fullImagePath = path.join(eleventyConfig.dir.input, image.src);
-            const avatarsOutputFolder = path.dirname(path.join(eleventyConfig.dir.output, image.src));
 
             await processImage({
                 imageElement: image,
@@ -124,8 +118,6 @@ export default function(eleventyConfig) {
                     formats: isProdMode
                         ? ['svg', 'avif', 'webp', 'auto']
                         : ['svg', 'webp', 'auto'],
-                    outputDir: avatarsOutputFolder,
-                    urlPath: image.src.split('/').slice(0, -1).join('/'),
                     svgShortCircuit: true,
                 },
             });
@@ -134,6 +126,12 @@ export default function(eleventyConfig) {
         return document.toString();
     });
 
+    eleventyConfig.on('eleventy.after', () => {
+        const from = '.cache/@11ty/_images/';
+        const to = path.join(eleventyConfig.directories.output, '_images');
+        fs.cpSync(from, to, { recursive: true });
+    });
+
     eleventyConfig.addTransform('lazyYouTube', (content, outputPath) => {
         let articles = /articles\/([a-zA-Z0-9_-]+)\/index\.html/i;
         let iframes = /<iframe src="https:\/\/www\.youtube\.com\/embed\/([a-zA-Z0-9_-]+)"(.*?)><\/iframe>/ig;