Add map and table shortcodes

layouts/shortcodes/chart.html

@@ -1,5 +1,2 @@
-<script>
-  const apiURL = "{{ .Site.Params.apiURL }}";
-</script>
 {{ $id := .Get "src" | md5 }} {{ partial "chart.html" (dict "src" (.Get "src")
 "id" $id) }}

layouts/shortcodes/map.html

@@ -1 +1,15 @@
-{{ partial "map.html" }}
+<script src="https://labs.geomatico.es/maplibre-cog-protocol/dist/index.js"></script>
+<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
+/>
+<section class="map-container">
+  <div id="{{ .Get `id` }}" style="height: 400px"></div>
+  <script>
+    let map = new maplibregl.Map({
+      container: "{{ .Get `id` }}",
+      style: "{{ .Get `style` }}",
+    });
+  </script>
+</section>

layouts/shortcodes/table.html

@@ -1,2 +1,67 @@
-{{ $id := .Get "src" | md5 }} {{ partial "table.html" (dict "src" (.Get "src")
+<script>
-"id" $id) }}
+  async function fetchDataForTable() {
+    try {
+      const apiEndpoint = `${apiURL}/{{ .Get "endpoint" }}`;
+      const response = await fetch(apiEndpoint);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const fetchedData = await response.json();
+      data = fetchedData;
+      console.log(data);
+      createTable(data);
+    } catch (error) {
+      console.error("Fetching data failed:", error);
+    }
+  }
+
+  function createTable(data) {
+    const jsonTableContainer = document.getElementById("jsonTableContainer");
+    jsonTableContainer.innerHTML = "";
+    jsonTableContainer.style.maxHeight = "{{ .Get `maxHeight` }}"
+
+    tableHeaderNames = Object.values({{ .Get `headers` | safeJS }});
+    tableHeaderKeys = Object.keys({{ .Get `headers` | safeJS }});
+
+    const table = document.createElement("table");
+    table.id = "{{ .Get `id` }}"
+    const thead = document.createElement("thead");
+    const tbody = document.createElement("tbody");
+    const headerRow = document.createElement("tr");
+    tableHeaderNames.forEach((header) => {
+      const th = document.createElement("th");
+      th.textContent = header;
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    for (const key in data) {
+      const row = document.createElement('tr');
+      tableHeaderKeys.forEach((columnName) => {
+        const td = document.createElement("td");
+        const div = document.createElement("div");
+        div.id = "scrollable";
+        if (columnName == "{{ .Get `tableKey` }}") {
+          div.textContent = key;
+        } else {
+          div.textContent = data[key][columnName];
+        };
+        td.appendChild(div);
+        row.appendChild(td);
+        tbody.appendChild(row);
+      });
+    }
+    table.appendChild(thead);
+    table.appendChild(tbody);
+    jsonTableContainer.appendChild(table)
+    {{ if eq (.Get "sortable") "true" }}
+      table.className = "sortable"
+      sorttable.makeSortable(document.getElementById("{{ .Get `id` }}"));
+    {{ end }}
+
+    table.className = ""
+  }
+</script>
+<div id="jsonTableContainer"></div>
+<script src="/js/lib/sorttable.js"></script>