updates page (#375)

Demo for what an updates feed could look like. Drawing together multiple
data sources (apps updates, docs updates, and status page updates).

This could be its own page, or a sidebar.

Some sort of search / filter would be needed to make it useful.

checks/run_meta_check.py

@@ -27,7 +27,7 @@
 # Warning level for missing parameters.
 EXPECTED_PARAMETERS = {
     "title": "",
-    "template": ["main.html", "supported_apps.html"],
+    "template": ["main.html", "supported_apps.html", "updateFeed.html"],
     "description": "",
     "icon": "",
     "status": ["new", "deprecated"],
@@ -38,6 +38,10 @@
     "tags": "",         # Add info here when implimented.
     "vote_count": "",
     "vote_sum": "",
+    "search": "",
+    "hide": ["toc", "nav", "tags"],
+    "zendesk_article_id": "",
+    "zendesk_section_id": "",
 }
 
 
@@ -102,6 +106,7 @@ def _run_check(f):
         time.sleep(0.01)
 
 
+
 def _title_from_filename():
     """
     I think this is the same as what mkdocs does.
@@ -144,7 +149,7 @@ def _unpack(toc, a):
 
         if not header_match:
             return
-
+        
         header_level = len(header_match.group(1))
         header_name = header_match.group(2)
 

docs/Scientific_Computing/Supported_Applications/index.md

@@ -1,6 +1,8 @@
 ---
 title: Supported Applications
 template: supported_apps.html
+hide:
+    - toc
 ---
 
 

docs/assets/javascripts/updateFeed.js

@@ -0,0 +1,83 @@
+window.onload = function() {
+    update();
+}
+
+async function update() {
+    const feedList = document.getElementById("md-feed__inner");
+    const rss_feeds = [
+        `https://docs.nesi.org.nz/software_updates.xml`,
+        `https://docs.nesi.org.nz/page_update.xml`,
+        `https://docs.nesi.org.nz/page_creation.xml`,
+        "https://status.nesi.org.nz/history.rss"
+    ];
+
+    let allChannel = [];
+
+    // Fetch and process all feeds
+    try {
+        await Promise.all(rss_feeds.map(async (feed) => {
+            const response = await fetch(feed);
+            if (!response.ok) {
+                console.error(`Failed to fetch channel: ${feed}`);
+                return;  // Skip this feed if there's an error
+            }
+
+            const xmlString = await response.text();
+            const parser = new DOMParser();
+            const dom = parser.parseFromString(xmlString, "text/xml");
+
+            const channelName = dom.querySelector("channel > title")?.textContent || "";
+
+            dom.querySelectorAll("item").forEach(item => {
+                const pubDateText = item.querySelector("pubDate")?.textContent;
+
+                // catClass = item.querySelectorAll("category").forEach(x=> {
+                //     return { key: x.getAttribute("domain"), val: x.innerHTML }
+                // });
+
+                allChannel.push({
+                    date: new Date(pubDateText),
+                    channel: channelName,
+                    link: item.querySelector("link")?.textContent || "",
+                    channelUrl: feed,
+                    title: item.querySelector("title")?.textContent || "", 
+                    description: item.querySelector("description")?.textContent || "", 
+                });
+            });
+        }));
+    } catch (error) {
+        console.error("Error fetching or parsing feeds: ", error);
+    }
+
+    // Sort feeds by publication date
+    allChannel.sort((a, b) => b.date - a.date);
+
+    let htmlContent = "";
+    // Collect all innerHTML content before updating the DOM to minimize reflows
+    allChannel.forEach(f => {
+        try{  
+
+            title = `<h3>${f.title}</h3>`;
+            if (f.link){
+                title = `<a class="md-feed-title" href="${f.link}">${title}</a>`
+            }
+            htmlContent += `
+                <div class="md-feed-item">
+                    ${title}
+                    <div class="md-feed-description"><p>${f.description}</p></div>
+                    <div>
+                    <span class="md-icon md-feed-date" title="Date">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1-2.1-2M12.5 7v5.2l4 2.4-1 1L11 13V7h1.5M11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2v1.8Z"></path></svg>
+                    <span>${f.date.toLocaleDateString()} via <a target="_blank" href="${f.channelUrl}">${f.channel}</a></span>
+                    </span>
+                    </span>
+                    </div>
+                </div>`;
+            console.log(f);
+
+        }catch (error) {
+                    console.error("Error fetching or parsing feeds: ", error);
+    }
+    });
+    feedList.innerHTML = htmlContent;  // Update the DOM once with all content
+}

docs/assets/stylesheets/updateFeed.css

@@ -0,0 +1,37 @@
+
+#feed {
+    margin: 0 auto;
+    max-width: 800px;
+    padding: 20px;
+    background-color: #fff;
+}
+
+.md-feed-item {
+    margin: 10px;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+aside.md-source-file {
+    display: none;
+}
+.md-feed-date {
+    height: 18px;
+    color: var(--md-default-fg-color--light);
+    font-size: .68rem;
+    gap: .3rem;
+    display: inline-flex;
+    align-items: center;
+}
+/* .feed-item:last-child {
+    border-bottom: none;
+} */
+ /* Make content inside cards more readable */
+.md-feed-description h2,h3,a,p {
+    font-size: 0.8rem;
+}
+
+.md-feed-item h3 {
+    font-size: 1.5em;
+    margin: 10px;
+}

docs/updateFeed.md

@@ -0,0 +1,10 @@
+---
+template: updateFeed.html
+title: Update Feed
+description: Updates to the cluster, software and documentation.
+hide: toc
+---
+
+{{description}}
+
+

mkdocs.yml

@@ -25,6 +25,7 @@ theme:
   features:
     - navigation.indexes
     - navigation.instant          # Single Page Application
+    - navigation.instant.progress
     - navigation.instant.prefetch # Start loading page on link hover. Insiders only
     - navigation.top              # 'Return to top' button
     # - navigation.prune            # Reduces site size. ALSO BREAKS NAV BEHAVIOR
@@ -33,6 +34,7 @@ theme:
     - content.code.copy
     - content.action.edit
     - header.site_name_homepage
+
 hooks:
   - mkdocs_hooks.py
 markdown_extensions:

overrides/updateFeed.html

@@ -0,0 +1,20 @@
+{% extends "base.html" -%}
+
+# Update Feed
+
+{% block libs %}
+    {{ super() }}
+    <script src="{{ base_url }}/assets/javascripts/updateFeed.js"></script>
+{% endblock -%}
+{% block styles %}
+    {{ super() }}
+    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/updateFeed.css">
+{% endblock -%}
+{% block content -%}
+    {{ super() }}
+    <div id="md-feed">
+        <div id="md-feed__inner"></div>
+        <div class="md-progress" data-md-component="progress" role="progressbar"></div>
+    </div>
+
+{% endblock -%}

requirements.in

@@ -5,6 +5,7 @@ mkdocs-bootstrap4
 mkdocs-material
 mkdocs-spellcheck
 mkdocs-simple-hooks
+mkdocs-rss-plugin
 mkdocs-macros-plugin
 mkdocs-rss-plugin
 mkdocs-open-in-new-tab