jekyll-theme-chalk 0.1.1

data/_assets/yarn/retinajs/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "retinajs",
+  "version": "2.1.2",
+  "license": "MIT",
+  "homepage": "https://github.com/strues/retinajs",
+  "bugs": "https://github.com/strues/retinajs/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/strues/retinajs.git"
+  },
+  "keywords": [
+    "retina",
+    "images",
+    "@2x",
+    "@3x",
+    "retina.js"
+  ],
+  "main": "dist/retina.js",
+  "module": "es/retina.js",
+  "jsnext:main": "es/retina.js",
+  "files": [
+    "dist",
+    "es",
+    "LICENSE"
+  ],
+  "devDependencies": {
+    "babel-jest": "^20.0.3",
+    "babel-preset-env": "^1.5.2",
+    "cross-env": "^5.0.1",
+    "eslint": "^4.0.0",
+    "eslint-config-boldr": "^0.10.3",
+    "flow-bin": "^0.48.0",
+    "jest": "^20.0.4",
+    "less": "^2.7.2",
+    "node-sass": "^4.5.3",
+    "prettier": "^1.4.4",
+    "rimraf": "^2.6.1",
+    "rollup": "^0.43.0",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-babili": "^3.1.0",
+    "rollup-plugin-cleanup": "^1.0.1",
+    "rollup-plugin-multi-dest": "^1.0.2",
+    "rollup-watch": "^4.0.0",
+    "sinon": "^2.3.5"
+  },
+  "scripts": {
+    "dev": "rollup -c -w -m inline",
+    "format": "prettier --single-quote=true --print-width=100 --jsx-bracket-same-line=false --trailing-comma=all --write \"src/**/*.js\"",
+    "build": "rimraf es && rimraf dist && npm run build:js && npm run build:styles",
+    "build:js": "cross-env NODE_ENV=producion rollup -c",
+    "build:styles": "npm run build:styles:es && npm run build:styles:dist",
+    "build:styles:es": "cp src/_retina.sass es && cp src/_retina.scss es && cp src/retina.less es && cp src/retina.styl es",
+    "build:styles:dist": "cp src/_retina.sass dist && cp src/_retina.scss dist && cp src/retina.less dist && cp src/retina.styl dist",
+    "test-watch": "npm run test -- --watch",
+    "test": "jest"
+  }
+}

data/_assets/yarn/retinajs/src/_retina.sass

@@ -0,0 +1,68 @@
+// retina.sass
+// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
+
+// Submitted by Nathan Crank
+// nathancrank.com
+
+// Updated by John Newman
+// github.com/jgnewman
+// http://axial.agency
+
+/**
+ * Allows you to use retina images at various pixel densities.
+ * Examples:
+ *
+ *   +retina(/images/mypic.jpg, 2);
+ *   +retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
+ *
+ * @param  {Value}  $path               The path to the file name minus extension.
+ * @param  {Number} $cap:    2          The highest pixel density level images exist for.
+ * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
+ * @param  {Value}  $extras: null       Any other `background` values to be added.
+ */
+=retina($path, $cap: 2, $size: auto auto, $extras: null)
+
+  // Set a counter and get the length of the image path.
+  $position: -1
+  $strpath: '#{$path}'
+  $length: str-length($strpath)
+
+  // Loop ver the image path and figure out the
+  // position of the dot where the extension begins.
+  @for $i from $length through $length - 10
+    @if $position == -1
+      $char: str-slice($strpath, $i,$i)
+      @if str-index($char, ".") == 1
+        $position: $i
+
+  // If we were able to figure out where the extension is,
+  // slice the path into a base and an extension. Use that to
+  // calculate urls for different density environments. Set
+  // values for different environments.
+  @if $position != -1
+    $ext: str-slice($strpath, $position + 1, $length)
+    $base: str-slice($strpath, 1 ,$position - 1)
+    $at1x_path: "#{$base}.#{$ext}"
+    $at2x_path: "#{$base}@2x.#{$ext}"
+
+    // Set a base background for 1x environments.
+    background: url("#{$at1x_path}") $extras
+    background-size: $size
+
+    // Create an @2x-ish media query.
+    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5)
+      background: url("#{$at2x_path}") $extras
+      background-size: $size
+
+    // Create media queries for all environments that the user has
+    // provided images for.
+    @if $cap >= 2
+      @for $env from 2 through $cap
+        $suffix: "@#{$env}x"
+        @media (-webkit-min-device-pixel-ratio: $env), (min-resolution: $env * 96dpi)
+          background: url("#{$base}#{$suffix}.#{$ext}") $extras
+          background-size: $size
+
+  @else
+    background: url("#{$path}") $extras
+    background-size: $size

data/_assets/yarn/retinajs/src/_retina.scss

@@ -0,0 +1,102 @@
+// retina.scss
+// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
+
+// Submitted by Nathan Crank
+// nathancrank.com
+
+// Updated by Gabriel R. Sezefredo
+// gabriel.sezefredo.com.br
+
+// Updated by John Newman
+// github.com/jgnewman
+// http://axial.agency
+
+
+/**
+ * Allows you to use retina images at various pixel densities.
+ * Examples:
+ *
+ *   @include retina(/images/mypic.jpg, 2);
+ *   @include retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
+ *
+ * @param  {Value}  $path               The path to the file name minus extension.
+ * @param  {Number} $cap:    2          The highest pixel density level images exist for.
+ * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
+ * @param  {Value}  $extras: null       Any other `background` values to be added.
+ */
+@mixin retina($path, $cap: 2, $size: auto auto, $extras: null) {
+
+  /*
+   * Set a counter and get the length of the image path.
+   */
+  $position: -1;
+  $strpath: '#{$path}';
+  $length: str-length($strpath);
+
+  /*
+   * Loop ver the image path and figure out the
+   * position of the dot where the extension begins.
+   */
+  @for $i from $length through $length - 10{
+      @if $position == -1 {
+          $char : str-slice($strpath, $i, $i);
+          @if str-index($char, ".") == 1 {
+              $position: $i;
+          }
+      }
+  }
+
+  /*
+   * If we were able to figure out where the extension is,
+   * slice the path into a base and an extension. Use that to
+   * calculate urls for different density environments. Set
+   * values for different environments.
+   */
+  @if $position != -1 {
+    $ext: str-slice($strpath, $position + 1, $length);
+    $base: str-slice($strpath, 1, $position - 1);
+    $at1x_path: "#{$base}.#{$ext}";
+    $at2x_path: "#{$base}@2x.#{$ext}";
+
+    /*
+     * Set a base background for 1x environments.
+     */
+    background: url("#{$at1x_path}") $extras;
+    background-size: $size;
+
+    /*
+     * Create an @2x-ish media query.
+     */
+    @media all and (-webkit-min-device-pixel-ratio : 1.5),
+           all and (-o-min-device-pixel-ratio: 3/2),
+           all and (min--moz-device-pixel-ratio: 1.5),
+           all and (min-device-pixel-ratio: 1.5) {
+             background      : url("#{$at2x_path}") $extras;
+             background-size : $size;
+    }
+
+    /*
+     * Create media queries for all environments that the user has
+     * provided images for.
+     */
+    @if $cap >= 2 {
+      @for $env from 2 through $cap {
+        $suffix: "@#{$env}x";
+        @media (-webkit-min-device-pixel-ratio: $env),
+               (min-resolution: $env * 96dpi) {
+                 background      : url("#{$base}#{$suffix}.#{$ext}") $extras;
+                 background-size : $size;
+        }
+      }
+    }
+
+  /*
+   * If anything went wrong trying to separate the file from its
+   * extension, set a background value without doing anything to it.
+   */
+  } @else {
+    background: url("#{$path}") $extras;
+    background-size: $size;
+  }
+
+}

data/_assets/yarn/retinajs/src/retina.js

@@ -0,0 +1,246 @@
+/*
+ * Determine whether or not `window` is available.
+ */
+const hasWindow = typeof window !== 'undefined';
+
+/*
+ * Get the device pixel ratio per our environment.
+ * Default to 1.
+ */
+const environment = Math.round(hasWindow ? window.devicePixelRatio || 1 : 1);
+
+/*
+ * Define a pattern for capturing src url suffixes.
+ */
+const srcReplace = /(\.[A-z]{3,4}\/?(\?.*)?)$/;
+const inlineReplace = /url\(('|")?([^\)'"]+)('|")?\)/i;
+
+/*
+ * Define our selectors for elements to target.
+ */
+const selector = '[data-rjs]';
+
+/*
+ * Define the attribute we'll use to mark an image as having been processed.
+ */
+const processedAttr = 'data-rjs-processed';
+
+/**
+ * Shortcut for turning some iterable object into an array.
+ *
+ * @param  {Iterable} object Any iterable object.
+ *
+ * @return {Array}
+ */
+function arrayify(object) {
+  return Array.prototype.slice.call(object);
+}
+
+/**
+ * Chooses the actual image size to fetch, (for example 2 or 3) that
+ * will be used to create a suffix like "@2x" or "@3x".
+ *
+ * @param  {String|Number} cap The number the user provided indicating that
+ *                             they have prepared images up to this size.
+ *
+ * @return {Number} The number we'll be using to create a suffix.
+ */
+function chooseCap(cap) {
+  const numericCap = parseInt(cap, 10);
+
+  /*
+   * If the environment's device pixel ratio is less than what the user
+   * provided, we'll only grab images at that size.
+   */
+  if (environment < numericCap) {
+    return environment;
+
+  /*
+   * If the device pixel ratio is greater than or equal to what the
+   * user provided, we'll use what the user provided.
+   */
+  } else {
+    return numericCap;
+  }
+}
+
+/**
+ * Makes sure that, since we are going to swap out the source of an image,
+ * the image does not change size on the page.
+ *
+ * @param  {Element} image An image element in the DOM.
+ *
+ * @return {Element} The same element that was passed in.
+ */
+function forceOriginalDimensions(image) {
+  if (!image.hasAttribute('data-no-resize')) {
+    if (image.offsetWidth === 0 && image.offsetHeight === 0) {
+      image.setAttribute('width', image.naturalWidth);
+      image.setAttribute('height', image.naturalHeight);
+    } else {
+      image.setAttribute('width', image.offsetWidth);
+      image.setAttribute('height', image.offsetHeight);
+    }
+  }
+  return image;
+}
+
+/**
+ * Determines whether the retina image actually exists on the server.
+ * If so, swaps out the retina image for the standard one. If not,
+ * leaves the original image alone.
+ *
+ * @param {Element} image  An image element in the DOM.
+ * @param {String}  newSrc The url to the retina image.
+ *
+ * @return {undefined}
+ */
+function setSourceIfAvailable(image, retinaURL) {
+  const imgType = image.nodeName.toLowerCase();
+
+  /*
+   * Create a new image element and give it a load listener. When the
+   * load listener fires, it means the URL is correct and we will then
+   * attach it to the user's image.
+   */
+  const testImage = document.createElement('img');
+  testImage.addEventListener('load', () => {
+    /*
+     * If we're dealing with an image tag, force it's dimensions
+     * and set the source attribute. If not, go after the background-image
+     * inline style.
+     */
+    if (imgType === 'img') {
+      forceOriginalDimensions(image).setAttribute('src', retinaURL);
+    } else {
+      image.style.backgroundImage = `url(${retinaURL})`;
+    }
+  });
+
+  /*
+   * Attach the retina URL to our proxy image to load in the new
+   * image resource.
+   */
+  testImage.setAttribute('src', retinaURL);
+
+  /*
+   * Mark our image as processed so that it won't be processed again.
+   */
+  image.setAttribute(processedAttr, true);
+}
+
+/**
+ * Attempts to do an image url swap on a given image.
+ *
+ * @param  {Element}       image An image in the DOM.
+ * @param  {String}        src   The original image source attribute.
+ * @param  {String|Number} rjs   The pixel density cap for images provided.
+ *
+ * @return {undefined}
+ */
+function dynamicSwapImage(image, src, rjs = 1) {
+  const cap = chooseCap(rjs);
+
+  /*
+   * Don't do anything if the cap is less than 2 or there is no src.
+   */
+  if (src && cap > 1) {
+    const newSrc = src.replace(srcReplace, `@${cap}x$1`);
+    setSourceIfAvailable(image, newSrc);
+  }
+}
+
+/**
+ * Performs an image url swap on a given image with a provided url.
+ *
+ * @param  {Element} image  An image in the DOM.
+ * @param  {String}  src    The original image source attribute.
+ * @param  {String}  hdsrc  The path for a 2x image.
+ *
+ * @return {undefined}
+ */
+function manualSwapImage(image, src, hdsrc) {
+  if (environment > 1) {
+    setSourceIfAvailable(image, hdsrc);
+  }
+}
+
+/**
+ * Collects all images matching our selector, and converts our
+ * NodeList into an Array so that Array methods will be available to it.
+ *
+ * @param {Iterable} images  Optional. An Array, jQuery selection, or NodeList
+ *                           of elements to affect with retina.js.
+ *
+ * @return {Iterable} Contains all elements matching our selector.
+ */
+function getImages(images) {
+  if (!images) {
+    return typeof document !== 'undefined' ? arrayify(
+      document.querySelectorAll(selector)
+    ) : [];
+  } else {
+    return typeof images.forEach === 'function' ? images : arrayify(images);
+  }
+}
+
+/**
+ * Converts a string like "url(hello.png)" into "hello.png".
+ *
+ * @param  {Element} img An HTML element with a background image.
+ *
+ * @return {String}
+ */
+function cleanBgImg(img) {
+  return img.style.backgroundImage.replace(inlineReplace, '$2');
+}
+
+/**
+ * Gets all participating images and dynamically swaps out each one for its
+ * retina equivalent taking into account the environment capabilities and
+ * the densities for which the user has provided images.
+ *
+ * @param {Iterable} images  Optional. An Array, jQuery selection, or NodeList
+ *                           of elements to affect with retina.js. If not
+ *                           provided, retina.js will grab all images on the
+ *                           page.
+ *
+ * @return {undefined}
+ */
+function retina(images) {
+  getImages(images).forEach(img => {
+    if (!img.getAttribute(processedAttr)) {
+      const isImg = img.nodeName.toLowerCase() === 'img';
+      const src = isImg ? img.getAttribute('src') : cleanBgImg(img);
+      const rjs = img.getAttribute('data-rjs');
+      const rjsIsNumber = !isNaN(parseInt(rjs, 10));
+
+      // do not try to load /null image!
+      if (rjs === null) {
+        return;
+      }
+
+      /*
+       * If the user provided a number, dynamically swap out the image.
+       * If the user provided a url, do it manually.
+       */
+      if (rjsIsNumber) {
+        dynamicSwapImage(img, src, rjs);
+      } else {
+        manualSwapImage(img, src, rjs);
+      }
+    }
+  });
+}
+
+/*
+ * If this environment has `window`, activate the plugin.
+ */
+if (hasWindow) {
+  window.addEventListener('load', function() {
+    retina();
+  });
+  window.retinajs = retina;
+}
+
+export default retina;