{"id":21884623,"url":"https://github.com/onehilltech/ember-cli-vibrant","last_synced_at":"2025-08-11T06:14:30.629Z","repository":{"id":57156497,"uuid":"153728083","full_name":"onehilltech/ember-cli-vibrant","owner":"onehilltech","description":"ember-cli addon for node-vibrant","archived":false,"fork":false,"pushed_at":"2018-11-24T21:23:03.000Z","size":210,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-26T19:44:10.025Z","etag":null,"topics":["ember-addon","ember-cli","emberjs","node-vibrant","vibrant"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onehilltech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-19T04:49:37.000Z","updated_at":"2018-11-24T21:23:04.000Z","dependencies_parsed_at":"2022-09-10T18:41:06.158Z","dependency_job_id":null,"html_url":"https://github.com/onehilltech/ember-cli-vibrant","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onehilltech%2Fember-cli-vibrant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onehilltech%2Fember-cli-vibrant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onehilltech%2Fember-cli-vibrant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onehilltech%2Fember-cli-vibrant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onehilltech","download_url":"https://codeload.github.com/onehilltech/ember-cli-vibrant/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244892892,"owners_count":20527513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember-addon","ember-cli","emberjs","node-vibrant","vibrant"],"created_at":"2024-11-28T10:14:57.803Z","updated_at":"2025-03-22T01:29:51.892Z","avatar_url":"https://github.com/onehilltech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ember-cli-vibrant\n==============================================================================\n\n\nIntegrates [node-vibrant](https://github.com/akfish/node-vibrant/) into Ember applications.\n\n\nFeatures\n------------------------------------------------------------------------------\n\n\n* Inject vibrant support into any controller, component, or route.\n* Performs color extractions in the background to minimize performance impact.\n* Cache color extractions for fast look up.\n\n\nInstallation\n------------------------------------------------------------------------------\n\n\n    ember install ember-cli-vibrant\n\n\nUsage\n------------------------------------------------------------------------------\n\nFirst, inject the `vibrant` service into a route, component, or controller.\n\n```javascript\nimport Component from '@ember/component';\nimport { inject as service } from '@ember/service';\n\nexport default Component.extend ({\n  vibrant: service (),\n});\n```\n\nThen, use `fromUrl` to extract the colors for an image.\n\n```javascript\nimport Component from '@ember/component';\nimport { inject as service } from '@ember/service';\n\nexport default Component.extend ({\n  vibrant: service (),\n  \n  didInsertElement () {\n    this._super (...arguments);\n    const { vibrant, url } = this.getProperties (['vibrant', 'url']);\n    \n    vibrant.fromUrl (url).then (palette =\u003e {\n      \n    });\n  }\n});\n```\n\nThe `palette` parameter will contain the following swatches, if found:\n\n* Vibrant\n* Muted\n* DarkVibrant\n* DarkMuted\n* LightVibrant\n* LightMuted\n\nSee the [Swatch class](https://github.com/akfish/node-vibrant/#vibrantswatch) for a complete\nlist of methods available to you.\n\n### Caching Color Swatches\n\nYou can pass in an optional key parameter to cache the swatches for future references. This \nis useful when you need to access the same swatches from different locations in the application.\n\n```javascript\nimport Component from '@ember/component';\nimport { inject as service } from '@ember/service';\n\nexport default Component.extend ({\n  vibrant: service (),\n  \n  didInsertElement () {\n    this._super (...arguments);\n    const { vibrant, url, id } = this.getProperties (['vibrant', 'url']);\n    \n    vibrant.fromUrl (url, id).then (palette =\u003e {\n      \n    });\n  }\n});\n```\n\nAs shown in the example above, the second parameter to `fromUrl` the key you want to \ncache the color swatches. If the key exists, then the service will returned the cached\nresults. If the key does not exist, then the service will compute the color swatches\nand store them under the provided key.\n\n\u003e If you do not provide a key, then the service will cache the swatches using the \n\u003e provided url. In many cases, just using the url to cache the swatches is acceptable.\n\u003e In other cases where the image is the same and the url changes, then caching based\n\u003e on the url will result in recomputing the swatches each time the url changes.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonehilltech%2Fember-cli-vibrant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonehilltech%2Fember-cli-vibrant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonehilltech%2Fember-cli-vibrant/lists"}