{"id":14964298,"url":"https://github.com/bkwld/cloak-visual","last_synced_at":"2026-02-15T09:14:50.935Z","repository":{"id":37834075,"uuid":"485825543","full_name":"BKWLD/cloak-visual","owner":"BKWLD","description":"Adpaters for vue-visual using @nuxt/image.","archived":false,"fork":false,"pushed_at":"2024-11-27T02:08:41.000Z","size":6489,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-31T05:51:17.030Z","etag":null,"topics":["nuxt"],"latest_commit_sha":null,"homepage":"https://cloak-visual.netlify.app","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BKWLD.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-26T14:39:02.000Z","updated_at":"2024-11-27T02:08:45.000Z","dependencies_parsed_at":"2023-11-07T16:39:56.313Z","dependency_job_id":"7912cd32-2228-4b73-8f65-a2c0ab04bfbf","html_url":"https://github.com/BKWLD/cloak-visual","commit_stats":{"total_commits":115,"total_committers":2,"mean_commits":57.5,"dds":0.05217391304347829,"last_synced_commit":"1bae165519a4b4471b55930f026c7a0db1fd9c06"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fcloak-visual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fcloak-visual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fcloak-visual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fcloak-visual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BKWLD","download_url":"https://codeload.github.com/BKWLD/cloak-visual/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238085265,"owners_count":19413994,"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":["nuxt"],"created_at":"2024-09-24T13:32:57.015Z","updated_at":"2025-10-25T04:31:19.133Z","avatar_url":"https://github.com/BKWLD.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @cloak-app/visual\n\nAdpaters for vue-visual using [@nuxt/image](https://image.nuxtjs.org).\n\n- [View demo](https://cloak-visual.netlify.app)\n- [Edit CodeSandbox](https://githubbox.com/BKWLD/cloak-visual)\n\n## Install\n\n1. Install with `yarn add @cloak-app/visual`\n2. Add to `nuxt.config` with `buildModules: ['@cloak-app/visual']`\n\nAlso, you'll likely want to add a provider to [@nuxt/image](https://image.nuxtjs.org/api/options) as well.  Here is an example configuration using `imgix` with a source images uploaded to a different domain (like if we were using DigitalOcean Spaces for image storage).\n\n```js\n// nuxt.config.js\nexport default {\n  image: {\n    provider: 'imgix',\n    domains: ['your-source.domain.com'],\n    imgix: {\n      baseURL: 'https://your-subdomain.imgix.net',\n    }\n  }\n}\n```\n\nAt the moment, there is **no support for Craft image transforms**. I'm not entirely sure I even want to support them because it puts a heavy load on the CMS server. Thus, when working with Craft, use 3rd party image CDN, like Imgix, or [the `static` provider](https://image.nuxtjs.org/getting-started/static).\n\n### Project Dependencies\n\n- `.max-w*` styles (included in Cloak via `whitespace.styl`)\n\n### Module Options\n\nSet these properties within `cloak: { visual: { ... } }` in the nuxt.config.js:\n\n- `placeholderColor` - Sets the [`vue-visual` `placeholder-color`](https://github.com/BKWLD/vue-visual#loading). Defaults to `rgba(0,0,0,.2)`.\n- `srcsetSizes` - An array of viewport widths that will be used to make `srcset` values from.  Defaults to `[1920, 1440, 1024, 768, 425, 210]`.\n- `blockMaxWidth` - A string that should match a global CSS class that adds horizontal `padding` and a `max-width` to the block component.  Defaults to `max-w`.\n\n## Usage\n\n### Components\n\n#### Generic\n\n`\u003ccloak-visual /\u003e`\n\nRenders a `vue-visual` instance using Cloak defaults.\n\n- props:\n  - `provider` - Use a specific @nuxt/image provider rather than [the default](https://image.nuxtjs.org/api/options#provider)\n  - `preset` - Use a specific [@nuxt/image preset](https://image.nuxtjs.org/api/options#presets)\n  - `natural` - Set width and height to natural size\n  - `no-upscale` - Use image's width as a max-width\n  - `no-placeholder` - Clear placeholder color, like for logos.  The placeholder is automatically isabled\n  - ... all other [`vue-visual` props](https://github.com/BKWLD/vue-visual)\n\n`\u003ccloak-visual-responsive /\u003e`\n\nConditionally render landscape or portrait Visual instances.\n\n- props:\n  - `landscape-image` - Image shown on landscape orientation viewports\n  - `portrait-image` - Image shown on landscape orientation viewports\n  - ... all other `cloak-visual` props\n\n`\u003ccloak-visual-block /\u003e`\n\nThe block component simply renders a 100% width Visual within the max-width gutters using the default @nuxt/image provider.\n\n- props:\n  - `maxWidth` - A `max-w-*` class to apply to the block\n  - ... all other `cloak-visual-responsive` props\n\n#### Craft\n\n`\u003ccloak-visual-craft-block /\u003e`\n\nRenders a `cloak-visual-responsive` at 100vw but with max-width gutters. It's expecting data from a GQL fragment like this:\n\n```gql\n#import \"@cloak-app/craft/queries/fragments/responsive-image.gql\"\n#import \"@cloak-app/craft/queries/fragments/responsive-video.gql\"\n\nfragment mediaAssetBlock on blocks_mediaAsset_BlockType {\n  image: responsiveImage { ... responsiveImage }\n  video: responsiveVideo { ... responsiveVideo }\n  maxWidth\n}\n```\n\n`\u003cresponsive-craft-visual /\u003e`\n\nRenders a `cloak-visual-responsive` instance using Craft Super Table objects that contain landscape and portrait assets.\n\n- props:\n  - `image` - Expecting an object from [`queries/fragments/responsive-image.gql`](./queries/fragments/responsive-image.gql)\n  - `video` - Expecting an object from [`queries/fragments/responsive-video.gql`](./queries/fragments/responsive-video.gql)\n  - ... all other `cloak-visual-responsive` props\n\n`\u003ccraft-visual /\u003e`\n\nRenders a `cloak-visual` instance using Craft asset objects.\n\n- props:\n  - `image` - Expecting an object from [`queries/fragments/image.gql`](./queries/fragments/image.gql)\n  - `video` - Expecting an object from [`queries/fragments/video.gql`](./queries/fragments/video.gql)\n  - ... all other `cloak-visual` props\n\n\n## Contributing\n\nRun `yarn dev` to open a Nuxt dev build of [the demo directory](./demo).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Fcloak-visual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbkwld%2Fcloak-visual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Fcloak-visual/lists"}