jekyll-svg-viewer 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 9b423f13d884102e617b015c130a8e148fa6705207fac8a18388b119d4b02c17
+  data.tar.gz: a8cb6bc9f3374def84a1319fe36a4160d6de1d455560e6f9294ed4f68dff86d2
+SHA512:
+  metadata.gz: d7cbe553daa442c19b74f96571f58a0fb79ff56318ce5b9a08390c13c61286c4db8075080adfadda164b6362ef3fa735723ade45cddaddb46544a8d462327542
+  data.tar.gz: f25d77bcc9657fec50e343ce0973b7f0846aff491638f2d932466da7c10737f24b4488d6bf16ff7c154f3ffa3fae7d9131ba50c0fffca4d1ea2b0924ec9962c3

data/LICENSE.txt

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Brett Terpstra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

data/README.md

@@ -0,0 +1,110 @@
+# jekyll-svg-viewer
+
+`jekyll-svg-viewer` brings the **WP SVG Viewer** frontend to static Jekyll sites. It ships a Liquid tag for rendering interactive SVG diagrams, automatically injects the required JavaScript/CSS, mirrors the shortcode options from the WordPress plugin, and includes a standalone preset builder page for crafting configurations. Source code lives at [github.com/ttscoff/jekyll-svg-viewer](https://github.com/ttscoff/jekyll-svg-viewer).
+
+## Installation
+
+1. Add the published gem to your Jekyll site:
+
+   ```ruby
+   # Gemfile
+   gem "jekyll-svg-viewer"
+   ```
+
+   > Need the latest unreleased changes? Point Bundler at GitHub instead:
+   >
+   > ```ruby
+   > gem "jekyll-svg-viewer", github: "ttscoff/jekyll-svg-viewer"
+   > ```
+
+2. Enable the plugin:
+
+   ```yaml
+   # _config.yml
+   plugins:
+     - jekyll-svg-viewer
+   ```
+
+3. Run `bundle install`, then build or serve your site as usual (`bundle exec jekyll build` / `bundle exec jekyll serve`). The viewer assets are copied into `_site/assets/svg-viewer/` as part of the build.
+
+## Liquid Tag Usage
+
+Place the `svg_viewer` tag anywhere Liquid tags are supported:
+
+```liquid
+{% svg_viewer src="/assets/maps/campus.svg" height="75vh" controls_buttons="compact,alignright,zoom_in,zoom_out,center" zoom="140" %}
+```
+
+All shortcode options from the WordPress version are supported. Common attributes include:
+
+| Attribute                                           | Purpose                                                                                 |
+| --------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| `src`                                               | **Required.** Absolute URL or site-root relative path to the SVG.                       |
+| `height`                                            | Viewer height (e.g. `600px`, `80vh`).                                                   |
+| `zoom`, `min_zoom`, `max_zoom`, `zoom_step`         | Initial zoom, min/max bounds, and button increment (percentages).                       |
+| `center_x`, `center_y`                              | Lock the default viewport to explicit SVG coordinates.                                  |
+| `show_coords`                                       | `true` enables the coordinate helper button.                                            |
+| `controls_position`                                 | `top`, `bottom`, `left`, or `right`.                                                    |
+| `controls_buttons`                                  | Comma-delimited layout keywords and button names (e.g. `both,alignleft,zoom_in,reset`). |
+| `button_fill`, `button_border`, `button_foreground` | Hex colors mapped to CSS custom properties for the buttons.                             |
+| `pan_mode`, `zoom_mode`                             | Advanced gesture overrides (`scroll`, `drag`, `click`).                                 |
+| `title`, `caption`                                  | Optional markup rendered above/below the viewer wrapper.                                |
+
+Any attribute omitted from the tag falls back to `_config.yml` defaults (see below).
+
+## Site-wide Defaults
+
+Configure default values in `_config.yml` under `svg_viewer.defaults`. The builder’s YAML modal emits the same structure.
+
+```yaml
+svg_viewer:
+  defaults:
+    height: "600px"
+    zoom: "100"
+    min_zoom: "25"
+    max_zoom: "800"
+    zoom_step: "10"
+    controls_position: "top"
+    controls_buttons: "both"
+    pan_mode: ""
+    zoom_mode: ""
+    show_coords: false
+```
+
+Only fields you override are required. `src`, `center_x`, and `center_y` remain per-tag settings.
+
+## Screenshots
+
+![Preset Editor](images/preset-editor.jpg "Preset Editor")
+
+![Front End Rendering](images/front-end.jpg "Front End Rendering")
+
+## Localized Assets & Automatic Injection
+
+The gem copies the viewer script, stylesheet, and localization JSON into `_site/assets/svg-viewer/`. Whenever a page renders `{% svg_viewer %}`, the plugin:
+
+- Marks the document so the CSS/JS tags are injected into `<head>` once during `post_render`.
+- Ensures the asset files exist by the `post_write` phase.
+
+You don’t need to manually edit layouts or partials—the assets appear only on pages that use the tag.
+
+## Preset Builder Page
+
+The plugin also generates a preset editor at `/svg-viewer/preset-builder/`. It mirrors the WordPress admin experience:
+
+- Enter an SVG path, tweak zoom/controls/colors, and load a live preview.
+- Capture the current viewport to populate `center_x` / `center_y`.
+- Copy a ready-to-use Liquid tag.
+- Generate a `_config.yml` snippet (excluding `src` and the captured center) inside a modal dialog.
+
+This is the quickest way to dial in viewer options without memorizing every attribute.
+
+## Development Notes
+
+- The gemspec bundles the compiled frontend assets. If you update `wp-svg-viewer/js/svg-viewer.js` or related CSS, re-copy them into `jekyll-svg-viewer/assets/svg-viewer/`.
+- The preset builder JavaScript (`assets/svg-viewer/preview/preset-builder.js`) is framework-free and mirrors the PHP logic used by the WordPress plugin.
+- A minimal smoke-test site is available in `example_site/`. Run `scripts/build-example.sh` to install dependencies and build it locally.
+
+## License
+
+MIT © Brett Terpstra

data/assets/svg-viewer/css/svg-viewer.css

@@ -0,0 +1,439 @@
+/* SVG Viewer Plugin Styles */
+
+.svg-viewer-wrapper {
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, sans-serif;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: #fff;
+  --svg-viewer-button-fill: #0073aa;
+  --svg-viewer-button-hover: #005a87;
+  --svg-viewer-button-border: #0073aa;
+  --svg-viewer-button-text: #fff;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  contain: layout inline-size;
+  margin-bottom: 1em;
+}
+
+.svg-viewer-main {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  min-width: 0;
+  contain: inline-size;
+}
+
+.svg-viewer-main.controls-position-bottom {
+  flex-direction: column-reverse;
+}
+
+.svg-viewer-main.controls-position-left {
+  flex-direction: row;
+}
+
+.svg-viewer-main.controls-position-right {
+  flex-direction: row-reverse;
+}
+
+.svg-viewer-main.controls-position-left,
+.svg-viewer-main.controls-position-right {
+  align-items: stretch;
+}
+
+.svg-viewer-main.controls-position-left .svg-controls,
+.svg-viewer-main.controls-position-right .svg-controls {
+  flex: 0 0 auto;
+}
+
+.svg-viewer-main > .svg-container {
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.svg-viewer-title,
+.svg-viewer-caption {
+  text-align: center;
+  font-weight: 600;
+  margin: 0;
+  padding: 12px 16px;
+}
+
+.svg-viewer-interaction-caption {
+  font-weight: 400;
+  font-size: 0.9em;
+  color: #555;
+  background-color: #fafafa;
+}
+
+.svg-viewer-title {
+  border-bottom: 1px solid #ddd;
+}
+
+.svg-controls {
+  display: flex;
+  gap: 10px;
+  padding: 15px;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #ddd;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.svg-viewer-main.controls-position-bottom .svg-controls {
+  border-top: 1px solid #ddd;
+  border-bottom: none;
+}
+
+.svg-viewer-main.controls-position-left .svg-controls,
+.svg-viewer-main.controls-position-right .svg-controls {
+  border-bottom: none;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.svg-viewer-main.controls-position-left.controls-align-alignleft .svg-controls,
+.svg-viewer-main.controls-position-right.controls-align-alignleft
+  .svg-controls {
+  align-items: flex-start;
+}
+
+.svg-viewer-main.controls-position-left.controls-align-alignright .svg-controls,
+.svg-viewer-main.controls-position-right.controls-align-alignright
+  .svg-controls {
+  align-items: flex-end;
+}
+
+.svg-viewer-main.controls-position-left.controls-align-aligncenter
+  .svg-controls,
+.svg-viewer-main.controls-position-right.controls-align-aligncenter
+  .svg-controls {
+  align-items: center;
+}
+
+.svg-viewer-main.controls-position-left .svg-controls {
+  border-right: 1px solid #ddd;
+}
+
+.svg-viewer-main.controls-position-right .svg-controls {
+  border-left: 1px solid #ddd;
+}
+
+.svg-controls.controls-vertical {
+  flex-direction: column;
+  gap: 12px;
+  align-items: stretch;
+}
+
+.svg-controls .zoom-slider-wrapper {
+  display: inline-flex;
+  align-items: center;
+  width: var(--svg-viewer-slider-width, 240px);
+  padding: 0 4px;
+}
+
+.svg-controls.controls-mode-icon .zoom-slider-wrapper {
+  width: var(--svg-viewer-slider-width-icon, 200px);
+}
+
+.svg-controls.controls-vertical .zoom-slider-wrapper {
+  width: 100%;
+}
+
+.svg-controls .zoom-slider {
+  width: 100%;
+  height: 6px;
+  appearance: none;
+  -webkit-appearance: none;
+  background: var(--svg-viewer-slider-track, rgba(0, 0, 0, 0.15));
+  border-radius: 999px;
+  outline: none;
+}
+
+.svg-controls .zoom-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--svg-viewer-button-fill, #0073aa);
+  border: 2px solid var(--svg-viewer-button-border, #0073aa);
+  cursor: pointer;
+  box-shadow: 0 0 0 2px #fff;
+}
+
+.svg-controls .zoom-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--svg-viewer-button-fill, #0073aa);
+  border: 2px solid var(--svg-viewer-button-border, #0073aa);
+  cursor: pointer;
+}
+
+.svg-controls .zoom-slider:focus-visible {
+  outline: 2px solid var(--svg-viewer-button-fill, #0073aa);
+  outline-offset: 2px;
+}
+
+.svg-viewer-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background-color: var(--svg-viewer-button-fill, #0073aa);
+  color: var(--svg-viewer-button-text, #fff);
+  border: 1px solid var(--svg-viewer-button-border, #0073aa);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.2s ease, border-color 0.2s ease,
+    transform 0.1s ease;
+  white-space: nowrap;
+}
+.svg-viewer-btn.is-disabled,
+.svg-viewer-btn:disabled {
+  background-color: #c9ccd1;
+  border-color: #b2b5ba;
+  color: #f1f1f1;
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+.svg-viewer-btn.is-disabled:hover,
+.svg-viewer-btn:disabled:hover {
+  background-color: #c9ccd1;
+}
+
+.svg-viewer-btn .btn-icon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.svg-viewer-btn .btn-text {
+  font-size: 14px;
+  line-height: 1.3;
+}
+
+.svg-viewer-btn .btn-icon svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.svg-viewer-btn:hover {
+  background-color: var(
+    --svg-viewer-button-hover,
+    var(--svg-viewer-button-fill, #0073aa)
+  );
+}
+
+.svg-viewer-btn:active {
+  transform: scale(0.98);
+}
+
+.svg-controls .divider {
+  width: 1px;
+  height: 24px;
+  background-color: #ddd;
+  margin: 0 8px;
+}
+
+.svg-controls.controls-vertical .divider {
+  width: 100%;
+  height: 1px;
+  margin: 8px 0;
+}
+
+.zoom-display {
+  font-size: 14px;
+  color: #666;
+  min-width: 60px;
+  text-align: center;
+  padding: 4px 8px;
+}
+
+.controls-mode-icon .btn-text {
+  display: none;
+}
+
+.controls-mode-icon .svg-viewer-btn {
+  padding: 8px;
+  justify-content: center;
+}
+
+.controls-mode-icon .svg-viewer-btn .btn-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.controls-mode-text .btn-icon {
+  display: none;
+}
+
+.controls-style-compact .svg-viewer-btn {
+  padding: 6px 12px;
+  font-size: 13px;
+}
+
+.controls-style-compact .svg-controls {
+  gap: 8px;
+  padding: 12px;
+}
+
+.controls-style-labels-on-hover .btn-text {
+  opacity: 0;
+  max-width: 0;
+  overflow: hidden;
+  transition: opacity 0.2s ease, max-width 0.2s ease;
+}
+
+.controls-style-labels-on-hover .svg-viewer-btn:hover .btn-text,
+.controls-style-labels-on-hover .svg-viewer-btn:focus .btn-text,
+.controls-style-labels-on-hover .svg-viewer-btn:focus-visible .btn-text {
+  opacity: 1;
+  max-width: 200px;
+}
+
+.svg-controls.controls-vertical .svg-viewer-btn {
+  width: 100%;
+  justify-content: center;
+}
+
+.svg-controls.controls-align-aligncenter {
+  justify-content: center;
+}
+
+.svg-controls.controls-align-alignright {
+  justify-content: flex-end;
+}
+
+.svg-controls.controls-align-alignleft {
+  justify-content: flex-start;
+}
+
+.svg-controls.controls-vertical.controls-align-alignleft {
+  align-items: flex-start;
+}
+
+.svg-controls.controls-vertical.controls-align-alignright {
+  align-items: flex-end;
+}
+
+.svg-controls.controls-vertical.controls-align-aligncenter {
+  align-items: center;
+}
+
+.svg-viewer-main.controls-align-aligncenter .svg-controls {
+  justify-content: center;
+}
+
+.svg-viewer-main.controls-align-alignright .svg-controls {
+  justify-content: flex-end;
+}
+
+.svg-viewer-main.controls-align-alignleft .svg-controls {
+  justify-content: flex-start;
+}
+
+.svg-controls.controls-vertical .coord-output {
+  margin-left: 0;
+  margin-top: 4px;
+}
+
+.svg-controls.controls-vertical .zoom-display {
+  align-self: center;
+}
+
+.svg-container {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: auto;
+  background-color: #fff;
+  position: relative;
+  display: block;
+  scroll-behavior: smooth;
+}
+
+.svg-viewer-wrapper.pan-mode-drag .svg-container {
+  cursor: grab;
+  touch-action: pan-x pan-y;
+}
+
+.svg-viewer-wrapper.pan-mode-drag .svg-container.is-dragging {
+  cursor: grabbing;
+}
+
+.svg-viewer-wrapper.pan-mode-drag .svg-container.is-dragging,
+.svg-viewer-wrapper.pan-mode-drag .svg-container.is-dragging * {
+  user-select: none;
+}
+
+.svg-viewer-caption {
+  border-top: 1px solid #ddd;
+}
+
+.svg-viewport {
+  display: inline-block;
+  transform-origin: top left;
+  transition: none;
+  width: 100%;
+  max-width: 100%;
+}
+
+.svg-container svg {
+  display: block;
+  background-color: #f3f3f3;
+  width: 100%;
+  height: auto;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .svg-viewer-btn {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+
+  .svg-viewer-btn .btn-icon {
+    font-size: 14px;
+  }
+
+  .svg-controls {
+    gap: 8px;
+    padding: 12px;
+  }
+
+  .zoom-display {
+    font-size: 12px;
+  }
+}
+
+/* Fix for WordPress admin/editor environments */
+.wp-block-html .svg-viewer-wrapper {
+  max-width: 100%;
+}
+
+.svg-viewer-wrapper .svg-controls .zoom-display {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  justify-content: center;
+}
+
+.svg-viewer-wrapper .svg-controls .coord-output {
+  margin-left: 0.75rem;
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+  font-size: 0.85rem;
+  color: #444;
+}

data/assets/svg-viewer/i18n/locales.json

@@ -0,0 +1,78 @@
+{
+  "en": {
+    "zoom_in": "Zoom In",
+    "zoom_in_title": "Zoom In (Ctrl +)",
+    "zoom_out": "Zoom Out",
+    "zoom_out_title": "Zoom Out (Ctrl -)",
+    "reset_zoom": "Reset Zoom",
+    "center_view": "Center View",
+    "copy_center": "Copy Center",
+    "copy_center_title": "Copy current center coordinates",
+    "instruction_click": "Cmd/Ctrl-click to zoom in, Option/Alt-click to zoom out.",
+    "instruction_scroll": "Scroll up to zoom in, scroll down to zoom out.",
+    "instruction_drag_scroll": "Drag to pan around the image while scrolling zooms.",
+    "instruction_drag": "Drag to pan around the image.",
+    "zoom_slider_label": "Zoom level"
+  },
+  "de": {
+    "zoom_in": "Vergrößern",
+    "zoom_in_title": "Vergrößern (Strg +)",
+    "zoom_out": "Verkleinern",
+    "zoom_out_title": "Verkleinern (Strg -)",
+    "reset_zoom": "Zoom zurücksetzen",
+    "center_view": "Ansicht zentrieren",
+    "copy_center": "Zentrum kopieren",
+    "copy_center_title": "Aktuelle Mittelpunktkoordinaten kopieren",
+    "instruction_click": "Mit Cmd/Strg-Klick vergrößern, mit Wahltaste/Alt-Klick verkleinern.",
+    "instruction_scroll": "Nach oben scrollen zum Vergrößern, nach unten scrollen zum Verkleinern.",
+    "instruction_drag_scroll": "Ziehen zum Schwenken, während scrollen zoomt.",
+    "instruction_drag": "Ziehen zum Schwenken des Bildes.",
+    "zoom_slider_label": "Zoomstufe"
+  },
+  "es": {
+    "zoom_in": "Acercar",
+    "zoom_in_title": "Acercar (Ctrl +)",
+    "zoom_out": "Alejar",
+    "zoom_out_title": "Alejar (Ctrl -)",
+    "reset_zoom": "Restablecer zoom",
+    "center_view": "Centrar vista",
+    "copy_center": "Copiar centro",
+    "copy_center_title": "Copiar las coordenadas del centro actual",
+    "instruction_click": "Cmd/Ctrl-clic para acercar, Opción/Alt-clic para alejar.",
+    "instruction_scroll": "Desplaza hacia arriba para acercar, hacia abajo para alejar.",
+    "instruction_drag_scroll": "Arrastra para desplazarte por la imagen mientras el desplazamiento hace zoom.",
+    "instruction_drag": "Arrastra para desplazarte por la imagen.",
+    "zoom_slider_label": "Nivel de zoom"
+  },
+  "fr": {
+    "zoom_in": "Zoom avant",
+    "zoom_in_title": "Zoom avant (Ctrl +)",
+    "zoom_out": "Zoom arrière",
+    "zoom_out_title": "Zoom arrière (Ctrl -)",
+    "reset_zoom": "Réinitialiser le zoom",
+    "center_view": "Centrer la vue",
+    "copy_center": "Copier le centre",
+    "copy_center_title": "Copier les coordonnées du centre actuel",
+    "instruction_click": "Cliquer avec Cmd/Ctrl pour zoomer, cliquer avec Option/Alt pour dézoomer.",
+    "instruction_scroll": "Faites défiler vers le haut pour zoomer, vers le bas pour dézoomer.",
+    "instruction_drag_scroll": "Faites glisser pour vous déplacer dans l’image pendant que le défilement effectue un zoom.",
+    "instruction_drag": "Faites glisser pour vous déplacer dans l’image.",
+    "zoom_slider_label": "Niveau de zoom"
+  },
+  "it": {
+    "zoom_in": "Zoom avanti",
+    "zoom_in_title": "Zoom avanti (Ctrl +)",
+    "zoom_out": "Zoom indietro",
+    "zoom_out_title": "Zoom indietro (Ctrl -)",
+    "reset_zoom": "Reimposta zoom",
+    "center_view": "Centra vista",
+    "copy_center": "Copia centro",
+    "copy_center_title": "Copia le coordinate del centro attuale",
+    "instruction_click": "Cmd/Ctrl-clic per ingrandire, Option/Alt-clic per ridurre.",
+    "instruction_scroll": "Scorri verso l’alto per ingrandire, verso il basso per ridurre.",
+    "instruction_drag_scroll": "Trascina per spostarti nell’immagine mentre lo scorrimento esegue lo zoom.",
+    "instruction_drag": "Trascina per spostarti nell’immagine.",
+    "zoom_slider_label": "Livello di zoom"
+  }
+}
+