render block image tags

src/docs/render_block.js

@@ -4,7 +4,7 @@ import renderFields from './render_block_fields.js'
 import renderInputs from './render_block_inputs.js'
 
 
-const
+export const
   IO_PLUS_ALERT = `
 ::: tip :warning: IO+ Required
 This Block requires an IO+ subscription to use. [Learn more about IO+](https://io.adafruit.com/plus)
@@ -17,6 +17,9 @@ This Block requires an IO+ subscription to use. [Learn more about IO+](https://i
     return trim(`${name} ${ioPlusBadge}`)
   },
 
+  // ![alt](url "title")
+  renderBlockImage = ({ name, type }) => `![the ${name} block](/block_images/${type}.png "${name}")`,
+
   renderDescription = ({ description }) => description || "No docs for this block, yet.",
 
   renderIOPlusAlert = ({ ioPlus }) => ioPlus ? IO_PLUS_ALERT : "",
@@ -70,6 +73,8 @@ definitionPath: ${ definition.definitionPath }
 
 Type: \`${definition.type}\`
 
+${ renderBlockImage(definition) }
+
 ${ renderDescription(definition) }
 
 ${ renderIOPlusAlert(definition) }

src/exporters/block_index_exporter.js

@@ -1,6 +1,8 @@
 import { writeFileSync } from 'fs'
 import { isString, without } from 'lodash-es'
 
+import { renderBlockImage } from '../docs/render_block.js'
+
 
 export default class BlockIndexExporter {
   definitionSet = null
@@ -78,11 +80,11 @@ const definitionToIndexLines = def => {
   // block name and link
   indexLines.push(`### [${ def.name }](/${ def.documentationPath() })`)
 
-  // block image // TODO
-  // indexLines.push(``)
-
   // block short description
   indexLines.push(`_${def.tooltip}_`)
 
+  // block image
+  indexLines.push(renderBlockImage(def))
+
   return indexLines.join("\n")
 }