jekyll_picture_tag 1.7.0 → 1.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 02cc9448af17bd0cb2811b4f60beb90bea2b95803b694dae29b5606ea39d9a2a
-  data.tar.gz: 58025b92dfeed1607d235cc1ce72195a6f48d722bdf092f8366ab46f7aca74dc
+  metadata.gz: 62e94c65637b912d5e44da1f3d0a9dac3c2ec8a9f8e538ebac99e2560a348356
+  data.tar.gz: c845a01518248c1f77fbcdb115546627803e7be27516149e717e09edd07dc75e
 SHA512:
-  metadata.gz: 57ae73af226946c529009c7b6af37acaf79596c44e25526ab080b4076c9f1308a09ae694ec4b17eab0c36fa2d92b9f1ab7885188590c63152984cc06cb9bcb60
-  data.tar.gz: be56299cc614da19121ed1e41a1f815b448092804f1813f4e5bb93997628dba0056e02c84ce566dda77ce0fc0feb2aa5a39f467bce70119fbf9f2215f9a6a026
+  metadata.gz: f322901c3b54fe9a4564ca480be283bdde4a68e1da505fbe309671546f551686a01f9c03dfa5159a14754f53791e342700f35e33cb7a0b71577ea2e86e282a75
+  data.tar.gz: 251b9ed64c11dd6e4a460151703234c80d1d0f4bbd6c05f8fda412a7404bf7c8193e65761b5aac6633628e9bec49c587b8fd53dee1961b7a82c0f04d68435fb8

data/.gitignore

@@ -10,3 +10,6 @@
 .idea
 jekyll-picture-tag.iml
 *.gem
+/docs/_site/
+/docs/.jekyll-cache/
+/docs/.sass-cache/

data/.solargraph.yml

@@ -0,0 +1,15 @@
+---
+include:
+- "**/*.rb"
+- "**/*.gemspec"
+exclude:
+- spec/**/*
+- test/**/*
+- vendor/**/*
+- ".bundle/**/*"
+require: []
+domains: []
+reporters:
+- rubocop
+require_paths: []
+max_files: 5000

data/docs/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+gem 'github-pages', group: :jekyll_plugins
+gem 'jekyll-theme-slate'

data/docs/Gemfile.lock

@@ -0,0 +1,154 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (4.2.7)
+      i18n (~> 0.7)
+      json (~> 1.7, >= 1.7.7)
+      minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
+      tzinfo (~> 1.1)
+    addressable (2.4.0)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.12.2)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.5)
+    ethon (0.12.0)
+      ffi (>= 1.3.0)
+    execjs (2.7.0)
+    faraday (0.15.4)
+      multipart-post (>= 1.2, < 3)
+    ffi (1.11.1)
+    forwardable-extended (2.6.0)
+    gemoji (2.1.0)
+    github-pages (104)
+      activesupport (= 4.2.7)
+      github-pages-health-check (= 1.2.0)
+      jekyll (= 3.3.0)
+      jekyll-avatar (= 0.4.2)
+      jekyll-coffeescript (= 1.0.1)
+      jekyll-feed (= 0.8.0)
+      jekyll-gist (= 1.4.0)
+      jekyll-github-metadata (= 2.2.0)
+      jekyll-mentions (= 1.2.0)
+      jekyll-paginate (= 1.1.0)
+      jekyll-redirect-from (= 0.11.0)
+      jekyll-sass-converter (= 1.3.0)
+      jekyll-seo-tag (= 2.1.0)
+      jekyll-sitemap (= 0.12.0)
+      jekyll-swiss (= 0.4.0)
+      jemoji (= 0.7.0)
+      kramdown (= 1.11.1)
+      liquid (= 3.0.6)
+      listen (= 3.0.6)
+      mercenary (~> 0.3)
+      minima (= 2.0.0)
+      rouge (= 1.11.1)
+      terminal-table (~> 1.4)
+    github-pages-health-check (1.2.0)
+      addressable (~> 2.3)
+      net-dns (~> 0.8)
+      octokit (~> 4.0)
+      public_suffix (~> 1.4)
+      typhoeus (~> 0.7)
+    html-pipeline (2.12.0)
+      activesupport (>= 2)
+      nokogiri (>= 1.4)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.3.0)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 1.1)
+      kramdown (~> 1.3)
+      liquid (~> 3.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (~> 1.7)
+      safe_yaml (~> 1.0)
+    jekyll-avatar (0.4.2)
+      jekyll (~> 3.0)
+    jekyll-coffeescript (1.0.1)
+      coffee-script (~> 2.2)
+    jekyll-feed (0.8.0)
+      jekyll (~> 3.3)
+    jekyll-gist (1.4.0)
+      octokit (~> 4.2)
+    jekyll-github-metadata (2.2.0)
+      jekyll (~> 3.1)
+      octokit (~> 4.0, != 4.4.0)
+    jekyll-mentions (1.2.0)
+      activesupport (~> 4.0)
+      html-pipeline (~> 2.3)
+      jekyll (~> 3.0)
+    jekyll-paginate (1.1.0)
+    jekyll-redirect-from (0.11.0)
+      jekyll (>= 2.0)
+    jekyll-sass-converter (1.3.0)
+      sass (~> 3.2)
+    jekyll-seo-tag (2.1.0)
+      jekyll (~> 3.3)
+    jekyll-sitemap (0.12.0)
+      jekyll (~> 3.3)
+    jekyll-swiss (0.4.0)
+    jekyll-theme-slate (0.0.4)
+      jekyll (~> 3.3)
+    jekyll-watch (1.5.1)
+      listen (~> 3.0)
+    jemoji (0.7.0)
+      activesupport (~> 4.0)
+      gemoji (~> 2.0)
+      html-pipeline (~> 2.2)
+      jekyll (>= 3.0)
+    json (1.8.6)
+    kramdown (1.11.1)
+    liquid (3.0.6)
+    listen (3.0.6)
+      rb-fsevent (>= 0.9.3)
+      rb-inotify (>= 0.9.7)
+    mercenary (0.3.6)
+    mini_portile2 (2.4.0)
+    minima (2.0.0)
+    minitest (5.11.3)
+    multipart-post (2.1.1)
+    net-dns (0.9.0)
+    nokogiri (1.10.4)
+      mini_portile2 (~> 2.4.0)
+    octokit (4.14.0)
+      sawyer (~> 0.8.0, >= 0.5.3)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (1.5.3)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.0)
+      ffi (~> 1.0)
+    rouge (1.11.1)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sawyer (0.8.2)
+      addressable (>= 2.3.5)
+      faraday (> 0.8, < 2.0)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    thread_safe (0.3.6)
+    typhoeus (0.8.0)
+      ethon (>= 0.8.0)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
+    unicode-display_width (1.6.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  github-pages
+  jekyll-theme-slate
+
+BUNDLED WITH
+   2.0.2

data/docs/_config.yml

@@ -0,0 +1,13 @@
+theme: jekyll-theme-slate
+title: Jekyll Picture Tag
+
+url: ''
+baseurl: '/jekyll_picture_tag'
+
+defaults:
+  - 
+    scope: 
+      path: ''
+    values:
+      layout: directory
+  

data/docs/_layouts/directory.html

@@ -0,0 +1,32 @@
+---
+layout: default
+---
+
+<link href="{{ site.baseurl }}/assets/style.css" rel="stylesheet" type="text/css">
+
+<ul class="directory">
+  <li><a href="{{ site.baseurl }}/">Quick Start</a></li>
+  <li><a href="{{ site.baseurl }}/installation">Installation</a></li>
+  <li><a href="{{ site.baseurl }}/usage">Usage</a></li>
+  <li><a href="{{ site.baseurl }}/global_configuration">Global Settings</a></li>
+  <li><a href="{{ site.baseurl }}/presets">Writing Presets</a></li>
+  <li><a href="{{ site.baseurl }}/example_presets">Example Presets</a></li>
+  <li><a href="{{ site.baseurl }}/output">Output Formats</a></li>
+  <li><a href="{{ site.baseurl }}/notes">Notes and FAQ</a></li>
+  <li><a href="{{ site.baseurl }}/contributing">Contributing</a></li>
+  <li><a href="{{ site.baseurl }}/releases">Release History</a></li>
+</ul>
+
+<hr />
+
+{{ content }}
+
+<script>
+  const navItems = Array.from(document.querySelectorAll('ul.directory li'))
+  const currentPath = window.location.toString()
+  const activeItem = navItems.find(function(item) {
+    return item.firstChild.href == currentPath
+  })
+
+  activeItem.classList.add('active')
+</script>

data/docs/assets/style.css

@@ -0,0 +1,31 @@
+  @media (max-width: 600px) {
+    ul.directory {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  ul.directory {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    list-style: none;
+    padding-left: 0;
+    flex-grow: 0;
+  }  
+
+  ul.directory li {
+    margin: .3em;
+  }
+
+  ul.directory a {
+    line-height: 2;
+    padding: 8px 20px;
+  }
+
+  li.active a {
+    border-radius: 3px;
+    background-color: #007edf;
+    color: #fff;
+    box-shadow: 2px 2px 3px #999;
+  }

data/{contributing.md → docs/contributing.md}

@@ -1,3 +1,5 @@
+---
+---
 # Contributing
 
 Bug reports, feature requests, and feedback are very welcome, either through github issues or via
@@ -31,25 +33,31 @@ issues, if possible.
 
 `rake` will run all tests and rubocop.
 
+## Docs
+
+The docs are set up for github pages, which is based on jekyll. You can preview them locally as you
+edit:
+
+1. `cd docs`
+2. `bundle install`
+3. `bundle exec jekyll serve`
+
 ## Guidelines
 
-* Generally, go for straightforward and readable rather than terse and clever.
-  I'm not actually a very good programmer; I need simple code that's easy to understand.
+* Generally, go for straightforward and readable rather than terse and clever.  I'm not actually a
+  very good programmer; I need simple code that's easy to understand.
 
 * Internal refactoring is welcome, especially in the name of the previous point.
 
-* I'm very reluctant to introduce breaking changes to configuration settings.
-  This rule isn't hard and fast, but I'm not going to do it without a good reason.
+* I'm very reluctant to introduce breaking changes to configuration settings. This rule isn't
+  absolute, but I'm not going to do it without a good reason.
 
-* The addition of new test cases whenever relevant is certainly appreciated.
-  This project went for awhile without any proper tests, but now that we're at 100% coverage it
-  would be nice to keep it that way. 
+* The addition of new test cases whenever relevant is certainly appreciated. This project went for
+  awhile without any proper tests, but now that we're at 100% coverage it would be nice to keep it
+  that way. 
 
 * I've been using 80 characters for code and 100 characters for documentation.
 
-* The code coverage is currently at 100%. I'm not going to make maintaining this a hard and fast
-  rule, but I'd really like to see it stay this way.
-
 ## Hard rules
 
 * Liquid tag syntax can only be extended; no breaking changes. I'm not willing to force

data/docs/{examples/_data/picture.yml → example_presets.md}

@@ -1,7 +1,12 @@
-# These are example settings. I mostly made them up off the top of my head. You
-# probably don't want to just copy-paste these settings. It's worth your time to
-# learn responsive images, so you'll understand what these settings mean.
-# The full documentation for these settings can be found in docs/presets.md
+---
+---
+# /_data/picture.yml
+
+These are example settings- I mostly made them up off the top of my head. You
+probably don't want to just copy-paste them. The full documentation
+for these can be found [here]({{ site.baseurl }}/presets).
+
+```yml
 
 # Media presets are just named css media queries, used in several places:
 # - To specify alternate source images (for art direction)
@@ -14,44 +19,47 @@ media_presets:
   tablet: 'max-width: 900px'
   mobile: 'max-width: 600px'
 
-# Markup presets allow you to group settings together, and select one of them by name in your jekyll
-# tag. All settings are optional.
+# Markup presets allow you to group settings together, and select one of them by
+# name in your jekyll tag. All settings are optional.
 markup_presets:
-  # If you don't specify a preset in the liquid tag (just say 
-  # {% picture image.jpg %}), you'll get the 'default' preset:
+
   default:
-    # What form the output markup should take.
+    # What form the output markup should take:
     markup: auto
 
     # Must be an array, and order matters. Defaults to just 'original', which
     # does what you'd expect.
     formats: [webp, original]
 
-    # Must be an array: which image sizes (width in pixels) to generate (unless directed otherwise
-    # below). If not specified, will use sensible default values.
+    # Must be an array: which image sizes (width in pixels) to generate (unless
+    # directed otherwise below). If not specified, will use sensible default
+    # values.
     widths: [200, 400, 800, 1600]
 
-    # Alternate source images (for art direction) are associated with media query presets. Here, you
-    # can optionally specify a different set of sizes to generate for those alternate source images.
-    # This is how you avoid generating a 1600 pixel wide image that's only shown on narrow screens.
+    # Alternate source images (for art direction) are associated with media
+    # query presets. Here, you can optionally specify a different set of sizes
+    # to generate for those alternate source images.  This is how you avoid
+    # generating a 1600 pixel wide image that's only shown on narrow screens.
     # Must be arrays.
     media_widths: 
       mobile: [200, 400, 600] 
       tablet: [400, 600, 800]
 
-    # For building the 'sizes' attribute on img and source tags. specifies how wide the image will
-    # be when a given media query is true. Note that every source in a given <picture> tag will have
-    # the same associated sizes attribute.
+    # For building the 'sizes' attribute on img and source tags. specifies how
+    # wide the image will be when a given media query is true. Note that every
+    # source in a given <picture> tag will have the same associated sizes
+    # attribute.
     sizes: 
       mobile: 100vw
       tablet: 80vw
 
-    # Specifies an optional, unconditional size attribute. Can be given alone, or if specified in
-    # combination with 'sizes' below, will be given last (when no media queries apply).
+    # Specifies an optional, unconditional size attribute. Can be given alone,
+    # or if specified in combination with 'sizes' below, will be given last
+    # (when no media queries apply).
     size: 800px
 
-    # Specify the properties of the fallback image. If not specified, will return a 900 pixel
-    # wide image in the original format.
+    # Specify the properties of the fallback image. If not specified, will
+    # return a 900 pixel wide image in the original format.
     fallback_width: 800
     fallback_format: original
 
@@ -80,8 +88,8 @@ markup_presets:
     attributes:
       img: 'class="icon"'
 
-  # Here's an example of how you'd configure jekyll-picture-tag to work with something like
-  # lazyload:
+  # Here's an example of how you'd configure jekyll-picture-tag to work with
+  # something like lazyload:
   # https://github.com/verlok/lazyload
   lazy:
     # data_auto gives you data-src, data-srcset, and data-sizes instead of src,
@@ -93,7 +101,8 @@ markup_presets:
     attributes: 
       img: class="lazy"
 
-  # This is an example of how you'd get generated image and a URL, and nothing else.
+  # This is an example of how you'd get generated image and a URL, and nothing
+  # else.
   direct:
     markup: direct_url
     fallback_format: webp # Default original
@@ -103,3 +112,5 @@ markup_presets:
   srcset:
     markup: naked_srcset
     formats: [webp] # must be an array, even if it only has one item
+
+```

data/docs/global_configuration.md

@@ -1,3 +1,5 @@
+---
+---
 # Global Configuration
 
 **All configuration is optional**. If you are happy with the defaults, you don't have to touch a
@@ -24,8 +26,10 @@ picture:
   To make writing tags easier you can specify a source directory for your assets. Base images in the
   tag will be relative to the `source` directory, which is relative to the Jekyll site root.
 
+  {% raw %}
   For example, if `source` is set to `assets/images/_fullsize`, the tag
   `{% picture enishte/portrait.jpg --alt An unsual picture %}` will look for a file at
+  {% endraw %}
   `assets/images/_fullsize/enishte/portrait.jpg`.
 
 * **Destination Image Directory**
@@ -112,4 +116,5 @@ picture:
   Whether or not to surround j-p-t's output with a `{::nomarkdown}..{:/nomarkdown}` block when called
   from within a markdown file. 
 
-  This setting is overridden by the same setting in a preset. See [this wiki page](https://github.com/rbuchberger/jekyll_picture_tag/wiki/Extra-%7B::nomarkdown%7D-tags-or-mangled-html%3F) for more detailed information. 
+  This setting is overridden by the same setting in a preset. See [the notes]({{ site.baseurl
+  }}/notes) for more detailed information. 

data/docs/index.md

@@ -0,0 +1,108 @@
+---
+id: quickstart
+---
+
+# Quick start / Demo
+
+**All configuration is optional.** Here's the simplest possible use case:
+
+1. [Install]({{ site.baseurl }}/installation)
+
+2. Write this: {% raw %} `{% picture test.jpg %}` {% endraw %}
+
+3. Get this:
+
+```html
+<!-- Formatted for readability -->
+
+<img src="/generated/test-800-195f7d.jpg"
+  srcset="
+    /generated/test-400-195f7d.jpg   400w,
+    /generated/test-600-195f7d.jpg   600w,
+    /generated/test-800-195f7d.jpg   800w,
+    /generated/test-1000-195f7d.jpg 1000w
+    ">
+```
+
+(Along with the appropriate images, obviously.)
+
+### "That's cool, but I just want webp."
+
+Create `_data/picture.yml`, add the following:
+
+```yml
+markup_presets:
+  default:
+    formats: [webp, original]
+```
+
+
+### Here's a more complete demonstration:
+
+[Presets]({{ site.baseurl }}/presets) are named collections of settings that tell JPT what you want it to give you.
+Media presets are just CSS media queries, and markup presets determine the output text and images.
+You choose one with the second [tag parameter]({{ site.baseurl }}/usage), or omit for the `default` (as in these
+examples). They are located in `_data/picture.yml`. Here's an example:
+
+```yml
+media_presets:
+  mobile: 'max-width: 600px'
+
+markup_presets:
+  default:
+    widths: [600, 900, 1200]
+    formats: [webp, original]
+    sizes:
+      mobile: 80vw
+    size: 500px
+```
+
+Write this:
+
+{% raw %}
+`{% picture test.jpg mobile: test2.jpg --alt Alternate Text %}`
+{% endraw %}
+
+Get this:
+
+```html
+<!-- Formatted for readability -->
+
+<picture>
+  <source
+    sizes="(max-width: 600px) 80vw, 600px"
+    media="(max-width: 600px)"
+    srcset="
+      /generated/test2-600-21bb6f.webp   600w,
+      /generated/test2-900-21bb6f.webp   900w,
+      /generated/test2-1200-21bb6f.webp 1200w
+    "
+    type="image/webp">
+  <source
+    sizes="(max-width: 600px) 80vw, 600px"
+    srcset="
+      /generated/test-600-195f7d.webp   600w,
+      /generated/test-900-195f7d.webp   900w,
+      /generated/test-1200-195f7d.webp 1200w
+    "
+    type="image/webp">
+  <source
+    sizes="(max-width: 600px) 80vw, 600px"
+    media="(max-width: 600px)"
+    srcset="
+      /generated/test2-600-21bb6f.jpg   600w,
+      /generated/test2-900-21bb6f.jpg   900w,
+      /generated/test2-1200-21bb6f.jpg 1200w
+    "
+    type="image/jpeg">
+  <source
+    sizes="(max-width: 600px) 80vw, 600px"
+    srcset="
+      /generated/test-600-195f7d.jpg   600w,
+      /generated/test-900-195f7d.jpg   900w,
+      /generated/test-1200-195f7d.jpg 1200w
+    "
+    type="image/jpeg">
+  <img src="/generated/test-800-195f7d.jpg" alt="Alternate Text">
+</picture>
+```

data/docs/installation.md

@@ -1,30 +1,30 @@
+---
+---
 # Installation
 
-1. Add `jekyll_picture_tag` to your Gemfile in the `:jekyll_plugins` group:
+* Add `jekyll_picture_tag` to your Gemfile in the `:jekyll_plugins` group:
 
-```ruby
-group :jekyll_plugins do
-  gem 'jekyll_picture_tag'
-end
-```
+  ```ruby
+  group :jekyll_plugins do
+    gem 'jekyll_picture_tag'
+  end
+  ```
 
-2. `bundle install`
+* Run `$ bundle install`
 
-3. Verify you have ImageMagick (Good chance you do) by entering the following into a terminal:
+* See if you have ImageMagick with `$ convert --version`. You should see something like this:
 
-```
-$ convert --version
-```
-You should see something like this:
+  ```
+  ~ $ convert --version 
+  Version: ImageMagick 7.0.8-14 Q16 x86_64 2018-10-31 https://imagemagick.org
+  Copyright: © 1999-2018 ImageMagick Studio LLC License: https://imagemagick.org/script/license.php
+  Features: Cipher DPC HDRI OpenMP Delegates (built-in): bzlib fontconfig freetype jng jp2 jpeg lcms
+  lzma pangocairo png tiff webp xml zlib
+  ```
+  If you get a 'command not found' error, you'll need to install it. Most package managers know about
+  ImageMagick, otherwise it can be found [here](https://imagemagick.org/script/download.php).
 
-    chronos@localhost ~ $ convert --version
-    Version: ImageMagick 7.0.8-14 Q16 x86_64 2018-10-31 https://imagemagick.org
-    Copyright: © 1999-2018 ImageMagick Studio LLC
-    License: https://imagemagick.org/script/license.php
-    Features: Cipher DPC HDRI OpenMP
-    Delegates (built-in): bzlib fontconfig freetype jng jp2 jpeg lcms lzma pangocairo png tiff webp xml zlib
+* **Note webp under delegates.** This is required if you want to generate webp files. Any image format
+you want to handle will require an appropriate delegate; You may have to install additional packages
+to accomplish this.
 
-**Note webp under delegates.** This is required if you want to generate webp files.
-
-If you get a 'command not found' error, you'll need to install it. Most package managers
-know about it, otherwise it can be downloaded [here](https://imagemagick.org/script/download.php).

data/docs/migration.md

@@ -1,3 +1,5 @@
+---
+---
 # Migrating from versions < 1.0
 
 This document details the changes from previous versions (Everything before 1.0), and how to migrate
@@ -37,7 +39,9 @@ describes how to get your site working with the new version.
 Previous tag syntax has been extended, but backwards compatibility (and behaviour of previous
 versions) is maintained. 
 
+{% raw %}
 `{% picture img.jpg (implicit attributes) --(argument) (explicit attributes) %}`
+{% endraw %}
 
 Implicit attributes are the old way. They are specified after the last source image, and before any
 explicit attributes (if they are included). These attributes are applied to the `<img>` tag, as in