feat: static index

CGFR/2024-10-10/index_files/W3C-UD

@@ -0,0 +1,14 @@
+
+/* Style for an "Unofficial Draft" */
+
+@import "base.css";
+
+body {
+  background: url(logos/UD) no-repeat fixed,
+              url(logos/UD-watermark-light-draft) repeat-y center left fixed,
+              url(logos/UD-watermark-light-unofficial) repeat-y center right fixed;
+  background-image: url(logos/UD),
+                    var(--draft-watermark),
+                    var(--unofficial-watermark);
+  background-color: var(--bg);
+}

CGFR/2024-10-10/index_files/fixup.js

@@ -0,0 +1,362 @@
+/******************************************************************************
+ *                 JS Extension for the W3C Spec Style Sheet                  *
+ *                                                                            *
+ * This code handles:                                                         *
+ * - some fixup to improve the table of contents                              *
+ * - the obsolete warning on outdated specs                                   *
+ ******************************************************************************/
+(function() {
+  "use strict";
+  try {
+    var details = document.querySelector("div.head details");
+    details.addEventListener("toggle", function toggle() {
+      window.localStorage.setItem("tr-metadata", details.open);
+    }, false);
+    details.open = !localStorage.getItem("tr-metadata") || localStorage.getItem("tr-metadata") === 'true';
+  } catch (e) {}; // ignore errors for this interaction
+
+  var ESCAPEKEY = 27;
+  var collapseSidebarText = '<span aria-hidden="true">←</span> '
+                          + '<span>Collapse Sidebar</span>';
+  var expandSidebarText   = '<span aria-hidden="true">→</span> '
+                          + '<span>Pop Out Sidebar</span>';
+  var tocJumpText         = '<span aria-hidden="true">↑</span> '
+                          + '<span>Jump to Table of Contents</span>';
+
+  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
+  var autoToggle   = function(e){ toggleSidebar(e.matches) };
+  if(sidebarMedia.addListener) {
+    sidebarMedia.addListener(autoToggle);
+  }
+
+  function toggleSidebar(on, skipScroll) {
+    if (on == undefined) {
+      on = !document.body.classList.contains('toc-sidebar');
+    }
+
+    if (!skipScroll) {
+      /* Don't scroll to compensate for the ToC if we're above it already. */
+      var headY = 0;
+      var head = document.querySelector('.head');
+      if (head) {
+        // terrible approx of "top of ToC"
+        headY += head.offsetTop + head.offsetHeight;
+      }
+      skipScroll = window.scrollY < headY;
+    }
+
+    var toggle = document.getElementById('toc-toggle');
+    var tocNav = document.getElementById('toc');
+    if (on) {
+      var tocHeight = tocNav.offsetHeight;
+      document.body.classList.add('toc-sidebar');
+      document.body.classList.remove('toc-inline');
+      toggle.innerHTML = collapseSidebarText;
+      if (!skipScroll) {
+        window.scrollBy(0, 0 - tocHeight);
+      }
+      tocNav.focus();
+      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
+    }
+    else {
+      document.body.classList.add('toc-inline');
+      document.body.classList.remove('toc-sidebar');
+      toggle.innerHTML = expandSidebarText;
+      if (!skipScroll) {
+        window.scrollBy(0, tocNav.offsetHeight);
+      }
+      if (toggle.matches(':hover')) {
+        /* Unfocus button when not using keyboard navigation,
+           because I don't know where else to send the focus. */
+        toggle.blur();
+      }
+    }
+  }
+
+  function createSidebarToggle() {
+    /* Create the sidebar toggle in JS; it shouldn't exist when JS is off. */
+    var toggle = document.createElement('a');
+      /* This should probably be a button, but appearance isn't standards-track.*/
+    toggle.id = 'toc-toggle';
+    toggle.class = 'toc-toggle';
+    toggle.href = '#toc';
+    toggle.innerHTML = collapseSidebarText;
+
+    sidebarMedia.addListener(autoToggle);
+    var toggler = function(e) {
+      e.preventDefault();
+      sidebarMedia.removeListener(autoToggle); // persist explicit off states
+      toggleSidebar();
+      return false;
+    }
+    toggle.addEventListener('click', toggler, false);
+
+
+    /* Get <nav id=toc-nav>, or make it if we don't have one. */
+    var tocNav = document.getElementById('toc-nav');
+    if (!tocNav) {
+      tocNav = document.createElement('p');
+      tocNav.id = 'toc-nav';
+      /* Prepend for better keyboard navigation */
+      document.body.insertBefore(tocNav, document.body.firstChild);
+    }
+    /* While we're at it, make sure we have a Jump to Toc link. */
+    var tocJump = document.getElementById('toc-jump');
+    if (!tocJump) {
+      tocJump = document.createElement('a');
+      tocJump.id = 'toc-jump';
+      tocJump.href = '#toc';
+      tocJump.innerHTML = tocJumpText;
+      tocNav.appendChild(tocJump);
+    }
+
+    tocNav.appendChild(toggle);
+  }
+
+  var toc = document.getElementById('toc');
+  if (toc) {
+    if (!document.getElementById('toc-toggle')) {
+      createSidebarToggle();
+    }
+    toggleSidebar(sidebarMedia.matches, true);
+
+    /* If the sidebar has been manually opened and is currently overlaying the text
+       (window too small for the MQ to add the margin to body),
+       then auto-close the sidebar once you click on something in there. */
+    toc.addEventListener('click', function(e) {
+      if(document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
+        var el = e.target;
+        while (el != toc) { // find closest <a>
+          if (el.tagName.toLowerCase() == "a") {
+            toggleSidebar(false);
+            return;
+          }
+          el = el.parentElement;
+        }
+      }
+    }, false);
+  }
+  else {
+    console.warn("Can't find Table of Contents. Please use <nav id='toc'> around the ToC.");
+  }
+
+  /* Amendment Diff Toggling */
+  var showDiff = function(event) {
+    var a = event.target.parentElement.parentElement;
+    var ins = document.querySelectorAll("ins[cite='#" + a.id + "'], #" + a.id + " ins" );
+    var del = document.querySelectorAll("del[cite='#" + a.id + "'], #" + a.id + " del" );
+    ins.forEach( function(e) { e.hidden = false; e.classList.remove("diff-inactive") });
+    del.forEach( function(e) { e.hidden = false; e.classList.remove("diff-inactive") });
+    a.querySelectorAll("button[value=diff]")[0].disabled = true;
+    a.querySelectorAll("button[value=old]")[0].disabled = false;
+    a.querySelectorAll("button[value=new]")[0].disabled = false;
+  }
+  var showOld = function(event) {
+    var a = event.target.parentElement.parentElement;
+    var ins = document.querySelectorAll("ins[cite='#" + a.id + "'], #" + a.id + " ins" );
+    var del = document.querySelectorAll("del[cite='#" + a.id + "'], #" + a.id + " del" );
+    ins.forEach( function(e) { e.hidden = true;  e.classList.add("diff-inactive") });
+    del.forEach( function(e) { e.hidden = false; e.classList.add("diff-inactive") });
+    a.querySelectorAll("button[value=diff]")[0].disabled = false;
+    a.querySelectorAll("button[value=old]")[0].disabled = true;
+    a.querySelectorAll("button[value=new]")[0].disabled = false;
+  }
+  var showNew = function(event) {
+    var a = event.target.parentElement.parentElement;
+    var ins = document.querySelectorAll("ins[cite='#" + a.id + "'], #" + a.id + " ins" );
+    var del = document.querySelectorAll("del[cite='#" + a.id + "'], #" + a.id + " del" );
+    ins.forEach( function(e) { e.hidden = false;  e.classList.add("diff-inactive") });
+    del.forEach( function(e) { e.hidden = true; e.classList.add("diff-inactive") });
+    a.querySelectorAll("button[value=diff]")[0].disabled = false;
+    a.querySelectorAll("button[value=old]")[0].disabled = false;
+    a.querySelectorAll("button[value=new]")[0].disabled = true;
+  }
+  var amendments = document.querySelectorAll('[id].amendment, [id].correction, [id].addition');
+  amendments.forEach( function(a) {
+    var ins = document.querySelectorAll("ins[cite='#" + a.id + "'], #" + a.id + " ins" );
+    var del = document.querySelectorAll("del[cite='#" + a.id + "'], #" + a.id + " del" );
+    if (ins.length == 0 && del.length == 0) { return; }
+
+    var tbar = document.createElement('div');
+    tbar.lang = 'en';
+    tbar.className = 'amendment-toggles';
+
+    if (document.respec) tbar.classList.add('removeOnSave');
+
+    var toggle = document.createElement('button');
+    toggle.value = 'diff'; toggle.innerHTML = 'Show Change'; toggle.disabled = true;
+    toggle.addEventListener('click', showDiff, false);
+    tbar.appendChild(toggle);
+
+    toggle = document.createElement('button');
+    toggle.value = 'old'; toggle.innerHTML = 'Show Current';
+    toggle.addEventListener('click', showOld, false);
+    tbar.appendChild(toggle);
+
+    toggle = document.createElement('button');
+    toggle.value = 'new'; toggle.innerHTML = 'Show Future';
+    toggle.addEventListener('click', showNew, false);
+    tbar.appendChild(toggle);
+
+    a.appendChild(tbar);
+  });
+
+  /* Wrap tables in case they overflow */
+  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
+  var numTables = tables.length;
+  for (var i = 0; i < numTables; i++) {
+    var table = tables[i];
+    if (!table.matches('.example *, .note *, .advisement *, .def *, .issue *')) {
+      /* Overflowing colored boxes looks terrible, and also
+         the kinds of tables inside these boxes
+         are less likely to need extra space. */
+      var wrapper = document.createElement('div');
+      wrapper.className = 'overlarge';
+      table.parentNode.insertBefore(wrapper, table);
+      wrapper.appendChild(table);
+    }
+  }
+
+  /* Deprecation warning */
+  if (document.location.hostname === "www.w3.org" && /^\/TR\/\d{4}\//.test(document.location.pathname)) {
+    var request = new XMLHttpRequest();
+
+    request.open('GET', 'https://www.w3.org/TR/tr-outdated-spec');
+    request.onload = function() {
+      if (request.status < 200 || request.status >= 400) {
+        return;
+      }
+      try {
+        var currentSpec = JSON.parse(request.responseText);
+      } catch (err) {
+        console.error(err);
+        return;
+      }
+      document.body.classList.add("outdated-spec");
+      var node = document.createElement("p");
+      node.classList.add("outdated-warning");
+      node.tabIndex = -1;
+      node.setAttribute("role", "dialog");
+      node.setAttribute("aria-modal", "true");
+      node.setAttribute("aria-labelledby", "outdatedWarning");
+      if (currentSpec.style) {
+          node.classList.add(currentSpec.style);
+      }
+
+      var frag = document.createDocumentFragment();
+      var heading = document.createElement("strong");
+      heading.id = "outdatedWarning";
+      heading.innerHTML = currentSpec.header;
+      frag.appendChild(heading);
+
+      var anchor = document.createElement("a");
+      anchor.href = currentSpec.latestUrl;
+      anchor.innerText = currentSpec.latestUrl + ".";
+
+      var warning = document.createElement("span");
+      warning.innerText = currentSpec.warning;
+      warning.appendChild(anchor);
+      frag.appendChild(warning);
+
+      var button = document.createElement("button");
+      var handler = makeClickHandler(node);
+      button.addEventListener("click", handler);
+      button.innerHTML = "&#9662; collapse";
+      frag.appendChild(button);
+      node.appendChild(frag);
+
+      function makeClickHandler(node) {
+        var isOpen = true;
+        return function collapseWarning(event) {
+          var button = event.target;
+          isOpen = !isOpen;
+          node.classList.toggle("outdated-collapsed");
+          document.body.classList.toggle("outdated-spec");
+          button.innerText = (isOpen) ? '\u25BE collapse' : '\u25B4 expand';
+        }
+      }
+
+      document.body.appendChild(node);
+      button.focus();
+      window.onkeydown = function (event) {
+        var isCollapsed = node.classList.contains("outdated-collapsed");
+        if (event.keyCode === ESCAPEKEY && !isCollapsed) {
+          button.click();
+        }
+      }
+
+      window.addEventListener("click", function(event) {
+        if (!node.contains(event.target) && !node.classList.contains("outdated-collapsed")) {
+          button.click();
+        }
+      });
+
+      document.addEventListener("focus", function(event) {
+        var isCollapsed = node.classList.contains("outdated-collapsed");
+        var containsTarget = node.contains(event.target);
+        if (!isCollapsed && !containsTarget) {
+          event.stopPropagation();
+          node.focus();
+        }
+      }, true); // use capture to enable event delegation as focus doesn't bubble up
+    };
+
+    request.onerror = function() {
+      console.error("Request to https://www.w3.org/TR/tr-outdated-spec failed.");
+    };
+
+    request.send();
+  }
+
+  /* Dark mode toggle */
+  const darkCss = document.querySelector('link[rel~="stylesheet"][href^="https://www.w3.org/StyleSheets/TR/2021/dark"]');
+  if (darkCss) {
+    const colorScheme = localStorage.getItem("tr-theme") || "auto";
+    const browserDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = colorScheme === "auto" ? (browserDarkMode ? "dark" : "light") : colorScheme;
+
+    darkCss.disabled = theme === "light";
+    darkCss.media = theme === "dark" ? "(prefers-color-scheme: dark)" : "";
+    document.body.classList.toggle("darkmode", theme === "dark")
+    const render = document.createElement("div");
+    function createOption(option) {
+      const checked = option === colorScheme;
+      return `
+        <label>
+          <input name="color-scheme" type="radio" value="${option}" ${checked ? "checked": ""}>
+          <span>${option}</span>
+        </label>
+      `.trim();
+    }
+    render.innerHTML = `
+      <a id="toc-theme-toggle" role="radiogroup" aria-label="Select a color scheme">
+        <span aria-hidden="true"><img src="https://www.w3.org/StyleSheets/TR/2021/logos/dark.svg" title="theme toggle icon" /></span>
+        <span>
+        ${["light", "dark", "auto"].map(createOption).join("")}
+        </span>
+      </a>
+    `;
+    const changeListener = (event) => {
+      const { value } = event.target;
+      const browserDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const theme = value === "auto" ? (browserDarkMode ? "dark" : "light") : value;
+
+      darkCss.disabled = theme === "light";
+      darkCss.media = theme === "dark" ? "(prefers-color-scheme: dark)" : "";
+      document.body.classList.toggle("darkmode", theme === "dark")
+      localStorage.setItem("tr-theme", value);
+    };
+    render.querySelectorAll("input[type='radio']").forEach((input) => {
+      input.addEventListener("change", changeListener);
+    });
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+      const colorScheme = localStorage.getItem("tr-theme") || "auto";
+      document.body.classList.toggle("darkmode", colorScheme === "auto" ? event.matches : colorScheme === "dark");
+  });
+
+    var tocNav = document.querySelector('#toc-nav');
+    tocNav.appendChild(...render.children);
+  }
+
+})();

CGFR/2024-10-10/index_files/visualizations.js

@@ -0,0 +1,164 @@
+const renderNetwork = () => {
+  const yaml = window.jsyaml;
+  const getSchemas = async () => {
+    const oas = 'https://w3id.org/traceability/openapi/openapi.yml';
+    const res = await fetch(oas);
+    const specYaml = await res.text();
+    const openapi = yaml.load(specYaml);
+    const options = Object.keys(openapi.paths).map((p) => p);
+    return options;
+  };
+  const getSchema = async (path) => {
+    const oas = `https://w3id.org/traceability/openapi/components/${path}`;
+    const res = await fetch(oas);
+    const schemaYaml = await res.text();
+    return yaml.load(schemaYaml);
+  };
+
+  const schemasToGraph = (schemas) => {
+    const links = [];
+    const nodes = schemas.map((s) => {
+      const name = s.path.split('/').pop().split('.')[0];
+      const category = name.includes('Certificate') ? 1 : 0;
+      return {
+ id: name, path: s.path, category, name
+};
+    });
+    schemas.forEach((s) => {
+      const schemaString = JSON.stringify(s.schema);
+      nodes.forEach((n) => {
+        if (schemaString.includes(`${n.id}.yml`)) {
+          const parent = nodes.find((np) => np.path === s.path);
+          const child = nodes.find((nc) => nc.path === n.path);
+          links.push({
+ source: parent.id, target: child.id, value: 1,
+});
+        }
+      });
+    });
+    return { nodes, links };
+  };
+  (async () => {
+    const paths = await getSchemas();
+    const schemas = await Promise.all(
+      paths.map(async (p) => {
+        const s = await getSchema(p);
+        return { schema: s, path: p };
+      })
+    );
+    const data = schemasToGraph(schemas);
+
+    data.nodes.forEach((n, i) => {
+      const edgeCount = data.links.filter((link) => link.source === n.id || link.target === n.id).length;
+      n.symbolSize = edgeCount;
+      n.value = edgeCount;
+    });
+
+data.categories = [
+  {
+    name: 'Types'
+  },
+  {
+    name: 'Certificates'
+  }
+];
+
+    const dom = document.getElementById('network-container');
+  const myNetworkChart = window.echarts.init(dom, null, {
+    renderer: 'canvas',
+    useDirtyRect: false
+  });
+  const option = {
+    tooltip: {},
+    legend: [
+      {
+        data: data.categories.map((a) => a.name)
+      }
+    ],
+    animationDurationUpdate: 1500,
+    animationEasingUpdate: 'quinticInOut',
+    series: [
+      {
+        name: 'Traceability',
+        type: 'graph',
+        layout: 'circular',
+        circular: {
+          rotateLabel: true
+        },
+        data: data.nodes,
+        links: data.links,
+        categories: data.categories,
+        roam: true,
+        label: {
+          position: 'right',
+          formatter: '{b}'
+        },
+        lineStyle: {
+          color: 'source',
+          curveness: 0.3
+        }
+      }
+    ]
+  };
+  myNetworkChart.setOption(option);
+  })();
+};
+
+(async () => {
+  setTimeout(async () => {
+    const dom = document.getElementById('chart-container');
+    const myChart = window.echarts.init(dom, null, {
+      renderer: 'canvas',
+      useDirtyRect: false,
+    });
+    const res = await fetch('./credentials-with-issuer-dependent-terms.json');
+    const undefinedTermsByCredentialType = await res.json();
+    const source = undefinedTermsByCredentialType.map((ct) => [ct.type, ct.count]);
+    const option = {
+      dataset: [
+        {
+          dimensions: ['name', 'score'],
+          source,
+        },
+        {
+          transform: {
+            type: 'sort',
+            config: { dimension: 'score', order: 'desc' },
+          },
+        },
+      ],
+      xAxis: {
+        type: 'category',
+        triggerEvent: true,
+        axisLabel: {
+          interval: 0,
+          rotate: 30,
+          formatter(value) {
+            const short = `${value.substring(0, 8)}...`;
+            return short;
+          },
+        },
+      },
+      yAxis: {},
+      series: {
+        type: 'bar',
+        encode: { x: 'name', y: 'score' },
+        itemStyle: { color: '#ff9800' },
+        datasetIndex: 1,
+      },
+    };
+    if (option && typeof option === 'object') {
+      myChart.setOption(option);
+    }
+    myChart.on('click', (params) => {
+      // Make sure event from target axis
+      if (params.componentType === 'xAxis' && params.xAxisIndex === 0) {
+        // params.value is the axis label before formatted
+        const endpoint = `https://w3id.org/traceability/openapi/components/schemas/credentials/${params.value}.yml`;
+        window.open(endpoint, '_blank');
+      }
+    });
+    window.addEventListener('resize', myChart.resize);
+    renderNetwork();
+  }, 2 * 1000);
+})();