30:[] 2e:{"title":"WCAG 2.1 Data Tools","cells":[{"id":0,"value":"md`# WCAG 2.1 Data Tools\n\n> A quick little utility to export the WCAG data as a CSV file \n> Uses [w3c/wai-wcag-quickref](https://github.com/w3c/wai-wcag-quickref/#data) data\n\n1. Imports the data at \\`WCAG21_JSON_URL\\`\n2. Flattens each entry to a single array\n3. Runs each item through \\`formatter\\` to grab specific columns\n4. **Click Download CSV** button to download\n\nRunning Locally:\n\n1. Download the tarball from the \"notebook actions\" in the header\n1. open it (creates a folder)\n1. Run \"\\`npx http-server\\`\" in that folder\n1. View locally\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"datasource = 'https://raw.githubusercontent.com/w3c/wai-wcag-quickref/gh-pages/_data/wcag21.json'","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"Table(data, {\n columns: [\"num\", \"handle\", \"title\", \"level\", \"versions\"],\n format: {\n title(t) {\n return t;\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"{\n let parser = new json2csv.Parser();\n let csv = parser.parse(data.map(formatter));\n return html`\n \n ${csv.split('\\n').map((row) => {\n return html`\n ${row.split('\",\"').map((text) => {\n return html``\n })}`\n })}\n

${text.replace('\"', '')}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"DOM.download(serializeAsCsv(data.map(formatter)), \"WCAG_21\", \"Download CSV\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"// only render these columns\nformatter = ({id, num, title, level, ...rest}) => {\n return {id, num, title, level}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"data = fetch(datasource)\n .then(res => res.json())\n .then(json => flattenWCAG(json.principles))","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"{\n const headers = [...data.reduce((acc, node) => {\n Object.keys(node).forEach(k => acc.add(k))\n return acc;\n }, new Set())]\n \n return md`Keys available:\n\n| ${headers.join('|')} |\n|${headers.map(() => '---').join('|')}|\n|${headers.map(() => ' ').join('|')}|`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"md`### Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"import {json2csv} from \"@sgregson/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"/**\n * serialize from \"@palewire/saving-csv\"\n * generate a Blob of CSV text, used to populate the button\n **/\n// import {serialize as serializeToCsv} from \"@palewire/saving-csv\"\n\nfunction serializeAsCsv (data) {\n let parser = new json2csv.Parser();\n let csv = parser.parse(data);\n return new Blob([csv], {type: \"text/csv\"}) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"/**\n* Depth-first flattening of WCAG into a singular array\n**/\nflattenWCAG = (wcag_json) => {\n // copy off the content object\n // processed as a stack in while()\n let stack = [...wcag_json];\n let output = [];\n\n // use the content stack to flatten deeply-nested JSON\n while(stack.length) {\n // children are attached to 'guidelines' and 'successcriteria'\n // keys depending on their depth as root.principles[].guidelines[].successcriteria[]\n let {guidelines, successcriteria, ...node} = stack.shift();\n\n // push non-children content onto the output collection\n output.push(node);\n \n // unshift children content to beginning of the stack\n if(guidelines) {\n stack.unshift(...guidelines)\n } else if(successcriteria) {\n stack.unshift(...successcriteria)\n }\n }\n \n return output;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"import { Table } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}