2c:null 2d:["$","title",null,{"children":"JSDoc to HTML? | Res Marti | Observable"}] 32:T58f,formatParamsExtended = (params) => { let literal = ""; let previousParam = null; for (const currentParam of params) { if (currentParam.name.includes(".")) { literal += `"; previousParam = currentParam; } literal += "

Name	Type	Pflicht-angabe	Standardwert	Beschreibung
`; } else { literal += `
`; } if (currentParam.hasChildren) { literal += ``; } literal += `${currentParam.name}`; literal += "	"; literal += `${currentParam.type}`; literal += "	"; if (!currentParam.optional) { literal += "✔"; } literal += "	"; if (currentParam.default !== undefined) { literal += `${currentParam.default}`; } literal += "	"; literal += `${currentParam.description}`; literal += "

"; return literal; }33:[] 30:{"id":"7e2c348c806cda05","slug":null,"title":"JSDoc to HTML?","thumbnail":"064d98318586f98bdb60c1b727262959567acf705f6797d9f7795aac8e1f8a5d","access_level":"public","create_time":"$D2023-05-03T14:59:04.739Z","update_time":"$D2026-03-09T14:53:50.867Z","view_time":null,"first_public_time":"$D2023-05-03T14:59:04.739Z","has_unpublished_edits":null,"fork":{"id":"e730ff6a172a0126","slug":"whats-up-jsdoc","title":"What’s Up, JSDoc?","owner":{"id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov"}},"stars":1,"starred":false,"owner":{"type":"team","id":"0d3896b062a50444","login":"resmartizh","name":"Res Marti","avatar_url":"https://avatars-next.observableusercontent.com/69661c8e64ee6b7b99aba46691979edfa94971eb1e410861d738d2401ebe034e","tier":"starter_2024"},"version":850,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ae2fb568d64d2eb1","login":"resmartizh","name":"Res Marti","avatar_url":"https://avatars-next.observableusercontent.com/69661c8e64ee6b7b99aba46691979edfa94971eb1e410861d738d2401ebe034e","tier":null}],"members":[{"type":"individual","id":"ae2fb568d64d2eb1","login":"resmartizh","name":"Res Marti","avatar_url":"https://avatars-next.observableusercontent.com/69661c8e64ee6b7b99aba46691979edfa94971eb1e410861d738d2401ebe034e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"JSDoc to HTML?","cells":[{"id":0,"value":"html`\n

JSDoc to HTML?

Styling JSDoc-style comments from observable in html using bootstrap 5

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"html`

Data

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"//slug = \"@resmartizh/export-functions\"\nslug = \"@bildungsplanungzh/tabelle\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"//cell = \"JSDOCcreateCSV\"\ncell = \"makeDataTable\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"functionname = \"makeDataTable\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"url = slug ? `https://api.observablehq.com/${slug}.js?v=3` : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"sourceCode = {\n if (!url) return null;\n try {\n return (await fetch(url)).text();\n } catch (e) {\n return null;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"variableFinder = new RegExp(\n \"function _\" +\n cell +\n \"\\\$?.+\\\${return\\\$\\n?`?([^]+?)\\\\`?\\\\n?\\\$}\\n\\nfunction\",\n \"g\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"sourceCode && Array.from(sourceCode.matchAll(variableFinder)).map((v) => v[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"text = Array.from(sourceCode.matchAll(variableFinder))[0][1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"html`

Representation

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"chunk = format(text, functionname)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"html`

Implementation

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"parsedCommentBlock = {\n const options = {\n spacing: \"preserve\" // preserving line breaks within @example (and, unfortunately, description)\n };\n console.log(text);\n const commentBlocks = parser.parse(text, options);\n return commentBlocks[0];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// see: https://www.npmjs.com/package/comment-parser\nparser = require(\"https://bundle.run/comment-parser@1.1.4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"// for example embedding (as highlighted source code), see: https://github.com/observablehq/htl#node-values\nformat = (commentBlock, methodName) => html`\n

${getSynopsis(parsedCommentBlock, methodName)}

${getDescription(parsedCommentBlock)}

Parameter

${formatParamsExtended(getParams(parsedCommentBlock))}

\n ${getExample(parsedCommentBlock)}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"getSynopsis = (commentBlock, methodName) => {\n let literal = `#`;\n literal += ` ${getParentName(parsedCommentBlock)}`;\n literal += `${getSignature(parsedCommentBlock, methodName)}`;\n literal += ` · Source`;\n //literal += `, Package`;\n return literal;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"getParentName = (commentBlock) =>\n typeof commentBlock.tags.find((d) => d.tag === \"memberOf\") == \"undefined\"\n ? \"\"\n : commentBlock.tags.find((d) => d.tag === \"memberOf\").name + \".\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"// for similar signature format, see: https://docs.python.org/3.3/library/functions.html\ngetSignature = (commentBlock, methodName) => {\n const params = getParams(commentBlock);\n return `${methodName}(${formatParams(params)})`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"getParams = function (commentBlock) {\n //console.log(commentBlock);\n let params = commentBlock.tags.filter((d) => d.tag === \"param\");\n params = params.map((d) => {\n let parent = d.name != d.name.split(\".\")[0] ? d.name.split(\".\")[0] : \"\";\n if (parent != \"\") {\n return { ...d, parent: parent };\n }\n return d;\n });\n params = params.map((d) => {\n if (params.filter((e) => e.parent === d.name).length > 0) {\n let parent = d.name != d.name.split(\".\")[0] ? d.name.split(\".\")[0] : \"\";\n return { ...d, hasChildren: true };\n }\n return d;\n });\n return params;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"test = getParams(parsedCommentBlock)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"formatParams = (params) => {\n let literal = ``;\n let previousParam = null;\n for (const currentParam of params) {\n //include only first level parameters in this part\n if (currentParam.name.includes(\".\")) {\n continue;\n }\n if (previousParam !== null) {\n literal += \", \";\n }\n\n if (currentParam.optional) {\n literal += \"[\";\n }\n\n literal += `${currentParam.name}`;\n if (currentParam.default !== undefined) {\n literal += ` = ${currentParam.default}`;\n }\n\n literal += \"\";\n\n if (currentParam.optional) {\n literal += \"]\";\n }\n previousParam = currentParam;\n }\n\n return literal;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"formatParamsExtended(test)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"getSourceUrl = \"https://observablehq.com/\" + slug","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"getPackageUrl = (methodName) => `https://www.npmjs.com/package/lodash.${methodName}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"getDescription = (parsedCommentBlock) => {\n const inlineCode = /\\`(\\w+)\\`/g;\n const paramNames = getParams(parsedCommentBlock).map((d) => d.name);\n let literal = parsedCommentBlock.description.replaceAll(\n inlineCode,\n (_, p1) => {\n if (paramNames.includes(p1)) {\n return `${p1}`;\n }\n\n return `${p1}`;\n }\n );\n\n return literal;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"// highlighting done by https://github.com/markedjs/marked, see: https://github.com/observablehq/stdlib#markdown\ngetExample = (commentBlock) => {\n const example = commentBlock.tags.find((d) => d.tag === \"example\");\n //console.log(example);\n if (typeof example == \"undefined\") {\n return md``;\n }\n const code = example.description.trim();\n return md`\n

Example

\n~~~js\n${code}\n~~~`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"BS5 = require(\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"html`bootstrap.min.css `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"