From 60a3346003f0e4954eb7e4c36b82af7c91a93f40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20Kalij=C3=A4rvi?= Date: Tue, 20 Feb 2024 10:00:20 +0200 Subject: [PATCH 1/2] UHF-9497: Removed custom icons for hdbt subtheme as all usable icons should be available in hdbt theme. --- public/themes/custom/hdbt_subtheme/README.md | 20 -- .../hdbt_subtheme/templates/misc/icon.twig | 1 - .../custom/hdbt_subtheme/webpack.config.js | 7 - .../hdbt_subtheme/webpack.svgToSprite.js | 181 ------------------ 4 files changed, 209 deletions(-) delete mode 100644 public/themes/custom/hdbt_subtheme/templates/misc/icon.twig delete mode 100644 public/themes/custom/hdbt_subtheme/webpack.svgToSprite.js diff --git a/public/themes/custom/hdbt_subtheme/README.md b/public/themes/custom/hdbt_subtheme/README.md index 1b81adab8..2f1eda600 100644 --- a/public/themes/custom/hdbt_subtheme/README.md +++ b/public/themes/custom/hdbt_subtheme/README.md @@ -70,35 +70,15 @@ hdbt_subtheme │ │ └───... │ └───js │ │ │ common.js -│ └───icons -│ | some-icon.svg └───dist └───css | styles.min.css └───js | bundle.min.js - └───icons - | sprite.svg ``` ## How tos -### How can I add a new SVG icon and then use it on my site. - -You can add your custom icons to `./src/icons/`. F.e. `my-awesome-icon.svg`. -Running `nvm use && npm i && npm run build` will collect the icon to the sprite.svg and it should then be available for use on your site by calling `my-awesome-icon`. Just remember to clear caches. -The icons can be used in twig like so: - - {# HDBT Subtheme specific icons #} - {% include "@hdbt_subtheme/misc/icon.twig" with {icon: 'my-awesome-icon'} %} - - {# HDBT specific icons #} - {% include "@hdbt/misc/icon.twig" with {icon: 'google-view'} %} - -To use the icon in SCSS, you can call it like so: - - background-image: url('../icons/my-awesome-icon.svg'); - ### My javascript has unexpected errors when loading a page in Drupal. If you have compiled the code with dev-flag (`nmp run dev`), then the sourcemaps expects the JS files to be found in correct places. diff --git a/public/themes/custom/hdbt_subtheme/templates/misc/icon.twig b/public/themes/custom/hdbt_subtheme/templates/misc/icon.twig deleted file mode 100644 index 8e2c5124a..000000000 --- a/public/themes/custom/hdbt_subtheme/templates/misc/icon.twig +++ /dev/null @@ -1 +0,0 @@ - diff --git a/public/themes/custom/hdbt_subtheme/webpack.config.js b/public/themes/custom/hdbt_subtheme/webpack.config.js index ab9055da2..75b8e8030 100644 --- a/public/themes/custom/hdbt_subtheme/webpack.config.js +++ b/public/themes/custom/hdbt_subtheme/webpack.config.js @@ -4,7 +4,6 @@ const glob = require('glob'); const FriendlyErrorsWebpackPlugin = require('@nuxt/friendly-errors-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'); -const SvgToSprite = require('./webpack.svgToSprite'); const { merge } = require('webpack-merge'); // Handle entry points. @@ -105,12 +104,6 @@ module.exports = (env, argv) => { extensions: ['.js', '.json'], }, plugins: [ - // Uncomment following lines to create svg icon sprite. - // new SvgToSprite( - // path.resolve(__dirname, 'src/icons/**/*.svg'), - // 'icons/hdbt-subtheme-sprite.svg', - // 'icons.json' - // ), new FriendlyErrorsWebpackPlugin(), new RemoveEmptyScriptsPlugin(), new MiniCssExtractPlugin({ diff --git a/public/themes/custom/hdbt_subtheme/webpack.svgToSprite.js b/public/themes/custom/hdbt_subtheme/webpack.svgToSprite.js deleted file mode 100644 index cfb478edd..000000000 --- a/public/themes/custom/hdbt_subtheme/webpack.svgToSprite.js +++ /dev/null @@ -1,181 +0,0 @@ -const fs = require('fs'); -const md5 = require('md5'); -const path = require('path'); -const glob = require('glob'); -const SVGSpriter = require('svg-sprite'); - -// Generates styles for each icon. -class svgToSprite { - constructor(inputPattern, outputSvgSpriteFilename, outputIconJsonFilename) { - // Current theme name. - this.themeName = path.basename(path.resolve(process.cwd())).replace(/_/g, '-'); - - // Input and output patterns. - this.inputPattern = inputPattern; - this.svgSpriteFilename = outputSvgSpriteFilename; - this.svgToCssOutputFilename = `css/${this.themeName}-icons.css`; - this.svgToJsonOutputFilename = outputIconJsonFilename; - - // Mapped SVG files. - this.files = []; - this.cssVariables = []; - this.classes = []; - - // Sprite configurations. - this.spriteHashFilename = ''; - } - - apply(compiler) { - const pluginName = svgToSprite.name; - const { webpack } = compiler; - const { Compilation } = webpack; - const { RawSource } = webpack.sources; - - // Tapping to the "thisCompilation" hook in order to further tap - // to the compilation process on an earlier stage. - compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { - - // Tapping to the assets processing pipeline on a specific stage. - compilation.hooks.processAssets.tap( - { - name: pluginName, - stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE, - }, - () => { - if (this.files) { - // Create Spriter instance with custom configuration. - let spriter = new SVGSpriter({ - mode: { - stack: { - dest: "dist", - sprite: this.svgSpriteFilename, - rootviewbox: false, - } - } - }); - - // Add SVG files to Spriter instance. - this.files.forEach(function(pathname) { - spriter.add(pathname, null, fs.readFileSync(pathname, 'utf-8')); - }); - - // Compile the sprite. - spriter.compile((error, result) => { - for (let mode in result) { - for (let resource in result[mode]) { - let hash = md5(result[mode][resource].contents).slice(-5); - let outputFilename = this.svgSpriteFilename.replace(/.svg/g, `-${hash}.svg`); - - if (result[mode][resource].contents) { - this.spriteHashFilename = outputFilename; - - // Adding new asset to the compilation, so it will be - // automatically generated by the webpack - // in the output directory. - compilation.emitAsset( - outputFilename, - new RawSource(result[mode][resource].contents) - ); - } - } - } - }); - } - } - ); - }); - - // SVG to CSS. - // Create styles for the icons. - compiler.hooks.emit.tapAsync('svgToCss', (compilation, callback) => { - - // Create --hel-icon--{icon name} and [data-hds-icon-start:'{icon name}'] CSS variables. - let cssVariables = []; - - while(this.cssVariables.length) { - let fullFilename = this.cssVariables.shift(); - let filename = fullFilename.replace(/^.*[\\\/]/, '') - let name = filename.split('.'); - cssVariables.push(`--${this.themeName}-icon--${name[0]}:url(../${this.spriteHashFilename}#${name[0]})`); - } - cssVariables = `:root{${ cssVariables.join(';') }}`; - - // Create .hel-icon--{icon name} & [data-hds-icon-start:'{icon name}'] or {theme-name}--{icon name} css classes. - let cssClasses = ''; - while(this.classes.length) { - let fullFilename = this.classes.shift(); - let filename = fullFilename.replace(/^.*[\\\/]/, '') - let name = filename.split('.'); - cssClasses += `.${this.themeName}-icon--${name[0]},[data-hds-icon-start='${name[0]}']{--url:var(--${this.themeName}-icon--${name[0]})}`; - } - - // Add a URL as a CSS variable to the hel-icon mask-image. - // If icons are used elsewhere (f.e. in a separate theme or module) this - // variable will provide the correct URL for the icon. - let hdbtIconUrl = `.${this.themeName}-icon,[data-hds-icon-start]::before{` + - `-webkit-mask-image:var(--url);` + - `mask-image:var(--url)` + - `}`; - - // Combine CSS variables and classes. - let filelist = cssVariables + cssClasses + hdbtIconUrl; - - // Compile the assets. - compilation.assets[this.svgToCssOutputFilename] = { - source: function() { - return filelist; - }, - size: function() { - return filelist.length; - } - }; - callback(); - }); - compiler.hooks.environment.tap('svgToCss', this.checkForFiles.bind(this)); - compiler.hooks.watchRun.tap('svgToCss', this.checkForFiles.bind(this)); - - // SVG to JSON - // Create a list of icons in JSON format. - compiler.hooks.emit.tapAsync('svgToJson', (compilation, callback) => { - let filelist = '['; - const last = this.files[this.files.length - 1]; - - while(this.files.length) { - let fullfilename = this.files.shift(); - let filename = fullfilename.replace(/^.*[\\\/]/, '') - let name = filename.split('.'); - let divider = (fullfilename === last) ? '"' : '",'; - filelist += '"' + name[0] + divider; - } - filelist += ']'; - - compilation.assets[this.svgToJsonOutputFilename] = { - source: function() { - return filelist; - }, - size: function() { - return filelist.length; - } - }; - callback(); - }); - compiler.hooks.environment.tap('svgToJson', this.checkForFiles.bind(this)); - compiler.hooks.watchRun.tap('svgToJson', this.checkForFiles.bind(this)); - } - - // Map files to suitable variables. - checkForFiles() { - glob.globSync(this.inputPattern).map((match) => { - const pathname = path.resolve(match); - const stats = fs.lstatSync(pathname); - - if (stats.isFile()) { - this.classes = [...new Set([...this.classes, pathname])]; - this.cssVariables = [...new Set([...this.cssVariables, pathname])]; - this.files = [...new Set([...this.files, pathname])]; - } - }); - } -} - -module.exports = svgToSprite; From 105841bfe68b9d5ac9746d62f0d26451132cc1b0 Mon Sep 17 00:00:00 2001 From: hel-platta-automation <95360595+hel-platta-automation@users.noreply.github.com> Date: Wed, 6 Mar 2024 12:29:47 +0000 Subject: [PATCH 2/2] Update configuration --- composer.lock | 48 +++++++++---------- .../field.field.node.page.field_content.yml | 2 +- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/composer.lock b/composer.lock index 5086c4a81..4176d31be 100644 --- a/composer.lock +++ b/composer.lock @@ -1190,16 +1190,16 @@ }, { "name": "doctrine/collections", - "version": "2.2.0", + "version": "2.2.1", "source": { "type": "git", "url": "https://github.com/doctrine/collections.git", - "reference": "07e16cd7b80a2cffed99e36b541876af172f0257" + "reference": "420480fc085bc65f3c956af13abe8e7546f94813" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/doctrine/collections/zipball/07e16cd7b80a2cffed99e36b541876af172f0257", - "reference": "07e16cd7b80a2cffed99e36b541876af172f0257", + "url": "https://api.github.com/repos/doctrine/collections/zipball/420480fc085bc65f3c956af13abe8e7546f94813", + "reference": "420480fc085bc65f3c956af13abe8e7546f94813", "shasum": "" }, "require": { @@ -1256,7 +1256,7 @@ ], "support": { "issues": "https://github.com/doctrine/collections/issues", - "source": "https://github.com/doctrine/collections/tree/2.2.0" + "source": "https://github.com/doctrine/collections/tree/2.2.1" }, "funding": [ { @@ -1272,7 +1272,7 @@ "type": "tidelift" } ], - "time": "2024-02-25T22:55:36+00:00" + "time": "2024-03-05T22:28:45+00:00" }, { "name": "doctrine/deprecations", @@ -1995,16 +1995,16 @@ }, { "name": "drupal/core", - "version": "10.2.3", + "version": "10.2.4", "source": { "type": "git", "url": "https://github.com/drupal/core.git", - "reference": "cc8c7952f7013795b735f5c15290e76937163bb7" + "reference": "d1c5b44adfc79bda03252471491b0fba89d87eff" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/drupal/core/zipball/cc8c7952f7013795b735f5c15290e76937163bb7", - "reference": "cc8c7952f7013795b735f5c15290e76937163bb7", + "url": "https://api.github.com/repos/drupal/core/zipball/d1c5b44adfc79bda03252471491b0fba89d87eff", + "reference": "d1c5b44adfc79bda03252471491b0fba89d87eff", "shasum": "" }, "require": { @@ -2152,9 +2152,9 @@ ], "description": "Drupal is an open source content management platform powering millions of websites and applications.", "support": { - "source": "https://github.com/drupal/core/tree/10.2.3" + "source": "https://github.com/drupal/core/tree/10.2.4" }, - "time": "2024-02-07T22:44:48+00:00" + "time": "2024-03-06T08:23:56+00:00" }, { "name": "drupal/core-composer-scaffold", @@ -3758,16 +3758,16 @@ }, { "name": "drupal/hdbt_admin", - "version": "3.1.3", + "version": "3.1.4", "source": { "type": "git", "url": "https://github.com/City-of-Helsinki/drupal-hdbt-admin.git", - "reference": "35d67368a99b0b31f69249aa52ba67d37687551a" + "reference": "b39cc0cbf23eeea448a2b10b835b406b19efc3c0" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/City-of-Helsinki/drupal-hdbt-admin/zipball/35d67368a99b0b31f69249aa52ba67d37687551a", - "reference": "35d67368a99b0b31f69249aa52ba67d37687551a", + "url": "https://api.github.com/repos/City-of-Helsinki/drupal-hdbt-admin/zipball/b39cc0cbf23eeea448a2b10b835b406b19efc3c0", + "reference": "b39cc0cbf23eeea448a2b10b835b406b19efc3c0", "shasum": "" }, "require": { @@ -3786,10 +3786,10 @@ "Drupal" ], "support": { - "source": "https://github.com/City-of-Helsinki/drupal-hdbt-admin/tree/3.1.3", + "source": "https://github.com/City-of-Helsinki/drupal-hdbt-admin/tree/3.1.4", "issues": "https://github.com/City-of-Helsinki/drupal-hdbt-admin/issues" }, - "time": "2024-03-06T07:22:38+00:00" + "time": "2024-03-06T12:26:23+00:00" }, { "name": "drupal/health_check", @@ -3843,16 +3843,16 @@ }, { "name": "drupal/helfi_api_base", - "version": "2.6.3", + "version": "2.6.4", "source": { "type": "git", "url": "https://github.com/City-of-Helsinki/drupal-module-helfi-api-base.git", - "reference": "f39219c424a420b663fbb0da1de157fd94f1c820" + "reference": "778b6431d341db6f280aeb343d1bc673a378b5a0" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/City-of-Helsinki/drupal-module-helfi-api-base/zipball/f39219c424a420b663fbb0da1de157fd94f1c820", - "reference": "f39219c424a420b663fbb0da1de157fd94f1c820", + "url": "https://api.github.com/repos/City-of-Helsinki/drupal-module-helfi-api-base/zipball/778b6431d341db6f280aeb343d1bc673a378b5a0", + "reference": "778b6431d341db6f280aeb343d1bc673a378b5a0", "shasum": "" }, "require": { @@ -3881,10 +3881,10 @@ ], "description": "Helfi - API Base", "support": { - "source": "https://github.com/City-of-Helsinki/drupal-module-helfi-api-base/tree/2.6.3", + "source": "https://github.com/City-of-Helsinki/drupal-module-helfi-api-base/tree/2.6.4", "issues": "https://github.com/City-of-Helsinki/drupal-module-helfi-api-base/issues" }, - "time": "2024-03-05T08:41:08+00:00" + "time": "2024-03-06T08:32:04+00:00" }, { "name": "drupal/helfi_azure_fs", diff --git a/conf/cmi/field.field.node.page.field_content.yml b/conf/cmi/field.field.node.page.field_content.yml index 132ce44fd..4ec7edd1e 100644 --- a/conf/cmi/field.field.node.page.field_content.yml +++ b/conf/cmi/field.field.node.page.field_content.yml @@ -45,10 +45,10 @@ settings: handler: 'default:paragraph' handler_settings: target_bundles: + hearings: hearings journey_planner: journey_planner list_of_plans: list_of_plans ploughing_schedule: ploughing_schedule - hearings: hearings text: text accordion: accordion banner: banner