jekyll-page-asset 0.1.0

data/README.md

@@ -0,0 +1,139 @@
+## Run crappy demo site locally
+```
+bundle install
+bundle exec jekyll serve --livereload
+```
+# jekyll-page-asset
+
+The `page_asset` plugin designed for a project portfolio style ( although it might well work with blog/post style layouts) to make it easy to put assets that relate to a page, onto that page.
+
+It's essentially a convenience tag for adding components that reference media files into project pages. The media files are stored in the `assets/project_media/<project-slug>/` folder and can be referenced by just a relative path to that folder.
+
+The intent is to make it easy to add media components into project pages by defining a simple set of the most likely needed. Users should be able to stay in markdown writing flow and not think too much about page structure.
+
+
+## Supported components
+### image
+Standard image. This delegates to the `jekyll_picture_tag` plugin which handles responsive images. Any args past the filename are passed through to that plugin, so you can use any of the options it supports.
+
+`{% page_asset image <image-filename> [alt="<alt-text>"] %}`
+
+### foreground video
+i.e. a video that is embedded in the page and can be played by the user.
+
+`{% page_asset video <video-filename> %}`
+
+### background video
+i.e. video that loads and autoplays muted by default.
+
+`{% page_asset video <video-filename> display=background %}`
+
+### scroll scrub video
+Video that loads muted and advances as the user scrolls the page.
+
+`{% page_asset scroll_scrub_video <video-filename> %}`
+
+### gallery
+Pass a folder name in the media asset directory and all images in that folder will be displayed in a gallery.
+The generated html and script for this will also write tags to two target mount points in the site, if found.
+`project-asset-gallery-lightbox` is the target for the lightbox html. By default this is styled to fill the viewport area of the component that it is mounted in to act as a full area takeover.
+`project-asset-gallery-controls` is the target for the gallery controls - to move to next/previous images and close the lightbox. This appears when the lightbox is open.
+`{% page_asset gallery <gallery-folder-name> %}`
+
+### fountain script reader
+Simple scrollable script reader for [fountain](https://fountain.io/) formatted scripts.
+
+`{% page_asset fountain <fountain-filename> %}`
+
+# Styling
+Page asset components styles are exported by this gem in `_sass/_page-asset.scss`, but this is not a theme gem, so you need to import them manually.
+
+copy `_sass/_page-asset.scss` to your project. You can also update styles in that file to customize the look of the components.
+
+In your project, update your `assets/css/main.scss` to import the page asset styles:
+
+``` scss
+@use "page-asset" as *;
+```
+
+# Configuration
+The plugin can be configured in `_config.yml` with the following options:
+
+``` yaml
+page_asset:
+  asset_root: assets/project_media
+```
+where asset_root is the root folder for all project media assets.
+
+
+# Custom components
+Custom components are defined by adding:
+
+A custom type renderer in `_lib/page_asset/`
+
+OR
+
+A custom html template in `_includes/page_asset/`
+
+
+or both. There are examples each kind in the current supported types.
+
+## Custom renderer
+A custom renderer is a class that inherits from `PageAsset::Renderer`, sets `register_type <type>` and implements a `render(context)` method.
+
+A renderer can directly return html:
+``` ruby
+module Jekyll
+  module PageAsset
+    class DummyRenderer < Renderer
+      register_type 'dummy'
+
+      def render(context)
+        <<~HTML
+            <div style="background-color: red; color: white; padding: 1rem;">
+              full path is #{@target_asset_path}
+            </div>
+        HTML
+      end
+    end
+  end
+end
+```
+and has the following variables available:
+
+| @type | component type string |
+| @asset_path_arg | requested path argument from the tag |
+| @rest | all the rest of the args from the tag (useful for passing through) |
+| @params | A hash of any tag args that were specified like key=value |
+| @target_asset_paths | An array of the full resolved paths to assets (for single files this is an array with one item) |
+| @target_asset_path | convenience - the first item from the above array |
+
+Or it can load a custom html template from `_includes/page_asset/` and pass variables to it. The above variables are available in `include` but you can derive and pass any other variable.
+
+``` ruby
+module Jekyll
+  module PageAsset
+    class DummyRenderer < Renderer
+      register_type 'dummy'
+
+      def render(context)
+        include_vars = build_include_vars(
+          "dummy_string" => @target_asset_path + " is the full path to the asset"
+        )
+        render_template(context, include_vars)
+      end
+    end
+  end
+end
+```
+This is expecting to find a template file `_includes/page_asset/dummy.html`. e.g.:
+
+``` html
+<div style="background-color: red; color: white; padding: 1rem;">
+  {{ include.dummy_string }}
+</div>
+```
+
+If there is no custom renderer, but there is a custom template, the template will be rendered with the above variables available in `include`.
+
+Follow convention to put any styles for the custom component in `_sass/page_asset.scss`.

data/_includes/page_asset/fountain.html

@@ -0,0 +1,13 @@
+<script type="text/fountain" id="script-source">
+{{ include.script_text }}
+</script>
+
+<div class="script-container screenplay" id="script-output"></div>
+<script type="module">
+  import { Fountain } from 'https://cdn.jsdelivr.net/npm/fountain-js/+esm';
+  const sourceText = document.getElementById('script-source').textContent;
+  const fountain = new Fountain();
+  const result = fountain.parse(sourceText);
+  // Render the generated HTML into the output container
+  document.getElementById('script-output').innerHTML = result.html.script;
+</script>

data/_includes/page_asset/gallery.html

@@ -0,0 +1,306 @@
+<script>
+  (function () {
+    var MOUNTED_ATTR = "data-gallery-mounted";
+
+    function mountGallery() {
+      var lightboxMount = document.getElementById("page-asset-gallery-lightbox");
+      var controlsMount = document.getElementById("page-asset-gallery-controls");
+
+      if (lightboxMount && lightboxMount.hasAttribute(MOUNTED_ATTR)) {
+        return;
+      }
+
+      if (lightboxMount) {
+        lightboxMount.innerHTML =
+          '<div class="gallery-lightbox" id="gallery-lightbox" role="dialog" aria-modal="true" aria-label="Image viewer" hidden>' +
+          '<div class="gallery-lightbox-inner" tabindex="-1">' +
+          '<img class="gallery-lightbox-image" id="gallery-lightbox-image" src="" alt="">' +
+          '</div>' +
+          '</div>';
+        lightboxMount.setAttribute(MOUNTED_ATTR, "true");
+      }
+
+      if (controlsMount) {
+        controlsMount.innerHTML =
+          '<div class="gallery-controls" id="gallery-controls" hidden aria-label="Gallery controls">' +
+          '<button class="btn gallery-control-button" type="button" id="gallery-prev" aria-label="Previous image">&lt;&lt;</button>' +
+          '<button class="btn gallery-control-button" type="button" id="gallery-close">Show Thumbnails</button>' +
+          '<button class="btn gallery-control-button" type="button" id="gallery-next" aria-label="Next image">&gt;&gt;</button>' +
+          '</div>';
+        controlsMount.setAttribute(MOUNTED_ATTR, "true");
+      }
+
+      initLightbox();
+      initControls();
+    }
+
+    function initLightbox() {
+      var lightbox = document.getElementById("gallery-lightbox");
+      var lightboxImage = document.getElementById("gallery-lightbox-image");
+      var lightboxMount = document.getElementById("page-asset-gallery-lightbox");
+      var focusableSelector = ".gallery-controls .gallery-control-button";
+
+      if (!lightbox || !lightboxImage) {
+        return;
+      }
+
+      var state = {
+        open: false,
+        galleryId: null,
+        index: 0,
+        items: [],
+        trigger: null
+      };
+
+      function applyVisibleBounds() {
+
+        var rect = lightboxMount.getBoundingClientRect();
+        var left = Math.max(0, rect.left);
+        var top = Math.max(0, rect.top);
+        var right = Math.min(window.innerWidth, rect.right);
+        var bottom = Math.min(window.innerHeight, rect.bottom);
+        var width = Math.max(0, right - left);
+        var height = Math.max(0, bottom - top);
+
+        lightbox.style.left = left + "px";
+        lightbox.style.top = top + "px";
+        lightbox.style.width = width + "px";
+        lightbox.style.height = height + "px";
+      }
+
+      function onViewportChange() {
+        if (!state.open) {
+          return;
+        }
+        applyVisibleBounds();
+      }
+
+      function getGalleryItems(galleryId) {
+        var container = document.querySelector("[data-gallery='" + galleryId + "']");
+        if (!container) {
+          return [];
+        }
+
+        return Array.prototype.slice
+          .call(container.querySelectorAll("[data-gallery-thumb='true']"))
+          .map(function (thumb) {
+            return {
+              src: thumb.getAttribute("data-gallery-src"),
+              alt: thumb.getAttribute("data-gallery-alt") || "Gallery image"
+            };
+          });
+      }
+
+      function emitState() {
+        document.dispatchEvent(new CustomEvent("gallerylightbox:statechange", {
+          detail: {
+            open: state.open,
+            galleryId: state.galleryId,
+            index: state.index,
+            total: state.items.length
+          }
+        }));
+      }
+
+      function renderImage() {
+        if (!state.open || state.items.length === 0) {
+          return;
+        }
+
+        var current = state.items[state.index];
+        lightboxImage.src = current.src;
+        lightboxImage.alt = current.alt;
+        emitState();
+      }
+
+      function focusFirstControl() {
+        var focusable = document.querySelectorAll(focusableSelector);
+        if (focusable.length > 0) {
+          focusable[0].focus();
+          return;
+        }
+
+        var inner = lightbox.querySelector(".gallery-lightbox-inner");
+        if (inner) {
+          inner.focus();
+        }
+      }
+
+      function open(galleryId, index, trigger) {
+        var items = getGalleryItems(galleryId);
+        if (items.length === 0) {
+          return;
+        }
+
+        state.open = true;
+        state.galleryId = galleryId;
+        state.items = items;
+        state.index = Math.max(0, Math.min(index, items.length - 1));
+        state.trigger = trigger || document.activeElement;
+
+        applyVisibleBounds();
+        lightbox.hidden = false;
+        document.body.classList.add("gallery-lightbox-open");
+        renderImage();
+        focusFirstControl();
+      }
+
+      function close() {
+        if (!state.open) {
+          return;
+        }
+
+        var trigger = state.trigger;
+        state.open = false;
+        state.galleryId = null;
+        state.items = [];
+        state.index = 0;
+        state.trigger = null;
+
+        lightbox.hidden = true;
+        lightbox.style.left = "";
+        lightbox.style.top = "";
+        lightbox.style.width = "";
+        lightbox.style.height = "";
+        lightboxImage.src = "";
+        lightboxImage.alt = "";
+        document.body.classList.remove("gallery-lightbox-open");
+        emitState();
+
+        if (trigger && typeof trigger.focus === "function") {
+          trigger.focus();
+        }
+      }
+
+      function goNext() {
+        if (!state.open || state.items.length === 0) {
+          return;
+        }
+
+        state.index = (state.index + 1) % state.items.length;
+        renderImage();
+      }
+
+      function goPrevious() {
+        if (!state.open || state.items.length === 0) {
+          return;
+        }
+
+        state.index = (state.index - 1 + state.items.length) % state.items.length;
+        renderImage();
+      }
+
+      document.addEventListener("click", function (event) {
+        var thumb = event.target.closest("[data-gallery-thumb='true']");
+        if (!thumb) {
+          return;
+        }
+
+        event.preventDefault();
+        open(
+          thumb.getAttribute("data-gallery-id"),
+          Number(thumb.getAttribute("data-gallery-index")) || 0,
+          thumb
+        );
+      });
+
+      lightbox.addEventListener("wheel", function (event) {
+        if (state.open) {
+          event.preventDefault();
+        }
+      }, { passive: false });
+
+      lightbox.addEventListener("touchmove", function (event) {
+        if (state.open) {
+          event.preventDefault();
+        }
+      }, { passive: false });
+
+      document.addEventListener("keydown", function (event) {
+        if (!state.open) {
+          return;
+        }
+
+        if (event.key === "Escape") {
+          event.preventDefault();
+          close();
+          return;
+        }
+
+        if (event.key === "ArrowRight") {
+          event.preventDefault();
+          goNext();
+          return;
+        }
+
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          goPrevious();
+          return;
+        }
+      });
+
+      window.addEventListener("resize", onViewportChange);
+      window.addEventListener("scroll", onViewportChange, { passive: true });
+
+      window.__galleryLightbox = {
+        open: open,
+        close: close,
+        next: goNext,
+        previous: goPrevious,
+        getState: function () {
+          return {
+            open: state.open,
+            galleryId: state.galleryId,
+            index: state.index,
+            total: state.items.length
+          };
+        }
+      };
+
+      emitState();
+    }
+
+    function initControls() {
+      var controls = document.getElementById("gallery-controls");
+      var prevButton = document.getElementById("gallery-prev");
+      var nextButton = document.getElementById("gallery-next");
+      var closeButton = document.getElementById("gallery-close");
+
+      if (!controls || !prevButton || !nextButton || !closeButton) {
+        return;
+      }
+
+      function callLightbox(methodName) {
+        if (!window.__galleryLightbox || typeof window.__galleryLightbox[methodName] !== "function") {
+          return;
+        }
+
+        window.__galleryLightbox[methodName]();
+      }
+
+      prevButton.addEventListener("click", function () {
+        callLightbox("previous");
+      });
+
+      nextButton.addEventListener("click", function () {
+        callLightbox("next");
+      });
+
+      closeButton.addEventListener("click", function () {
+        callLightbox("close");
+      });
+
+      document.addEventListener("gallerylightbox:statechange", function (event) {
+        var isOpen = Boolean(event.detail && event.detail.open);
+        controls.hidden = !isOpen;
+      });
+    }
+
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", mountGallery);
+    } else {
+      mountGallery();
+    }
+  })();
+</script>

data/_includes/page_asset/scroll_scrub_video.html

@@ -0,0 +1,242 @@
+<div
+  class="scroll-scrub-sticky-container"
+  style="position: relative; width: 100%;"
+  data-pixels-per-second="{{ include.pixels_per_second }}"
+  data-sticky-top="{{ include.sticky_top }}"
+>
+  <div class="scroll-scrub-sticky-inner" style="position: sticky; top: 0; width: 100%;">
+    <video class="scroll-scrub" style="display: block; width: 100%; height: auto;" muted playsinline preload="auto">
+      <source src="{{ include.video_path | relative_url }}" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+  </div>
+</div>
+
+<script>
+  (function () {
+    if (window.__scrollScrubStickyInitialized) {
+      if (typeof window.__scrollScrubStickyRebuild === 'function') {
+        window.__scrollScrubStickyRebuild();
+      }
+      return;
+    }
+
+    window.__scrollScrubStickyInitialized = true;
+
+    var updateQueued = false;
+    var controllers = [];
+
+    function isSeekableVideo(video) {
+      return Number.isFinite(video.duration) && video.duration > 0;
+    }
+
+    function clamp(value, min, max) {
+      return Math.min(Math.max(value, min), max);
+    }
+
+    function requestVideoSeek(video, targetTime) {
+      if (!isSeekableVideo(video) || !Number.isFinite(targetTime)) return;
+
+      var clampedTarget = clamp(targetTime, 0, video.duration);
+      video._scrubTargetTime = clampedTarget;
+
+      if (video._scrubSeeking) return;
+
+      var currentTarget = video._scrubTargetTime;
+      if (typeof currentTarget !== 'number') return;
+      if (Math.abs(video.currentTime - currentTarget) < 0.001) return;
+
+      video._scrubSeeking = true;
+      if (typeof video.fastSeek === 'function') {
+        video.fastSeek(currentTarget);
+      } else {
+        video.currentTime = currentTarget;
+      }
+    }
+
+    function onVideoSeeked(video) {
+      video._scrubSeeking = false;
+
+      var target = video._scrubTargetTime;
+      if (typeof target !== 'number') return;
+
+      if (Math.abs(video.currentTime - target) >= 0.01) {
+        requestVideoSeek(video, target);
+      }
+    }
+
+    function getRenderedVideoHeight(video) {
+      var rect = video.getBoundingClientRect();
+      if (rect.height > 0) return rect.height;
+
+      if (video.videoWidth > 0 && video.videoHeight > 0) {
+        var parent = video.parentElement;
+        var width = rect.width
+          || video.clientWidth
+          || video.offsetWidth
+          || (parent ? (parent.clientWidth || parent.offsetWidth) : 0)
+          || 0;
+        if (width > 0) {
+          return width * (video.videoHeight / video.videoWidth);
+        }
+      }
+
+      return 0;
+    }
+
+    function getDocumentHeight() {
+      var body = document.body;
+      var docEl = document.documentElement;
+      if (!body || !docEl) return 0;
+
+      return Math.max(
+        body.scrollHeight,
+        body.offsetHeight,
+        docEl.clientHeight,
+        docEl.scrollHeight,
+        docEl.offsetHeight
+      );
+    }
+
+    function computeEffectiveStickyTop(controller, renderedHeight) {
+      if (!Number.isFinite(renderedHeight) || renderedHeight <= 0) {
+        return controller.stickyTop;
+      }
+
+      var containerRect = controller.container.getBoundingClientRect();
+      var scrollY = window.pageYOffset || window.scrollY || 0;
+      var containerBottomInDocument = containerRect.bottom + scrollY;
+      var documentHeight = getDocumentHeight();
+      var trailingContent = Math.max(0, documentHeight - containerBottomInDocument);
+      var requiredStickyTop = window.innerHeight - renderedHeight - trailingContent;
+
+      return Math.max(controller.stickyTop, requiredStickyTop);
+    }
+
+    function ensureControllers() {
+      var containers = Array.prototype.slice.call(document.querySelectorAll('.scroll-scrub-sticky-container'));
+
+      for (var i = 0; i < containers.length; i += 1) {
+        var container = containers[i];
+        var known = false;
+        for (var c = 0; c < controllers.length; c += 1) {
+          if (controllers[c].container === container) {
+            known = true;
+            break;
+          }
+        }
+        if (known) continue;
+
+        var inner = container.querySelector('.scroll-scrub-sticky-inner');
+        var video = container.querySelector('video.scroll-scrub');
+        if (!inner || !video) continue;
+
+        var pixelsPerSecond = parseFloat(container.getAttribute('data-pixels-per-second'));
+        if (!Number.isFinite(pixelsPerSecond) || pixelsPerSecond <= 0) {
+          pixelsPerSecond = 50;
+        }
+
+        var stickyTop = parseFloat(container.getAttribute('data-sticky-top'));
+        if (!Number.isFinite(stickyTop)) {
+          stickyTop = parseFloat(window.getComputedStyle(inner).top) || 120;
+        }
+        inner.style.top = stickyTop + 'px';
+
+        controllers.push({
+          container: container,
+          inner: inner,
+          video: video,
+          pixelsPerSecond: pixelsPerSecond,
+          extraHeight: 0,
+          stickyTop: stickyTop,
+          effectiveStickyTop: stickyTop,
+        });
+
+
+
+        video.pause();
+        video._scrubSeeking = false;
+        video._scrubTargetTime = 0;
+        video.addEventListener('loadedmetadata', rebuildControllers);
+        video.addEventListener('loadedmetadata', function () {
+
+        });
+        video.addEventListener('loadeddata', function () {
+
+        });
+        video.addEventListener('canplay', function () {
+
+        });
+        video.addEventListener('error', function () {
+          var mediaError = video.error;
+
+        });
+        video.addEventListener('seeked', (function (boundVideo) {
+          return function () {
+            onVideoSeeked(boundVideo);
+          };
+        })(video));
+
+        if (video.readyState === 0 && typeof video.load === 'function') {
+          video.load();
+        }
+      }
+    }
+
+    function rebuildControllers() {
+      ensureControllers();
+
+      for (var i = 0; i < controllers.length; i += 1) {
+        var controller = controllers[i];
+        var renderedHeight = getRenderedVideoHeight(controller.video);
+        var extraHeight = isSeekableVideo(controller.video)
+          ? Math.max(0, Math.round(controller.video.duration * controller.pixelsPerSecond))
+          : 0;
+
+        controller.extraHeight = extraHeight;
+        if (renderedHeight > 0) {
+          controller.effectiveStickyTop = computeEffectiveStickyTop(controller, renderedHeight);
+          controller.container.style.height = (renderedHeight + extraHeight) + 'px';
+          controller.inner.style.height = renderedHeight + 'px';
+
+        } else {
+          controller.effectiveStickyTop = controller.stickyTop;
+
+        }
+      }
+
+      queueApply();
+    }
+
+    function applyFromWindowScroll() {
+      for (var i = 0; i < controllers.length; i += 1) {
+        var controller = controllers[i];
+        if (controller.extraHeight <= 0 || !isSeekableVideo(controller.video)) continue;
+
+        var containerRect = controller.container.getBoundingClientRect();
+        var clampedProgress = clamp(controller.effectiveStickyTop - containerRect.top, 0, controller.extraHeight);
+
+        var targetTime = (clampedProgress / controller.extraHeight) * controller.video.duration;
+        requestVideoSeek(controller.video, targetTime);
+      }
+    }
+
+    function queueApply() {
+      if (updateQueued) return;
+      updateQueued = true;
+
+      window.requestAnimationFrame(function () {
+        updateQueued = false;
+        applyFromWindowScroll();
+      });
+    }
+
+    window.__scrollScrubStickyRebuild = rebuildControllers;
+
+    window.addEventListener('scroll', queueApply, { passive: true });
+    window.addEventListener('resize', rebuildControllers);
+    window.addEventListener('load', rebuildControllers);
+
+    rebuildControllers();
+  })();
+</script>