Replace speakerdeck embed with image slider

Gemfile

@@ -2,3 +2,4 @@
 source "https://rubygems.org"
 
 gem "github-pages"
+gem "webrick"

Gemfile.lock

@@ -1,21 +1,21 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (6.0.4.6)
+    activesupport (6.0.5.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
       zeitwerk (~> 2.2, >= 2.2.2)
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
+    addressable (2.8.1)
+      public_suffix (>= 2.0.2, < 6.0)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
     coffee-script-source (1.11.1)
     colorator (1.1.0)
-    commonmarker (0.23.4)
-    concurrent-ruby (1.1.9)
+    commonmarker (0.23.5)
+    concurrent-ruby (1.1.10)
     dnsruby (1.61.9)
       simpleidn (~> 0.1)
     em-websocket (0.5.3)
@@ -25,35 +25,16 @@ GEM
       ffi (>= 1.15.0)
     eventmachine (1.2.7)
     execjs (2.8.1)
-    faraday (1.10.0)
-      faraday-em_http (~> 1.0)
-      faraday-em_synchrony (~> 1.0)
-      faraday-excon (~> 1.1)
-      faraday-httpclient (~> 1.0)
-      faraday-multipart (~> 1.0)
-      faraday-net_http (~> 1.0)
-      faraday-net_http_persistent (~> 1.0)
-      faraday-patron (~> 1.0)
-      faraday-rack (~> 1.0)
-      faraday-retry (~> 1.0)
+    faraday (2.5.2)
+      faraday-net_http (>= 2.0, < 3.1)
       ruby2_keywords (>= 0.0.4)
-    faraday-em_http (1.0.0)
-    faraday-em_synchrony (1.0.0)
-    faraday-excon (1.1.0)
-    faraday-httpclient (1.0.1)
-    faraday-multipart (1.0.3)
-      multipart-post (>= 1.2, < 3)
-    faraday-net_http (1.0.1)
-    faraday-net_http_persistent (1.2.0)
-    faraday-patron (1.0.0)
-    faraday-rack (1.0.0)
-    faraday-retry (1.0.3)
+    faraday-net_http (3.0.0)
     ffi (1.15.5)
     forwardable-extended (2.6.0)
     gemoji (3.0.1)
-    github-pages (225)
+    github-pages (227)
       github-pages-health-check (= 1.17.9)
-      jekyll (= 3.9.0)
+      jekyll (= 3.9.2)
       jekyll-avatar (= 0.7.0)
       jekyll-coffeescript (= 1.1.1)
       jekyll-commonmark-ghpages (= 0.2.0)
@@ -88,12 +69,12 @@ GEM
       jekyll-theme-time-machine (= 0.2.0)
       jekyll-titles-from-headings (= 0.5.3)
       jemoji (= 0.12.0)
-      kramdown (= 2.3.1)
+      kramdown (= 2.3.2)
       kramdown-parser-gfm (= 1.1.0)
       liquid (= 4.0.3)
       mercenary (~> 0.3)
       minima (= 2.5.1)
-      nokogiri (>= 1.12.5, < 2.0)
+      nokogiri (>= 1.13.6, < 2.0)
       rouge (= 3.26.0)
       terminal-table (~> 1.4)
     github-pages-health-check (1.17.9)
@@ -102,13 +83,13 @@ GEM
       octokit (~> 4.0)
       public_suffix (>= 3.0, < 5.0)
       typhoeus (~> 1.3)
-    html-pipeline (2.14.0)
+    html-pipeline (2.14.2)
       activesupport (>= 2)
       nokogiri (>= 1.4)
     http_parser.rb (0.8.0)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    jekyll (3.9.0)
+    jekyll (3.9.2)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -216,7 +197,7 @@ GEM
       gemoji (~> 3.0)
       html-pipeline (~> 2.2)
       jekyll (>= 3.0, < 5.0)
-    kramdown (2.3.1)
+    kramdown (2.3.2)
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
@@ -225,22 +206,19 @@ GEM
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.3.6)
-    mini_portile2 (2.8.0)
     minima (2.5.1)
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
-    minitest (5.15.0)
-    multipart-post (2.1.1)
-    nokogiri (1.13.6)
-      mini_portile2 (~> 2.8.0)
+    minitest (5.16.3)
+    nokogiri (1.13.8-arm64-darwin)
       racc (~> 1.4)
-    octokit (4.22.0)
-      faraday (>= 0.9)
-      sawyer (~> 0.8.0, >= 0.5.3)
+    octokit (4.25.1)
+      faraday (>= 1, < 3)
+      sawyer (~> 0.9)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (4.0.6)
+    public_suffix (4.0.7)
     racc (1.6.0)
     rb-fsevent (0.11.1)
     rb-inotify (0.10.1)
@@ -255,9 +233,9 @@ GEM
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sawyer (0.8.2)
+    sawyer (0.9.2)
       addressable (>= 2.3.5)
-      faraday (> 0.8, < 2.0)
+      faraday (>= 0.17.3, < 3)
     simpleidn (0.2.1)
       unf (~> 0.1.4)
     terminal-table (1.8.0)
@@ -269,15 +247,17 @@ GEM
       thread_safe (~> 0.1)
     unf (0.1.4)
       unf_ext
-    unf_ext (0.0.8)
+    unf_ext (0.0.8.2)
     unicode-display_width (1.8.0)
-    zeitwerk (2.5.4)
+    webrick (1.7.0)
+    zeitwerk (2.6.0)
 
 PLATFORMS
-  ruby
+  arm64-darwin-21
 
 DEPENDENCIES
   github-pages
+  webrick
 
 BUNDLED WITH
-   2.1.4
+   2.3.20

_layouts/default.html

@@ -11,13 +11,15 @@
     <![endif]-->
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/isa.css">
+    <link rel="stylesheet" href="css/slider.css">
     <script defer data-domain="isa-principles.org" src="https://plausible.io/js/plausible.js"></script>
+    <script type="module" src="js/custom-elements.js"></script>
   </head>
   <body>
-    <a href="https://github.com/ISA-Principles/isa-principles.org/" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+    <a href="https://github.com/ISA-Principles/isa-principles.org" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
     <div class="container">
       <div class="row">
-        <div class="nine columns">
+        <div class="twelve columns">
 
           <header class="main">
             <h1 class="head u-cf">
@@ -60,11 +62,11 @@ <h1 class="head u-cf">
             <div class="row">
               <div class="license-icons two columns">
                 <a rel="sponsor" href="https://www.innoq.com/">
-                  <img alt="innoQ" width="60px" src="./img/innoq-logo--bluered.svg"/>
+                  <img alt="INNOQ" width="60px" src="./img/innoq-logo--petrolapricot.svg"/>
                 </a>
               </div>
               <p class="license-text ten columns">
-                This website is supported by <a rel="sponsor" href="https://www.innoq.com/">innoQ</a>.
+                This website is supported by <a rel="sponsor" href="https://www.innoq.com/">INNOQ</a>.
               </p>
             </div>
           </footer>

css/slider.css

@@ -0,0 +1,78 @@
+.slider {
+    display: block;
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+  }
+
+  .slider__all {
+    position: relative;
+    display: flex;
+    margin: 0;
+  }
+
+  .slider__slide {
+    display: block;
+    flex: 0 0 100%;
+    scroll-snap-align: center;
+  }
+
+  .slider__page {
+    border-width: 0.5px;
+    border-style: solid;
+    border-color: lightgrey;
+    margin-bottom: 0;
+    line-height: 0;
+  }
+
+  .slider__image {
+    max-width: 100%;
+  }
+
+  .slider:focus {
+    outline: 4px solid rgb(247, 247, 247);
+  }
+
+  .page__number__box {
+    position: absolute;
+    top: 5%;
+    width: 4%;
+    margin-left: 87%;
+  }
+
+  .page__number { 
+    display: inline-block;
+    background: rgba(247, 247, 247, 0.7);
+    font-size: 1.25rem;
+  }
+
+  .instructions--hover,
+  .instructions--focus,
+  .instructions--hover-and-focus,
+  .instructions--touch {
+    display: none;
+    /* font-size: $font-size-base; */
+  }
+
+  .slider__instructions {
+    margin-top: 1rem;
+    text-align: center;
+  }
+
+  .slider:focus:not(:hover)+.slider__instructions .instructions--focus,
+  .slider:hover:not(:focus)+.slider__instructions .instructions--hover {
+    display: block;
+  }
+
+  .slider:hover:focus+.slider__instructions .instructions--hover-and-focus {
+    display: block;
+  }
+
+  .instructions--touch-active .instructions__no-touch {
+    /* stylelint-disable-next-line */
+    display: none !important;
+  }
+
+  .instructions--touch-active .slider__instructions .instructions--touch {
+    display: block;
+  }
+

index.md

@@ -17,9 +17,36 @@ avoided and the promised benefits of microservices are achieved.
 
 However, ISA principles don't always apply - see the [FAQ](https://isa-principles.org/faq.html#is-isa-finally-the-silver-bullet-we-have-all-been-waiting-for) for details.
 
-<script async class="speakerdeck-embed" data-id="bfc13f5bca9141668ff6fbe603137216" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
+<touch-detection>
+	<div class="slider" role="region" aria-label="Slides" tabindex="0" aria-describedby="slider-instructions">
+		<ul class="slider__all">
+			{% for y in (1..33) %}
+			<li class="slider__slide">
+				<figure class="slider__page">
+					<img src="https://res.cloudinary.com/innoq/image/upload/w_960,dpr_2.0,q_auto/pg_{{y}}/v1661329003/isa-principles.org/ISA_gtirn4.webp" style="max-width: 100%;" />
+					<figcaption class="page__number__box">
+						<svg class="page__number" viewBox="0 0 45 30" version="1.1" baseProfile="full" xmlns="https://www.w3.org/2000/svg">
+							<text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle">{{y}}/33</text>
+						</svg>
+					</figcaption>
+				</figure>
+			</li>
+			{% endfor %}
+		</ul>
+	</div>
+	<div class="slider__instructions">
+		<p class="instructions--touch">Swipe left to see more slides</p>
+		<div class="instructions__no-touch">
+			<p class="instructions--hover-and-focus">Scroll or use arrow keys to see more slides</p>
+			<p class="instructions--hover">Scroll to see more slides</p>
+			<p class="instructions--focus">Use arrow keys to see more slides</p>
+		</div>
+	</div>
+</touch-detection>
 
-[Speaker Deck](https://speakerdeck.com/isaprinciples/isa-principles) [PowerPoint](./slidedeck/ISA.pptx)
+* [Speaker Deck](https://speakerdeck.com/isaprinciples/isa-principles) 
+* [PowerPoint](./slidedeck/ISA.pptx)
+* [PDF](https://res.cloudinary.com/innoq/image/upload/v1661329003/isa-principles.org/ISA_gtirn4.pdf)
 
 ## Terms
 

js/custom-elements.js

@@ -0,0 +1,10 @@
+export default class TouchDetection extends HTMLElement {
+    connectedCallback () {
+        window.addEventListener('touchstart', function touched () {
+            document.body.classList.add('instructions--touch-active')
+            window.removeEventListener('touchstart', touched, false)
+        }, false)
+    }
+}
+
+customElements.define('touch-detection', TouchDetection)