Update chip support pages (#376)

* feat: use json in chipstatus shortcode and update related content

* feat: add question icon and document its purpose

* feat: add logic to process generated_time key as ISO8601 time

* feat: add chipstatus shortcode with generated_time

* feat: change time format

* chore: update json key names

Author: f-hollow

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

@@ -4,12 +4,17 @@ date: 2024-08-29T16:40:07+08:00
 draft: false
 ---
 
+**Last updated:** {{< chipstatus contentPath="persist/chip-support-status/esp32c61.json" jsonKey="timestamp" >}}
+
 This page lists the projects in which the ESP32-C61 is supported.
 
-In the list below, the supported features are marked with a checkbox (:white_check_mark:), while unsupported features are marked with an hourglass (:hourglass_flowing_sand:). An internal issue reference (such as \"IDF-1234\") is listed at the end of the feature description to help us keep this list up to date:
+To show the status of features, the following icons are used:
 
-- :hourglass_flowing_sand: Unsupported feature (IDF-1234)
 - :white_check_mark: Supported feature
+- :hourglass_flowing_sand: Unsupported feature (IDF-1234)
+  - \"IDF-1234\" indicates an internal issue reference to help us keep this list up to date
+- :question: Support status unknown
+  - Such status issues will be checked and fixed shortly
 
 This page will be periodically updated to reflect the current support status for the ESP32-C61.
 
@@ -27,4 +32,9 @@ According to the chip mass production plan, the planned support for ESP32-C61 in
 
 If you have an issue to report about any of the ESP32-C61 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/esp32c61.md" >}}
+{{< chipstatus contentPath="persist/chip-support-status/esp32c61.json" jsonKey="idf" >}}
+
+
+## External projects
+
+{{< chipstatus contentPath="persist/chip-support-status/esp32c61.json" jsonKey="other_proj" >}}

layouts/shortcodes/chipstatus.html

@@ -1,23 +1,45 @@
-<div id="content">Loading...</div>
+{{ $uniqueID := .Get "jsonKey" | urlize }} <!-- Generate a unique ID -->
+<span id="content-{{ $uniqueID }}">Loading...</span>
+
+{{ $contentPath := .Get "contentPath" }}
+{{ $jsonKey := .Get "jsonKey" }}
+{{ $fullURL := printf "%s%s" .Site.BaseURL $contentPath }}
 
 <script>
-  const url = '{{ .Get "url" }}';  // Get the URL from the shortcode parameter
+  document.addEventListener("DOMContentLoaded", function () {
+    const url = '{{ $fullURL }}';
+    const jsonKey = '{{ $jsonKey }}';
+    const uniqueID = '{{ $uniqueID }}';
+
+    fetch(url) // Fetch the JSON file
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Error fetching the JSON data');
+        }
+        return response.json();
+      })
+      .then(data => {
+        if (!data[jsonKey]) {
+          throw new Error(`Key "${jsonKey}" not found in the JSON data`);
+        }
 
-  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);
+        let content;
+        if (jsonKey === "timestamp") {
+          // Convert ISO8601 time to desired local time format
+          const isoTime = data[jsonKey];
+          const options = { day: 'numeric', month: 'short', year: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true };
+          content = new Intl.DateTimeFormat('en-GB', options).format(new Date(isoTime));
+        } else {
+          // Extract the value for the key and convert the markdown to HTML
+          let markdown = data[jsonKey];
+          content = marked.parse(markdown);
+        }
 
-      // Inject the HTML into the content div
-      document.getElementById('content').innerHTML = htmlContent;
-    })
-    .catch(error => {
-      document.getElementById('content').textContent = 'Error loading markdown content: ' + error.message;
-    });
+        // Inject the content into the unique content span
+        document.getElementById(`content-${uniqueID}`).innerHTML = content;
+      })
+      .catch(error => {
+        document.getElementById(`content-${uniqueID}`).textContent = 'Error loading content: ' + error.message;
+      });
+  });
 </script>