jekyll-page-asset 0.1.0 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9e67fa350064b585c84d962a4752e3575c2a7f76b8794e3e24a41dbc5711195a
-  data.tar.gz: 2475c4193837a426fafafd2c688c43f3702eeb8091f3346bd7bafe5c7d6177eb
+  metadata.gz: a4bc75d0d43f30ae672d870c5e0a6cf6f59c5d4c5e265defae10c1ecaca01d8c
+  data.tar.gz: a248414dec9ef31592ae271ee6648f6f50ed4d2deb98d1891dd43df1e680515e
 SHA512:
-  metadata.gz: 537867e38701854bac6c6573ffa1f897992f3d6b12bee42014417cb41ec292e7879e2247ad00e16df7533956d222c32dcee621b5f17cb6049dc96ab026faf1ca
-  data.tar.gz: a855b2886668c271a604446ae95fb35232d0b4f5405b26f855510f4ffc9b22f0818ee5e46a8436e7b7056bad89dedac00fa9347c1f0c8994b6b8e83df1a346bc
+  metadata.gz: 02ba586c38e6b1c12116b0b485d7c260fce71ee3d3eb3e8d270e8302fc70ca65990fab037f9f59a632eb602091dbcb7f5b6f2ab001729a2ac84ca35f2d18da70
+  data.tar.gz: 9a76aea336af968aef5452afde8f8dddd314d63b629cea171bae8f0f71fd4bf3d3827be0f7af8a7f70221570cdc5a6a66a7b75b8ce59b8d9dafd73b07ef42eab

data/README.md

@@ -5,7 +5,7 @@ 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.
+The `page_asset` extensible 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.
 
@@ -14,7 +14,7 @@ The intent is to make it easy to add media components into project pages by defi
 
 ## 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.
+Standard image. This delegates to the [jekyll_picture_tag](https://github.com/rbuchberger/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>"] %}`
 
@@ -34,12 +34,16 @@ 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.
+Pass a folder name in the media asset directory and all images in that folder will be displayed in a gallery. Image files in the gallery can also have a 'support file' - a markdown file with the same name as the image. Support files can give a custom `alt` value in frontmatter, and markdown body is displayed as an image description in the lightbox view.
+
 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.
+
+* `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.
 
@@ -101,6 +105,8 @@ end
 ```
 and has the following variables available:
 
+| Argument | Description |
+| :--- | :--- |
 | @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) |

data/_includes/page_asset/gallery.html

@@ -15,6 +15,7 @@
           '<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 class="gallery-lightbox-desc" id="gallery-lightbox-desc">' +
           '</div>' +
           '</div>';
         lightboxMount.setAttribute(MOUNTED_ATTR, "true");
@@ -37,6 +38,7 @@
     function initLightbox() {
       var lightbox = document.getElementById("gallery-lightbox");
       var lightboxImage = document.getElementById("gallery-lightbox-image");
+      var lightboxDesc = document.getElementById("gallery-lightbox-desc");
       var lightboxMount = document.getElementById("page-asset-gallery-lightbox");
       var focusableSelector = ".gallery-controls .gallery-control-button";
 
@@ -86,7 +88,8 @@
           .map(function (thumb) {
             return {
               src: thumb.getAttribute("data-gallery-src"),
-              alt: thumb.getAttribute("data-gallery-alt") || "Gallery image"
+              alt: thumb.getAttribute("data-gallery-alt") || "Gallery image",
+              desc: thumb.getAttribute("data-gallery-desc")
             };
           });
       }
@@ -110,6 +113,7 @@
         var current = state.items[state.index];
         lightboxImage.src = current.src;
         lightboxImage.alt = current.alt;
+        lightboxDesc.innerHTML = current.desc;
         emitState();
       }
 

data/_lib/page_asset/audio_renderer.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "cgi"
+
+module Jekyll
+  module PageAsset
+    class AudioRenderer < Renderer
+      register_type "audio"
+
+      def render(context)
+        audio_path = @target_asset_path
+
+        <<~HTML
+          <audio controls preload="auto" class="page-asset-audio">
+            <source src="/#{html_escape(audio_path)}" type="#{html_escape(mime_type_for(audio_path))}">
+            Your browser does not support the audio tag.
+          </audio>
+        HTML
+      end
+
+      private
+
+      def mime_type_for(path)
+        case File.extname(path).downcase
+        when ".ogg"
+          "audio/ogg"
+        when ".wav"
+          "audio/wav"
+        when ".m4a"
+          "audio/mp4"
+        else
+          "audio/mpeg"
+        end
+      end
+
+      def html_escape(value)
+        CGI.escape_html(value.to_s)
+      end
+    end
+  end
+end

data/_lib/page_asset/gallery_renderer.rb

@@ -22,8 +22,11 @@ module Jekyll
 
         thumbnails = images.each_with_index.map do |filename, index|
           asset_path = File.join(gallery_asset_root, filename)
+          supporting_text = get_supporting_text(context, asset_path)
+
           src = "/#{asset_path}"
-          alt = alt_text_for(filename, index)
+          alt = supporting_text.dig(:args, 'alt') || alt_text_for(filename, index)
+          description = supporting_text.dig(:body)
           picture_tag = render_thumbnail(context, asset_path)
 
           <<~HTML
@@ -35,6 +38,7 @@ module Jekyll
               data-gallery-index="#{index}"
               data-gallery-src="#{html_escape(src)}"
               data-gallery-alt="#{html_escape(alt)}"
+              data-gallery-desc="#{html_escape(description)}"
               aria-label="Open image #{index + 1}">
               #{picture_tag}
             </button>
@@ -70,6 +74,32 @@ module Jekyll
         stem.gsub(/\s+/, " ")
       end
 
+      def get_supporting_text(context, path)
+        # find supporting md file if it exists
+        supporting_md = File.join(File.dirname(path) , File.basename(path, ".*") + ".md")
+        if File.exist?(supporting_md)
+          file_contents = File.read(supporting_md)
+          site = context.registers[:site]
+
+          if file_contents =~ Jekyll::Document::YAML_FRONT_MATTER_REGEXP
+            front_matter_string = $1
+            body_content = $POSTMATCH # Captures everything after the front matter block
+
+            # Parse the front matter string using Jekyll's internal parser
+            front_matter = SafeYAML.load(front_matter_string)
+          else
+            body_content = file_contents
+          end
+
+          return {
+            args: front_matter,
+            body: site.find_converter_instance(Jekyll::Converters::Markdown)
+                  .convert(body_content)
+          }
+        end
+        {}
+      end
+
       def empty_state_html(gallery_id)
         <<~HTML
           <section class="project-gallery" data-gallery="#{html_escape(gallery_id)}" aria-label="Image gallery">

data/_sass/_page-asset.scss

@@ -199,6 +199,10 @@
     }
 }
 
+.gallery-lightbox-desc {
+    margin-top: $spacing-md;
+}
+
 .project-gallery-grid {
     column-count: 3;
     column-gap: $spacing-md;
@@ -282,6 +286,8 @@
     border-radius: $radius-md;
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
+    flex-shrink: 1;
+    min-height: 0;
 }
 
 .gallery-lightbox-button {
@@ -307,3 +313,25 @@ body.gallery-lightbox-open {
         top: $spacing-sm;
     }
 }
+
+// __ Video ___________________________________________________
+.background-video {
+  width: 100%;
+  height: auto;
+}
+
+.foreground-video {
+  width: 100%;
+  height: auto;
+  display: block;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  background: $bg-card;
+  box-shadow: $shadow-card;
+}
+
+// __ Audio ___________________________________________________
+.page-asset-audio {
+  width: 100%;
+  display: block;
+}

data/lib/jekyll-page-asset/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module JekyllPageAsset
-  VERSION = "0.1.0"
+  VERSION = "0.1.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-page-asset
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.3
 platform: ruby
 authors:
 - Alastair King
@@ -62,6 +62,7 @@ files:
 - _includes/page_asset/fountain.html
 - _includes/page_asset/gallery.html
 - _includes/page_asset/scroll_scrub_video.html
+- _lib/page_asset/audio_renderer.rb
 - _lib/page_asset/fountain_renderer.rb
 - _lib/page_asset/gallery_renderer.rb
 - _lib/page_asset/image_renderer.rb