kodemoapp / player

A React component for reading Kodemo documents.

Home Page:https://kodemo.com/docs/player

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Consider publishing from text format to format readable by player

codemaestro opened this issue · comments

I'd be interested in a discussion about the data format for the player. When generating large volumes of technical documentation, we don't necessarily want to work in the browser. We generate using a Markdown- or Asciidoc-based static site generator. It might be cool to output from our Antora (Asciidoc) system to a format that can be read by Kodemo player.

Would be great to support additional formats.

The Kodemo JSON format stores all of the main body text as a single string of HTML under the story key. So if you took Asciidoc output and converted it to HTML, you could start with:

{
  "title": "Title",
  "story": "<your Asciidoc as HTML here>"
}

I'm not sure how the code documents/subjects would be identified from the original doc. In Kodemo's format, each code file is a subject and each subject as at least one version. Versions are what we automatically animate between to show code changes in the same file.

The annotations that trigger subjects to show are data attributes within the story. Here's a very simple example showing how it comes together.

{
  "title": "Title",
  "story": "<p>Show <span data-effect-subject=\"s1\" data-effect-version=\"v1\">subject #1</span>.</p>",
  "subjects": {
    "s1": {
      "name": "myfile.js",
      "type": "code",
      "versions": {
        "v1": {
          "value": "let a = 1;"
        }
      }
    }
  }
}

There's a more complete overview of the JSON format here; https://kodemo.com/docs/format