Serve docs with serve-marked

endpoints/docs.ts

@@ -10,16 +10,9 @@ export default async function (req, res) {
 
   if (liveBadgeList.includes(name)) {
     console.info(100, `${name}: ${req.url}`)
-    try {
-      const foundBadge = badges.live.find(b => b.id === name)
-      if (foundBadge) {
-        return serveHelp(req, res, name, foundBadge)
-      }
-    } catch (error) {
-      if (error.code !== 'MODULE_NOT_FOUND') {
-        console.error(error)
-        throw error
-      }
+    const foundBadge = badges.live.find(b => b.id === name)
+    if (foundBadge) {
+      return serveHelp(req, res, foundBadge)
     }
   }
 

libs/serve-help.ts

@@ -1,20 +1,38 @@
-import { BadgenServeHandlers } from './badgen-serve'
+import serveMarked from 'serve-marked'
 
-type BadgenExample = [string, string]
 type BadgenHelpParams = {
   id: string,
   title: string,
-  examples: BadgenExample[]
+  examples: { [url: string]: string }
   routes: string[],
   help?: any
 }
 
-export default function serveHelp (req, res, id, params: BadgenHelpParams) {
-  const { help, examples, routes } = params
-  const Docs = help ? help : `# ${id}`
-  const Schemes = `## Schemes\n\n${routes.join('\n')}`
-  const Examples = `## Examples\n\n${Object.entries(examples).map(ex => ex[0]).join('\n')}`
+function genMarkdown ({ id, help, examples, routes }: BadgenHelpParams) {
+  const Docs = help ? help : `# /${id}`
+
+  const schemeLinks = routes.map(r => `- \`${r}\``)
+  const Schemes = `## Schemes\n\n${schemeLinks.join('  \n')}`
+
+  const exampleList = Object.entries(examples)
+    .map(([url, desc]) => `- ![${url}](${url}) [${url}](${url}) <i>${desc}</i>`)
+  const Examples = `## Examples\n\n${exampleList.join('\n')}`
 
   const md = [Docs, Schemes, Examples].join('\n\n')
-  res.end(md)
+  return md
 }
+
+export default function serveHelp (req, res, params: BadgenHelpParams) {
+  const md = genMarkdown(params)
+  return serveMarked(md, {
+    title: `${params.title} | Badgen`,
+    inlineCSS,
+  })(req, res)
+}
+
+const inlineCSS = `
+  .markdown-body { max-width: 800px }
+  li > img { vertical-align: middle; margin: 0.2em 0; font-size: 12px }
+  li > img + a { font-family: monospace; font-size: 0.9em }
+  li > img + a + i { color: #AAA }
+`

package-lock.json

@@ -11605,9 +11605,9 @@
       }
     },
     "serve-marked": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/serve-marked/-/serve-marked-1.1.0.tgz",
-      "integrity": "sha512-37aaz3vr0GdcRMVIDO4V7VpLjpTpKKnZbIfT6SL3zRETx9pzJa+ER5l8lXagQ0MzPdmrLrxn3MX0m8YwXMQfug==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/serve-marked/-/serve-marked-2.0.0.tgz",
+      "integrity": "sha512-iTs/aYowosAr4JvNqB3NhhBFIFkRt1JHFWMDxr+WNrnBPFkaYCVCdHyTSTrntQdm1I3+2XPH0ADr+Ou/0oP1WQ==",
       "requires": {
         "marked": "^0.6.2"
       }

package.json

@@ -37,7 +37,7 @@
     "react-debounce-render": "^5.0.0",
     "semver": "^6.1.0",
     "serve-handler": "^6.0.1",
-    "serve-marked": "^1.1.0"
+    "serve-marked": "^2.0.0"
   },
   "devDependencies": {
     "@mdx-js/mdx": "^1.0.20",

tools/gen-examples.ts

@@ -6,8 +6,6 @@ const rel = (...args) => path.resolve(__dirname, ...args)
 
 async function main () {
   const badgeMeta = await loadBadgeMeta()
-  console.log(badgeMeta)
-
   await fse.outputJson(rel('../static/.gen/badges.json'), badgeMeta)
 }