jekyll-theme-isabelline 0.1.20 → 0.1.25

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8348df02c7bc0ddaa74d788e2ec0476ebb535feec2c5f9f23002adf0c2b0d9a1
-  data.tar.gz: 164bd6ec7ce4a6eb2f2daa6e191eaeb506c27818d403be4465f0dc42fcc4890f
+  metadata.gz: 3e2e7dd1653a5f7ce624d83b84515962ec583817b8fb7a68812bf6ecd09dec5c
+  data.tar.gz: 9c1e5ac6ab4ea5566c81047f83237a7d51e8759c4308e38db21c6f377349fd1c
 SHA512:
-  metadata.gz: 78a025097bf3ca0a9cd47ad31a7ee2557401790f565196c90384201929b105ac34ab898c7ac548695ad526ce4c8f1dfa043eb20841289a661259556eaf22e764
-  data.tar.gz: acd1699e2c20a678782f2ca3d512fd83ae35264ff85c12cbfb91eff30ab4da4b8a4f9296ac98d53a55a0d4ced9b26e404969c9a5e9b29f69e85b4949c9895619
+  metadata.gz: 81e07b530504bce8bdd10817bcb9718270637a053fd2263ccbf7fbefd136c18e4836cc59e791db12a8cbc11044507c285368bbf51d5ff24b3f4b404023cbd3a0
+  data.tar.gz: 470e2850d46cb6618bd88ece1a1c1b58547ee65ead00215a4276ddc8acf2c1770f5d19a2247006c005258c567ccc38df07f3fd229727cdea88bb8c05b9ce5324

data/README.md

@@ -17,7 +17,7 @@ Add this line to site's `Gemfile`:
 ```ruby
 gem "jekyll-theme-isabelline", "~> 0.1.0"
 ```
-And add this line to your Jekyll site:
+And add this line to your Jekyll site `_config.yaml`:
 
 ```yaml
 theme: jekyll-theme-isabelline

data/_includes/footer.html

@@ -28,4 +28,5 @@
 
 <div id="snackbar">Loading...</div>
 <!-- <script src='/assets/js/slides.js'></script> -->
-<script src='{{ "/assets/js/clipboard.js" | relative_url }}'></script>
+<script src='{{ "/assets/js/clipboard.js" | relative_url }}'></script>
+<script src='{{ "/assets/js/gallery.js" | relative_url }}'></script>

data/_includes/gallery.html

@@ -1,8 +1,81 @@
-{% assign images = (include.images | split: "|") %}
-{% assign thumbnails = (include.thumbnails | split: "|") %}
+{% assign gallery_name = include.name | default: "gallery" %}
 
-<div class="gallery">
-	{% for image in images %}
-		<a href="{{ include.dir }}/{{ image }}"><img src="{{ include.dir }}/{{ image }}" /></a>
-	{% endfor %}
+{% assign gallery_prefix = page.id | prepend: "/assets" | append: "/" | append: gallery_name %}
+
+
+{% assign valid_image_extensions = ".jpg,.jpeg,.png,.gif" | split: "," %}
+{% assign valid_image_sizes = "-300,-700" | split: "," %}
+
+{% assign sorted_static_files = site.static_files | map: "path" | sort | join: "|" | append: gallery_prefix | append: "/dummy-700.jpg" | split: "|" %}
+
+{% assign img_sizes = "(max-width: 500px) 300px, 700px" %}
+
+{% assign prev_same_image_path = "-" %}
+
+<div class="gallery" id="gallery-{{ gallery_name }}">
+	{% assign image_index = 0 %}
+	{% assign gallery_nav = "" %}
+	{% assign image_srcset = "" %}
+	<div class="images">
+		{% for image_path in sorted_static_files %}
+			{% assign image_ext = image_path | split: "." | last | prepend: "." %}
+			{% if valid_image_extensions contains image_ext %}
+
+				{% if image_path contains gallery_prefix %}
+
+					{% assign same_image_path = "" %}
+					{% assign srcset = "" %}
+
+					{% for dash_size in valid_image_sizes %}
+						{% if image_path contains dash_size %}
+							{% assign same_image_path = image_path | split: dash_size | first %}
+
+							{% assign size = dash_size | remove: "-" %}
+							{% assign srcset = image_path | prepend: site.baseurl | append: " " | append: size | append: "w" %}
+							<!-- <li>srcset1={{ srcset }}</li> -->
+						{% endif %}
+						<!-- <li>srcset2={{ srcset }}</li> -->
+					{% endfor %}
+					
+
+					{% if same_image_path == blank %}
+						{% assign src = image_path %}
+					{% endif %}
+
+					{% if srcset != blank %}
+						<!-- <li>srcset3={{ srcset }}</li> -->
+						<!-- <li>prev_same_image_path={{ prev_same_image_path }}</li> -->
+						<!-- <li>same_image_path={{ same_image_path }}</li> -->
+						{% if same_image_path == prev_same_image_path && true %}
+							{% if image_srcset != blank %}
+								{% assign image_srcset = image_srcset | append: "," %}
+							{% endif %}
+							{% assign image_srcset = image_srcset | append: srcset %}
+						{% else %}
+							{% if prev_same_image_path == "-" %}
+								{% assign prev_same_image_path = same_image_path %}
+								{% assign image_srcset = srcset %}
+							{% else %}
+								{% assign image_index = image_index | plus: 1 %}
+								<img id="{{ gallery_name}}-{{ image_index }}" srcset="{{ image_srcset }}" sizes="{{ img_sizes }}" src="{{ site.baseurl }}{{ src }}" />
+								{% assign prev_same_image_path = same_image_path %}
+								{% assign image_srcset = "" %}
+
+							{% endif %}
+						{% endif %}
+					{% endif %}
+				{% endif %}
+			{% endif %}
+		{% endfor %}
+	</div>
+	<nav>
+<!-- 		<div class="preview">
+			<div class="vg"></div>
+			<div class="hg"></div>
+		</div>
+ -->		<div class="play">
+			<input type="checkbox" checked="false" id="{{ gallery_name }}-play" />
+			<label for="{{ gallery_name }}-play"></label>
+		</div>
+	</nav>
 </div>

data/_includes/post_index.html

@@ -17,7 +17,7 @@
 	<ul class="index">
 	{% for post in pinned_posts %}
 		<li>
-			<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+			<a href="{{ post.url | relative_url }}">{{ post.title | markdownify }}</a>
 			<span class="posted">{{ post.date | date: "%b %-d, %Y" }}</span>
 			{% if jekyll.environment == "local" %}
 				{% if post.collection == 'private' %}
@@ -47,7 +47,7 @@
 	{% endif %}
 
 	<li>
-		<a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+		<a href="{{ site.baseurl }}{{ post.url }}">{{ post.title | markdownify }}</a>
 		<span class="posted">{{ post.date | date: "%b %-d" }}</span>
 		{% if jekyll.environment == "local" %}
 			{% if post.collection == 'private' %}

data/_sass/_config.scss

@@ -44,7 +44,8 @@ $body-serif: "Noto Serif", "Bree Serif",$serif;
 $header-color: darken($body-background-color,90%);
 $header-link-color: darken($body-background-color,70%);
 
-$image-caption-serif: "Fira Sans Extra Condensed", "Neucha", $sans-serif;
+$image-caption-serif: "Noto Serif", "Bree Serif",$serif;
+// $image-caption-serif: "Fira Sans Extra Condensed", "Neucha", $sans-serif;
 $image-caption-color: $body-color;
 
 $main-link-color: darken($body-background-color,80%);

data/_sass/_isabelline.scss

@@ -159,15 +159,6 @@ header {
 	}
 }
 
-// div.column {
-// 	width: 30%;
-// 	float: left;
-// 	padding: .5rem;
-// 	margin: .5rem;
-// 	border: 1px solid #ccc;
-// }
-
-// link styling
 a {
 	color: darken($link-color,15%);
 	&:hover, &:active, &:visited {
@@ -204,13 +195,13 @@ main {
 		}
 
 		img {
-			border-radius: 4px;
+			border-radius: 6px;
 			// width: 100%;
 		}
 	}
 
 	p img {
-		border-radius: 4px;
+		border-radius: 6px;
 		width: 100%;
 	}
 
@@ -241,10 +232,123 @@ main {
 		margin-bottom: 1em;
 		
 		img {
-			// width: 45%;
+			width: 100%;
+			
+			// height: 200px;
+			// float: left;
+		}
+
+		div.images {
+			position: relative;
+			height: 500px;
+			overflow: hidden;
+
+			will-change: height;
+			transition: 300ms ease;
+
+			img.transition {
+				will-change: left;
+				transition: 300ms ease;
+			}
+
+			img.left   { left: -100% !important; }
+			img.right  { left:  100% !important; }
+			img.center { left:    0  !important; }
+
+			img.thumbnail {
+				margin: 10px;
+				float: left;
+				position: static;
+			}
+
+			img {
+				cursor: pointer;
+				border-radius: 6px;
+				
+				position: absolute;
+				top: 0;
+				left: 100%;
+			}
 			
-			height: 200px;
-			float: left;
+			img:first-child {
+				left: 0;
+			}
+		}
+
+		nav {
+			width: 100%;
+			text-align: center;
+			i {
+				cursor: pointer;
+				margin: .5rem;
+				display: inline-block;
+				width: 1rem;
+				height: 1rem;
+				border-radius: .5rem;
+				transition: 300ms ease;
+				will-change: background-color;
+
+				background-color: hsl($hue,10,80);
+				&.selected {
+					background-color: hsl($hue,50,40);
+				}
+			}
+
+			// slightly modified version of
+			// https://css-tricks.com/making-pure-css-playpause-button/
+			.play {
+				float: left;
+
+				label {
+					margin: .5rem;
+					display: inline-block;
+					box-sizing: border-box;
+					width: 0;
+					height: 1rem;
+					cursor: pointer;
+					border-color: transparent transparent transparent hsl($hue,50,40); // same color as i.selected
+
+					transition: 300ms all ease;
+					will-change: border-width;
+
+					// paused state
+					border-style: double;
+					border-width: 0 0 0 1rem;
+				}
+				input[type='checkbox'] {
+					display: none;
+					&:checked + label {
+						border-style: solid;
+						border-width: .5rem 0 .5rem 1rem;
+					}
+				}
+			}
+
+			.preview {
+				position: relative;
+				cursor: pointer;
+				float: right;
+				margin: .5rem;
+				width: 14px;
+				height: 14px;
+				background-color: hsl($hue,50,40);
+				.vg, .hg {
+					border: 1px solid $body-background-color;
+					position: absolute;
+				}
+				.vg {
+					top: -1px;
+					left:4px;
+					width: 4px;
+					height: 100%;
+				}
+				.hg {
+					left: -1px;
+					top:4px;
+					height: 4px;
+					width: 100%;
+				}
+			}
 		}
 	}
 

data/assets/js/gallery.js

@@ -0,0 +1,234 @@
+(function () {
+
+	// "hydrate" div.gallery with play/pause and nav behaviors
+	var process_gallery = function (g) {
+		var
+			// milliseconds to wait before switch to next slide
+			NEXT_SLIDE_TIMEOUT = 5000;
+
+		var 
+			// will be resized to the height of currently selected image
+			images_container = g.querySelector('.images'),
+
+			// images in this gallery
+			images = g.querySelectorAll('.images img'),
+
+			// container for nav buttons
+			gallery_nav = g.querySelector('nav'),
+			
+			// show all images
+			// computed below
+			preview_nav,
+
+			// clickable buttons, one per image
+			// computed below
+			navs = [],
+
+			// index of the currently selected image
+			selected_index = 0,
+
+			// play control consists of a label and a checkbox
+			// defer computing because nav innerHTML gets clobbered
+			play_checkbox,
+
+			// handle to setInterval
+			play_interval,
+
+			play_suspended = false;
+
+/*
+ +--------+--------+--------+
+ | image1 | image2 | image3 |
+ |        |selected|        |
+ +--------+--------+--------+
+ */
+
+		var suspended = function () {
+			return play_suspended || document.hidden || document.msHidden || document.webkitHidden;
+		}
+
+ 		var adjust_height = function (index) {
+ 			images_container.style.height = images[index].offsetHeight + 'px';
+ 		}
+
+/*
+   +----------------------------------------+
+   | +----------+ +----------+ +----------+ |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | +----------+ +----------+ +----------+ |
+   |                                        |
+   | +----------+ +----------+ +----------+ |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | +----------+ +----------+ +----------+ |
+   |                                        |
+   | +----------+ +----------+ +----------+ |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | |          | |          | |          | |
+   | +----------+ +----------+ +----------+ |
+   |                                        |
+   | +----------+ +----------+              |
+   | |          | |          |              |
+   | |          | |          |              |
+   | |          | |          |              |
+   | |          | |          |              |
+   | |          | |          |              |
+   | +----------+ +----------+              |
+   +----------------------------------------+
+ */
+
+
+ 		var show_preview = function () {
+ 			var thumb_size = (images_container.offsetWidth - 6*10) / 3;
+ 			for (var i=0; i<images.length; ++i) {
+ 				var image = images[i];
+ 				if (image.offsetHeight > image.offsetWidth) {
+ 					console.log('showing tall preview', thumb_size, image.offsetWidth, 'x', image.offsetHeight)
+ 					image.style.width = thumb_size + 'px';
+ 				} else {
+ 					console.log('showing wide preview', thumb_size, image.offsetWidth, 'x', image.offsetHeight)
+ 					image.style.height = thumb_size + 'px';
+ 				}
+ 				image.classList.add('thumbnail');
+ 			}
+ 		}
+
+		// show image at index
+		// update nav controls accordingly
+		var select_image = function (index) {
+			if (selected_index === index) return;
+
+			var slide = function () {
+				images[selected_index].classList.remove('transition');
+				images[index].classList.remove('transition');
+
+				navs[selected_index].classList.remove('selected');
+				
+				selected_index = index;
+			}
+
+			if (suspended()) return;
+			images[selected_index].addEventListener('transitionend', slide, {once: true});
+
+			navs[index].classList.add('selected');
+
+			if (index < selected_index) {
+				setTimeout(function () {
+					images[index].classList.remove('right');
+					images[index].classList.add('left');
+
+					adjust_height(index);
+
+					setTimeout(function () {
+						images[index].classList.add('transition');
+						images[selected_index].classList.add('transition');
+						images[index].classList.remove('left');
+						images[index].classList.add('center');
+						images[selected_index].classList.add('right');
+						images[selected_index].classList.remove('center');
+					},1)
+				},1)
+
+			} else {
+				setTimeout(function () {
+					images[index].classList.remove('left');
+					images[index].classList.add('right');
+
+					adjust_height(index);
+
+					setTimeout(function () {
+						images[index].classList.add('transition');
+						images[selected_index].classList.add('transition');
+						images[index].classList.remove('right');
+						images[index].classList.add('center');
+						images[selected_index].classList.add('left');
+						images[selected_index].classList.remove('center');
+					},1);
+				},1);
+
+			}
+		}
+
+		// show next image
+		var next_image = function () {
+			if (suspended()) return;
+			if (selected_index >= images.length-1) {
+				select_image(0);
+			} else {
+				select_image(selected_index+1);
+			}
+		}
+
+		// handler for nav buttons
+		// selects an image corresponding to the clicked nav button
+		var nav_to_image = function () {
+			select_image(Array.from(navs).indexOf(this));
+		}
+
+		// play/pause slideshow
+		var toggle_play = function () {
+			if (play_checkbox.checked===true) {
+				clearInterval(play_interval);
+			} else {
+				play_interval = setInterval(next_image, NEXT_SLIDE_TIMEOUT);
+			}
+		}
+
+		// build nav bullets
+		var navHtml = '';
+		for (var i=0; i<images.length; ++i) {
+			var image = images[i]
+			image.addEventListener('click', next_image)
+			navHtml += '<i class="' + (i===0? 'selected' : '') + '" data-target="' + image.id + '"></i>'
+		}
+		gallery_nav.innerHTML += navHtml;
+
+		// attach nav bullet listeners
+		navs = gallery_nav.querySelectorAll('i');
+		for (var i=0; i<navs.length; ++i) {
+			var nav = navs[i];
+			nav.addEventListener('click', nav_to_image)
+		}
+
+		// play button
+		play_checkbox = g.querySelector('.play input[type=checkbox]');
+		play_checkbox.addEventListener('change', toggle_play);
+
+		// g.querySelector('.preview').addEventListener('click', function () {
+		// 	show_preview();
+		// });
+
+		window.addEventListener('resize', function () {
+			adjust_height(selected_index);
+		});
+
+		// resize image container when initial image loads
+		if (images[selected_index].complete) {
+			adjust_height(selected_index);
+		} else {
+			images[selected_index].addEventListener('load', function () {
+				adjust_height(selected_index);
+			});
+			images[selected_index].addEventListener('error', function() {
+				console.warn('error loading image', arguments, images[selected_index].src, images[selected_index])
+			});
+		}
+	}
+
+	var galleries = document.getElementsByClassName('gallery');
+
+	for (var i=0; i<galleries.length; ++i) {
+		var g = galleries[i];
+		process_gallery(g);
+	}
+})();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-isabelline
 version: !ruby/object:Gem::Version
-  version: 0.1.20
+  version: 0.1.25
 platform: ruby
 authors:
 - Rouslan Zenetl
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-01 00:00:00.000000000 Z
+date: 2021-03-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -79,11 +79,15 @@ files:
 - _sass/_syntax.scss
 - assets/.DS_Store
 - assets/blog/example/Quarter_Horse_Buckskin.jpg
+- assets/blog/example/gallery/1/lanius_isabellinus1.jpg
 - assets/blog/example/gallery/Lanius_isabellinus1.jpg
 - assets/blog/example/gallery/dusan-smetana-ah7KHxYg6Ow-unsplash.jpg
 - assets/blog/example/gallery/jay-ruzesky-h13Y8vyIXNU-unsplash.jpg
 - assets/blog/example/gallery/maurits-bausenhart-OkYjLpB2gzA-unsplash.jpg
 - assets/blog/example/gallery/sneaky-elbow-h00rqvO5A-M-unsplash.jpg
+- assets/blog/example/gallery2/Quarter_Horse_Buckskin.jpg
+- assets/blog/example/gallery2/dusan-smetana-ah7KHxYg6Ow-unsplash.jpg
+- assets/blog/example/gallery2/jay-ruzesky-h13Y8vyIXNU-unsplash.jpg
 - assets/blog/getting-started/undraw_browsing_online_sr8c.svg
 - assets/css/style.scss
 - assets/favicon/README.md
@@ -113,10 +117,11 @@ files:
 - assets/fonts/Noto Serif/ga6Iaw1J5X9T9RW6j9bNfFoWaDq8fMVxMw.woff2
 - assets/fonts/Noto Serif/ga6Iaw1J5X9T9RW6j9bNfFsWaDq8fMVxMw.woff2
 - assets/js/clipboard.js
+- assets/js/gallery.js
 - assets/js/slides.js
 - assets/js/snackbar.js
 - index.html
-homepage: https://github.com/rzen/jekyll-theme-isabelline
+homepage: https://git.rzen.dev/rzen/jekyll-theme-isabelline
 licenses:
 - MIT
 metadata:
@@ -136,7 +141,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.3
+rubygems_version: 3.2.2
 signing_key: 
 specification_version: 4
 summary: Simple clean mobile-friendly theme for long form note taking. Works for blogging