jekyll-responsive-image/compositor.json

{
  "name": "wildlyinaccurate/jekyll-responsive-image",
  "version": "0.1.4",
  "libraries": {
    "xv": "^1.1.21"
  },
  "title": "",
  "branch": "master",
  "style": {
    "name": "Default",
    "componentSet": {
      "nav": "nav/BasicNav",
      "header": "header/BannerHeader",
      "article": "article/BasicArticle",
      "footer": "footer/BasicFooter"
    },
    "fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif",
    "fontWeight": 400,
    "bold": 600,
    "lineHeight": 1.5,
    "typeScale": [
      72,
      48,
      24,
      20,
      16,
      14,
      12
    ],
    "monospace": "Menlo, monospace",
    "heading": {
      "fontFamily": null,
      "fontStyle": null,
      "fontWeight": 600,
      "lineHeight": 1.25,
      "textTransform": null,
      "letterSpacing": null,
      "h0": {},
      "h1": {},
      "h2": {},
      "h3": {},
      "h4": {},
      "h5": {},
      "h6": {}
    },
    "alternativeText": {},
    "space": [
      0,
      8,
      16,
      32,
      48,
      64,
      96
    ],
    "layout": {
      "maxWidth": 1024,
      "centered": false
    },
    "colors": {
      "text": "#111",
      "background": "#fff",
      "primary": "#08e",
      "secondary": "#059",
      "highlight": "#e08",
      "border": "#ddd",
      "muted": "#eee"
    },
    "border": {
      "width": 1,
      "radius": 2
    },
    "link": {},
    "button": {
      "hover": {
        "boxShadow": "inset 0 0 0 999px rgba(0, 0, 0, .125)"
      }
    },
    "input": {},
    "body": {
      "margin": 0
    },
    "breakpoints": {
      "xs": "@media screen and (max-width:40em)",
      "sm": "@media screen and (min-width:40em)",
      "md": "@media screen and (min-width:52em)",
      "lg": "@media screen and (min-width:64em)"
    }
  },
  "content": [
    {
      "component": "nav",
      "links": [
        {
          "href": "https://github.com/wildlyinaccurate/jekyll-responsive-image",
          "text": "GitHub"
        }
      ]
    },
    {
      "component": "header",
      "heading": "jekyll-responsive-image",
      "subhead": "An unopinionated Jekyll plugin for generating and using responsive images",
      "children": [
        {
          "component": "ui/TweetButton",
          "text": "jekyll-responsive-image: An unopinionated Jekyll plugin for generating and using responsive images",
          "url": ""
        },
        {
          "component": "ui/GithubButton",
          "user": "wildlyinaccurate",
          "repo": "jekyll-responsive-image"
        }
      ]
    },
    {
      "component": "article",
      "metadata": {
        "source": "github.readme"
      },
      "html": "<h1>Jekyll Responsive Images</h1>\n<p>Jekyll Responsive Images is a <a href=\"http://jekyllrb.com/\">Jekyll</a> plugin and utility for automatically resizing images. Its intended use is for sites which want to display responsive images using something like <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Specifications\"><code>srcset</code></a> or <a href=\"https://github.com/BBC-News/Imager.js/\">Imager.js</a>.</p>\n<p><a href=\"https://travis-ci.org/wildlyinaccurate/jekyll-responsive-image\"></a>\n<a href=\"https://coveralls.io/repos/github/wildlyinaccurate/jekyll-responsive-image/badge.svg?branch=master\"></a>\n<a href=\"https://gemnasium.com/wildlyinaccurate/jekyll-responsive-images\"></a></p>\n<h2>Installation</h2>\n<p>First, install the gem:</p>\n<pre>$ gem <span class=\"hljs-keyword\">install</span> jekyll-responsive_image</pre><p>Then you can either add it to the <code>gems</code> section of your <code>_config.yml</code>:</p>\n<pre><span class=\"hljs-attr\">gems:</span> [jekyll-responsive-image]</pre><p>Or you can copy the contents of <a href=\"lib/jekyll-responsive-image.rb\"><code>responsive_image.rb</code></a> into your <code>_plugins</code> directory.</p>\n<h2>Configuration</h2>\n<p>An example configuration is below.</p>\n<pre><span class=\"hljs-attr\">responsive_image:</span>\n  <span class=\"hljs-comment\"># [Required]</span>\n  <span class=\"hljs-comment\"># Path to the image template.</span>\n<span class=\"hljs-attr\">  template:</span> _includes/responsive-image.html\n\n  <span class=\"hljs-comment\"># [Optional, Default: 85]</span>\n  <span class=\"hljs-comment\"># Quality to use when resizing images.</span>\n<span class=\"hljs-attr\">  default_quality:</span> <span class=\"hljs-number\">90</span>\n\n  <span class=\"hljs-comment\"># [Optional, Default: []]</span>\n  <span class=\"hljs-comment\"># An array of resize configuration objects. Each object must contain at least</span>\n  <span class=\"hljs-comment\"># a `width` value.</span>\n<span class=\"hljs-attr\">  sizes:</span>\n<span class=\"hljs-attr\">    - width:</span> <span class=\"hljs-number\">480</span>  <span class=\"hljs-comment\"># [Required] How wide the resized image will be.</span>\n<span class=\"hljs-attr\">      quality:</span> <span class=\"hljs-number\">80</span> <span class=\"hljs-comment\"># [Optional] Overrides default_quality for this size.</span>\n<span class=\"hljs-attr\">    - width:</span> <span class=\"hljs-number\">800</span>\n<span class=\"hljs-attr\">    - width:</span> <span class=\"hljs-number\">1400</span>\n<span class=\"hljs-attr\">      quality:</span> <span class=\"hljs-number\">90</span>\n\n  <span class=\"hljs-comment\"># [Optional, Default: assets]</span>\n  <span class=\"hljs-comment\"># The base directory where assets are stored. This is used to determine the</span>\n  <span class=\"hljs-comment\"># `dirname` value in `output_path_format` below.</span>\n<span class=\"hljs-attr\">  base_path:</span> assets\n\n  <span class=\"hljs-comment\"># [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]</span>\n  <span class=\"hljs-comment\"># The template used when generating filenames for resized images. Must be a</span>\n  <span class=\"hljs-comment\"># relative path.</span>\n  <span class=\"hljs-comment\">#</span>\n  <span class=\"hljs-comment\"># Parameters available are:</span>\n  <span class=\"hljs-comment\">#   %{dirname}     Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg =&gt; sub/dir)</span>\n  <span class=\"hljs-comment\">#   %{basename}    Basename of the file (assets/some-file.jpg =&gt; some-file.jpg)</span>\n  <span class=\"hljs-comment\">#   %{filename}    Basename without the extension (assets/some-file.jpg =&gt; some-file)</span>\n  <span class=\"hljs-comment\">#   %{extension}   Extension of the file (assets/some-file.jpg =&gt; jpg)</span>\n  <span class=\"hljs-comment\">#   %{width}       Width of the resized image</span>\n  <span class=\"hljs-comment\">#   %{height}      Height of the resized image</span>\n  <s
    },
    {
      "component": "footer",
      "links": [
        {
          "href": "https://github.com/wildlyinaccurate/jekyll-responsive-image",
          "text": "GitHub"
        },
        {
          "href": "https://github.com/wildlyinaccurate",
          "text": "wildlyinaccurate"
        }
      ]
    }
  ]
}