138 lines
18 KiB
JSON
138 lines
18 KiB
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 => sub/dir)</span>\n <span class=\"hljs-comment\"># %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)</span>\n <span class=\"hljs-comment\"># %{filename} Basename without the extension (assets/some-file.jpg => some-file)</span>\n <span class=\"hljs-comment\"># %{extension} Extension of the file (assets/some-file.jpg => 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"
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
]
|
||
|
}
|