Initial creation.

Seems to work, time to test from node.

.gitignore

@@ -6,6 +6,9 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
+# Test output
+/test.html
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 

README.md

@@ -1,2 +1,85 @@
 # asciidoctor-bytefield
-Asciidoctor.js extension to render byte field diagrams as SVG
+
+Asciidoctor.js extension to render byte field diagrams as SVG.
+
+This allows you to invoke
+[bytefield-svg](https://github.com/Deep-Symmetry/bytefield-svg) to
+create a byte field diagram within an AsciiDoc document by simply
+creating a `bytefield` block:
+
+```
+[bytefield]
+----
+(draw-column-headers)
+(draw-box 0x0f)
+...
+----
+```
+
+The [Clojure](clojure.org)-based domain specific language in which
+you write your diagrams has its own
+[documentation site](https://bytefield-svg.deepsymmetry.org/).
+
+## Use with Node.js
+
+Install the dependencies:
+
+    npm install asciidoctor @deepsymmetry/asciidoctor-bytefield
+
+Create a file `convert.js` with the following content:
+
+```javascript
+const asciidoctor = require('asciidoctor')();
+const registry = asciidoctor.Extensions.create();
+
+require('./extension.js')(registry);
+
+const html = asciidoctor.convertFile('sample.adoc', {
+  to_file: false,
+  extension_registry: registry
+});
+console.log(html);
+```
+
+Create a file `sample.adoc` with content similar to this:
+
+```asciidoc
+# Some Document
+
+Here is a paragraph.
+
+.A byte field
+[bytefield]
+----
+(draw-column-headers)
+(draw-box 42)
+(draw-gap "Whee!")
+(draw-bottom)
+----
+
+And some more text.
+```
+
+Run the script to render the document:
+
+    node convert.js >sample.html
+
+## Use with Antora
+
+Install the module:
+
+    npm install @deepsymmetry/asciidoctor-bytefield
+
+Register the extension in your Antora playbook:
+
+```yaml
+asciidoc:
+  extensions:
+    - @deepsymmetry/asciidoctor-bytefield
+```
+
+## Acknowledgements
+
+Thanks to [David Jencks](https://gitlab.com/djencks) for the bulk of
+the wrapper code, translated with permission from his
+[`antora-generic-svg-extension-plugin`](https://gitlab.com/djencks/antora-generic-svg-extension-plugin).

extension.js

@@ -0,0 +1,46 @@
+'use strict'
+
+const processor = require('bytefield-svg');  // The byte field diagram generator.
+
+// Register as a block processor of type 'bytefield'
+module.exports = function (registry) {
+
+  function toBlock(attrs, parent, source, line_info, self) {
+    if (typeof attrs === 'object' && '$$smap' in attrs) {
+      attrs = fromHash(attrs)
+    }
+    const doc = parent.getDocument()
+    const subs = attrs.subs
+    if (subs) {
+      source = doc.$apply_subs(attrs.subs, doc.$resolve_subs(subs))
+    }
+    var svgText
+    try {
+      svgText = processor(source)
+    } catch (err) {
+      console.log(`error after ${line_info}: ${err.toString()}`)
+      svgText = `error after ${line_info}: ${err.toString()}`
+    }
+    const idAttr = attrs.id ? ` id="${attrs.id}"` : ''
+    const classAttr = attrs.role ? `${attrs.role} imageblock bytefield` : `imageblock bytefield`
+    const title_el = attrs.title ? `\n<div class="title">${attrs.title}</div>` : ''
+    const svgBlock = self.$create_pass_block(
+      parent,
+      `<div${idAttr} class="${classAttr}">\n<div class="content">${svgText}</div>${title_el}\n</div>`,
+      // eslint-disable-next-line no-undef
+      Opal.hash({})
+    )
+    return svgBlock
+  }
+
+  registry.block(function () {
+    const self = this
+    self.named('bytefield')
+    self.onContext(['listing', 'literal'])
+    self.process(function (parent, reader, attrs) {
+      const line_info = reader.$line_info()
+      var source = reader.getLines().join('\n')
+      return toBlock(attrs, parent, source, line_info, self)
+    })
+  })
+}