add play button for gallery

Gemfile

@@ -6,7 +6,7 @@ gemspec
 
 group :jekyll_plugins do
   gem 'jekyll-tidy'
-  gem 'jekyll-tagging'
+  # gem 'jekyll-tagging'
   gem 'jekyll-mentions'
   gem 'jekyll-sitemap'
   gem 'jekyll-feed'

_config.yaml

@@ -101,7 +101,7 @@ defaults:
 plugins:
   - rouge
   - jekyll-tidy
-  - jekyll/tagging
+  # - jekyll-tagging
   - jekyll-mentions
   - jekyll-sitemap
   - jekyll-feed

_includes/gallery.html

@@ -15,10 +15,15 @@
 			{% if image_extensions contains image_ext %}
 				{% if image_path contains gallery_prefix %}
 					{% assign image_index = image_index | plus: 1 %}
-					<img id="{{ gallery_name}}-{{ image_index }}" src="{{ site.baseurl }}{{ image_path }}" />
+					<img id="{{ gallery_name }}-{{ image_index }}" src="{{ site.baseurl }}{{ image_path }}" />
 				{% endif %}
 			{% endif %}
 		{% endfor %}
 	</div>
-	<nav></nav>
+	<nav>
+		<div class="play">
+			<input type="checkbox" value="" id="{{ gallery_name }}-play" />
+			<label for="{{ gallery_name }}-play"></label>
+		</div>
+	</nav>
 </div>

_sass/_isabelline.scss

@@ -252,7 +252,7 @@ main {
 				cursor: pointer;
 				border-radius: 6px;
 				display: none;
-				transition: all .3s ease;
+				transition: all 300ms ease;
 			}
 			
 			img:first-child {
@@ -271,13 +271,44 @@ main {
 				width: 1rem;
 				height: 1rem;
 				border-radius: .5rem;
-				transition: all .3s ease;
+				transition: all 300ms ease;
 				background-color: hsl($hue,10,80);
 				&.selected {
 					background-color: hsl($hue,50,40);
 				}
 			}
+			.play {
+				label {
+					margin: .5rem;
+
+					display: inline-block;
+
+					box-sizing: border-box;
+
+					width: 0;
+					height: .5rem;
+
+					cursor: pointer;
+
+					border-color: transparent transparent transparent #202020;
+					transition: 300ms all ease;
+					will-change: border-width;
+
+					// paused state
+					border-style: double;
+					border-width: 0 0 0 .5rem;
+				}
+				input[type='checkbox'] {
+					visibility: hidden;
+					&:checked + label {
+						border-style: solid;
+						border-width: .3rem 0 .3rem .5rem;
+					}
+				}
+			}
 		}
+
+
 	}
 
 	div.gallery + p {

assets/js/gallery.js

@@ -38,9 +38,10 @@
 			navHtml += '<i class="' + (i===0? 'selected' : '') + '" data-target="' + image.id + '"></i>'
 		}
 
-		gallery_nav.innerHTML = navHtml;
+		gallery_nav.innerHTML += navHtml;
 
 		navs = gallery_nav.querySelectorAll('i');
+
 		for (var i=0; i<navs.length; ++i) {
 			var nav = navs[i];
 			nav.addEventListener('click', nav_to_image)

docker-compose.yaml

@@ -5,61 +5,60 @@ services:
 
   serve:
     container_name: isabelline-serve
-    image: docker.rzen.dev/jekyll-serve
-    # command: jekyll serve --host 0.0.0.0 --future --draft --force_polling --livereload
+    image: jekyll/jekyll:4
+    command: jekyll serve --host 0.0.0.0 --future --draft --force_polling --livereload
     environment:
       JEKYLL_ENV: local
     ports:
       - 4000:4000
       - 35729:35729
     volumes:
-      - .:/site
+      - .:/srv/jekyll
       - .bundle:/usr/local/bundle
 
   # build and push to rubygems.org
 
   gem-push:
     container_name: jekyll-gem-push
-    image: docker.rzen.dev/jekyll
-    command: |
-      bash -c "gem build -v jekyll-theme-isabelline.gemspec 
-        && GEM_VER=`ruby -e '
-          require \"rubygems\"; 
-          spec = Gem::Specification::load(\"jekyll-theme-isabelline.gemspec\"); 
-          puts \"#{spec.version}\"'` 
+    image: jekyll/jekyll:4
+    command: >
+      bash -c "gem build -v jekyll-theme-isabelline.gemspec \
+        && GEM_VER=`ruby -e '\
+          require \"rubygems\"; \
+          spec = Gem::Specification::load(\"jekyll-theme-isabelline.gemspec\"); \
+          puts \"#{spec.version}\"'` \
         && gem push jekyll-theme-isabelline-$${GEM_VER}.gem
       "
     volumes:
-      - .:/site
+      - .:/srv/jekyll
       - .bundle:/usr/local/bundle
-      - ./.gem:/root/.gem
+      - .gem:/root/.gem
 
   # helpers
 
   jekyll:
     container_name: jekyll
-    image: docker.rzen.dev/jekyll
+    image: jekyll/jekyll:4
     entrypoint: jekyll
     environment:      
       JEKYLL_ENV: local
     volumes:
+      - .:/srv/jekyll
       - .bundle:/usr/local/bundle
-      - .:/site
 
   gem:
     container_name: jekyll-gem
-    image: docker.rzen.dev/jekyll
+    image: jekyll/jekyll:4
     entrypoint: gem
     volumes:
+      - .:/srv/jekyll
       - .bundle:/usr/local/bundle
-      - .:/site
-      - ./.gem:/root/.gem
 
   bundle:
     container_name: bundle
-    image: jekyll/jekyll:4
+    image: jekyll/jekyll:4.0
     entrypoint: bundle
     volumes:
+      - .:/srv/jekyll
       - .bundle:/usr/local/bundle
-      - .:/site
-      - ./.gem:/root/.gem
+      - .gem:/root/.gem

jekyll-theme-isabelline.gemspec

@@ -19,4 +19,4 @@ Gem::Specification.new do |spec|
   # TODO: jekyll ver should be same as image in docker-compose.yaml
   spec.add_runtime_dependency "jekyll", ">= 3.5", "< 5.0"
   spec.add_development_dependency "bundler", "~> 2.1.0"
-end
+end