test: add a page with link to external markdown content (#330)

content/pages/chip-support-status/esp32test/index.md

@@ -27,4 +27,4 @@ According to the chip mass production plan, the planned support for ESP32test in
 
 If you have an issue to report about any of the ESP32test features, please create an issue in [ESP-IDF GitHub issue tracker](https://github.com/espressif/esp-idf/issues).
 
-{{< chipstatus url="https://developer.espressif.com/persist/chip-support-status/data.json" >}}
+{{< chipstatus url="https://developer.espressif.com/persist/chip-support-status/data.md" >}}

layouts/partials/chip_support_status.html

@@ -0,0 +1,4 @@
+{{ if .Page.HasShortcode "chipstatus" }}
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/js/joypixels.min.js"></script>
+{{ end }}

layouts/partials/head.html

@@ -118,6 +118,7 @@
   {{ partial "vendor.html" . }}
   {{ partial "vendor_custom.html" . }}
   {{ partial "learn_custom.html" . }}
+  {{ partial "chip_support_status.html" . }}
   {{/* Analytics */}}
   {{ partial "analytics/main.html" .Site }}
   {{/* Extend head - eg. for custom analytics scripts, etc. */}}

layouts/shortcodes/chipstatus.html

@@ -1,55 +1,29 @@
-<div id="content"></div>
+<div id="content">Loading...</div>
 
 <script>
   const url = '{{ .Get "url" }}';  // Get the URL from the shortcode parameter
 
-  fetch(url)  // Fetch the JSON data from the parameterized URL
-    .then(response => response.json())
-    .then(jsonData => {
-      let htmlContent = '';
+  // Configure emoji toolkit (JoyPixels)
+  joypixels.emojiSize = '64px'; // Adjust size if needed
 
-      Object.keys(jsonData).forEach(sectionName => {
-        const section = jsonData[sectionName];
-        htmlContent += `<h3>${section.title || sectionName}</h3>`;
-
-        if (section.items && Array.isArray(section.items)) {
-          htmlContent += '<ul>';
-          section.items.forEach(item => {
-            htmlContent += '<li>';
-
-            if (item.item) htmlContent += item.item;
-            if (item.name) htmlContent += item.name;
-
-            if (item.subitems && Array.isArray(item.subitems)) {
-              htmlContent += '<ul>';
-              item.subitems.forEach(subitem => {
-                htmlContent += '<li>';
-
-                if (subitem.item) htmlContent += subitem.item;
-
-                if (subitem.subsubitems && Array.isArray(subitem.subsubitems)) {
-                  htmlContent += '<ul>';
-                  subitem.subsubitems.forEach(subsubitem => {
-                    htmlContent += `<li>${subsubitem}</li>`;
-                  });
-                  htmlContent += '</ul>';
-                }
-
-                htmlContent += '</li>';
-              });
-              htmlContent += '</ul>';
-            }
+  fetch(url)  // Fetch the markdown content
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Error fetching the markdown data');
+      }
+      return response.text();
+    })
+    .then(markdown => {
+      // Convert the markdown to HTML
+      let htmlContent = marked.parse(markdown);
 
-            htmlContent += '</li>';
-          });
-          htmlContent += '</ul>';
-        }
-      });
+      // Replace emoji shortcodes with actual emojis
+      htmlContent = joypixels.shortnameToImage(htmlContent);
 
-      // Insert the generated content into the 'content' div
+      // Inject the HTML into the content div
       document.getElementById('content').innerHTML = htmlContent;
     })
     .catch(error => {
-      console.error('Error fetching the JSON data:', error);
+      document.getElementById('content').textContent = 'Error loading markdown content: ' + error.message;
     });
 </script>