Generated Images
4 | 5 |Original Shapes
6 |
7 | 
8 |
9 |
10 | Transparent Circle
11 |
12 | 
13 |
14 |
15 |
13 | Circle With Green Background
16 |
17 | 
21 |
22 |
23 |
24 |
21 | Sized Squares
25 |
26 | 
27 | 
28 | 
29 | 
30 |
31 |
32 |
27 |
28 |
29 |
30 | Square in a different destination
33 |
34 | 
35 |
36 |
--------------------------------------------------------------------------------
/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
35 |
25 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | {{content-for "body-footer"}}
37 | {{content-for "test-body-footer"}}
38 |
39 |
40 |
--------------------------------------------------------------------------------
/tests/dummy/config/ember-try.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const getChannelURL = require('ember-source-channel-url');
4 | const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup');
5 |
6 | module.exports = async function () {
7 | return {
8 | usePnpm: true,
9 | scenarios: [
10 | {
11 | name: 'ember-lts-4.12',
12 | npm: {
13 | devDependencies: {
14 | 'ember-source': '~4.12.0',
15 | },
16 | },
17 | },
18 | {
19 | name: 'ember-lts-5.4',
20 | npm: {
21 | devDependencies: {
22 | 'ember-source': '~5.4.0',
23 | },
24 | },
25 | },
26 | {
27 | name: 'ember-release',
28 | npm: {
29 | devDependencies: {
30 | 'ember-source': await getChannelURL('release'),
31 | },
32 | },
33 | },
34 | {
35 | name: 'ember-beta',
36 | npm: {
37 | devDependencies: {
38 | 'ember-source': await getChannelURL('beta'),
39 | },
40 | },
41 | },
42 | {
43 | name: 'ember-canary',
44 | npm: {
45 | devDependencies: {
46 | 'ember-source': await getChannelURL('canary'),
47 | },
48 | },
49 | },
50 | embroiderSafe(),
51 | embroiderOptimized(),
52 | ],
53 | };
54 | };
55 |
--------------------------------------------------------------------------------
/tests/dummy/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function (environment) {
4 | const ENV = {
5 | modulePrefix: 'dummy',
6 | environment,
7 | rootURL: '/',
8 | locationType: 'history',
9 | EmberENV: {
10 | EXTEND_PROTOTYPES: false,
11 | FEATURES: {
12 | // Here you can enable experimental features on an ember canary build
13 | // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
14 | },
15 | },
16 |
17 | APP: {
18 | // Here you can pass flags/options to your application instance
19 | // when it is created
20 | },
21 | };
22 |
23 | if (environment === 'development') {
24 | // ENV.APP.LOG_RESOLVER = true;
25 | // ENV.APP.LOG_ACTIVE_GENERATION = true;
26 | // ENV.APP.LOG_TRANSITIONS = true;
27 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
28 | // ENV.APP.LOG_VIEW_LOOKUPS = true;
29 | }
30 |
31 | if (environment === 'test') {
32 | // Testem prefers this...
33 | ENV.locationType = 'none';
34 |
35 | // keep test console output quieter
36 | ENV.APP.LOG_ACTIVE_GENERATION = false;
37 | ENV.APP.LOG_VIEW_LOOKUPS = false;
38 |
39 | ENV.APP.rootElement = '#ember-testing';
40 | ENV.APP.autoboot = false;
41 | }
42 |
43 | if (environment === 'production') {
44 | // here you can enable a production-specific feature
45 | }
46 |
47 | return ENV;
48 | };
49 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | root: true,
5 | parser: '@babel/eslint-parser',
6 | parserOptions: {
7 | ecmaVersion: 'latest',
8 | sourceType: 'module',
9 | requireConfigFile: false,
10 | babelOptions: {
11 | plugins: [
12 | ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
13 | ],
14 | },
15 | },
16 | plugins: ['ember'],
17 | extends: [
18 | 'eslint:recommended',
19 | 'plugin:ember/recommended',
20 | 'plugin:prettier/recommended',
21 | ],
22 | env: {
23 | browser: true,
24 | },
25 | rules: {},
26 | overrides: [
27 | // node files
28 | {
29 | files: [
30 | './.eslintrc.js',
31 | './.prettierrc.js',
32 | './.stylelintrc.js',
33 | './.template-lintrc.js',
34 | './ember-cli-build.js',
35 | './index.js',
36 | './testem.js',
37 | './blueprints/*/index.js',
38 | './config/**/*.js',
39 | './tests/dummy/config/**/*.js',
40 | ],
41 | parserOptions: {
42 | sourceType: 'script',
43 | },
44 | env: {
45 | browser: false,
46 | node: true,
47 | },
48 | extends: ['plugin:n/recommended'],
49 | },
50 | {
51 | // test files
52 | files: ['tests/**/*-test.{js,ts}'],
53 | extends: ['plugin:qunit/recommended'],
54 | },
55 | ],
56 | };
57 |
--------------------------------------------------------------------------------
/tests/helpers/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | setupApplicationTest as upstreamSetupApplicationTest,
3 | setupRenderingTest as upstreamSetupRenderingTest,
4 | setupTest as upstreamSetupTest,
5 | } from 'ember-qunit';
6 |
7 | // This file exists to provide wrappers around ember-qunit's
8 | // test setup functions. This way, you can easily extend the setup that is
9 | // needed per test type.
10 |
11 | function setupApplicationTest(hooks, options) {
12 | upstreamSetupApplicationTest(hooks, options);
13 |
14 | // Additional setup for application tests can be done here.
15 | //
16 | // For example, if you need an authenticated session for each
17 | // application test, you could do:
18 | //
19 | // hooks.beforeEach(async function () {
20 | // await authenticateSession(); // ember-simple-auth
21 | // });
22 | //
23 | // This is also a good place to call test setup functions coming
24 | // from other addons:
25 | //
26 | // setupIntl(hooks, 'en-us'); // ember-intl
27 | // setupMirage(hooks); // ember-cli-mirage
28 | }
29 |
30 | function setupRenderingTest(hooks, options) {
31 | upstreamSetupRenderingTest(hooks, options);
32 |
33 | // Additional setup for rendering tests can be done here.
34 | }
35 |
36 | function setupTest(hooks, options) {
37 | upstreamSetupTest(hooks, options);
38 |
39 | // Additional setup for unit tests can be done here.
40 | }
41 |
42 | export { setupApplicationTest, setupRenderingTest, setupTest };
43 |
--------------------------------------------------------------------------------
/.github/workflows/update-transitive-dependenies.yaml:
--------------------------------------------------------------------------------
1 | name: Update Transitive Dependencies
2 |
3 | on:
4 | schedule:
5 | - cron: '15 11 * * 0' # weekly, on Sunday morning (UTC)
6 | workflow_dispatch:
7 |
8 | jobs:
9 | update:
10 | name: Update and Create PR
11 | runs-on: macos-latest
12 |
13 | steps:
14 | - uses: actions/checkout@v6
15 | - uses: pnpm/action-setup@v4
16 | - uses: actions/setup-node@v6
17 | with:
18 | node-version: 18
19 | cache: pnpm
20 | - name: remove and re-create lock file
21 | run: |
22 | rm pnpm-lock.yaml
23 | pnpm install
24 | - name: Create Pull Request
25 | id: cpr
26 | uses: peter-evans/create-pull-request@v8
27 | with:
28 | token: ${{ secrets.MY_TOKEN }}
29 | commit-message: Update Transitive Dependencies
30 | title: Update Transitive Dependencies
31 | body: |
32 | - Dependency updates
33 |
34 | Auto-generated by [create-pull-request][1]
35 |
36 | [1]: https://github.com/peter-evans/create-pull-request
37 | branch: auto-update-dependencies
38 | labels: dependencies
39 | - name: Enable Pull Request Automerge
40 | if: steps.cpr.outputs.pull-request-operation == 'created'
41 | uses: peter-evans/enable-pull-request-automerge@v3
42 | with:
43 | token: ${{ secrets.GITHUB_TOKEN }}
44 | pull-request-number: ${{ steps.cpr.outputs.pull-request-number }}
45 | merge-method: merge
46 |
--------------------------------------------------------------------------------
/.github/workflows/update-pnpm-version.yml:
--------------------------------------------------------------------------------
1 | name: Update pnpm Version
2 | on:
3 | schedule:
4 | - cron: "0 5 * * 6" # Weekly on Saturday night (UTC)
5 | workflow_dispatch:
6 |
7 | jobs:
8 | update-pnpm:
9 | runs-on: ubuntu-latest
10 | steps:
11 | - uses: actions/checkout@v6
12 | - name: Setup Node.js
13 | uses: actions/setup-node@v6
14 | with:
15 | node-version: 18
16 | - name: Get latest pnpm version
17 | run: |
18 | PNPM_VERSION="$(npm view pnpm version)" # get the latest version of pnpm from the registry
19 | echo ${PNPM_VERSION}
20 | echo "pnpm_version=${PNPM_VERSION}" >> $GITHUB_ENV
21 | - name: Update package.json
22 | run: |
23 | jq '.packageManager = "pnpm@'"${{ env.pnpm_version }}"'"' package.json > temp.json
24 | mv temp.json package.json
25 | - name: Create Pull Request
26 | id: cpr
27 | uses: peter-evans/create-pull-request@v8
28 | with:
29 | token: ${{ secrets.MY_TOKEN }}
30 | commit-message: Update PNPM to v${{ env.pnpm_version }}
31 | title: Update PNPM to v${{ env.pnpm_version }}
32 | body: |
33 | Update PNPM to v${{ env.pnpm_version }} the latest release.
34 | Auto-generated by [create-pull-request][1]
35 |
36 | [1]: https://github.com/peter-evans/create-pull-request
37 | branch: update-pnpm-version
38 | labels: dependencies
39 | - name: Enable Pull Request Automerge and Label for Tests
40 | if: steps.cpr.outputs.pull-request-operation == 'created'
41 | run: |
42 | gh pr merge --merge --auto ${{ steps.cpr.outputs.pull-request-number }}
43 | env:
44 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
45 |
--------------------------------------------------------------------------------
/ember-cli-build.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
4 |
5 | module.exports = function (defaults) {
6 | const app = new EmberAddon(defaults, {
7 | 'ember-cli-image-transformer': {
8 | images: [
9 | {
10 | inputFilename: 'tests/dummy/public/square.svg',
11 | outputFileName: 'icon-square',
12 | convertTo: 'png',
13 | sizes: [16, 32, 45, 900],
14 | },
15 | {
16 | inputFilename: 'tests/dummy/public/circle.svg',
17 | outputFileName: 'transparent-circle',
18 | convertTo: 'png',
19 | background: { r: 255, g: 255, b: 255, alpha: 0 },
20 | sizes: [100],
21 | },
22 | {
23 | inputFilename: 'tests/dummy/public/circle.svg',
24 | outputFileName: 'circle-with-green-background',
25 | convertTo: 'jpg',
26 | background: { r: 0, g: 255, b: 0, alpha: 0 },
27 | sizes: [100],
28 | },
29 | {
30 | inputFilename: 'tests/dummy/public/square.svg',
31 | outputFileName: 'bigsquare',
32 | convertTo: 'png',
33 | destination: 'big/images',
34 | sizes: [200],
35 | },
36 | ],
37 | },
38 | });
39 |
40 | /*
41 | This build file specifies the options for the dummy test app of this
42 | addon, located in `/tests/dummy`
43 | This build file does *not* influence how the addon or the app using it
44 | behave. You most likely want to be modifying `./index.js` or app's build file
45 | */
46 |
47 | const { maybeEmbroider } = require('@embroider/test-setup');
48 | return maybeEmbroider(app, {
49 | skipBabel: [
50 | {
51 | package: 'qunit',
52 | },
53 | ],
54 | });
55 | };
56 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: npm
4 | directory: "/"
5 | schedule:
6 | interval: weekly
7 | open-pull-requests-limit: 10
8 | versioning-strategy: increase-if-necessary
9 | ignore:
10 | - dependency-name: "@babel/eslint-parser"
11 | - dependency-name: "@babel/plugin-proposal-decorators"
12 | - dependency-name: "@ember/optional-features"
13 | - dependency-name: "@ember/string"
14 | - dependency-name: "@ember/test-helpers"
15 | - dependency-name: "@embroider/test-setup"
16 | - dependency-name: "@glimmer/component"
17 | - dependency-name: "@glimmer/tracking"
18 | - dependency-name: broccoli-asset-rev
19 | - dependency-name: concurrently
20 | - dependency-name: ember-auto-import
21 | - dependency-name: ember-cli
22 | - dependency-name: ember-cli-babel
23 | - dependency-name: ember-cli-dependency-checker
24 | - dependency-name: ember-cli-htmlbars
25 | - dependency-name: ember-cli-inject-live-reload
26 | - dependency-name: ember-cli-sri
27 | - dependency-name: ember-cli-terser
28 | - dependency-name: ember-load-initializers
29 | - dependency-name: ember-page-title
30 | - dependency-name: ember-qunit
31 | - dependency-name: ember-resolver
32 | - dependency-name: ember-source
33 | - dependency-name: ember-source-channel-url
34 | - dependency-name: ember-template-lint
35 | - dependency-name: ember-try
36 | - dependency-name: eslint
37 | - dependency-name: eslint-config-prettier
38 | - dependency-name: eslint-plugin-ember
39 | - dependency-name: eslint-plugin-n
40 | - dependency-name: eslint-plugin-prettier
41 | - dependency-name: eslint-plugin-qunit
42 | - dependency-name: loader.js
43 | - dependency-name: prettier
44 | - dependency-name: qunit
45 | - dependency-name: qunit-dom
46 | - dependency-name: stylelint
47 | - dependency-name: stylelint-config-standard
48 | - dependency-name: stylelint-prettier
49 | - dependency-name: webpack
50 | - package-ecosystem: github-actions
51 | directory: "/"
52 | schedule:
53 | interval: weekly
54 |
--------------------------------------------------------------------------------
/lib/generate-icons.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | 'use strict';
3 |
4 | const CachingWriter = require('broccoli-caching-writer');
5 | const path = require('path');
6 | const sharp = require('sharp');
7 |
8 | class GenerateIcons extends CachingWriter {
9 | constructor(inputNode, options) {
10 | super([inputNode], {
11 | annotation: 'ember-cli-image-transformer-build',
12 | });
13 |
14 | sharp.cache(false);
15 | this.options = options;
16 | }
17 |
18 | build() {
19 | const options = this.options;
20 | const promises = [];
21 | options.sizes.forEach((size) => {
22 | promises.push(this.writeIcon(size));
23 | });
24 |
25 | return Promise.all(promises);
26 | }
27 | writeIcon(size) {
28 | const fileName = `${this.options.outputFileName}${size}.${this.options.convertTo}`;
29 | const outputPath = path.join(this.outputPath, fileName);
30 | const originalSvg = path.join(
31 | this.inputPaths[0],
32 | this.options.inputFilename,
33 | );
34 | const image = this.getSharp(originalSvg);
35 | image.resize(size);
36 | if (this.options.background) {
37 | image.flatten({ background: this.options.background });
38 | }
39 |
40 | if (this.options.quality) {
41 | return image
42 | .toFormat(this.options.convertTo, { quality: this.options.quality })
43 | .toFile(outputPath);
44 | } else {
45 | return image.toFormat(this.options.convertTo).toFile(outputPath);
46 | }
47 | }
48 | /**
49 | * There is an issue in the way sharp processes SVGs on OSX
50 | * This is a workaround based on https://github.com/lovell/sharp/issues/1593#issuecomment-491171982
51 | */
52 | getSharp(path) {
53 | sharp(
54 | Buffer.from(
55 | ``,
56 | 'utf-8',
57 | ),
58 | )
59 | .metadata()
60 | .catch(() => {
61 | //do nothing
62 | });
63 |
64 | return sharp(path);
65 | }
66 | }
67 |
68 | module.exports = GenerateIcons;
69 |
--------------------------------------------------------------------------------
/tests/acceptance/load-shapes-test.js:
--------------------------------------------------------------------------------
1 | import { currentURL, visit, findAll } from '@ember/test-helpers';
2 | import { module, test } from 'qunit';
3 | import { setupApplicationTest } from 'ember-qunit';
4 | import percySnapshot from '@percy/ember';
5 |
6 | module('Acceptance | Load Shapes', function (hooks) {
7 | setupApplicationTest(hooks);
8 |
9 | function testLoad(assert, selector) {
10 | const done = assert.async(1);
11 | assert.equal(currentURL(), '/');
12 | const images = findAll(selector);
13 | assert.equal(images.length, 1);
14 | const img = images[0];
15 |
16 | const reloadedImage = new Image();
17 | reloadedImage.addEventListener('error', () => {
18 | const filename = img.src.replace(/^.*[\\/]/, '');
19 | assert.ok(false, `${filename} image didn't load`);
20 | reloadedImage.remove();
21 | done();
22 | });
23 | reloadedImage.addEventListener('load', () => {
24 | assert.ok(true);
25 | done();
26 | });
27 | reloadedImage.src = img.src;
28 | }
29 |
30 | test('percy visual test', async function (assert) {
31 | await visit('/');
32 | assert.dom('img').exists({ count: 9 });
33 | await percySnapshot('Shapes Loaded');
34 | });
35 |
36 | test('circle with green background', async function (assert) {
37 | assert.timeout(1000);
38 | await visit('/');
39 |
40 | testLoad(assert, '.circle-with-green-background img');
41 | });
42 |
43 | test('sized squares', async function (assert) {
44 | assert.timeout(1000);
45 | await visit('/');
46 |
47 | testLoad(assert, '.squares img:nth-of-type(1)');
48 | testLoad(assert, '.squares img:nth-of-type(2)');
49 | testLoad(assert, '.squares img:nth-of-type(3)');
50 | testLoad(assert, '.squares img:nth-of-type(4)');
51 | });
52 |
53 | test('transparent circle', async function (assert) {
54 | assert.timeout(1000);
55 | await visit('/');
56 |
57 | testLoad(assert, '.transparent-circle img');
58 | });
59 |
60 | test('different destination square', async function (assert) {
61 | assert.timeout(1000);
62 | await visit('/');
63 |
64 | testLoad(assert, '.square-in-a-different-destination img');
65 | });
66 | });
67 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 | const GenerateIcons = require('./lib/generate-icons');
5 | const Funnel = require('broccoli-funnel');
6 | const MergeTrees = require('broccoli-merge-trees');
7 | const assert = require('assert');
8 |
9 | module.exports = {
10 | name: require('./package').name,
11 | imageTransformerConfig: null,
12 | app: null,
13 | included(app) {
14 | this._super.included.apply(this, arguments);
15 |
16 | if (typeof app.import !== 'function' && app.app) {
17 | app = app.app;
18 | }
19 | this.app = app;
20 |
21 | var addonOptions =
22 | (this.parent && this.parent.options) ||
23 | (this.app && this.app.options) ||
24 | {};
25 | this.imageTransformerConfig = addonOptions[this.name] || {
26 | images: [],
27 | };
28 | },
29 | treeForPublic(publicTree) {
30 | let trees = this.imageTransformerConfig.images.map((obj) => {
31 | this.checkProperty('inputFilename', obj);
32 | this.checkProperty('outputFileName', obj);
33 | this.checkProperty('convertTo', obj);
34 | this.checkProperty('sizes', obj);
35 | const inputPath = path.join(this.app.project.root, obj.inputFilename);
36 |
37 | const pathData = path.parse(inputPath);
38 | const imageNode = new Funnel(pathData.dir, {
39 | include: [pathData.base],
40 | });
41 | let options = {
42 | quality: obj.quality,
43 | sizes: obj.sizes,
44 | inputFilename: pathData.base,
45 | outputFileName: obj.outputFileName,
46 | project: this.app.project,
47 | convertTo: obj.convertTo,
48 | };
49 | if ('background' in obj) {
50 | options.background = obj.background;
51 | }
52 | const icons = new GenerateIcons(imageNode, options);
53 |
54 | const destDir = 'destination' in obj ? obj.destination : 'assets/icons';
55 | return new Funnel(icons, { destDir });
56 | });
57 |
58 | if (publicTree) {
59 | trees.push(publicTree);
60 | }
61 |
62 | return new MergeTrees(trees);
63 | },
64 | checkProperty(property, obj) {
65 | assert.ok(
66 | property in obj,
67 | `\n${this.name} error: ${property} missing from image definition\n`,
68 | );
69 | },
70 | };
71 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | - master
8 | pull_request: {}
9 |
10 | concurrency:
11 | group: ci-${{ github.head_ref || github.ref }}
12 | cancel-in-progress: true
13 |
14 | jobs:
15 | test:
16 | name: "Tests"
17 | runs-on: ubuntu-latest
18 | timeout-minutes: 10
19 |
20 | steps:
21 | - uses: actions/checkout@v6
22 | - uses: pnpm/action-setup@v4
23 | - name: Install Node
24 | uses: actions/setup-node@v6
25 | with:
26 | node-version: 18
27 | cache: pnpm
28 | - name: Install Dependencies
29 | run: pnpm install --frozen-lockfile
30 | - name: Lint
31 | run: pnpm run lint
32 | - name: Run Tests
33 | run: pnpm run test:ember
34 | - name: percy
35 | run: pnpm run test:percy
36 | env:
37 | PERCY_TOKEN: ${{secrets.PERCY_TOKEN}}
38 |
39 | floating:
40 | name: "Floating Dependencies"
41 | runs-on: ubuntu-latest
42 | timeout-minutes: 10
43 |
44 | steps:
45 | - uses: actions/checkout@v6
46 | - uses: pnpm/action-setup@v4
47 | - uses: actions/setup-node@v6
48 | with:
49 | node-version: 18
50 | cache: pnpm
51 | - name: Install Dependencies
52 | run: pnpm install --no-lockfile
53 | - name: Run Tests
54 | run: pnpm run test:ember
55 |
56 | try-scenarios:
57 | name: ${{ matrix.try-scenario }}
58 | runs-on: ubuntu-latest
59 | needs: "test"
60 | timeout-minutes: 10
61 |
62 | strategy:
63 | fail-fast: false
64 | matrix:
65 | try-scenario:
66 | - ember-lts-4.12
67 | - ember-lts-5.4
68 | - ember-release
69 | - ember-beta
70 | - ember-canary
71 | - embroider-safe
72 | - embroider-optimized
73 |
74 | steps:
75 | - uses: actions/checkout@v6
76 | - uses: pnpm/action-setup@v4
77 | - name: Install Node
78 | uses: actions/setup-node@v6
79 | with:
80 | node-version: 18
81 | cache: pnpm
82 | - name: Install Dependencies
83 | run: pnpm install --frozen-lockfile
84 | - name: Run Tests
85 | run: ./node_modules/.bin/ember try:one ${{ matrix.try-scenario }}
86 |
--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
1 | # For most projects, this workflow file will not need changing; you simply need
2 | # to commit it to your repository.
3 | #
4 | # You may wish to alter this file to override the set of languages analyzed,
5 | # or to provide custom queries or build logic.
6 | #
7 | # ******** NOTE ********
8 | # We have attempted to detect the languages in your repository. Please check
9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL"
13 |
14 | on:
15 | push:
16 | branches: [ master ]
17 | pull_request:
18 | # The branches below must be a subset of the branches above
19 | branches: [ master ]
20 | schedule:
21 | - cron: '43 6 * * 5'
22 |
23 | jobs:
24 | analyze:
25 | name: Analyze
26 | runs-on: ubuntu-latest
27 | permissions:
28 | actions: read
29 | contents: read
30 | security-events: write
31 |
32 | strategy:
33 | fail-fast: false
34 | matrix:
35 | language: [ 'javascript' ]
36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
37 | # Learn more:
38 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
39 |
40 | steps:
41 | - name: Checkout repository
42 | uses: actions/checkout@v6
43 |
44 | # Initializes the CodeQL tools for scanning.
45 | - name: Initialize CodeQL
46 | uses: github/codeql-action/init@v4
47 | with:
48 | languages: ${{ matrix.language }}
49 | # If you wish to specify custom queries, you can do so here or in a config file.
50 | # By default, queries listed here will override any specified in a config file.
51 | # Prefix the list here with "+" to use these queries and those in the config file.
52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main
53 |
54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
55 | # If this step fails, then you should remove it and run the build manually (see below)
56 | - name: Autobuild
57 | uses: github/codeql-action/autobuild@v4
58 |
59 | # ℹ️ Command-line programs to run using the OS shell.
60 | # 📚 https://git.io/JvXDl
61 |
62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
63 | # and modify them (or add more) to build your code if your project
64 | # uses a compiled language
65 |
66 | #- run: |
67 | # make bootstrap
68 | # make release
69 |
70 | - name: Perform CodeQL Analysis
71 | uses: github/codeql-action/analyze@v4
72 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ember-cli-image-transformer
2 |
3 | [](https://travis-ci.org/jrjohnson/ember-cli-image-transformer)
4 | [](https://emberobserver.com/addons/ember-cli-image-transformer)
5 |
6 | ## Transform Images for your Ember Application from One Source Image
7 |
8 | I hate having to create a bunch of identical images for use as icons and favicon images for my application, so I created this addon to take a single source image and transform it into many images of differing sizes, types, and backgrounds.
9 |
10 | It is built using EmberJS and takes advantage of the awesome [Sharp](https://github.com/lovell/sharp) library to do the heavy lifting.
11 |
12 | ## Compatibility
13 |
14 | - Ember.js v4.12 or above
15 | - Ember CLI v4.12 or above
16 | - Node.js v18 or above
17 |
18 | ## Installation
19 |
20 | ```bash
21 | ember install ember-cli-image-transformer
22 | ```
23 |
24 | ## Usage
25 |
26 | Create an `ember-cli-image-transformer` section in your `ember-cli-build.js` file with
27 | an `images` array. Each element in the array represents a different set of images to
28 | be generated.
29 |
30 | ```js
31 | module.exports = function(defaults) {
32 | var app = new EmberApp(defaults, {
33 | 'ember-cli-image-transformer': {
34 | images: [
35 | {
36 | inputFilename: 'public/square.svg',
37 | outputFileName: 'icon-square',
38 | convertTo: 'png',
39 | sizes: [16, 32, 45, 900],
40 | },
41 | {
42 | inputFilename: 'public/circle.svg',
43 | outputFileName: 'transparent-circle',
44 | convertTo: 'png',
45 | background: {r: 255, g: 255, b: 255, alpha: 0},
46 | sizes: [100],
47 | }
48 | ]
49 | }
50 | });
51 | ```
52 |
53 | All generated images will be placed into the `public/assets` path of your application.
54 |
55 | ### Usage with custom quality
56 |
57 | The Sharp library uses default quality values depending on the output format. If the file type [supports it](https://sharp.pixelplumbing.com/api-output/#toformat), you may pass an optional `quality: [number]` in your image object array:
58 |
59 | ```js
60 | images: [
61 | {
62 | inputFilename: 'public/trapezoid.svg',
63 | outputFileName: 'icon-trapezoid',
64 | convertTo: 'png',
65 | sizes: [32, 48, 192],
66 | quality: 50,
67 | }
68 | ]
69 | ```
70 |
71 | ### Usage in a template
72 |
73 | ```handlebars
74 |
75 |
26 |
27 |
28 | 
76 | ```
77 |
78 | ### Image Options
79 |
80 | | Key | Required | Default Value | Example | Description |
81 | |-----|----------|---------------|---------|-------------|
82 | |`inputFileName`| :heavy_check_mark: | none | `public/circle.svg` | Where (relative to the application root) to find the input image |
83 | |`outputFileName`| :heavy_check_mark: | none | `transparent-circle` | This is combined with the `convertTo` and `size` to create the output file eg `transparent-circle92.png` |
84 | |`convertTo`| :heavy_check_mark: | none | `png` | The output file type |
85 | |`sizes`| :heavy_check_mark: | none | `[92, 150]` | An array of image sizes to produce |
86 | |`destination`| | `assets/icons` | `images/wherever/you/want` | The destination directory for the output images relative to `/public` |
87 | |`background`| | none | `{r: 255, g: 255, b: 255, alpha: 0}` | Add a background color to the image. |
88 | |`quality`| | varies by format | `25` | The quality (out of 100) of the image processing. |
89 |
90 | ## Contributing
91 |
92 | See the [Contributing](CONTRIBUTING.md) guide for details.
93 |
94 | ## License
95 |
96 | This project is licensed under the [MIT License](LICENSE.md).
97 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ember-cli-image-transformer",
3 | "version": "7.1.1",
4 | "description": "Transform Images for your Ember Application",
5 | "keywords": [
6 | "ember-addon",
7 | "image",
8 | "icon",
9 | "sharp"
10 | ],
11 | "repository": "https://github.com/jrjohnson/ember-cli-image-transformer",
12 | "license": "MIT",
13 | "author": "Jonathan Johnson (jon.johnson@ucsf.edu)",
14 | "directories": {
15 | "doc": "doc",
16 | "test": "tests"
17 | },
18 | "scripts": {
19 | "build": "ember build --environment=production",
20 | "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\"",
21 | "lint:css": "stylelint \"**/*.css\"",
22 | "lint:css:fix": "concurrently \"pnpm:lint:css -- --fix\"",
23 | "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\"",
24 | "lint:hbs": "ember-template-lint .",
25 | "lint:hbs:fix": "ember-template-lint . --fix",
26 | "lint:js": "eslint . --cache",
27 | "lint:js:fix": "eslint . --fix",
28 | "start": "ember serve",
29 | "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\"",
30 | "test:ember": "ember test",
31 | "test:ember-compatibility": "ember try:each",
32 | "test:percy": "percy exec -- ember test",
33 | "preinstall": "npx only-allow pnpm"
34 | },
35 | "dependencies": {
36 | "@babel/core": "^7.25.2",
37 | "broccoli-caching-writer": "^3.0.3",
38 | "broccoli-funnel": "^3.0.8",
39 | "broccoli-merge-trees": "^4.2.0",
40 | "ember-cli-babel": "^8.2.0",
41 | "ember-cli-htmlbars": "^6.3.0",
42 | "sharp": "^0.34.2"
43 | },
44 | "devDependencies": {
45 | "@babel/eslint-parser": "^7.25.1",
46 | "@babel/plugin-proposal-decorators": "^7.24.7",
47 | "@ember/optional-features": "^2.1.0",
48 | "@ember/test-helpers": "^3.3.1",
49 | "@embroider/test-setup": "^4.0.0",
50 | "@glimmer/component": "^1.1.2",
51 | "@glimmer/tracking": "^1.1.2",
52 | "@percy/cli": "^1.31.0",
53 | "@percy/ember": "^4.2.0",
54 | "broccoli-asset-rev": "^3.0.0",
55 | "concurrently": "^8.2.2",
56 | "ember-auto-import": "^2.8.1",
57 | "ember-cli": "~5.12.0",
58 | "ember-cli-clean-css": "^3.0.0",
59 | "ember-cli-dependency-checker": "^3.3.2",
60 | "ember-cli-inject-live-reload": "^2.1.0",
61 | "ember-cli-sri": "^2.1.1",
62 | "ember-cli-terser": "^4.0.2",
63 | "ember-load-initializers": "^2.1.2",
64 | "ember-page-title": "^8.2.3",
65 | "ember-qunit": "^8.1.0",
66 | "ember-resolver": "^12.0.1",
67 | "ember-source": "~5.12.0",
68 | "ember-source-channel-url": "^3.0.0",
69 | "ember-template-lint": "^6.0.0",
70 | "ember-try": "^3.0.0",
71 | "eslint": "^8.57.1",
72 | "eslint-config-prettier": "^9.1.0",
73 | "eslint-plugin-ember": "^12.2.1",
74 | "eslint-plugin-n": "^16.6.2",
75 | "eslint-plugin-prettier": "^5.2.1",
76 | "eslint-plugin-qunit": "^8.1.2",
77 | "loader.js": "^4.7.0",
78 | "prettier": "^3.3.3",
79 | "qunit": "^2.22.0",
80 | "qunit-dom": "^3.2.1",
81 | "stylelint": "^15.11.0",
82 | "stylelint-config-standard": "^34.0.0",
83 | "stylelint-prettier": "^4.1.0",
84 | "webpack": "^5.95.0"
85 | },
86 | "peerDependencies": {
87 | "ember-source": ">= 4.0.0"
88 | },
89 | "engines": {
90 | "node": ">= 18",
91 | "yarn": "use pnpm",
92 | "npm": "use pnpm"
93 | },
94 | "ember": {
95 | "edition": "octane"
96 | },
97 | "ember-addon": {
98 | "configPath": "tests/dummy/config"
99 | },
100 | "packageManager": "pnpm@10.26.1",
101 | "pnpm": {
102 | "ignoredBuiltDependencies": [
103 | "@percy/core",
104 | "core-js"
105 | ],
106 | "onlyBuiltDependencies": [
107 | "sharp"
108 | ]
109 | },
110 | "files": [
111 | "index.js",
112 | "ember-cli-build.js",
113 | "addon/",
114 | "app/",
115 | "blueprints/",
116 | "config/",
117 | "lib/",
118 | "vendor/"
119 | ]
120 | }
121 |
--------------------------------------------------------------------------------