feat(bindgen): Generate docsify documentation

Enable on GitHub Pages, etc.
InsightSoftwareConsortium · Jan 18, 2023 · 41af4f2 · 41af4f2
1 parent af6791e
commit 41af4f2
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 34 deletions.
diff --git a/src/bindgen/.nojekyll b/src/bindgen/.nojekyll
diff --git a/src/bindgen/.npmignore b/src/bindgen/.npmignore
@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+test
+cypress
+dist/index.html
+dist/demo
diff --git a/src/bindgen/dist-index.html b/src/bindgen/dist-index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/demo/logo.svg" />
+    <link rel="stylesheet" href="/demo/style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><bindgenPackageName></title>
+  </head>
+  <body>
+    <div id="app">
+      <a href="https://wasm.itk.org/" target="_blank">
+        <img src="/demo/logo.svg" class="logo vanilla" alt="ITK Wasm logo" />
+      </a>
+      <h1><bindgenPackageName></h1>
+        package
+      <div class="card">
+        <h2>functions</h2>
+        <ul id="pipeline-functions-list">
+
+        </ul>
+      </div>
+      <p class="read-the-docs">
+        Click on the ITK Wasm logo to learn more
+      </p>
+    </div>
+
+    <script type="module" src="/demo/app.js"></script>
+  </body>
+</html>
diff --git a/src/bindgen/index.html b/src/bindgen/index.html
@@ -1,30 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/demo/logo.svg" />
-    <link rel="stylesheet" href="/demo/style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title><bindgenPackageName></title>
-  </head>
-  <body>
-    <div id="app">
-      <a href="https://wasm.itk.org/" target="_blank">
-        <img src="/demo/logo.svg" class="logo vanilla" alt="ITK Wasm logo" />
-      </a>
-      <h1><bindgenPackageName></h1>
-        package
-      <div class="card">
-        <h2>functions</h2>
-        <ul id="pipeline-functions-list">
-
-        </ul>
-      </div>
-      <p class="read-the-docs">
-        Click on the ITK Wasm logo to learn more
-      </p>
-    </div>
-
-    <script type="module" src="/demo/app.js"></script>
-  </body>
+<head>
+  <meta charset="UTF-8">
+  <title><bindgenPackageName></title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="description" content="<bindgenPackageDescription>">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
+   <link rel="stylesheet" media="(prefers-color-scheme: light)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
+</head>
+<body>
+  <div id="app">Loading...</div>
+  <script>
+    window.$docsify = {
+      logo: 'dist/demo/logo.svg',
+      name: '<bindgenPackageName>',
+      repo: ''
+    }
+  </script>
+  <!-- Docsify v4 -->
+  <script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-typescript.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/zoom-image.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
+</body>
 </html>
diff --git a/src/itk-wasm-cli.js b/src/itk-wasm-cli.js
@@ -311,6 +311,22 @@ function typescriptBindings(outputDir, buildDir, wasmBinaries, options, forNode=
         if (err.code !== 'EEXIST') throw err
       }
 
+      const npmIgnorePath = path.join(outputDir, '.npmignore')
+      if (!fs.existsSync(npmIgnorePath)) {
+        fs.copyFileSync(bindgenResource('.npmignore'), npmIgnorePath)
+      }
+
+      const docsIndexPath = path.join(outputDir, 'index.html')
+      if (!fs.existsSync(docsIndexPath)) {
+        let indexContent = fs.readFileSync(bindgenResource('index.html'), { encoding: 'utf8', flag: 'r' })
+        indexContent = indexContent.replaceAll('<bindgenPackageName>', packageName)
+        if (options.packageDescription) {
+          indexContent = indexContent.replaceAll('<bindgenPackageDescription>', options.packageDescription)
+        }
+        fs.writeFileSync(docsIndexPath, indexContent)
+        fs.copyFileSync(bindgenResource('.nojekyll'), path.join(outputDir, '.nojekll'))
+      }
+
       const logoPath = path.join(outputDir, 'dist', 'demo', 'logo.svg')
       if (!fs.existsSync(logoPath)) {
         fs.copyFileSync(bindgenResource('logo.svg'), logoPath)
@@ -323,7 +339,7 @@ function typescriptBindings(outputDir, buildDir, wasmBinaries, options, forNode=
 
       const indexPath = path.join(outputDir, 'dist', 'index.html')
       if (!fs.existsSync(indexPath)) {
-        let indexContent = fs.readFileSync(bindgenResource('index.html'), { encoding: 'utf8', flag: 'r' })
+        let indexContent = fs.readFileSync(bindgenResource('dist-index.html'), { encoding: 'utf8', flag: 'r' })
         indexContent = indexContent.replaceAll('<bindgenPackageName>', packageName)
         fs.writeFileSync(indexPath, indexContent)
       }
@@ -407,7 +423,7 @@ function typescriptBindings(outputDir, buildDir, wasmBinaries, options, forNode=
         importTypes.add(outputType)
       }
       resultContent += `  ${camelCase(output.name)}: ${outputType}\n\n`
-      readmeResultTable.push([`**${camelCase(output.name)}**`, `*${outputType}*`, output.description])
+      readmeResultTable.push([`\`${camelCase(output.name)}\``, `*${outputType}*`, output.description])
     })
     readmeResult += markdownTable(readmeResultTable, { align: ['c', 'c', 'l'] }) + '\n'
 
@@ -439,7 +455,7 @@ function typescriptBindings(outputDir, buildDir, wasmBinaries, options, forNode=
         optionsContent += `  /** ${parameter.description} */\n`
         const parameterType = interfaceJsonTypeToTypeScriptType.get(parameter.type)
         optionsContent += `  ${camelCase(parameter.name)}?: ${parameterType}\n\n`
-        readmeOptionsTable.push([`**${camelCase(parameter.name)}**`, `*${parameterType}*`, parameter.description])
+        readmeOptionsTable.push([`\`${camelCase(parameter.name)}\``, `*${parameterType}*`, parameter.description])
       })
       optionsContent += `}\n\nexport default ${modulePascalCase}Options\n`
       fs.writeFileSync(path.join(srcOutputDir, `${modulePascalCase}Options.ts`), optionsContent)
@@ -493,7 +509,7 @@ function typescriptBindings(outputDir, buildDir, wasmBinaries, options, forNode=
       }
       const typescriptType = interfaceJsonTypeToTypeScriptType.get(input.type)
       functionContent += ` * @param {${typescriptType}} ${camelCase(input.name)} - ${input.description}\n`
-      readmeParametersTable.push([`**${camelCase(input.name)}**`, `*${typescriptType}*`, input.description])
+      readmeParametersTable.push([`\`${camelCase(input.name)}\``, `*${typescriptType}*`, input.description])
     })
     functionContent += ` *\n * @returns {Promise<${modulePascalCase}${nodeText}Result>} - result object\n`
     functionContent += ` */\n`
@@ -511,13 +527,13 @@ function typescriptBindings(outputDir, buildDir, wasmBinaries, options, forNode=
       functionCall += `  ${camelCase(input.name)}: ${typescriptType}${end}`
     })
     if (haveParameters) {
-      functionCall += `  options: ${modulePascalCase}Options = {})\n    : Promise<${modulePascalCase}${nodeText}Result>`
+      functionCall += `  options: ${modulePascalCase}Options = {}\n) : Promise<${modulePascalCase}${nodeText}Result>`
 
     } else {
-      functionCall += `)\n    : Promise<${modulePascalCase}${nodeText}Result>`
+      functionCall += `\n) : Promise<${modulePascalCase}${nodeText}Result>`
     }
     readmeFunction += `*${interfaceJson.description}*\n\n`
-    readmeFunction += `\`\`\`typescript\n${functionCall}\n\`\`\`\n\n`
+    readmeFunction += `\`\`\`ts\n${functionCall}\n\`\`\`\n\n`
     readmeFunction += markdownTable(readmeParametersTable, { align: ['c', 'c', 'l'] }) + '\n'
     functionContent += functionCall
     functionContent += ' {\n\n'