yefeme 0.8.0 → 0.8.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c10667a79facce4f6c0401d78f2a6fed47ab957ade81c0da3a5865f66585d6e
-  data.tar.gz: 641245bffcdfdcd4ecf72c654ba8fe489dbb684db33fc18b81a1d0864ee4f2bf
+  metadata.gz: ed0199dd1d91cedd1a8a0120ea61490ebad253d41eec07af9be7c95352307363
+  data.tar.gz: 2d97f48217a11e8b30b55f21b43cb23a355c87956e5b37cdfe35420481021cf2
 SHA512:
-  metadata.gz: 86fcff51ffad9b8eae7d5b6e3266acc9280f298361ff5c35c2d9907504e8ade0c097095ab971222cba354f61463d894154b5df636fceda66e5ebca3e56381654
-  data.tar.gz: 8c153aa81fd90395bb749534c6322865c6865a7c8c76c910d8f67265447c0de415160d6387b84e7705713a217ff948be50d67588459b70c480fc515f380350d3
+  metadata.gz: ef18f21c9cccd8092fdcd8da3ba93b47f678b2dad695a6e57cc37712da1a551ee8c63b58f5dc4503ab0a5a94ed3cc814d38b427e7d38f8822489f2ef98304c82
+  data.tar.gz: c180febcd4ec4b6c676f8e4ce25e447dfaee3d1f89bbbc85abfcebe8347f2e3d576ed8557668518e24d0318877ffa126f271a0229e4fb749c75170141862299a

data/README.md

@@ -58,7 +58,7 @@ cf_images_variants:
   xl: xl
 ```
 
-Each document in `_shoots` should use the `shoot` layout and provide a title, date, and list of Cloudflare image IDs:
+Each document in `_shoots` should use the `shoot` layout and provide a title, date, and list of Cloudflare images. Include the intrinsic dimensions of the `thumb` variant so browsers can reserve each image's aspect ratio before it loads:
 
 ```yaml
 ---
@@ -66,11 +66,19 @@ layout: shoot
 title: Marseille
 date: 2025-11-25
 images:
-  - image-id-one
-  - image-id-two
+  - id: image-id-one
+    width: 1366
+    height: 910
+    blurhash: "LSD+;-t74.NF~XRiD%t7_3WBM_oe"
+  - id: image-id-two
+    width: 910
+    height: 1366
+    blurhash: "LaEV$vM_4ns:~qM{D%of-;M{WBof"
 ---
 ```
 
+The theme decodes each BlurHash in the browser and displays it as an immediate placeholder behind the full thumbnail. Scalar image IDs remain supported for existing sites, but do not provide intrinsic sizing or placeholder information.
+
 ## Contributing
 
 Bug reports and pull requests are welcome. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

data/_includes/head.html

@@ -36,4 +36,5 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  <script defer src="{{ "/assets/blurhash.js" | relative_url }}"></script>
 </head>

data/_layouts/entry.html

@@ -0,0 +1,17 @@
+---
+layout: default
+---
+
+<header>
+  <div class="logo">
+    {% include logo.svg width=46 height=61 %}
+    <div class="under under-small">
+      <h2 itemprop="name headline"><em>{{ page.title | escape }}</em></h2>
+      <p class="date"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time></p>
+      <a class="back accent" href="{{ "/" | relative_url }}">~ back home</a>
+    </div>
+  </div>
+  <hr />
+</header>
+
+{{ content }}

data/_layouts/home.html

@@ -38,11 +38,11 @@ layout: default
 
 <main>
   {% for entry in entries %}
-    {% if entry.collection == "shoots" %}
-      <a class="post shoot-block" href="{{ entry.url | relative_url }}">
-        <span class="accent fixed-date">{{ entry.date | date: "%b %-d, %Y" }}</span>
-        <div class="post-details shoot-details">
-          <h2>{{ entry.title | escape }}</h2>
+    <a class="post{% if entry.collection == "shoots" %} shoot-block{% endif %}" href="{{ entry.url | relative_url }}">
+      <span class="accent fixed-date">{{ entry.date | date: "%b %-d, %Y" }}</span>
+      <div class="post-details{% if entry.collection == "shoots" %} shoot-details{% endif %}">
+        <h2>{{ entry.title | escape }}</h2>
+        {% if entry.collection == "shoots" %}
           {% assign total = entry.images | size %}
           {% if total > 3 %}
             {% assign preview_count = 4 %}
@@ -51,11 +51,19 @@ layout: default
           {% endif %}
 
           <div class="shoot-thumbs shoot-thumbs-{{ preview_count }}">
-            {% for id in entry.images limit:3 %}
-              {% assign base = "https://imagedelivery.net/" | append: site.cf_images_account_hash | append: "/" | append: id | append: "/" %}
+            {% for image in entry.images limit:3 %}
+              {% assign image_id = image["id"] | default: image %}
+              {% assign base = "https://imagedelivery.net/" | append: site.cf_images_account_hash | append: "/" | append: image_id | append: "/" %}
               <img
                 class="shoot-thumb"
                 src="{{ base }}{{ site.cf_images_variants.thumb }}"
+                {% if image["width"] and image["height"] %}
+                  width="{{ image["width"] }}"
+                  height="{{ image["height"] }}"
+                {% endif %}
+                {% if image["blurhash"] %}
+                  data-blurhash="{{ image["blurhash"] | escape }}"
+                {% endif %}
                 loading="lazy"
                 decoding="async"
                 alt="Photo from {{ entry.title | escape }}"
@@ -63,11 +71,19 @@ layout: default
             {% endfor %}
 
             {% if total > 3 %}
-              {% assign fourth_id = entry.images[3] %}
+              {% assign fourth_image = entry.images[3] %}
+              {% assign fourth_id = fourth_image["id"] | default: fourth_image %}
               {% assign fourth_base = "https://imagedelivery.net/" | append: site.cf_images_account_hash | append: "/" | append: fourth_id | append: "/" %}
               <div class="shoot-thumb shoot-more-thumb">
                 <img
                   src="{{ fourth_base }}{{ site.cf_images_variants.thumb }}"
+                  {% if fourth_image["width"] and fourth_image["height"] %}
+                    width="{{ fourth_image["width"] }}"
+                    height="{{ fourth_image["height"] }}"
+                  {% endif %}
+                  {% if fourth_image["blurhash"] %}
+                    data-blurhash="{{ fourth_image["blurhash"] | escape }}"
+                  {% endif %}
                   alt=""
                   loading="lazy"
                   decoding="async"
@@ -76,16 +92,10 @@ layout: default
               </div>
             {% endif %}
           </div>
-        </div>
-      </a>
-    {% else %}
-      <a class="post" href="{{ entry.url | relative_url }}">
-        <span class="accent fixed-date">{{ entry.date | date: "%b %-d, %Y" }}</span>
-        <div class="post-details">
-          <h2>{{ entry.title | escape }}</h2>
+        {% else %}
           <p class="excerpt">{{ entry.excerpt | strip_html | normalize_whitespace | truncate: 160 | escape }}</p>
-        </div>
-      </a>
-    {% endif %}
+        {% endif %}
+      </div>
+    </a>
   {% endfor %}
 </main>

data/_layouts/post.html

@@ -1,19 +1,7 @@
 ---
-layout: default
+layout: entry
 ---
 
-<header>
-  <div class="logo">
-    {% include logo.svg width=46 height=61 %}
-    </svg>
-    <div class="under under-small">
-      <h2 itemprop="name headline"><em>{{ page.title | escape }}</em></h2>
-      <p class="date"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time></p>
-      <a class="back accent" href="{{ "/" | relative }}">~ back to blog</a>
-    </div>
-  </div>
-  <hr />
-</header>
 <main>
   <article itemprop="articleBody">
     {{ content }}

data/_layouts/shoot.html

@@ -1,29 +1,25 @@
 ---
-layout: default
+layout: entry
 ---
 
-<header>
-  <div class="logo">
-    {% include logo.svg width=46 height=61 %}
-    <div class="under under-small">
-      <h2 itemprop="name headline"><em>{{ page.title | escape }}</em></h2>
-      <p class="date"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time></p>
-      <a class="back accent" href="{{ "/" | relative_url }}">~ back home</a>
-    </div>
-  </div>
-  <hr />
-</header>
-
 <main class="portfolio-day">
   {% assign thumb = site.cf_images_variants.thumb %}
   {% assign xl = site.cf_images_variants.xl %}
 
   <div class="grid">
-    {% for id in page.images %}
-      {% assign base = "https://imagedelivery.net/" | append: site.cf_images_account_hash | append: "/" | append: id | append: "/" %}
+    {% for image in page.images %}
+      {% assign image_id = image["id"] | default: image %}
+      {% assign base = "https://imagedelivery.net/" | append: site.cf_images_account_hash | append: "/" | append: image_id | append: "/" %}
       <a class="tile" href="{{ base }}{{ xl }}" target="_blank" rel="noopener">
         <img
           src="{{ base }}{{ thumb }}"
+          {% if image["width"] and image["height"] %}
+            width="{{ image["width"] }}"
+            height="{{ image["height"] }}"
+          {% endif %}
+          {% if image["blurhash"] %}
+            data-blurhash="{{ image["blurhash"] | escape }}"
+          {% endif %}
           loading="lazy"
           decoding="async"
           alt="Photo from {{ page.title | escape }}"

data/_sass/yefeme.scss

@@ -163,7 +163,7 @@ main {
   }
 
   > img.shoot-thumb {
-    background: #eee;
+    background-color: #eee;
     border-radius: 4px;
     height: var(--shoot-thumb-height);
     object-fit: cover;
@@ -379,6 +379,12 @@ article {
   }
 }
 
+img[data-blurhash] {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
 .social {
   display: flex;
   gap: 16px;

data/assets/blurhash.js

@@ -0,0 +1,130 @@
+(function () {
+  "use strict";
+
+  var BASE83 = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~";
+  var cache = new Map();
+
+  function decode83(value) {
+    var result = 0;
+
+    for (var index = 0; index < value.length; index += 1) {
+      result = result * 83 + BASE83.indexOf(value[index]);
+    }
+
+    return result;
+  }
+
+  function srgbToLinear(value) {
+    value /= 255;
+    return value <= 0.04045 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
+  }
+
+  function linearToSrgb(value) {
+    value = Math.max(0, Math.min(1, value));
+    value = value <= 0.0031308 ? value * 12.92 : 1.055 * Math.pow(value, 1 / 2.4) - 0.055;
+    return Math.floor(value * 255 + 0.5);
+  }
+
+  function signPow(value, exponent) {
+    return (value < 0 ? -1 : 1) * Math.pow(Math.abs(value), exponent);
+  }
+
+  function decodeDC(value) {
+    return [
+      srgbToLinear(value >> 16),
+      srgbToLinear((value >> 8) & 255),
+      srgbToLinear(value & 255)
+    ];
+  }
+
+  function decodeAC(value, maximum) {
+    return [
+      signPow(Math.floor(value / (19 * 19)) / 9 - 1, 2) * maximum,
+      signPow((Math.floor(value / 19) % 19) / 9 - 1, 2) * maximum,
+      signPow((value % 19) / 9 - 1, 2) * maximum
+    ];
+  }
+
+  function decode(hash, width, height) {
+    var sizeFlag = decode83(hash[0]);
+    var componentsY = Math.floor(sizeFlag / 9) + 1;
+    var componentsX = (sizeFlag % 9) + 1;
+    var expectedLength = 4 + 2 * componentsX * componentsY;
+
+    if (hash.length !== expectedLength) return null;
+
+    var maximum = (decode83(hash[1]) + 1) / 166;
+    var colors = [decodeDC(decode83(hash.slice(2, 6)))];
+
+    for (var component = 1; component < componentsX * componentsY; component += 1) {
+      colors.push(decodeAC(decode83(hash.slice(4 + component * 2, 6 + component * 2)), maximum));
+    }
+
+    var pixels = new Uint8ClampedArray(width * height * 4);
+
+    for (var y = 0; y < height; y += 1) {
+      for (var x = 0; x < width; x += 1) {
+        var red = 0;
+        var green = 0;
+        var blue = 0;
+
+        for (var componentY = 0; componentY < componentsY; componentY += 1) {
+          for (var componentX = 0; componentX < componentsX; componentX += 1) {
+            var basis =
+              Math.cos(Math.PI * x * componentX / width) *
+              Math.cos(Math.PI * y * componentY / height);
+            var color = colors[componentX + componentY * componentsX];
+            red += color[0] * basis;
+            green += color[1] * basis;
+            blue += color[2] * basis;
+          }
+        }
+
+        var offset = 4 * (x + y * width);
+        pixels[offset] = linearToSrgb(red);
+        pixels[offset + 1] = linearToSrgb(green);
+        pixels[offset + 2] = linearToSrgb(blue);
+        pixels[offset + 3] = 255;
+      }
+    }
+
+    return pixels;
+  }
+
+  function placeholderFor(image) {
+    var hash = image.dataset.blurhash;
+    var intrinsicWidth = Number(image.getAttribute("width"));
+    var intrinsicHeight = Number(image.getAttribute("height"));
+
+    if (!hash || !intrinsicWidth || !intrinsicHeight) return;
+
+    var width = intrinsicWidth >= intrinsicHeight ? 32 : Math.max(1, Math.round(32 * intrinsicWidth / intrinsicHeight));
+    var height = intrinsicHeight >= intrinsicWidth ? 32 : Math.max(1, Math.round(32 * intrinsicHeight / intrinsicWidth));
+    var cacheKey = hash + ":" + width + "x" + height;
+    var dataUrl = cache.get(cacheKey);
+
+    if (!dataUrl) {
+      var pixels = decode(hash, width, height);
+      if (!pixels) return;
+
+      var canvas = document.createElement("canvas");
+      var context = canvas.getContext("2d");
+      if (!context) return;
+
+      canvas.width = width;
+      canvas.height = height;
+      var imageData = context.createImageData(width, height);
+      imageData.data.set(pixels);
+      context.putImageData(imageData, 0, 0);
+      dataUrl = canvas.toDataURL("image/jpeg", 0.7);
+      cache.set(cacheKey, dataUrl);
+    }
+
+    image.style.backgroundImage = "url(\"" + dataUrl + "\")";
+    image.style.backgroundPosition = "center";
+    image.style.backgroundRepeat = "no-repeat";
+    image.style.backgroundSize = "cover";
+  }
+
+  document.querySelectorAll("img[data-blurhash]").forEach(placeholderFor);
+}());

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: yefeme
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.8.2
 platform: ruby
 authors:
 - Yefim Vedernikoff
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-08-27 00:00:00.000000000 Z
+date: 2026-08-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -39,11 +39,13 @@ files:
 - _includes/logo.svg
 - _includes/twitter.svg
 - _layouts/default.html
+- _layouts/entry.html
 - _layouts/home.html
 - _layouts/post.html
 - _layouts/shoot.html
 - _sass/highlight.scss
 - _sass/yefeme.scss
+- assets/blurhash.js
 - assets/main.scss
 - index.md
 homepage: https://github.com/yefim/yefeme