drupal-image-style-generator 0.1.0

package/.idea/drupal-image-style-generator.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>

package/.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="IntellijSFCCDeploymentSettings">
+    <option name="json" value="{&#10;  &quot;isFullCodeVersionCleanup&quot;: false,&#10;  &quot;tasks&quot;: [],&#10;  &quot;isWebDavActionAllowed&quot;: true&#10;}" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/drupal-image-style-generator.iml" filepath="$PROJECT_DIR$/.idea/drupal-image-style-generator.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/Gruntfile.js

@@ -0,0 +1,96 @@
+'use strict';
+
+const semver = require('semver');
+
+module.exports = function(grunt) {
+
+  const pkg = grunt.file.readJSON('package.json');
+  const currentVersion = pkg.version;
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: pkg,
+
+    bump: {
+      options: {
+        files: ['package.json'],
+        commitFiles: ['-a'],
+        pushTo: 'origin',
+        globalReplace: true,
+        // regExp: /(['|"]?version['|"]?[ ]*:[ ]*['|"]?|^framework:[\S\s]*?assets:[\s]*version:[ ]*)(\d+\.\d+\.\d+(-false\.\d+)?(-\d+)?)[\d||A-a|.|-]*(['|"]?)/gmi
+      }
+    },
+    prompt: {
+      bump: {
+        options: {
+          questions: [
+            {
+              config:  'bump.options.setVersion',
+              type:    'list',
+              message: 'Bump version from ' + '<%= pkg.version %>' + ' to:',
+              choices: [
+                {
+                  value: semver.inc(currentVersion, 'patch'),
+                  name:  'Patch:  ' + semver.inc(currentVersion, 'patch') + ' Backwards-compatible bug fixes.'
+                },
+                {
+                  value: semver.inc(currentVersion, 'minor'),
+                  name:  'Minor:  ' + semver.inc(currentVersion, 'minor') + ' Add functionality in a backwards-compatible manner.'
+                },
+                {
+                  value: semver.inc(currentVersion, 'major'),
+                  name:  'Major:  ' + semver.inc(currentVersion, 'major') + ' Incompatible API changes.'
+                },
+                {
+                  value: 'custom',
+                  name:  'Custom: ?.?.? Specify version...'
+                }
+              ]
+            },
+            {
+              config:   'bump.options.setVersion',
+              type:     'input',
+              message:  'What specific version would you like',
+              when:     function (answers) {
+                return answers['bump.options.setVersion'] === 'custom';
+              },
+              validate: function (value) {
+                var valid = semver.valid(value);
+                return !!valid || 'Must be a valid semver, such as 1.2.3-rc1. See http://semver.org/ for more details.';
+              }
+            }
+          ]
+        }
+      }
+    },
+
+    shell: {
+      publish_npm: {
+        command: [
+            // 'npmrc public', // well, this is at the moment hardcoded to my personal public registry name
+            'npm publish'
+        ].join('&&')
+      },
+      merge: {
+        command: [
+          'git checkout develop',
+          'git pull origin develop',
+          'git merge master',
+          'git push',
+          'git checkout master' // back to master
+        ].join('&&')
+      }
+    }
+
+  });
+
+  // These plugins provide necessary tasks.
+  grunt.loadNpmTasks('grunt-prompt');
+  grunt.loadNpmTasks('grunt-bump');
+  grunt.loadNpmTasks('grunt-shell');
+
+  grunt.registerTask('build', 'Production Build', function() {
+    grunt.task.run('prompt', 'bump', 'shell:publish_npm', 'shell:merge');
+  });
+
+};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Andreas Schönefeldt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# Drupal Image Style Generator
+Drupal Image Style Generator
+
+Allows to generate drupal image styles, based on the `theme.breakpoints.yml` in the theme.
+
+
+configure the width and spect ratio of styles per breakpoint: .xs .sm .md .lg .xl
+
+```
+imageStyles:
+  header_location:
+    label: 'Header Standort'
+    aspectRatio: 0.59
+    width: 545
+```
+
+
+```
+col_8:
+  label: 'Col 8'
+  aspectRatio: 0.48
+  width: 545
+```
+

package/index.js

@@ -0,0 +1,249 @@
+import log from "fancy-log";
+
+const REQUIRED_OPTIONS = ['themePath', 'themeName', 'syncFolder']
+
+/**
+ * @param {{themePath: string, themeName: string, syncFolder: string, gridSize?: number}} options
+ */
+export default function (options) {
+
+    REQUIRED_OPTIONS.forEach((option) => {
+        if (!options[option]) {
+            throw new Error(`please configure the required option ${option}.`);
+        }
+    })
+
+    const themePath = options.themePath;
+    const themeName = options.themeName;
+    const syncFolder = options.syncFolder;
+    const IMAGE_STYLE_GRID_SIZE = options.gridSize || 0; // this means, every style will be rounded up to the next divisible number of this
+
+    const { v4 } = require("uuid");
+    const yaml = require('js-yaml');
+    const fs   = require('fs');
+    const breakpointsFile = themePath + '/' + themeName + '.breakpoints.yml';
+    const imageStyles = {};
+    const usedStyleConfigs = {};
+
+    if (!fs.existsSync(breakpointsFile)) {
+        throw new Error(`Your configured theme has no ${breakpointsFile} theme breakpoints file. Please read the documentation and double check your options.`);
+    }
+
+    // read the breakpoints file
+    const bpConf = yaml.load(fs.readFileSync(breakpointsFile, 'utf8'));
+
+    Object.keys(bpConf).forEach((bpName) => {
+        const bp = bpConf[bpName];
+        let regex = /max-width:\s+(\d+)px/gmi;
+
+        let m = regex.exec(bp.mediaQuery);
+        let parsedWidth = m ? parseInt(m[1], 10) : null;
+
+        if (!parsedWidth) {
+            regex = /min-width:\s+(\d+)px/gmi;
+            m = regex.exec(bp.mediaQuery);
+            parsedWidth = m ? parseInt(m[1], 10) : null;
+        }
+
+        // update all available image styles
+        if (bp.imageStyles) {
+            Object.keys(bp.imageStyles).forEach((styleId) => {
+                if (!imageStyles[styleId]) {
+                    imageStyles[styleId] = bp.imageStyles[styleId];
+                    imageStyles[styleId].image_style_mappings = [];
+
+                    imageStyles[styleId].widths = {};
+                }
+
+                // adjust the aspect ratio, if a new is set
+                if (bp.imageStyles[styleId].aspectRatio) {
+                    imageStyles[styleId].aspectRatio = bp.imageStyles[styleId].aspectRatio;
+                }
+
+                let width = bp.imageStyles[styleId].width || parsedWidth;
+
+                // adjust the width to the grid, so we save a couple of image styles
+                width = Math.ceil(width / IMAGE_STYLE_GRID_SIZE) * IMAGE_STYLE_GRID_SIZE;
+
+                // set the new width
+                imageStyles[styleId].width = width;
+                imageStyles[styleId].widths[bpName] = imageStyles[styleId].width;
+            });
+        }
+
+        // loop over all the image styles
+        Object.keys(imageStyles).forEach((styleId) => {
+            bp.multipliers.forEach((multiplier) => {
+
+                const multiplyNum = parseFloat(multiplier);
+                const styleWidth = (imageStyles[styleId].widths[bpName] || parsedWidth) * multiplyNum;
+                const aspectRatio = imageStyles[styleId].aspectRatio;
+
+                const uniqueId = v4();
+
+                let styleHeight;
+                let styleLabel;
+                let concreteStyleId;
+                let styleFileName;
+                let styleFilePath;
+
+                if (aspectRatio) {
+                    styleHeight = imageStyles[styleId].height ? imageStyles[styleId].height * multiplyNum : Math.round(styleWidth * aspectRatio);
+
+                    // generate the filename
+                    styleLabel = `Scale and Crop ${styleWidth} x ${styleHeight}`;
+                    concreteStyleId = `sc_${styleWidth}x${styleHeight}`;
+                    styleFileName = `image.style.${concreteStyleId}.yml`;
+                    styleFilePath = `${syncFolder}/${styleFileName}`;
+
+                    usedStyleConfigs[styleFileName] = true;
+
+                    const styleYml = fs.existsSync(styleFilePath) ?
+                        yaml.load(fs.readFileSync(styleFilePath, 'utf8')) :
+                        {
+                            uuid: uniqueId,
+                            langcode: 'de',
+                            status: true,
+                            dependencies: {
+                                module: ['focal_point'] // @todo - parse the module config and check, if focal point is enabled
+                            },
+                            name: concreteStyleId,
+                            label: styleLabel,
+                            effects: {}
+                        }
+                    ;
+
+                    const hasChanges = Object.values(styleYml.effects).length === 0 || Object.values(styleYml.effects).some((effectConf) => {
+                        return (effectConf.data.width !== styleWidth || effectConf.data.height !== styleHeight); // the width has changed
+                    });
+
+                    if (hasChanges) {
+                        const effectId = v4();
+
+                        styleYml.effects = {};
+                        styleYml.effects[effectId] = {
+                            uuid: effectId,
+                            id: 'focal_point_scale_and_crop',
+                            weight: 1,
+                            data: {
+                                width: styleWidth,
+                                height: imageStyles[styleId].height ? imageStyles[styleId].height * multiplyNum : Math.round(styleWidth * imageStyles[styleId].aspectRatio),
+                                crop_type: 'focal_point'
+                            }
+                        };
+
+                        // write the file
+                        fs.writeFileSync(styleFilePath, yaml.dump(styleYml));
+                        log('Created ' + styleFilePath);
+                    } else {
+                        log('skipping ' + styleFileName + ' - it already exists and there are no changes.');
+                    }
+
+                } else {
+
+                    // generate the filename
+                    styleLabel = `Scale ${styleWidth}`;
+                    concreteStyleId = `s_${styleWidth}`;
+                    styleFileName = `image.style.${concreteStyleId}.yml`;
+                    styleFilePath = `${syncFolder}/${styleFileName}`;
+
+                    usedStyleConfigs[styleFileName] = true;
+
+                    const styleYml = fs.existsSync(styleFilePath) ?
+                        yaml.load(fs.readFileSync(styleFilePath, 'utf8')) :
+                        {
+                            uuid: uniqueId,
+                            langcode: 'de',
+                            status: true,
+                            dependencies: {},
+                            name: concreteStyleId,
+                            label: styleLabel,
+                            effects: {}
+                        }
+                    ;
+
+                    const hasChanges = Object.values(styleYml.effects).length === 0 || Object.values(styleYml.effects).some((effectConf) => {
+                        return effectConf.data.width !== styleWidth; // the width has changed
+                    });
+
+                    if (hasChanges) {
+                        const effectId = v4();
+
+                        styleYml.effects = {};
+                        styleYml.effects[effectId] = {
+                            uuid: effectId,
+                            id: 'image_scale',
+                            weight: 1,
+                            data: {
+                                width: styleWidth,
+                                height: null,
+                                upscale: false
+                            }
+                        };
+
+                        // write the file
+                        fs.writeFileSync(styleFilePath, yaml.dump(styleYml));
+                        log('Created ' + styleFilePath);
+                    } else {
+                        log('skipping ' + styleFileName + ' - it already exists and there are no changes.');
+                    }
+
+                }
+
+                imageStyles[styleId].image_style_mappings.push({
+                    breakpoint_id: bpName,
+                    multiplier: multiplier,
+                    image_mapping_type: 'image_style',
+                    image_mapping: concreteStyleId
+                });
+
+            });
+        });
+    });
+
+    // write the actual responsive config files
+    Object.keys(imageStyles).forEach((styleId) => {
+        const responsiveImagePath = `${syncFolder}/responsive_image.styles.${styleId}.yml`;
+        const uniqueId = v4();
+        const responsiveConfig = fs.existsSync(responsiveImagePath) ?
+            yaml.load(fs.readFileSync(responsiveImagePath, 'utf8')) :
+            {
+                uuid: uniqueId,
+                langcode: 'de',
+                status: true,
+                dependencies: {
+                    config: [],
+                    theme: [themeName]
+                },
+                id: styleId,
+                label: imageStyles[styleId].label,
+                image_style_mappings: [],
+                breakpoint_group: themeName
+            }
+        ;
+
+        const mappings = imageStyles[styleId].image_style_mappings;
+
+        responsiveConfig.dependencies.config = mappings.map((mapping) => {
+            return 'image.style.' + mapping.image_mapping;
+        });
+
+        responsiveConfig.image_style_mappings = mappings;
+        responsiveConfig.fallback_image_style = mappings[0].image_mapping;
+
+        fs.writeFileSync(responsiveImagePath, yaml.dump(responsiveConfig));
+        log('Created ' + responsiveImagePath);
+    });
+
+    // cleanup the unused files
+    const configFiles = fs.readdirSync(syncFolder);
+
+    configFiles.forEach(file => {
+        if ((file.indexOf('image.style.sc_') === 0 || file.indexOf('image.style.s_') === 0) && !usedStyleConfigs[file]) {
+            fs.rmSync(`${syncFolder}/${file}`);
+            console.log('%o is unused and was removed.', file);
+        }
+    });
+
+    log('Generated %d image styles for %d responsive sizes', Object.keys(usedStyleConfigs).length, Object.keys(imageStyles).length);
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "drupal-image-style-generator",
+  "version": "0.1.0",
+  "description": "A helper tool to automatically geenrate drupal 8+ responsive image styles",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Andreas-Schoenefeldt/drupal-image-style-generator.git"
+  },
+  "keywords": [
+    "drupal"
+  ],
+  "author": "Andreas Schönefeldt",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Andreas-Schoenefeldt/drupal-image-style-generator/issues"
+  },
+  "homepage": "https://github.com/Andreas-Schoenefeldt/drupal-image-style-generator#readme",
+  "devDependencies": {
+    "grunt": "^1.6.1",
+    "grunt-bump": "^0.8.0",
+    "grunt-prompt": "^1.3.3",
+    "grunt-shell": "^4.0.0",
+    "semver": "^7.3.8"
+  },
+  "dependencies": {
+    "fancy-log": "^2.0.0",
+    "js-yaml": "^4.1.0",
+    "uuid": "^9.0.0"
+  }
+}