geoblacklight 5.4.0 → 6.0.0.pre.alpha.1

data/app/javascript/geoblacklight/controllers/openlayers_viewer_controller.js

@@ -1,12 +1,12 @@
-import { Map } from "ol";
-import TileLayer from "ol/layer/Tile";
-import XYZ from "ol/source/XYZ";
-import GeoJSON from "ol/format/GeoJSON";
-import { FullScreen, defaults as defaultControls } from "ol/control";
-import { pmTilesLayer, cogLayer } from "geoblacklight/openlayers/layers";
-import basemaps from "geoblacklight/openlayers/basemaps";
-import { Controller } from "@hotwired/stimulus";
-import { pmTilesInspection } from "geoblacklight/openlayers/inspection";
+import { Map } from "ol"
+import TileLayer from "ol/layer/Tile"
+import XYZ from "ol/source/XYZ"
+import GeoJSON from "ol/format/GeoJSON"
+import { FullScreen, defaults as defaultControls } from "ol/control"
+import { pmTilesLayer, cogLayer } from "geoblacklight/openlayers/layers"
+import basemaps from "geoblacklight/openlayers/basemaps"
+import { Controller } from "@hotwired/stimulus"
+import { pmTilesInspection } from "geoblacklight/openlayers/inspection"
 
 export default class OpenlayersViewerController extends Controller {
   static values = {
@@ -14,17 +14,16 @@ export default class OpenlayersViewerController extends Controller {
     protocol: String,
     basemap: String,
     mapGeom: String,
-    options: Object,
-  };
+  }
 
   async connect() {
     // Set up layers
-    this.basemap = this.getBasemap();
-    this.overlay = this.getPreviewOverlay(this.protocolValue, this.urlValue);
+    this.basemap = this.getBasemap()
+    this.overlay = this.getPreviewOverlay(this.protocolValue, this.urlValue)
 
-    await this.getBounds();
+    await this.getBounds()
     // Load the map
-    this.loadMap();
+    this.loadMap()
   }
 
   // Create the map, add layers, and fit the bounds
@@ -33,68 +32,35 @@ export default class OpenlayersViewerController extends Controller {
       target: this.element,
       controls: defaultControls().extend([new FullScreen()]),
       layers: [this.basemap, this.overlay],
-    });
-    this.map.getView().fit(this.extent, this.map.getSize());
+    })
+    this.map.getView().fit(this.extent, this.map.getSize())
     this.addInspection()
   }
 
   addInspection() {
-    if (this.protocolValue == "Pmtiles") return pmTilesInspection(this.map);
+    if (this.protocolValue == "Pmtiles") return pmTilesInspection(this.map)
   }
 
   async getBounds() {
-    if (this.protocolValue == 'Cog') {
-      const view = await this.overlay.getSource().getView();
-      this.extent = view.extent;
+    if (this.protocolValue == "Cog") {
+      const view = await this.overlay.getSource().getView()
+      this.extent = view.extent
     } else {
-      this.extent = new GeoJSON()
-      .readFeatures(this.mapGeomValue)[0]
-      .getGeometry()
-      .getExtent();
+      this.extent = new GeoJSON().readFeatures(this.mapGeomValue)[0].getGeometry().getExtent()
     }
   }
 
   // Select the configured basemap to use
   getBasemap() {
-    const basemap = this.basemapDefinition();
-    const layer = new TileLayer({
-      source: new XYZ({
-        ...basemap,
-        url: this.normalizeUrl(basemap.url),
-        // The leaflet definitions spell this `attribution`; OpenLayers wants
-        // `attributions`. Accept either so one setting serves both viewers.
-        attributions: basemap.attributions || basemap.attribution,
-      }),
-    });
-    return layer;
-  }
-
-  // The basemap to draw, with any BASEMAPS values from settings.yml merged over
-  // the shipped definition. This lets an application change a basemap's URL --
-  // to add a CARTO API key, for example -- without restating the rest of the
-  // definition, and lets it define basemaps of its own. Falls back to positron
-  // for a name that resolves to nothing rather than drawing no basemap.
-  basemapDefinition() {
-    const name = this.basemapValue || "positron";
-    const definition = { ...basemaps[name], ...this.basemapOverrides()[name] };
-    return definition.url ? definition : basemaps.positron;
-  }
-
-  basemapOverrides() {
-    return this.optionsValue.BASEMAPS || {};
-  }
-
-  // Leaflet and OpenLayers spell tile URL templates differently, so accept the
-  // leaflet form a configured basemap is most likely to be written in: {s}
-  // becomes OpenLayers' subdomain range, and {retina} drops out.
-  normalizeUrl(url) {
-    return url.replace(/\{s\}/g, "{a-d}").replace(/\{retina\}/g, "");
+    const basemap = basemaps[this.basemapValue || "positron"]
+    const layer = new TileLayer({ source: new XYZ(basemap) })
+    return layer
   }
 
   // Generate a layer based on the protocol
   getPreviewOverlay(protocol, url) {
-    if (protocol === "Pmtiles") return pmTilesLayer(url);
-    if (protocol === "Cog") return cogLayer(url);
-    console.error(`Unsupported protocol name: "${protocol}"`);
+    if (protocol === "Pmtiles") return pmTilesLayer(url)
+    if (protocol === "Cog") return cogLayer(url)
+    console.error(`Unsupported protocol name: "${protocol}"`)
   }
 }

data/app/javascript/geoblacklight/controllers/search_results_controller.js

@@ -1,50 +1,50 @@
-import { Controller } from "@hotwired/stimulus";
-import { geoJSONToBounds } from "geoblacklight/leaflet/utils";
-import { DEFAULT_BOUNDS } from "geoblacklight/leaflet/constants";
+import { Controller } from "@hotwired/stimulus"
+import { geoJSONToBounds } from "geoblacklight/leaflet/utils"
+import { DEFAULT_BOUNDS } from "geoblacklight/leaflet/constants"
 
 export default class SearchResultsController extends Controller {
-  static targets = ["result"];
-  static outlets = ["leaflet-viewer"];
+  static targets = ["result"]
+  static outlets = ["leaflet-viewer"]
 
   // Fit the map to the combined bounding box of all search results
   // If a bounding box query is already active, do not override it
   fitResultBounds() {
-    if (new URL(window.location).searchParams.get("bbox")) return;
-    this.leafletViewerOutlet.fitBounds(this.getMaximalBounds());
+    if (new URL(window.location).searchParams.get("bbox")) return
+    this.leafletViewerOutlet.fitBounds(this.getMaximalBounds())
   }
 
   // Get the bounding box of a search result from its data attributes
   getResultBounds(resultElement) {
-    const geomElement = resultElement.querySelector("[data-geom]");
+    const geomElement = resultElement.querySelector("[data-geom]")
     if (geomElement && geomElement.dataset.geom) {
-      return geoJSONToBounds(JSON.parse(geomElement.dataset.geom));
+      return geoJSONToBounds(JSON.parse(geomElement.dataset.geom))
     }
   }
 
   // Find the combined bounding box of all search results
   getMaximalBounds() {
-    const bounds = this.resultTargets.map(this.getResultBounds);
-    const nonNullBounds = bounds.filter((b) => b);
+    const bounds = this.resultTargets.map(this.getResultBounds)
+    const nonNullBounds = bounds.filter((b) => b)
 
     if (nonNullBounds.length > 0) {
-      return nonNullBounds.reduce((max, b) => max.extend(b));
+      return nonNullBounds.reduce((max, b) => max.extend(b))
     }
 
-    return DEFAULT_BOUNDS;
+    return DEFAULT_BOUNDS
   }
 
   // Preview the selected search result's bounding box on the map
   previewResultOnMap(event) {
-    const geomElement = event.target.querySelector("[data-geom]");
+    const geomElement = event.target.querySelector("[data-geom]")
     if (geomElement && geomElement.dataset.geom !== "") {
-      const geom = JSON.parse(geomElement.dataset.geom);
-      const bbox = geoJSONToBounds(geom);
-      this.leafletViewerOutlet.addBoundsOverlay(bbox);
+      const geom = JSON.parse(geomElement.dataset.geom)
+      const bbox = geoJSONToBounds(geom)
+      this.leafletViewerOutlet.addBoundsOverlay(bbox)
     }
   }
 
   // Remove the previewed bounding box
   clearPreview() {
-    this.leafletViewerOutlet.removeBoundsOverlay();
+    this.leafletViewerOutlet.removeBoundsOverlay()
   }
 }

data/app/javascript/geoblacklight/core.js

@@ -1,67 +1,66 @@
 // Initializers
-import initializePopovers from "geoblacklight/initializers/popovers";
-import initializeRelations from "geoblacklight/initializers/relations";
-import initializeTooltips from "geoblacklight/initializers/tooltips";
-import initializeTruncation from "geoblacklight/initializers/truncation";
-import initializeMetadataDownload from "geoblacklight/initializers/metadata_download";
+import initializePopovers from "geoblacklight/initializers/popovers"
+import initializeRelations from "geoblacklight/initializers/relations"
+import initializeTooltips from "geoblacklight/initializers/tooltips"
+import initializeTruncation from "geoblacklight/initializers/truncation"
+import initializeMetadataDownload from "geoblacklight/initializers/metadata_download"
 
 // Stimulus controllers
-import ClipboardController from "geoblacklight/controllers/clipboard_controller";
-import DownloadsController from "geoblacklight/controllers/downloads_controller";
-import LeafletViewerController from "geoblacklight/controllers/leaflet_viewer_controller";
-import OembedViewerController from "geoblacklight/controllers/oembed_viewer_controller";
-import OpenlayersViewerController from "geoblacklight/controllers/openlayers_viewer_controller";
-import SearchResultsController from "geoblacklight/controllers/search_results_controller";
+import ClipboardController from "geoblacklight/controllers/clipboard_controller"
+import DownloadsController from "geoblacklight/controllers/downloads_controller"
+import LeafletViewerController from "geoblacklight/controllers/leaflet_viewer_controller"
+import OembedViewerController from "geoblacklight/controllers/oembed_viewer_controller"
+import OpenlayersViewerController from "geoblacklight/controllers/openlayers_viewer_controller"
+import SearchResultsController from "geoblacklight/controllers/search_results_controller"
 
 // Inspired by Blacklight's javascript/blacklight/core.js
 const Geoblacklight = (function () {
-  const callbacks = [];
+  const callbacks = []
   return {
     // Hook: pass a callback to add it to the activation stack
     onLoad: function (callback) {
-      callbacks.push(callback);
+      callbacks.push(callback)
     },
 
     // Activate all stored callbacks
     activate: function (event) {
       callbacks.forEach((callback) => {
-        callback(event);
-      });
+        callback(event)
+      })
     },
 
     // Define hooks that will trigger the activation of the Geoblacklight JS
     listeners: function () {
-      if (typeof Turbo !== "undefined")
-        return ["turbo:load", "turbo:frame-load"];
-      else return ["DOMContentLoaded"];
+      if (typeof Turbo !== "undefined") return ["turbo:load", "turbo:frame-load"]
+      else return ["DOMContentLoaded"]
     },
-  };
-})();
+  }
+})()
 
 // Add event listeners that call activate() for each event type
 Geoblacklight.listeners().forEach((listener) =>
-  document.addEventListener(listener, (event) => Geoblacklight.activate(event))
-);
+  document.addEventListener(listener, (event) => Geoblacklight.activate(event)),
+)
 
 // Register our initializers
-Geoblacklight.onLoad(initializePopovers);
-Geoblacklight.onLoad(initializeRelations);
-Geoblacklight.onLoad(initializeTooltips);
-Geoblacklight.onLoad(initializeTruncation);
-Geoblacklight.onLoad(initializeMetadataDownload);
+Geoblacklight.onLoad(initializePopovers)
+Geoblacklight.onLoad(initializeRelations)
+Geoblacklight.onLoad(initializeTooltips)
+Geoblacklight.onLoad(initializeTruncation)
+Geoblacklight.onLoad(initializeMetadataDownload)
 
 // Register our Stimulus controllers
 if (typeof Stimulus !== "undefined") {
-  Stimulus.register("openlayers-viewer", OpenlayersViewerController);
-  Stimulus.register("oembed-viewer", OembedViewerController);
-  Stimulus.register("leaflet-viewer", LeafletViewerController);
-  Stimulus.register("search-results", SearchResultsController);
-  Stimulus.register("downloads", DownloadsController);
-  Stimulus.register("clipboard", ClipboardController);
+  Stimulus.register("openlayers-viewer", OpenlayersViewerController)
+  Stimulus.register("oembed-viewer", OembedViewerController)
+  Stimulus.register("leaflet-viewer", LeafletViewerController)
+  Stimulus.register("search-results", SearchResultsController)
+  Stimulus.register("downloads", DownloadsController)
+  Stimulus.register("clipboard", ClipboardController)
 } else {
   console.error(
-    "Couldn't find Stimulus. Check installation instructions at https://github.com/hotwired/stimulus-rails."
-  );
+    "Couldn't find Stimulus. Check installation instructions at https://github.com/hotwired/stimulus-rails.",
+  )
 }
 
-export default Geoblacklight;
+export default Geoblacklight

data/app/javascript/geoblacklight/index.js

@@ -1,17 +1,17 @@
 // Stimulus controllers
-import OpenlayersViewerController from "geoblacklight/controllers/openlayers_viewer_controller";
-import OembedViewerController from "geoblacklight/controllers/oembed_viewer_controller";
-import LeafletViewerController from "geoblacklight/controllers/leaflet_viewer_controller";
-import SearchResultsController from "geoblacklight/controllers/search_results_controller";
-import DownloadsController from "geoblacklight/controllers/downloads_controller";
-import ClipboardController from "geoblacklight/controllers/clipboard_controller";
+import OpenlayersViewerController from "geoblacklight/controllers/openlayers_viewer_controller"
+import OembedViewerController from "geoblacklight/controllers/oembed_viewer_controller"
+import LeafletViewerController from "geoblacklight/controllers/leaflet_viewer_controller"
+import SearchResultsController from "geoblacklight/controllers/search_results_controller"
+import DownloadsController from "geoblacklight/controllers/downloads_controller"
+import ClipboardController from "geoblacklight/controllers/clipboard_controller"
 
 // GBL core
-import Core from "geoblacklight/core";
+import Core from "geoblacklight/core"
 
 // Other modules
-import openLayersBasemaps from "geoblacklight/openlayers/basemaps";
-import leafletBasemaps from "geoblacklight/leaflet/basemaps";
+import openLayersBasemaps from "geoblacklight/openlayers/basemaps"
+import leafletBasemaps from "geoblacklight/leaflet/basemaps"
 
 export default {
   OpenlayersViewerController,
@@ -24,4 +24,4 @@ export default {
   leafletBasemaps,
   Core,
   onLoad: Core.onLoad,
-};
+}

data/app/javascript/geoblacklight/initializers/metadata_download.js

@@ -1,54 +1,52 @@
 export class GeoBlacklightMetadataDownloadButton {
   constructor(el, i, options = {}) {
-    this.options = options;
-    this.el = typeof el === "string" ? document.querySelector(el) : el;
-    this.download = document.querySelector(
-      this.options.target || this.el.getAttribute("data-ref-download")
-    );
+    this.options = options
+    this.el = typeof el === "string" ? document.querySelector(el) : el
+    this.download = document.querySelector(this.options.target || this.el.getAttribute("data-ref-download"))
     // On initialization only do this for the first one.
     if (i === 0) {
-      this.setRefUrl();
+      this.setRefUrl()
     }
-    this.configureHandler();
+    this.configureHandler()
   }
 
   configureHandler() {
-    this.el.addEventListener("click", () => this.setRefUrl());
+    this.el.addEventListener("click", () => this.setRefUrl())
   }
 
   setRefUrl() {
-    const refUrl = this.el.getAttribute("data-ref-endpoint");
+    const refUrl = this.el.getAttribute("data-ref-endpoint")
     if (!refUrl) {
-      this.download.style.display = "none";
+      this.download.style.display = "none"
     } else {
-      this.download.style.display = "";
-      this.download.setAttribute("href", refUrl);
+      this.download.style.display = ""
+      this.download.setAttribute("href", refUrl)
     }
   }
 }
 
 export default function initializeMetadataDownload() {
-  const modal = document.getElementById("blacklight-modal");
+  const modal = document.getElementById("blacklight-modal")
 
   modal.addEventListener("focus", (e) => {
-    if (!Array.from(e.target.classList).includes('show')){
-      return;
+    if (!Array.from(e.target.classList).includes("show")) {
+      return
     }
     e.target.querySelectorAll(".metadata-body").forEach((el) => {
-      el.closest(".modal-content").classList.add("metadata-modal");
-    });
+      el.closest(".modal-content").classList.add("metadata-modal")
+    })
 
     e.target.querySelectorAll(".pill-metadata").forEach((element, i) => {
-      new GeoBlacklightMetadataDownloadButton(element, i);
-    });
-  });
+      new GeoBlacklightMetadataDownloadButton(element, i)
+    })
+  })
 
   modal.addEventListener("blur", (e) => {
-    if (Array.from(e.target.classList).includes('show')){
-      return;
+    if (Array.from(e.target.classList).includes("show")) {
+      return
     }
     e.target.querySelectorAll(".metadata-body").forEach((el) => {
-      el.closest(".modal-content").classList.remove("metadata-modal");
-    });
-  });
+      el.closest(".modal-content").classList.remove("metadata-modal")
+    })
+  })
 }

data/app/javascript/geoblacklight/initializers/popovers.js

@@ -1,11 +1,11 @@
-import { Popover } from 'bootstrap';
+import { Popover } from "bootstrap"
 
 // Initialize popovers
 export default function initializePopovers() {
-  const popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]'); // Bootstrap 5 uses 'data-bs-toggle'
+  const popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]') // Bootstrap 5 uses 'data-bs-toggle'
   popoverElements.forEach((element) => {
     const popover = new Popover(element, {
       trigger: "hover",
-    });
-  });
+    })
+  })
 }

data/app/javascript/geoblacklight/initializers/relations.js

@@ -1,40 +1,40 @@
 const fadeIn = (element, duration) => {
-  element.style.opacity = 0;
-  element.style.display = "block";
+  element.style.opacity = 0
+  element.style.display = "block"
 
-  let start = null;
+  let start = null
   function step(timestamp) {
-    if (!start) start = timestamp;
-    const progress = timestamp - start;
-    element.style.opacity = Math.min(progress / duration, 1);
+    if (!start) start = timestamp
+    const progress = timestamp - start
+    element.style.opacity = Math.min(progress / duration, 1)
     if (progress < duration) {
-      window.requestAnimationFrame(step);
+      window.requestAnimationFrame(step)
     }
   }
 
-  window.requestAnimationFrame(step);
-};
+  window.requestAnimationFrame(step)
+}
 
 // Set up the relations widgets by querying the relations endpoint
 export default function initializeRelations() {
   document.querySelectorAll('[data-relations="true"]').forEach((element) => {
-    const attributes = element.dataset;
-    const relationUrl = `${attributes.url}/relations`;
+    const attributes = element.dataset
+    const relationUrl = `${attributes.url}/relations`
 
     fetch(relationUrl, { headers: { "X-Requested-With": "XMLHttpRequest" } })
       .then((response) => {
         if (!response.ok) {
-          throw new Error("Network response was not ok");
+          throw new Error("Network response was not ok")
         }
-        return response.text();
+        return response.text()
       })
       .then((data) => {
-        const div = document.createElement("div");
-        div.innerHTML = data;
-        element.appendChild(div);
-        div.style.display = "none";
-        fadeIn(div, 200);
+        const div = document.createElement("div")
+        div.innerHTML = data
+        element.appendChild(div)
+        div.style.display = "none"
+        fadeIn(div, 200)
       })
-      .catch((error) => console.error("Error:", error));
-  });
+      .catch((error) => console.error("Error:", error))
+  })
 }

data/app/javascript/geoblacklight/initializers/tooltips.js

@@ -1,55 +1,51 @@
-import { Tooltip } from "bootstrap";
+import { Tooltip } from "bootstrap"
 
 export default function initializeTooltips() {
   document.body.addEventListener(
     "mouseenter",
     (event) => {
       if (event.target.closest(".blacklight-icons.svg_tooltip svg")) {
-        const svgElement = event.target.closest(
-          ".blacklight-icons.svg_tooltip svg"
-        );
-        const svgTitleElement = svgElement.querySelector("title");
-        const titleText = svgTitleElement ? svgTitleElement.textContent : "";
+        const svgElement = event.target.closest(".blacklight-icons.svg_tooltip svg")
+        const svgTitleElement = svgElement.querySelector("title")
+        const titleText = svgTitleElement ? svgTitleElement.textContent : ""
 
         if (titleText !== undefined && titleText !== "") {
           // Initialize Bootstrap tooltip with native JavaScript
           const tooltip = new Tooltip(svgElement, {
             placement: "bottom",
             title: titleText,
-          });
-          tooltip.show();
+          })
+          tooltip.show()
 
           // Store the original title in the data-original-title attribute
           // and remove the title element to prevent it from interfering with Bootstrap's tooltip.
-          svgElement.setAttribute("data-original-title", titleText);
-          svgTitleElement.remove();
+          svgElement.setAttribute("data-original-title", titleText)
+          svgTitleElement.remove()
         }
       }
     },
-    true
-  ); // Use capture to ensure the event is caught as it bubbles up
+    true,
+  ) // Use capture to ensure the event is caught as it bubbles up
 
   document.body.addEventListener(
     "mouseleave",
     (event) => {
       if (event.target.closest(".blacklight-icons.svg_tooltip svg")) {
-        const svgElement = event.target.closest(
-          ".blacklight-icons.svg_tooltip svg"
-        );
-        const originalTitle = svgElement.getAttribute("data-original-title");
+        const svgElement = event.target.closest(".blacklight-icons.svg_tooltip svg")
+        const originalTitle = svgElement.getAttribute("data-original-title")
 
         if (originalTitle !== undefined && originalTitle !== "") {
           // Restore the SVG title element from data-original-title
-          const newTitleElement = document.createElement("title");
-          newTitleElement.textContent = originalTitle;
-          svgElement.prepend(newTitleElement);
-          svgElement.setAttribute("data-original-title", "");
+          const newTitleElement = document.createElement("title")
+          newTitleElement.textContent = originalTitle
+          svgElement.prepend(newTitleElement)
+          svgElement.setAttribute("data-original-title", "")
         }
       }
 
       // Remove tooltips
-      document.querySelectorAll(".tooltip").forEach((elem) => elem.remove());
+      document.querySelectorAll(".tooltip").forEach((elem) => elem.remove())
     },
-    true
-  ); // Use capture to ensure the event is caught as it bubbles up
+    true,
+  ) // Use capture to ensure the event is caught as it bubbles up
 }

data/app/javascript/geoblacklight/initializers/truncation.js

@@ -5,31 +5,31 @@
 class Truncator {
   constructor(element, { lines, id }) {
     // if the element is already small enough, don't truncate it
-    const minHeight = lines * parseFloat(window.getComputedStyle(element).fontSize);
-    if (element.getBoundingClientRect().height < minHeight) return;
+    const minHeight = lines * parseFloat(window.getComputedStyle(element).fontSize)
+    if (element.getBoundingClientRect().height <= minHeight) return
 
     // set a unique ID for the element if it doesn't have one
-    this.element = element;
-    this.element.id ||= id;
+    this.element = element
+    this.element.id ||= id
 
     // add the button
-    this.button = document.createElement("button");
-    this.button.classList.add("btn", "btn-link", "p-0", "border-0");
-    this.button.dataset.bsToggle = "collapse";
-    this.button.dataset.bsTarget = `#${this.element.id}`;
-    this.button.setAttribute("aria-expanded", "false");
-    this.button.setAttribute("aria-controls", this.element.id);
-    this.button.textContent = "Read more";
-    this.button.addEventListener("click", this.toggle.bind(this));
-    element.parentNode.insertBefore(this.button, element.nextSibling);
+    this.button = document.createElement("button")
+    this.button.classList.add("btn", "btn-link", "p-0", "border-0")
+    this.button.dataset.bsToggle = "collapse"
+    this.button.dataset.bsTarget = `#${this.element.id}`
+    this.button.setAttribute("aria-expanded", "false")
+    this.button.setAttribute("aria-controls", this.element.id)
+    this.button.textContent = "Read more"
+    this.button.addEventListener("click", this.toggle.bind(this))
+    element.parentNode.insertBefore(this.button, element.nextSibling)
 
     // start collapsed
-    this.element.classList.add("collapse");
+    this.element.classList.add("collapse")
   }
 
   toggle() {
-    if (this.button.textContent == "Read more") this.button.textContent = "Close";
-    else this.button.textContent = "Read more";
+    if (this.button.textContent == "Read more") this.button.textContent = "Close"
+    else this.button.textContent = "Read more"
   }
 }
 
@@ -40,6 +40,6 @@ export default function initializeTruncation() {
     new Truncator(element, {
       lines: 12,
       id: `truncate-${i}`,
-    });
-  });
+    })
+  })
 }