Written in Livemark
(2021-07-30 15:52:16)

Livemark

Build Coverage Registry Codebase Support

This document is completely written and published in Livemark notation

Livemark is a static site generator that extends Markdown with interactive charts, tables, scripts, and more.

Logic

https://jinja.palletsprojects.com/en/3.0.x/templates/

Livemark process your document using the Jinja templating language. Inside templates, you can use Frictionless Framework as a frictionless variable to work with tabular data. It's a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart:

{% for car in frictionless.extract('data/cars.csv', layout={"limitRows": 5}) %}
- {{ car.brand }} {{ car.model }}: ${{ car.price }}
{% endfor %}

Table

https://handsontable.com/docs/9.0.0/tutorial-introduction.html

Livemark supports CSV table rendering using Handsontable, which you can see in the example below (replace the single quotes with back ticks). The data property will be read by Frictionless Framework so in addition to Handsontable options you can pass a file path or a resource descriptor in a Frictionless format:

'''yaml table
data: data/cars.csv
maxRows: 10
filters: true
dropdownMenu: true
columnSorting:
  initialConfig:
    column: 2
    sortOrder: desc
width: 600
'''

Chart

https://vega.github.io/vega-lite/

Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks):

'''yaml chart
data:
  url: data/cars.csv
mark: circle
selection:
  brush:
    type: interval
# other options are omitted
width: 500
height: 300
'''

Script

https://www.python.org/

Livemark supports Python/Bash script execution inside Markdown. We think of this as a lightweight version of Jupiter Notebooks. Sometimes, a declarative Logic/Table/Chart is not enough for presenting data so you might also want to include scripts:

from pprint import pprint
from frictionless import Resource, transform, steps

brands = transform(
    Resource("data/cars.csv"),
    steps=[
        steps.table_normalize(),
        steps.table_aggregate(group_name="brand", aggregation={"price": ("price", max)}),
        steps.row_sort(field_names=["price"], reverse=True),
        steps.row_slice(head=5),
    ],
)
pprint(brands.read_rows())
[{'brand': 'Volkswagen', 'price': 785},
 {'brand': 'Hyundai', 'price': 774},
 {'brand': 'Skoda', 'price': 756},
 {'brand': 'Suzuki', 'price': 725},
 {'brand': 'Renault', 'price': 724}]

Markup

https://getbootstrap.com/docs/5.0/getting-started/introduction/

With Livemark you can use HTML inside Markdown with Bootstrap support. Here is an example of creating a responsive grid of cards (note that if we set a markdown class we can use markdown inside html):

'''html markup
<div class="w-50">
<div class="container">
<div class="row">
<div class="col-sm">
  <div class="markdown">![Package](data/data-package.png)</div>
  <div class="text-center">
  <p><strong>Data Package</strong></p>
  <p>A simple container format for describing a coherent collection of data in a single package.</p>
  </div>
</div>
<!-- other columns are omitted -->
</div>
</div>
</div>
'''

Package

Data Package

A simple container format for describing a coherent collection of data in a single package.

Resource

Data Resource

A simple format to describe and package a single data resource such as a individual table or file.

Schema

Table Schema

A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON.

Content

https://guides.github.com/features/mastering-markdown/

Livemark supports Github Flavoured Markdown so you can use familiar notation:

Sidebar

Sidebar

https://tscanlin.github.io/tocbot/

Livemark provides an automatically generated table of contents:

Sidebar

Scroll

https://azrsix.github.io/ue-scroll-js/

Livemark provides a scroll-to-top button when you scroll down your document:

Scroll

Livemark is a static site generator that extends Markdown with interactive charts, tables, scripts, and more.
+
-