jekyll-gis-blogger 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bd212331e34487d24a2802da86fa54d28bffa6f26c5f0440f207af631c1ce903
-  data.tar.gz: 1dbdd9262bd39aca7ed6606e0dd3f173d6a749bd3d8e6fb51e4c5611d4301dee
+  metadata.gz: 14d2d7374cb2a5ba1b1eb5ba7a5b059c815b1e73a2812b029bd4c5784348c695
+  data.tar.gz: 3be74020a0be66f0e87dd07426660d2ffb46f357f84cced4bfeccfe99c6fe229
 SHA512:
-  metadata.gz: 7e26717d20db332f2d524a5a9af47dff8ed36171b274224d915022655e958adc7f4d07b68ae639132beb3453590a049aa70e3326883f4e813844c948911e28c8
-  data.tar.gz: f6292967d9c18128a78040eede0df12f6b716135b71052a4eecb8513363ea0d70bfd57e4d7cfefa1056e60278710be8f1fff642d03590665ecf4b25f4b3d67fc
+  metadata.gz: 82b168f443558288708b4eeb70b9eec70cf50a8fb72020bd11968798b5def3bb57e8fd750094afc8cbca5041b131744fba70308e62bcd3d70a476c3124022d2d
+  data.tar.gz: 101157567275c605066bff5ad0ba9a9e3bbd3b2eb145c47cd6d6256989e957c9857e49433db272b38ed9b8e85428d6caea3d89293af0519c0b2bb26c4f8f4e29

data/README.md

@@ -85,10 +85,11 @@ Options: `height="600px" width="80%" options='{"calculate_zoom":false}'`
 | `overview` | `1`/`true` for intro/title slide |
 | `lat`, `lon` | CSV only; GeoJSON uses Point geometry |
 
-#### Required assets
+#### Bundled assets
 
-- `assets/css/storymap.css`
-- `assets/js/storymap-min.js`
+Shipped with the gem and copied into your build automatically at
+`assets/gis-blogger/css/storymap.css` and `assets/gis-blogger/js/storymap-min.js`.
+Nothing to copy by hand.
 
 ### `{% lungkui %}` — lungkui.js MapLibre scrollytelling
 
@@ -112,11 +113,11 @@ Mode `deck` (default) uses arrow keys/click — no page scroll needed. Mode `scr
 
 Same GeoJSON field names as storymap (`headline`, `text`, `media`, `caption`, `credit`, `zoom`, `order`, `overview`). Coordinates from Point geometry.
 
-#### Required assets
+#### Bundled assets
 
-- `assets/js/lungkui.js`
-- `assets/css/lungkui.css`
-- MapLibre GL JS loaded from CDN automatically
+`assets/gis-blogger/js/lungkui.js` and `assets/gis-blogger/css/lungkui.css` ship
+with the gem and are copied into your build automatically. MapLibre GL JS is
+loaded from CDN. Nothing to copy by hand.
 
 ### `{% gpx_track %}` — GPX track + elevation profile
 

data/lib/jekyll-gis-blogger/assets.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Jekyll
+  module GisBlogger
+    # Ships the gem's own JS/CSS with every Jekyll build.
+    #
+    # The storymap and lungkui tags need local assets (StoryMapJS + lungkui.js).
+    # Rather than making each project copy them by hand, we register them as
+    # Jekyll static files so they are emitted into <dest>/assets/gis-blogger/...
+    # automatically. Namespaced under /assets/gis-blogger/ so a site's own
+    # /assets/ is never touched.
+    module Assets
+      # <gem>/lib/jekyll-gis-blogger/vendor
+      VENDOR_ROOT = File.expand_path("vendor", __dir__)
+
+      # dir (URL path, mirrored on disk under VENDOR_ROOT) => filenames
+      FILES = {
+        "/assets/gis-blogger/js"  => %w[storymap-min.js lungkui.js],
+        "/assets/gis-blogger/css" => %w[storymap.css lungkui.css]
+      }.freeze
+
+      # ponytail: always copies all four (~370KB) even if a page uses none —
+      # usage isn't known at :post_read. Browsers only fetch what a tag references,
+      # so the cost is disk in _site, not bandwidth. Fine until it isn't.
+      Jekyll::Hooks.register :site, :post_read do |site|
+        FILES.each do |dir, names|
+          names.each do |name|
+            already = site.static_files.any? { |f| f.relative_path == File.join(dir, name) }
+            next if already
+
+            site.static_files << Jekyll::StaticFile.new(site, VENDOR_ROOT, dir, name)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/jekyll-gis-blogger/tags/lungkui.rb

@@ -42,14 +42,16 @@ module Jekyll
           div_id = "lungkui-map-#{count}"
 
           config_js = build_config_arg(site, baseurl)
-          assets    = inject_assets_once(page, baseurl)
+          return warn_html("needs one of: geojson= | config=") unless config_js
+
+          assets = inject_assets_once(page, baseurl)
 
           [
             assets,
             %(<div id="#{div_id}" class="lk-root lk-embed" ) +
               %(style="position:relative;width:#{width};height:#{height};"></div>),
             %(<script type="module">),
-            %(import { Lungkui } from '#{baseurl}/assets/js/lungkui.js';),
+            %(import { Lungkui } from '#{baseurl}/assets/gis-blogger/js/lungkui.js';),
             %(new Lungkui('##{div_id}', #{config_js});),
             %(</script>)
           ].join("\n")
@@ -62,11 +64,14 @@ module Jekyll
             inline(parse_config(site, @attrs["config"]))
           elsif @attrs["geojson"]
             inline(build_config(site, baseurl))
-          else
-            raise ArgumentError, "{% lungkui %} needs one of: geojson= | config="
           end
         end
 
+        def warn_html(reason)
+          Jekyll.logger.warn "lungkui:", reason
+          "<!-- lungkui: #{reason} -->"
+        end
+
         def build_config(site, baseurl)
           geojson_path = @attrs["geojson"]
           slides = slides_from_geojson(read_source(site, geojson_path))
@@ -159,7 +164,7 @@ module Jekyll
           page["lungkui_assets_injected"] = true
           [
             %(<link rel="stylesheet" href="#{MAPLIBRE_CSS}">),
-            %(<link rel="stylesheet" href="#{baseurl}/assets/css/lungkui.css">),
+            %(<link rel="stylesheet" href="#{baseurl}/assets/gis-blogger/css/lungkui.css">),
             %(<script src="#{MAPLIBRE_JS}"></script>)
           ].join("\n")
         end

data/lib/jekyll-gis-blogger/tags/map.rb

@@ -91,7 +91,9 @@ module Jekyll
         end
 
         def escape_js(text)
-          text.to_s.gsub("\\", "\\\\").gsub("'", "\\'").gsub("\n", " ")
+          # Block form avoids gsub's replacement-string backreferences
+          # (a literal "\\'" replacement means post-match, not an escaped quote).
+          text.to_s.gsub(/[\\'\r\n]/) { |c| c == "\n" || c == "\r" ? " " : "\\#{c}" }
         end
       end
     end

data/lib/jekyll-gis-blogger/tags/storymap.rb

@@ -33,7 +33,9 @@ module Jekyll
           js_var = "storymapMap#{count}"
 
           data_arg = build_data_arg(site, baseurl)
-          assets   = inject_assets_once(page, baseurl)
+          return warn_html("needs one of: data= | geojson= | csv=") unless data_arg
+
+          assets = inject_assets_once(page, baseurl)
 
           [
             assets,
@@ -55,11 +57,14 @@ module Jekyll
           elsif @attrs["data"]
             url = absolute?(@attrs["data"]) ? @attrs["data"] : "#{baseurl}#{@attrs['data']}"
             "'#{url}'"
-          else
-            raise ArgumentError, "{% storymap %} needs one of: data= | geojson= | csv="
           end
         end
 
+        def warn_html(reason)
+          Jekyll.logger.warn "storymap:", reason
+          "<!-- storymap: #{reason} -->"
+        end
+
         def build_object(slides)
           { "storymap" => { "slides" => slides } }
         end
@@ -119,8 +124,8 @@ module Jekyll
 
           page["storymap_assets_injected"] = true
           [
-            "<link rel=\"stylesheet\" href=\"#{baseurl}/assets/css/storymap.css\">",
-            "<script type=\"text/javascript\" src=\"#{baseurl}/assets/js/storymap-min.js\"></script>"
+            "<link rel=\"stylesheet\" href=\"#{baseurl}/assets/gis-blogger/css/storymap.css\">",
+            "<script type=\"text/javascript\" src=\"#{baseurl}/assets/gis-blogger/js/storymap-min.js\"></script>"
           ].join("\n")
         end
       end

data/lib/jekyll-gis-blogger/vendor/assets/gis-blogger/css/lungkui.css

@@ -0,0 +1,139 @@
+:root {
+  --lk-accent: #e4572e;
+  --lk-panel-bg: #ffffff;
+  --lk-text: #111111;
+  --lk-font: Georgia, serif;
+  --lk-panel-width: 360px;
+}
+.lk-root { position: relative; }
+
+/* ponytail: fixed map fills the viewport for full-page stories; an embedded
+   (non-full-page) mount needs a sticky wrapper instead — add when needed. */
+.lk-map { position: fixed; inset: 0; }
+.lk-map .maplibregl-map { position: absolute; inset: 0; }
+.lk-slides { position: relative; z-index: 1; }
+
+/* Scroll mode: panels flow over a fixed map. Side padding keeps panels
+   clear of the edge arrows. */
+.lk-slide {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  padding: 0 80px;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+.lk-slide--left   { justify-content: flex-start; }
+.lk-slide--right  { justify-content: flex-end; }
+.lk-slide--center { justify-content: center; }
+.lk-slide--full   { justify-content: center; }
+
+.lk-slide__panel {
+  pointer-events: auto;
+  width: var(--lk-panel-width);
+  max-width: 90vw;
+  padding: 1.5rem 1.75rem;
+  background: var(--lk-panel-bg);
+  color: var(--lk-text);
+  font-family: var(--lk-font);
+  border-radius: 6px;
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
+  line-height: 1.6;
+}
+.lk-slide--full .lk-slide__panel { width: 620px; text-align: center; }
+.lk-slide__panel h2 {
+  margin: 0 0 0.6rem;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 1.7rem;
+  font-weight: 700;
+  line-height: 1.15;
+  color: var(--lk-accent);
+}
+.lk-slide__panel p { margin: 0.6rem 0; }
+.lk-slide__panel a { color: var(--lk-accent); }
+.lk-media { margin: 1rem 0 0; }
+.lk-media img { width: 100%; border-radius: 4px; }
+.lk-media figcaption { font-size: 0.8rem; opacity: 0.75; margin-top: 0.35rem; }
+
+/* Deck mode: one active panel at a time */
+.lk-deck .lk-slide { display: none; }
+.lk-deck .lk-slide.is-active { display: flex; }
+
+/* Edge navigation arrows (StoryMapJS-style dark tabs) */
+.lk-controls {
+  position: fixed;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: space-between;
+  pointer-events: none;
+  z-index: 3;
+}
+.lk-arrow {
+  pointer-events: auto;
+  width: 54px;
+  height: 92px;
+  border: none;
+  background: rgba(20, 20, 20, 0.55);
+  color: #fff;
+  font-size: 1.9rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+.lk-arrow--prev { border-radius: 0 6px 6px 0; }
+.lk-arrow--next { border-radius: 6px 0 0 6px; }
+.lk-arrow:hover { background: rgba(20, 20, 20, 0.8); }
+
+/* Top toolbar */
+.lk-toolbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  z-index: 4;
+}
+.lk-toolbar__btn {
+  border: none;
+  border-right: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(20, 20, 20, 0.78);
+  color: #fff;
+  font: 0.85rem/1 system-ui, sans-serif;
+  padding: 0.7rem 1rem;
+  cursor: pointer;
+}
+.lk-toolbar__btn:hover,
+.lk-toolbar__btn.is-active { background: var(--lk-accent); }
+
+/* Mini-map overview inset */
+.lk-overview {
+  position: fixed;
+  top: 44px;
+  left: 12px;
+  width: 220px;
+  height: 150px;
+  border: 3px solid #fff;
+  border-radius: 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  z-index: 4;
+}
+.lk-overview .maplibregl-map { position: absolute; inset: 0; }
+
+/* ─────────────────────────── embedded mode ───────────────────────────
+   Full-page stories position the map + chrome against the viewport (fixed).
+   When embedding inside a fixed-height box (e.g. a blog post), add .lk-embed
+   on the root: everything re-anchors to the box instead of the viewport. */
+.lk-embed { overflow: hidden; }
+.lk-embed .lk-map { position: absolute; }
+.lk-embed .lk-slides { position: absolute; inset: 0; pointer-events: none; }
+.lk-embed .lk-controls,
+.lk-embed .lk-toolbar,
+.lk-embed .lk-overview { position: absolute; }
+/* Deck panels fill the box height (not 100vh). */
+.lk-embed.lk-deck .lk-slide { min-height: 100%; height: 100%; }
+/* Scroll mode inside a box scrolls the slides layer, not the page. */
+.lk-embed:not(.lk-deck) .lk-slides { overflow-y: auto; pointer-events: auto; }
+.lk-embed:not(.lk-deck) .lk-slide { min-height: 100%; }