From 1d76446ccec7c772a346ddc47c1005620d050042 Mon Sep 17 00:00:00 2001
From: "kirill.chalov" <kirill.chalov@espressif.com>
Date: Thu, 14 Nov 2024 18:20:24 +0800
Subject: [PATCH] test: add a page with link to external markdown content

---
 .../chip-support-status/esp32test/index.md    |  2 +-
 layouts/partials/chip_support_status.html     |  4 ++
 layouts/partials/head.html                    |  1 +
 layouts/shortcodes/chipstatus.html            | 60 ++++++-------------
 4 files changed, 23 insertions(+), 44 deletions(-)
 create mode 100644 layouts/partials/chip_support_status.html

diff --git a/content/pages/chip-support-status/esp32test/index.md b/content/pages/chip-support-status/esp32test/index.md
index 718cf4da..e4ce1ab6 100644
--- a/content/pages/chip-support-status/esp32test/index.md
+++ b/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" >}}
diff --git a/layouts/partials/chip_support_status.html b/layouts/partials/chip_support_status.html
new file mode 100644
index 00000000..f180c8c7
--- /dev/null
+++ b/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/emoji-toolkit@9.0.1/lib/js/joypixels.min.js"></script>
+{{ end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 69eed324..8a0d76e8 100644
--- a/layouts/partials/head.html
+++ b/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. */}}
diff --git a/layouts/shortcodes/chipstatus.html b/layouts/shortcodes/chipstatus.html
index 4f77ff86..5fe53da6 100644
--- a/layouts/shortcodes/chipstatus.html
+++ b/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>