Add color coding to the to standards table in the docs page (#211)

* Added the color mapping with a react component. Needed to change the overview.md file to .mdx format. Contrast ratio was respected.

Author: cah-patrickthiem

.gitignore

@@ -16,6 +16,7 @@
 /docs/06-releases
 /standards/*.md
 /standards/*/*.md
+/standards/*/*.mdx
 /standards/scs-*.yaml
 
 # Dependencies

populateStds.js

@@ -15,6 +15,42 @@ const trackIntros = {
 }
 const headerLegend = '*Legend to the column headings: Draft, Stable (but not effective), Effective, Deprecated (and no longer effective).'
 
+const reactHighlightTableCellBackground = `
+import { useEffect } from 'react';
+export const TableCellStyleApplier = () => {
+    // apply background color based on cell index
+    const colorMapping = {
+      3: '#FBFDE2', // draft
+      4: '#E4FDE2', // stable
+      5: '#E2EAFD', // effective
+      6: '#FDE2E2' // deprecated
+    };
+  
+
+    useEffect(() => {
+        const divElement = document.querySelector('#color-table-cells');
+        if (divElement) {
+          // the next sibling of that element should be our table
+          const tableElement = divElement.nextElementSibling;
+          if (tableElement && tableElement.tagName.toLowerCase() === 'table') {
+            tableElement.querySelectorAll('tbody tr').forEach((row) => {
+              row.querySelectorAll('td').forEach((cell, index) => {
+                // apply background for all cells that have more content than '-'
+                if (colorMapping[index] && cell.textContent.trim() !== '-') {
+                  cell.style.backgroundColor = colorMapping[index];
+                }
+              });
+            });
+          }
+        }
+      }, []);
+  
+    return null;
+  };
+
+  <TableCellStyleApplier />
+  `
+
 var filenames = fs
     .readdirSync('standards/')
     .filter((fn) => fn.startsWith('scs-') && fn.endsWith('.md') && !fn.startsWith('scs-X'))
@@ -77,11 +113,13 @@ function mkLinkList(versions) {
 // walk down the hierarchy, building adr overview pages, track overview pages, and total overview page
 // as well as the new sidebar
 sidebarItems = []
-var lines = readPrefixLines('standards/standards/overview.md')
+var lines = readPrefixLines('standards/standards/overview.mdx')
 if (!lines.length) lines.push(`${intro}
 
 ${headerLegend}
+${reactHighlightTableCellBackground}
 `)
+lines.push('<div id="color-table-cells" />') // used to find the sibling table for color encoded background
 lines.push('| Standard  | Track  | Description  | Draft | Stable* | Effective | Deprecated* |')
 lines.push('| --------- | ------ | ------------ | ----- | ------- | --------- | ----------- |')
 Object.entries(tracks).forEach((trackEntry) => {
@@ -185,7 +223,7 @@ ${headerLegend}
     fs.writeFileSync(`${trackPath}/index.md`, tlines.join('\n'), 'utf8')
 })
 lines.push('')  // file should end with a single newline character
-fs.writeFileSync(`standards/standards/overview.md`, lines.join('\n'), 'utf8')
+fs.writeFileSync(`standards/standards/overview.mdx`, lines.join('\n'), 'utf8')
 
 var newSidebars = `module.exports = ${JSON.stringify(sidebarItems, null, '  ')}`
 fs.writeFileSync('./sidebarsStandardsItems.js', newSidebars, 'utf8')

standards/index.md

@@ -6,4 +6,4 @@ In addition, SCS provides a certification framework that enables these providers
 
 ![Alt text](image.png)
 
-Learn more about these scopes as well as the currently certified clouds under [Certification](certification/overview.md). More details on individual standards can be found under [Standards](standards/overview.md).
+Learn more about these scopes as well as the currently certified clouds under [Certification](certification/overview.md). More details on individual standards can be found under [Standards](standards/overview.mdx).