Repository: frictionlessdata/livemark (language: python)

Issue:
Split html/site plugins
# Overview

Required by the cards plugin



Discussion / hints:

Fix patch:
diff --git a/404.html b/404.html
index 5db69ba1..75452934 100644
--- a/404.html
+++ b/404.html
@@ -1172,7 +1172,6 @@
 }
 
 </style>
-<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-brand {
@@ -1272,6 +1271,7 @@
 }
 
 </style>
+<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-topics {
@@ -1809,7 +1809,7 @@
 <div id="livemark-main">
 <div id="livemark-notes">
   Written in <a href="https://livemark.frictionlessdata.io" target="_blank"> Livemark </a><br>
-  (2021-08-30 20:14)
+  (2021-09-06 14:52)
 </div>
 
 <h1>Not Found</h1>
@@ -1925,10 +1925,6 @@ <h1>Not Found</h1>
 });
 
 </script>
-<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
-<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
-<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
-<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script>
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -1946,6 +1942,10 @@ <h1>Not Found</h1>
 });
 
 </script>
+<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
+<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
+<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
+<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script src="https://unpkg.com/tocbot@4.12.3/dist/tocbot.min.js"></script>
 <script>
 
@@ -2194,12 +2194,12 @@ <h5 class="modal-title"></h5>
           'index': {
           'name': 'Livemark',
           'path': 'index',
-          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
+          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 `livemark-markdown` class we can use markdown inside html): ```html \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
       },
           'docs/installation': {
           'name': 'Installation',
           'path': 'docs/installation',
-          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../data/github.png)",
+          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../assets/github.png)",
       },
           'docs/configuration': {
           'name': 'Configuration',
diff --git a/404.md b/404.md
index 59d59446..7f628d88 100644
--- a/404.md
+++ b/404.md
@@ -1,5 +1,5 @@
 ---
-html:
+site:
   description: The page is not found
 ---
 
diff --git a/blog/2021-09-01-meet-livemark.html b/blog/2021-09-01-meet-livemark.html
index 06a3c004..b4c469fd 100644
--- a/blog/2021-09-01-meet-livemark.html
+++ b/blog/2021-09-01-meet-livemark.html
@@ -1172,7 +1172,6 @@
 }
 
 </style>
-<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-brand {
@@ -1272,6 +1271,7 @@
 }
 
 </style>
+<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-topics {
@@ -1934,10 +1934,6 @@ <h2>What do you think?</h2>
 });
 
 </script>
-<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
-<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
-<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
-<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script>
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -1955,6 +1951,10 @@ <h2>What do you think?</h2>
 });
 
 </script>
+<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
+<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
+<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
+<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script src="https://unpkg.com/tocbot@4.12.3/dist/tocbot.min.js"></script>
 <script>
 
@@ -2203,12 +2203,12 @@ <h5 class="modal-title"></h5>
           'index': {
           'name': 'Livemark',
           'path': 'index',
-          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
+          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 `livemark-markdown` class we can use markdown inside html): ```html \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
       },
           'docs/installation': {
           'name': 'Installation',
           'path': 'docs/installation',
-          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../data/github.png)",
+          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../assets/github.png)",
       },
           'docs/configuration': {
           'name': 'Configuration',
diff --git a/blog/index.html b/blog/index.html
index fdfae1dd..3bb90955 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -1172,7 +1172,6 @@
 }
 
 </style>
-<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-brand {
@@ -1272,6 +1271,7 @@
 }
 
 </style>
+<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-topics {
@@ -1937,10 +1937,6 @@ <h2><a href="/blog/2021-09-01-meet-livemark.html">Meet Livemark</a></h2>
 });
 
 </script>
-<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
-<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
-<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
-<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script>
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -1958,6 +1954,10 @@ <h2><a href="/blog/2021-09-01-meet-livemark.html">Meet Livemark</a></h2>
 });
 
 </script>
+<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
+<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
+<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
+<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script src="https://unpkg.com/tocbot@4.12.3/dist/tocbot.min.js"></script>
 <script>
 
@@ -2206,12 +2206,12 @@ <h5 class="modal-title"></h5>
           'index': {
           'name': 'Livemark',
           'path': 'index',
-          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
+          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 `livemark-markdown` class we can use markdown inside html): ```html \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
       },
           'docs/installation': {
           'name': 'Installation',
           'path': 'docs/installation',
-          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../data/github.png)",
+          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../assets/github.png)",
       },
           'docs/configuration': {
           'name': 'Configuration',
diff --git a/cards/plugin.html b/cards/plugin.html
deleted file mode 100644
index 705e7536..00000000
--- a/cards/plugin.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<h1>{{ name }}</h1>
-
-<p>This is test plugin card</p>
diff --git a/cards/plugin.md b/cards/plugin.md
new file mode 100644
index 00000000..f6a74070
--- /dev/null
+++ b/cards/plugin.md
@@ -0,0 +1,3 @@
+# {{ name }}
+
+This is test plugin card
diff --git a/docs/configuration.html b/docs/configuration.html
index e9bae5b3..2642f1ea 100644
--- a/docs/configuration.html
+++ b/docs/configuration.html
@@ -1172,7 +1172,6 @@
 }
 
 </style>
-<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-brand {
@@ -1272,6 +1271,7 @@
 }
 
 </style>
+<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-topics {
@@ -1937,10 +1937,6 @@ <h2>Project</h2>
 });
 
 </script>
-<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
-<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
-<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
-<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script>
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -1958,6 +1954,10 @@ <h2>Project</h2>
 });
 
 </script>
+<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
+<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
+<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
+<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script src="https://unpkg.com/tocbot@4.12.3/dist/tocbot.min.js"></script>
 <script>
 
@@ -2206,12 +2206,12 @@ <h5 class="modal-title"></h5>
           'index': {
           'name': 'Livemark',
           'path': 'index',
-          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
+          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 `livemark-markdown` class we can use markdown inside html): ```html \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
       },
           'docs/installation': {
           'name': 'Installation',
           'path': 'docs/installation',
-          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../data/github.png)",
+          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../assets/github.png)",
       },
           'docs/configuration': {
           'name': 'Configuration',
diff --git a/docs/forum.html b/docs/forum.html
index 472c704f..defc7b4f 100644
--- a/docs/forum.html
+++ b/docs/forum.html
@@ -1172,7 +1172,6 @@
 }
 
 </style>
-<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-brand {
@@ -1272,6 +1271,7 @@
 }
 
 </style>
+<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-topics {
@@ -1933,10 +1933,6 @@ <h1>Forum</h1>
 });
 
 </script>
-<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
-<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
-<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
-<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script>
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -1954,6 +1950,10 @@ <h1>Forum</h1>
 });
 
 </script>
+<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
+<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
+<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
+<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script src="https://unpkg.com/tocbot@4.12.3/dist/tocbot.min.js"></script>
 <script>
 
@@ -2219,12 +2219,12 @@ <h5 class="modal-title"></h5>
           'index': {
           'name': 'Livemark',
           'path': 'index',
-          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
+          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 `livemark-markdown` class we can use markdown inside html): ```html \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
       },
           'docs/installation': {
           'name': 'Installation',
           'path': 'docs/installation',
-          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../data/github.png)",
+          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../assets/github.png)",
       },
           'docs/configuration': {
           'name': 'Configuration',
diff --git a/docs/installation.html b/docs/installation.html
index 2799c62d..6d1e9d49 100644
--- a/docs/installation.html
+++ b/docs/installation.html
@@ -1172,7 +1172,6 @@
 }
 
 </style>
-<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-brand {
@@ -1272,6 +1271,7 @@
 }
 
 </style>
+<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-topics {
@@ -1809,7 +1809,7 @@
 <div id="livemark-main">
 <div id="livemark-notes">
   Written in <a href="https://livemark.frictionlessdata.io" target="_blank"> Livemark </a><br>
-  (2021-08-26 15:44)
+  (2021-09-06 09:31)
 </div>
 
 <h1>Installation</h1>
@@ -1836,7 +1836,7 @@ <h2>Publish</h2>
 <p><a href="https://pages.github.com/">https://pages.github.com/</a></p>
 </blockquote>
 <p>Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to "Settings-&gt;Pages" in your repository and choose your main branch in the source menu:</p>
-<p><img src="../data/github.png" alt="Github"></p>
+<p><img src="../assets/github.png" alt="Github"></p>
 
 <div id="livemark-signs">
   <div>
@@ -1943,10 +1943,6 @@ <h2>Publish</h2>
 });
 
 </script>
-<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
-<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
-<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
-<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script>
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -1964,6 +1960,10 @@ <h2>Publish</h2>
 });
 
 </script>
+<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
+<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
+<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
+<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script src="https://unpkg.com/tocbot@4.12.3/dist/tocbot.min.js"></script>
 <script>
 
@@ -2212,12 +2212,12 @@ <h5 class="modal-title"></h5>
           'index': {
           'name': 'Livemark',
           'path': 'index',
-          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
+          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 `livemark-markdown` class we can use markdown inside html): ```html \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
       },
           'docs/installation': {
           'name': 'Installation',
           'path': 'docs/installation',
-          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../data/github.png)",
+          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../assets/github.png)",
       },
           'docs/configuration': {
           'name': 'Configuration',
diff --git a/docs/installation.md b/docs/installation.md
index c1b38eac..e9aa54a2 100644
--- a/docs/installation.md
+++ b/docs/installation.md
@@ -39,4 +39,4 @@ $ livemark start path/to/your/file.md
 
 Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to "Settings->Pages" in your repository and choose your main branch in the source menu:
 
-![Github](../data/github.png)
+![Github](../assets/github.png)
diff --git a/docs/livemark-components.html b/docs/livemark-components.html
index cefca847..c9d3d93f 100644
--- a/docs/livemark-components.html
+++ b/docs/livemark-components.html
@@ -1172,7 +1172,6 @@
 }
 
 </style>
-<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-brand {
@@ -1272,6 +1271,7 @@
 }
 
 </style>
+<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-topics {
@@ -1922,10 +1922,6 @@ <h1>Livemark Components</h1>
 });
 
 </script>
-<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
-<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
-<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
-<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script>
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -1943,6 +1939,10 @@ <h1>Livemark Components</h1>
 });
 
 </script>
+<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
+<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
+<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
+<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script src="https://unpkg.com/tocbot@4.12.3/dist/tocbot.min.js"></script>
 <script>
 
@@ -2191,12 +2191,12 @@ <h5 class="modal-title"></h5>
           'index': {
           'name': 'Livemark',
           'path': 'index',
-          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
+          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 `livemark-markdown` class we can use markdown inside html): ```html \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
       },
           'docs/installation': {
           'name': 'Installation',
           'path': 'docs/installation',
-          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../data/github.png)",
+          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../assets/github.png)",
       },
           'docs/configuration': {
           'name': 'Configuration',
diff --git a/docs/livemark-markdown.html b/docs/livemark-markdown.html
index 9dcf0fd1..a11da8a1 100644
--- a/docs/livemark-markdown.html
+++ b/docs/livemark-markdown.html
@@ -1172,7 +1172,6 @@
 }
 
 </style>
-<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-brand {
@@ -1272,6 +1271,7 @@
 }
 
 </style>
+<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-topics {
@@ -1922,10 +1922,6 @@ <h1>Livemark Markdown</h1>
 });
 
 </script>
-<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
-<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
-<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
-<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script>
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -1943,6 +1939,10 @@ <h1>Livemark Markdown</h1>
 });
 
 </script>
+<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
+<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
+<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
+<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script src="https://unpkg.com/tocbot@4.12.3/dist/tocbot.min.js"></script>
 <script>
 
@@ -2191,12 +2191,12 @@ <h5 class="modal-title"></h5>
           'index': {
           'name': 'Livemark',
           'path': 'index',
-          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
+          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 `livemark-markdown` class we can use markdown inside html): ```html \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
       },
           'docs/installation': {
           'name': 'Installation',
           'path': 'docs/installation',
-          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../data/github.png)",
+          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../assets/github.png)",
       },
           'docs/configuration': {
           'name': 'Configuration',
diff --git a/docs/plugin-system.html b/docs/plugin-system.html
index 0c91621e..c654ac7c 100644
--- a/docs/plugin-system.html
+++ b/docs/plugin-system.html
@@ -1172,7 +1172,6 @@
 }
 
 </style>
-<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-brand {
@@ -1272,6 +1271,7 @@
 }
 
 </style>
+<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-topics {
@@ -2025,10 +2025,6 @@ <h1>Plugin System</h1>
 });
 
 </script>
-<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
-<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
-<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
-<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script>
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -2046,6 +2042,10 @@ <h1>Plugin System</h1>
 });
 
 </script>
+<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
+<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
+<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
+<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script src="https://unpkg.com/tocbot@4.12.3/dist/tocbot.min.js"></script>
 <script>
 
@@ -2294,12 +2294,12 @@ <h5 class="modal-title"></h5>
           'index': {
           'name': 'Livemark',
           'path': 'index',
-          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
+          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 `livemark-markdown` class we can use markdown inside html): ```html \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
       },
           'docs/installation': {
           'name': 'Installation',
           'path': 'docs/installation',
-          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../data/github.png)",
+          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../assets/github.png)",
       },
           'docs/configuration': {
           'name': 'Configuration',
diff --git a/docs/universe.html b/docs/universe.html
index 1e4c358a..1e39f385 100644
--- a/docs/universe.html
+++ b/docs/universe.html
@@ -1172,7 +1172,6 @@
 }
 
 </style>
-<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-brand {
@@ -1272,6 +1271,7 @@
 }
 
 </style>
+<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-topics {
@@ -1926,10 +1926,6 @@ <h1>Universe</h1>
 });
 
 </script>
-<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
-<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
-<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
-<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script>
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -1947,6 +1943,10 @@ <h1>Universe</h1>
 });
 
 </script>
+<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
+<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
+<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
+<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script src="https://unpkg.com/tocbot@4.12.3/dist/tocbot.min.js"></script>
 <script>
 
@@ -2195,12 +2195,12 @@ <h5 class="modal-title"></h5>
           'index': {
           'name': 'Livemark',
           'path': 'index',
-          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
+          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 `livemark-markdown` class we can use markdown inside html): ```html \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
       },
           'docs/installation': {
           'name': 'Installation',
           'path': 'docs/installation',
-          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../data/github.png)",
+          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../assets/github.png)",
       },
           'docs/configuration': {
           'name': 'Configuration',
diff --git a/index.html b/index.html
index e8789202..6e3495d6 100644
--- a/index.html
+++ b/index.html
@@ -1172,7 +1172,6 @@
 }
 
 </style>
-<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-brand {
@@ -1272,6 +1271,7 @@
 }
 
 </style>
+<link rel="stylesheet" href="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.css">
 <style>
 
 #livemark-topics {
@@ -1809,7 +1809,7 @@
 <div id="livemark-main">
 <div id="livemark-notes">
   Written in <a href="https://livemark.frictionlessdata.io" target="_blank"> Livemark </a><br>
-  (2021-09-02 12:16)
+  (2021-09-06 16:01)
 </div>
 
 <h1>Livemark</h1>
@@ -1923,7 +1923,7 @@ <h2>Markup</h2>
 <blockquote>
 <p><a href="https://getbootstrap.com/docs/5.0/getting-started/introduction/">https://getbootstrap.com/docs/5.0/getting-started/introduction/</a></p>
 </blockquote>
-<p>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 <code>markdown</code> class we can use markdown inside html):</p>
+<p>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 <code>livemark-markdown</code> class we can use markdown inside html):</p>
 <pre><code class="language-html">'''html markup
 &lt;div class="w-50"&gt;
 &lt;div class="container"&gt;
@@ -1945,7 +1945,7 @@ <h2>Markup</h2>
 <div class="container">
 <div class="row">
 <div class="col-sm">
-  <div class="markdown"><p><img src="assets/data-package.png" alt="Package"></p>
+  <div class="livemark-markdown"><p><img src="assets/data-package.png" alt="Package"></p>
 </div>
   <div class="text-center">
   <p><strong>Data Package</strong></p>
@@ -1953,7 +1953,7 @@ <h2>Markup</h2>
   </div>
 </div>
 <div class="col-sm">
-  <div class="markdown"><p><img src="assets/data-resource.png" alt="Resource"></p>
+  <div class="livemark-markdown"><p><img src="assets/data-resource.png" alt="Resource"></p>
 </div>
   <div class="text-center">
   <p><strong>Data Resource</strong></p>
@@ -1961,7 +1961,7 @@ <h2>Markup</h2>
   </div>
 </div>
 <div class="col-sm">
-  <div class="markdown"><p><img src="assets/table-schema.png" alt="Schema"></p>
+  <div class="livemark-markdown"><p><img src="assets/table-schema.png" alt="Schema"></p>
 </div>
   <div class="text-center">
   <p><strong>Table Schema</strong></p>
@@ -2090,10 +2090,6 @@ <h2>Scroll</h2>
 });
 
 </script>
-<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
-<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
-<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
-<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script>
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -2111,6 +2107,10 @@ <h2>Scroll</h2>
 });
 
 </script>
+<script src="https://unpkg.com/vega@5.20.2/build/vega.min.js"></script>
+<script src="https://unpkg.com/vega-lite@5.1.0/build/vega-lite.min.js"></script>
+<script src="https://unpkg.com/vega-embed@6.18.2/build/vega-embed.min.js"></script>
+<script src="https://unpkg.com/handsontable@9.0.0/dist/handsontable.min.js"></script>
 <script src="https://unpkg.com/tocbot@4.12.3/dist/tocbot.min.js"></script>
 <script>
 
@@ -2359,12 +2359,12 @@ <h5 class="modal-title"></h5>
           'index': {
           'name': 'Livemark',
           'path': 'index',
-          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
+          'text': "# Livemark [![Build](https://img.shields.io/github/workflow/status/frictionlessdata/livemark/general/main)](https://github.com/frictionlessdata/livemark/actions) [![Coverage](https://img.shields.io/codecov/c/github/frictionlessdata/livemark/main)](https://codecov.io/gh/frictionlessdata/livemark) [![Registry](https://img.shields.io/pypi/v/livemark.svg)](https://pypi.python.org/pypi/livemark) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/livemark) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) \u003e This document is completely [written and published](https://raw.githubusercontent.com/frictionlessdata/livemark/main/index.md) in Livemark notation Livemark is a Python static site generator that extends Markdown with interactive charts, tables, scripts, and other features. ## Logic \u003e 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](https://framework.frictionlessdata.io/) as a `frictionless` variable to work with tabular data. It\u0027s a high-level preprocessing so you can combine Logic with other syntax, such as Table or Chart: ``` {% for car in frictionless.extract(\u0027data/cars.csv\u0027, layout={\"limitRows\": 5}) %} - {{ car.brand }} {{ car.model }}: ${{ car.price }} {% endfor %} ``` - Volkswagen Vento: $785 - Hyundai Verna: $774 - Skoda Rapid: $756 - Suzuki Ciaz: $725 - Renault Scala: $724 ## Table \u003e 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](https://framework.frictionlessdata.io/) so in addition to Handsontable options you can pass a [file path](https://raw.githubusercontent.com/frictionlessdata/livemark/main/data/cars.csv) or a resource descriptor in a Frictionless format: ```yaml \u0027\u0027\u0027yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 \u0027\u0027\u0027 ``` ```yaml table data: data/cars.csv maxRows: 10 filters: true dropdownMenu: true columnSorting: initialConfig: column: 2 sortOrder: desc width: 600 ``` ## Chart \u003e https://vega.github.io/vega-lite/ Livemark supports Vega Lite visualisations rendering (to try this example, replace the single quotes with back ticks): ```yaml \u0027\u0027\u0027yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval # other options are omitted width: 500 height: 300 \u0027\u0027\u0027 ``` ```yaml chart data: url: data/cars.csv mark: circle selection: brush: type: interval encoding: x: type: quantitative field: kmpl scale: domain: [12,25] y: type: quantitative field: price scale: domain: [100,900] color: condition: selection: brush field: type type: nominal value: grey size: type: quantitative field: bhp width: 500 height: 300 ``` ## Script \u003e 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: ```python script 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()) ``` ## Markup \u003e 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 `livemark-markdown` class we can use markdown inside html): ```html \u0027\u0027\u0027html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. \u0027\u0027\u0027 ``` ```html markup ![Package](assets/data-package.png) Data Package A simple container format for describing a coherent collection of data in a single package. ![Resource](assets/data-resource.png) Data Resource A simple format to describe and package a single data resource such as a individual table or file. ![Schema](assets/table-schema.png) Table Schema A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON. ``` ## Content \u003e https://guides.github.com/features/mastering-markdown/ Livemark supports Github Flavoured Markdown so you can use familiar notation: ![Sidebar](assets/content.png) ## Sidebar \u003e https://tscanlin.github.io/tocbot/ Livemark provides an automatically generated table of contents: ![Sidebar](assets/sidebar.png) ## Scroll \u003e https://azrsix.github.io/ue-scroll-js/ Livemark provides a scroll-to-top button when you scroll down your document: ![Scroll](assets/scroll.png)",
       },
           'docs/installation': {
           'name': 'Installation',
           'path': 'docs/installation',
-          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../data/github.png)",
+          'text': "# Installation ## Installation Livemark is a Python library and it can be installed with pip (or [pipx](https://pypa.github.io/pipx/)): ```bash $ pip install livemark ``` After installation, you can start writing your document (eg an `index.md` file) using the extended Markdown syntax described in the next sections. ## Usage You can then use the command-line interface to build the output HTML file: ```bash # Build a single document (index.md by default) $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash # Start a livereload server $ livemark start ``` Both commands will create an `index.md` file if it\u0027s not present in the same folder the command is being run on. If that\u0027s not the case you can pass the path to the input Markdown file as the first parameter: ```bash $ livemark build path/to/your/file.md $ livemark start path/to/your/file.md ``` ## Publish \u003e https://pages.github.com/ Livemark generates a static HTML document so you can publish it using any static page hosting. A common option for hosting is to use Github Pages - go to \"Settings-\u003ePages\" in your repository and choose your main branch in the source menu: ![Github](../assets/github.png)",
       },
           'docs/configuration': {
           'name': 'Configuration',
diff --git a/index.md b/index.md
index ea49d061..57b0897d 100644
--- a/index.md
+++ b/index.md
@@ -137,7 +137,7 @@ pprint(brands.read_rows())
 
 > 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):
+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 `livemark-markdown` class we can use markdown inside html):
 
 ```html
 '''html markup
@@ -163,21 +163,21 @@ With Livemark you can use HTML inside Markdown with Bootstrap support. Here is a
 <div class="container">
 <div class="row">
 <div class="col-sm">
-  <div class="markdown">![Package](assets/data-package.png)</div>
+  <div class="livemark-markdown">![Package](assets/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>
 <div class="col-sm">
-  <div class="markdown">![Resource](assets/data-resource.png)</div>
+  <div class="livemark-markdown">![Resource](assets/data-resource.png)</div>
   <div class="text-center">
   <p><strong>Data Resource</strong></p>
   <p>A simple format to describe and package a single data resource such as a individual table or file.</p>
   </div>
 </div>
 <div class="col-sm">
-  <div class="markdown">![Schema](assets/table-schema.png)</div>
+  <div class="livemark-markdown">![Schema](assets/table-schema.png)</div>
   <div class="text-center">
   <p><strong>Table Schema</strong></p>
   <p>A simple format to declare a schema for tabular data. The schema is designed to be expressible in JSON.</p>
diff --git a/livemark.yaml b/livemark.yaml
index 618a091a..9f2f99ff 100644
--- a/livemark.yaml
+++ b/livemark.yaml
@@ -1,4 +1,4 @@
-html:
+site:
   favicon: assets/favicon.ico
 brand:
   text: Livemark
diff --git a/livemark/config.py b/livemark/config.py
index ba3bcab2..4c28500f 100644
--- a/livemark/config.py
+++ b/livemark/config.py
@@ -1,4 +1,3 @@
-import os
 import yaml
 import deepmerge
 import jsonschema
@@ -8,11 +7,6 @@
 from . import errors
 
 
-# NOTE:
-# Make source to be only a file path to be trully file based (to use timestamps etc)
-# Allow applying config dict on top of the file-based source?
-
-
 class Config(dict):
     """Livemark config
 
@@ -25,59 +19,51 @@ class Config(dict):
 
     """
 
-    def __init__(self, source):
-        enabled = []
-        disabled = []
+    def __init__(self, source=None):
+        status = {}
 
-        # Read config
-        config = source or {}
-        if not isinstance(config, dict):
-            if os.path.isfile(config):
-                config = yaml.safe_load(helpers.read_file(config))
-            else:  # there is no config
-                config = {}
+        # Load config
+        if isinstance(source, str):
+            self.update(yaml.safe_load(helpers.read_file(source)))
+        elif source:
+            self.update(source)
+            source = None
 
         # Process config
-        for key, value in list(config.items()):
-            if value is True:
-                enabled.append(key)
-                del config[key]
-            elif value is False:
-                disabled.append(key)
-                del config[key]
+        for key, value in list(self.items()):
+            if isinstance(value, bool):
+                status[key] = value
+                del self[key]
 
         # Validate config
         for Plugin in system.Plugins.values():
-            if config.get(Plugin.identity) and Plugin.validity:
+            if self.get(Plugin.identity) and Plugin.validity:
                 validator = jsonschema.Draft7Validator(Plugin.validity)
-                for error in validator.iter_errors(config[Plugin.identity]):
+                for error in validator.iter_errors(self[Plugin.identity]):
                     message = f'Invalid "{Plugin.identity}" config: {error.message}'
                     raise errors.Error(message)
 
         # Set attributes
-        self.update(config)
-        self.__enabled = enabled
-        self.__disabled = disabled
-
-    # Plugins
+        self.__source = source
+        self.__status = status
 
     @property
-    def enabled(self):
-        """List of enabled plugin names
+    def source(self):
+        """Path of the config source
 
         Returns:
-            str[]: plugin names
+            str?: source
         """
-        return self.__enabled
+        return self.__source
 
     @property
-    def disabled(self):
-        """List of disabled plugin names
+    def status(self):
+        """Mapping of plugin status
 
         Returns:
-            str[]: plugin names
+            dict<bool>: status
         """
-        return self.__disabled
+        return self.__status
 
     # Helpers
 
@@ -97,20 +83,18 @@ def to_dict(self):
         """
         return deepcopy(dict(self))
 
-    def to_merge(self, source):
+    def to_merge(self, mapping):
         """Create a merge
 
         Parameters:
-            source (dict): dictionary to merge
+            mapping (dict): dictionary to merge
 
         Returns:
             Config: config merge
         """
-        result = {}
-        deepmerge.always_merger.merge(result, self)
-        deepmerge.always_merger.merge(result, source)
-        for name in self.enabled:
-            result.setdefault(name, True)
-        for name in self.disabled:
-            result.setdefault(name, False)
-        return Config(result)
+        source = {}
+        deepmerge.always_merger.merge(source, self)
+        deepmerge.always_merger.merge(source, mapping)
+        for key, value in self.status.items():
+            source[key] = value
+        return Config(source)
diff --git a/livemark/document.py b/livemark/document.py
index 5d9842ca..7d16f355 100644
--- a/livemark/document.py
+++ b/livemark/document.py
@@ -1,8 +1,8 @@
 import re
 import yaml
 import difflib
+import importlib
 from frictionless import File
-from .config import Config
 from .system import system
 from . import settings
 from . import helpers
@@ -27,7 +27,7 @@ class Document:
 
     """
 
-    def __init__(self, source, *, target=None, format=None):
+    def __init__(self, source, *, target=None, format=None, project=None):
 
         # Infer target
         if not target:
@@ -39,11 +39,16 @@ def __init__(self, source, *, target=None, format=None):
             file = File(target)
             format = file.format
 
+        # Ensure project
+        if not project:
+            Project = importlib.import_module("livemark.project").Project
+            project = Project()
+
         # Set attributes
         self.__source = source
         self.__target = target
         self.__format = format
-        self.__project = None
+        self.__project = project
         self.__plugins = None
         self.__config = None
         self.__preface = None
@@ -52,9 +57,7 @@ def __init__(self, source, *, target=None, format=None):
         self.__output = None
 
     def __setattr__(self, name, value):
-        if name == "project":
-            self.__project = value
-        elif name == "output":
+        if name == "output":
             self.__output = value
         elif name == "content":
             self.__content = value
@@ -228,6 +231,9 @@ def build(self, *, diff=False, print=False):
     def read(self):
         """Read the document"""
 
+        # Read project
+        self.__project.read()
+
         # Read input
         with open(self.__source) as file:
             self.__input = file.read()
@@ -241,9 +247,7 @@ def read(self):
             self.__content = parts[1].strip()
 
         # Read config
-        self.__config = Config({})
-        if self.__project:
-            self.__config = self.__project.config.to_copy()
+        self.__config = self.__project.config.to_copy()
         if self.__preface:
             self.__config = self.__config.to_merge(yaml.safe_load(self.__preface))
 
diff --git a/livemark/helpers.py b/livemark/helpers.py
index ff2981b6..95d6f22c 100644
--- a/livemark/helpers.py
+++ b/livemark/helpers.py
@@ -115,5 +115,16 @@ def extract_classes(module, Parent):
     return Classes
 
 
+def unique_objects(objects, property):
+    result = []
+    values = []
+    for object in objects:
+        value = getattr(object, property)
+        if value not in values:
+            result.append(object)
+            values.append(value)
+    return result
+
+
 def order_objects(objects, property):
     return list(sorted(objects, key=lambda obj: -getattr(obj, property)))
diff --git a/livemark/plugin.py b/livemark/plugin.py
index 119385ab..6cc12b7b 100644
--- a/livemark/plugin.py
+++ b/livemark/plugin.py
@@ -118,6 +118,6 @@ def check_status(cls, config):
           bool: whether active
         """
         type = "external" if cls.__module__.startswith("livemark_") else "internal"
-        internal = type == "internal" and cls.identity not in config.disabled
-        external = type == "external" and cls.identity in config.enabled
+        internal = type == "internal" and config.status.get(cls.identity) is not False
+        external = type == "external" and config.status.get(cls.identity) is True
         return internal or external
diff --git a/livemark/plugins/about/plugin.py b/livemark/plugins/about/plugin.py
index 35a71821..d0df2e2b 100644
--- a/livemark/plugins/about/plugin.py
+++ b/livemark/plugins/about/plugin.py
@@ -15,11 +15,11 @@ class AboutPlugin(Plugin):
 
     @property
     def text(self):
-        html = self.document.get_plugin("html")
+        site = self.document.get_plugin("site")
         text = self.config.get("text")
         if not text:
-            if html.description:
-                text = html.description.split(". ")[0]
+            if site.description:
+                text = site.description.split(". ")[0]
         return text
 
     # Process
diff --git a/livemark/plugins/blog/plugin.py b/livemark/plugins/blog/plugin.py
index 1ba84808..c64df97e 100644
--- a/livemark/plugins/blog/plugin.py
+++ b/livemark/plugins/blog/plugin.py
@@ -64,7 +64,7 @@ def process_project(project):
                 helpers.copy_file(index_default, index_source)
             for source in glob.glob(f"{path}/**/*.md", recursive=True):
                 if source != index_source:
-                    item = Document(source)
+                    item = Document(source, project=project)
                     project.documents.append(item)
 
     def process_markup(self, markup):
diff --git a/livemark/plugins/brand/plugin.py b/livemark/plugins/brand/plugin.py
index 32a1471c..2be9fa9f 100644
--- a/livemark/plugins/brand/plugin.py
+++ b/livemark/plugins/brand/plugin.py
@@ -15,13 +15,13 @@ class BrandPlugin(Plugin):
 
     @property
     def text(self):
-        html = self.document.get_plugin("html")
-        return self.config.get("text", html.title)
+        site = self.document.get_plugin("site")
+        return self.config.get("text", site.title)
 
     @property
     def title_extra(self):
-        html = self.document.get_plugin("html")
-        if self.text != html.title:
+        site = self.document.get_plugin("site")
+        if self.text != site.title:
             return f" | {self.text}"
 
     # Process
diff --git a/livemark/plugins/cards/plugin.py b/livemark/plugins/cards/plugin.py
index ed238ddb..6e090af7 100644
--- a/livemark/plugins/cards/plugin.py
+++ b/livemark/plugins/cards/plugin.py
@@ -1,13 +1,8 @@
-from jinja2 import Template
+from ...project import Project
 from ...plugin import Plugin
 from ... import helpers
 
 
-# NOTE:
-# We'd like to support rendering cards from markdown sources
-# We need to provide a lightweigh redering mechanism for Document to achieve it
-
-
 class CardsPlugin(Plugin):
     identity = "cards"
 
@@ -23,10 +18,10 @@ def process_markup(self, markup):
     @staticmethod
     def create_card(source, *, code, **context):
         target = f"assets/cards/{code}.html"
-        with open(source) as file:
-            template = Template(file.read().strip(), trim_blocks=True)
-            text = template.render(**context)
-        helpers.write_file(target, text)
+        project = Project(source, target=target, config={"site": False})
+        project.document.read()
+        project.document.get_plugin("logic").context.update(context)
+        project.document.build()
 
     @staticmethod
     def delete_cards():
diff --git a/livemark/plugins/chart/plugin.py b/livemark/plugins/chart/plugin.py
index aaece277..012668bf 100644
--- a/livemark/plugins/chart/plugin.py
+++ b/livemark/plugins/chart/plugin.py
@@ -5,7 +5,7 @@
 
 class ChartPlugin(Plugin):
     identity = "chart"
-    priority = 100
+    priority = 60
 
     # Process
 
diff --git a/livemark/plugins/html/plugin.py b/livemark/plugins/html/plugin.py
index f717eb78..e9c6673a 100644
--- a/livemark/plugins/html/plugin.py
+++ b/livemark/plugins/html/plugin.py
@@ -1,55 +1,17 @@
 import marko
 from marko.ext.gfm import GFM
 from .renderer import HtmlExtension
-from ...markup import Markup
 from ...plugin import Plugin
 
 
-# NOTE:
-# Handle possible double quotes in title/description/keywords
-
-
 class HtmlPlugin(Plugin):
     identity = "html"
-    validity = {
-        "type": "object",
-        "properties": {
-            "name": {"type": "string"},
-            "title": {"type": "string"},
-            "description": {"type": "string"},
-            "keywords": {"type": "string"},
-            "favicon": {"type": "string"},
-        },
-    }
-
-    # Context
-
-    @property
-    def name(self):
-        return self.config.get("name", self.document.name)
-
-    @property
-    def title(self):
-        return self.config.get("title", self.document.title)
-
-    @property
-    def description(self):
-        return self.config.get("description", self.document.description)
-
-    @property
-    def keywords(self):
-        return self.config.get("keywords", self.document.keywords)
-
-    @property
-    def favicon(self):
-        return self.config.get("favicon")
+    priority = 20
 
     # Process
 
     def process_document(self, document):
         if document.format == "html":
-
-            # Process content
             markdown = marko.Markdown()
             markdown.use(GFM)
             markdown.use(HtmlExtension)
@@ -57,27 +19,4 @@ def process_document(self, document):
             markdown.renderer.document = document
             output = markdown.render(output)
             output = output.strip()
-
-            # Process markup
-            markup = Markup(self.read_asset("markup.html", plugin=self))
-            with markup.bind(self):
-                bs_url = "https://unpkg.com/bootstrap@4.6.0"
-                fa_url = "https://unpkg.com/@fortawesome/fontawesome-free@5.15.4"
-                pm_url = "https://unpkg.com/prismjs@1.23.0"
-                jq_url = "https://unpkg.com/jquery@3.6.0"
-                pp_url = "https://unpkg.com/popper.js@1.16.1"
-                markup.add_style(f"{fa_url}/css/all.min.css")
-                markup.add_style(f"{bs_url}/dist/css/bootstrap.min.css")
-                markup.add_style(f"{pm_url}/themes/prism.css")
-                markup.add_style("style.css")
-                markup.add_script(f"{jq_url}/dist/jquery.min.js")
-                markup.add_script(f"{pp_url}/dist/umd/popper.min.js")
-                markup.add_script(f"{bs_url}/dist/js/bootstrap.min.js")
-                markup.add_script(f"{pm_url}/components/prism-core.min.js")
-                markup.add_script(f"{pm_url}/plugins/autoloader/prism-autoloader.min.js")
-                markup.add_script("script.js")
-                markup.add_markup(output, target="#livemark-main")
-            markup.process(document)
-
-            # Update document
-            document.output = "<!doctype html>\n" + markup.output
+            document.output = output
diff --git a/livemark/plugins/logic/plugin.py b/livemark/plugins/logic/plugin.py
index b989e463..1e0fa0a5 100644
--- a/livemark/plugins/logic/plugin.py
+++ b/livemark/plugins/logic/plugin.py
@@ -6,17 +6,22 @@
 
 class LogicPlugin(Plugin):
     identity = "logic"
-    priority = 90
+    priority = 80
+
+    def __init__(self, document):
+        super().__init__(document)
+
+        # Prepare context
+        self.__context = {}
+        self.__context["document"] = self.document
+        self.__context["livemark"] = importlib.import_module("livemark")
+        self.__context["frictionless"] = frictionless
 
     # Context
 
     @property
     def context(self):
-        context = {}
-        context["document"] = self.document
-        context["livemark"] = importlib.import_module("livemark")
-        context["frictionless"] = frictionless
-        return context
+        return self.__context
 
     # Process
 
diff --git a/livemark/plugins/markdown/plugin.py b/livemark/plugins/markdown/plugin.py
index c4b12333..088a341d 100644
--- a/livemark/plugins/markdown/plugin.py
+++ b/livemark/plugins/markdown/plugin.py
@@ -5,6 +5,7 @@
 
 class MarkdownPlugin(Plugin):
     identity = "markdown"
+    priority = 20
 
     # Process
 
diff --git a/livemark/plugins/markup/plugin.py b/livemark/plugins/markup/plugin.py
index 069e14e0..550e37bf 100644
--- a/livemark/plugins/markup/plugin.py
+++ b/livemark/plugins/markup/plugin.py
@@ -6,7 +6,9 @@
 from ...plugin import Plugin
 
 
-# TODO: rename markdown class to livemark-markdown (as in pagination)
+# NOTE:
+# We might consider rebase markdown blocks rendering on using Document
+# This change will remove the direct HtmlException and GFM dependencies
 
 
 class MarkupPlugin(Plugin):
@@ -22,7 +24,7 @@ def process_snippet(self, snippet):
                     markdown.use(GFM)
                     markdown.use(HtmlExtension)
                     query = PyQuery(snippet.input)
-                    for node in query.find(".markdown"):
+                    for node in query.find(".livemark-markdown"):
                         node = PyQuery(node)
                         if not node.children():
                             input = node.text(squash_space=False)
diff --git a/livemark/plugins/pages/plugin.py b/livemark/plugins/pages/plugin.py
index 6fe4dbdd..1b6f1540 100644
--- a/livemark/plugins/pages/plugin.py
+++ b/livemark/plugins/pages/plugin.py
@@ -44,7 +44,7 @@ def items(self):
             # Handle nested
             for subitem in subitems:
                 document = self.document.project.get_document(subitem["path"])
-                subitem.setdefault("name", document.get_plugin("html").name)
+                subitem.setdefault("name", document.get_plugin("site").name)
                 subitem["active"] = False
                 if subitem["path"] == self.current:
                     item["active"] = True
@@ -53,7 +53,7 @@ def items(self):
             # Handle top-level
             if not subitems:
                 document = self.document.project.get_document(item["path"])
-                item.setdefault("name", document.get_plugin("html").name)
+                item.setdefault("name", document.get_plugin("site").name)
                 if item["path"] == self.current:
                     item["active"] = True
 
@@ -71,7 +71,7 @@ def process_project(project):
         for item in helpers.flatten_items(items, "items"):
             source = helpers.with_format(item["path"], "md")
             target = helpers.with_format(item["path"], project.format)
-            document = Document(source, target=target)
+            document = Document(source, target=target, project=project)
             project.documents.append(document)
 
     def process_markup(self, markup):
diff --git a/livemark/plugins/redirect/missing.md b/livemark/plugins/redirect/missing.md
index 59d59446..7f628d88 100644
--- a/livemark/plugins/redirect/missing.md
+++ b/livemark/plugins/redirect/missing.md
@@ -1,5 +1,5 @@
 ---
-html:
+site:
   description: The page is not found
 ---
 
diff --git a/livemark/plugins/redirect/plugin.py b/livemark/plugins/redirect/plugin.py
index 3c91044f..54a138ca 100644
--- a/livemark/plugins/redirect/plugin.py
+++ b/livemark/plugins/redirect/plugin.py
@@ -4,9 +4,10 @@
 from ... import helpers
 
 
-# NOTE:
+# TODO:
 # Move internal script to the plugin from 404.md (sync with blog)?
 # Can we make server show 404.html also locally (livereload)?
+# Remove 404 from the pages list
 
 
 class RedirectPlugin(Plugin):
@@ -44,4 +45,4 @@ def process_project(project):
             missing_source = "404.md"
             if not os.path.isfile(missing_source):
                 helpers.copy_file(missing_default, missing_source)
-            project.documents.append(Document(missing_source))
+            project.documents.append(Document(missing_source, project=project))
diff --git a/livemark/plugins/script/plugin.py b/livemark/plugins/script/plugin.py
index f655577d..d707aac3 100644
--- a/livemark/plugins/script/plugin.py
+++ b/livemark/plugins/script/plugin.py
@@ -6,7 +6,7 @@
 
 class ScriptPlugin(Plugin):
     identity = "script"
-    priority = 100
+    priority = 60
 
     # Process
 
diff --git a/livemark/plugins/search/plugin.py b/livemark/plugins/search/plugin.py
index b66c1ab3..a69b7b7b 100644
--- a/livemark/plugins/search/plugin.py
+++ b/livemark/plugins/search/plugin.py
@@ -21,7 +21,7 @@ def items(self):
             documents = self.document.project.documents
         for document in documents:
             item = {}
-            item["name"] = document.get_plugin("html").name
+            item["name"] = document.get_plugin("site").name
             item["path"] = document.path
             item["text"] = document.content
             items.append(item)
diff --git a/livemark/plugins/site/__init__.py b/livemark/plugins/site/__init__.py
new file mode 100644
index 00000000..e5ea1c8e
--- /dev/null
+++ b/livemark/plugins/site/__init__.py
@@ -0,0 +1,1 @@
+from .plugin import SitePlugin
diff --git a/livemark/plugins/html/markup.html b/livemark/plugins/site/markup.html
similarity index 59%
rename from livemark/plugins/html/markup.html
rename to livemark/plugins/site/markup.html
index 2839108f..b0017f64 100644
--- a/livemark/plugins/html/markup.html
+++ b/livemark/plugins/site/markup.html
@@ -2,9 +2,9 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<meta name="description" content="{{ plugin.description }}">
-<meta name="keywords" content="{{ plugin.keywords }}">
-<link rel="icon" href="{{ plugin.favicon }}"/>
+<meta name="description" content="{{ plugin.description | escape }}">
+<meta name="keywords" content="{{ plugin.keywords | escape }}">
+<link rel="icon" href="{{ plugin.favicon | escape }}"/>
 <title>{{ plugin.title }}</title>
 </head>
 <body>
diff --git a/livemark/plugins/site/plugin.py b/livemark/plugins/site/plugin.py
new file mode 100644
index 00000000..1ba8e054
--- /dev/null
+++ b/livemark/plugins/site/plugin.py
@@ -0,0 +1,72 @@
+from ...plugin import Plugin
+from ...markup import Markup
+
+
+# TODO:
+# Handle possible double quotes in title/description/keywords
+
+
+class SitePlugin(Plugin):
+    identity = "site"
+    validity = {
+        "type": "object",
+        "properties": {
+            "name": {"type": "string"},
+            "title": {"type": "string"},
+            "description": {"type": "string"},
+            "keywords": {"type": "string"},
+            "basepath": {"type": "string"},
+            "favicon": {"type": "string"},
+        },
+    }
+
+    # Context
+
+    @property
+    def name(self):
+        return self.config.get("name", self.document.name)
+
+    @property
+    def title(self):
+        return self.config.get("title", self.document.title)
+
+    @property
+    def description(self):
+        return self.config.get("description", self.document.description)
+
+    @property
+    def keywords(self):
+        return self.config.get("keywords", self.document.keywords)
+
+    @property
+    def basepath(self):
+        return self.config.get("basepath")
+
+    @property
+    def favicon(self):
+        return self.config.get("favicon")
+
+    # Process
+
+    def process_document(self, document):
+        if document.format == "html":
+            markup = Markup(self.read_asset("markup.html", plugin=self))
+            with markup.bind(self):
+                bs_url = "https://unpkg.com/bootstrap@4.6.0"
+                fa_url = "https://unpkg.com/@fortawesome/fontawesome-free@5.15.4"
+                pm_url = "https://unpkg.com/prismjs@1.23.0"
+                jq_url = "https://unpkg.com/jquery@3.6.0"
+                pp_url = "https://unpkg.com/popper.js@1.16.1"
+                markup.add_style(f"{fa_url}/css/all.min.css")
+                markup.add_style(f"{bs_url}/dist/css/bootstrap.min.css")
+                markup.add_style(f"{pm_url}/themes/prism.css")
+                markup.add_style("style.css")
+                markup.add_script(f"{jq_url}/dist/jquery.min.js")
+                markup.add_script(f"{pp_url}/dist/umd/popper.min.js")
+                markup.add_script(f"{bs_url}/dist/js/bootstrap.min.js")
+                markup.add_script(f"{pm_url}/components/prism-core.min.js")
+                markup.add_script(f"{pm_url}/plugins/autoloader/prism-autoloader.min.js")
+                markup.add_script("script.js")
+                markup.add_markup(document.output, target="#livemark-main")
+            markup.process(document)
+            document.output = "<!doctype html>\n" + markup.output
diff --git a/livemark/plugins/html/script.js b/livemark/plugins/site/script.js
similarity index 100%
rename from livemark/plugins/html/script.js
rename to livemark/plugins/site/script.js
diff --git a/livemark/plugins/html/style.css b/livemark/plugins/site/style.css
similarity index 100%
rename from livemark/plugins/html/style.css
rename to livemark/plugins/site/style.css
diff --git a/livemark/plugins/table/plugin.py b/livemark/plugins/table/plugin.py
index f3041e0d..67cb1222 100644
--- a/livemark/plugins/table/plugin.py
+++ b/livemark/plugins/table/plugin.py
@@ -6,7 +6,7 @@
 
 class TablePlugin(Plugin):
     identity = "table"
-    priority = 100
+    priority = 60
 
     # Process
 
diff --git a/livemark/program/build.py b/livemark/program/build.py
index 2fa10422..3c22b76c 100644
--- a/livemark/program/build.py
+++ b/livemark/program/build.py
@@ -3,7 +3,6 @@
 import typer
 from ..server import Server
 from ..project import Project
-from ..document import Document
 from .main import program
 from .. import errors
 from . import common
@@ -36,10 +35,12 @@ def program_build(
                 raise errors.Error(message)
 
         # Create project
-        document = None
-        if source:
-            document = Document(source, target=target, format=format)
-        project = Project(document, config=config, format=format)
+        project = Project(
+            source,
+            target=target,
+            format=format,
+            config=config,
+        )
 
         # Normal mode
         if not live:
diff --git a/livemark/program/merge.py b/livemark/program/merge.py
index 794b56ec..9afb94c8 100644
--- a/livemark/program/merge.py
+++ b/livemark/program/merge.py
@@ -32,10 +32,11 @@ def program_merge(
                 raise errors.Error(message)
 
         # Create project
-        document = None
-        if source:
-            document = Document(source, format="md")
-        project = Project(document, config=config, format="md")
+        project = Project(
+            source,
+            format="md",
+            config=config,
+        )
 
         # Normal mode
         if not live:
@@ -45,12 +46,12 @@ def program_merge(
             sys.exit(0)
 
         # Live mode
-        if not document:
+        if not project.document:
             message = 'Live mode requries the "source" argument'
             raise errors.Error(message)
-        atexit.register(document.build)
+        atexit.register(project.document.build)
         with tempfile.NamedTemporaryFile(suffix=".html") as file:
-            server = Server(Project(Document(source, target=file.name)))
+            server = Server(Document(source, target=file.name).project)
             server.start(host=host, port=port, file=file.name)
 
     except Exception as exception:
diff --git a/livemark/program/start.py b/livemark/program/start.py
index 6c887c27..c521d5ea 100644
--- a/livemark/program/start.py
+++ b/livemark/program/start.py
@@ -2,7 +2,6 @@
 import sys
 import typer
 from ..project import Project
-from ..document import Document
 from ..server import Server
 from .main import program
 from .. import settings
@@ -11,7 +10,7 @@
 
 
 # NOTE:
-# We need to improve default template making it faster and more informative
+# We need to improve the default template by making it faster and more informative
 
 
 @program.command(name="start")
@@ -35,16 +34,17 @@ def program_start(
                     helpers.copy_file(settings.TEMPLATE, source)
 
         # Create project
-        document = None
-        if source:
-            document = Document(source, target=target, format=format)
-        project = Project(document, config=config, format=format)
+        project = Project(
+            source,
+            target=target,
+            format=format,
+            config=config,
+        )
 
         # Live mode
         server = Server(project)
         server.start(host=host, port=port)
 
     except Exception as exception:
-        raise
         typer.secho(str(exception), err=True, fg=typer.colors.RED, bold=True)
         sys.exit(1)
diff --git a/livemark/project.py b/livemark/project.py
index ca69eb2b..6d5e90f3 100644
--- a/livemark/project.py
+++ b/livemark/project.py
@@ -1,14 +1,10 @@
+from .document import Document
 from .config import Config
 from .system import system
 from . import settings
 from . import errors
 
 
-# NOTE:
-# Review whether it's right to read all the documents on init (duplicate with document?)
-# We read them to get access to configs and iferred data
-
-
 class Project:
     """Livemark project
 
@@ -17,41 +13,46 @@ class Project:
     Public   | `from livemark import Project`
 
     Parameters:
-        document (Document): a document to build
-        config? (str): a path to config file
+        source (str): path to the document source
+        target? (str): path to the document target
         format? (str): an output format
+        config? (str): a path to config file
 
     """
 
-    def __init__(self, document=None, *, config=None, format=None):
-        self.__documents = [document] if document else []
-        self.__config = Config(config)
+    def __init__(
+        self,
+        source=None,
+        *,
+        target=None,
+        format=None,
+        config=None,
+    ):
+
+        # Create document
+        document = None
+        if source:
+            document = Document(source, target=target, format=format, project=self)
+
+        # Infer format
+        if not format:
+            format = document.format if document else settings.DEFAULT_FORMAT
+
+        # Set attributes
+        self.__documents = []
+        self.__config_source = config
         self.__document = document
         self.__format = format
-        self.__context = {}
-
-        # Process project
-        for Plugin in system.iterate():
-            if Plugin.check_status(self.__config):
-                Plugin.process_project(self)
-
-        # Read documents
-        for document in self.__documents:
-            document.project = self
-            document.read()
+        self.__config = None
 
     @property
-    def format(self):
-        """Project's format
+    def document(self):
+        """Project's document
 
         Return:
-            str: format
+            Document?: document
         """
-        if self.__format:
-            return self.__format
-        if self.__document:
-            return self.__document.format
-        return settings.DEFAULT_FORMAT
+        return self.__document
 
     @property
     def config(self):
@@ -63,13 +64,13 @@ def config(self):
         return self.__config
 
     @property
-    def document(self):
-        """Project's document
+    def format(self):
+        """Project's format
 
         Return:
-            Document?: document
+            str: format
         """
-        return self.__document
+        return self.__format
 
     @property
     def documents(self):
@@ -89,6 +90,19 @@ def building_documents(self):
         """
         return [self.document] if self.document else self.documents
 
+    @property
+    def building_sources(self):
+        """Project's building sources
+
+        Return:
+            str[]: sources
+        """
+        # TODO: handle plugin.py?
+        sources = []
+        if self.config and self.config.source:
+            sources.append(self.config.source)
+        return sources
+
     # Build
 
     def build(self, *, diff=False, print=False):
@@ -102,10 +116,18 @@ def build(self, *, diff=False, print=False):
             str: concatenated documents output
         """
 
-        # Ensure documents
-        if not self.documents:
+        # Read/process
+        self.read()
+        self.process()
+        if not self.building_documents:
             raise errors.Error("No documents to build in the project")
 
+        # Read documents
+        if self.document:
+            self.document.read()
+        for document in self.documents:
+            document.read()
+
         # Build documents
         outputs = []
         for document in self.building_documents:
@@ -114,8 +136,27 @@ def build(self, *, diff=False, print=False):
                 outputs.append(output)
         output = "\n".join(outputs)
 
+        # Return output
         return output
 
+    # Read
+
+    def read(self):
+        """Read the project"""
+        self.__config = Config(self.__config_source)
+
+    def process(self):
+        """Process the project"""
+
+        # Ensure read
+        if self.config is None:
+            raise errors.Error("Read project before processing")
+
+        # Process project
+        for Plugin in system.iterate():
+            if Plugin.check_status(self.config):
+                Plugin.process_project(self)
+
     # Helpers
 
     def get_document(self, path):
diff --git a/livemark/system.py b/livemark/system.py
index a0e0c690..1dd928ee 100644
--- a/livemark/system.py
+++ b/livemark/system.py
@@ -39,7 +39,7 @@ def Plugins(self):
         for module in modules:
             for Class in helpers.extract_classes(module, Plugin):
                 if Class.identity in Plugins:
-                    raise errors.Error(f"Plugin identity conflict: {Class.identity}")
+                    raise errors.Error(f"Plugin name conflict: {Class.identity}")
                 Plugins[Class.identity] = Class
         return Plugins
 
@@ -61,7 +61,7 @@ def register(self, Plugin):
             Plugin (type): a plugin class to register
         """
         if Plugin.identity in self.Plugins:
-            raise errors.Error(f"Plugin identity conflict: {Plugin.identity}")
+            raise errors.Error(f"Plugin name conflict: {Plugin.identity}")
         self.Plugins[Plugin.identity] = Plugin
 
     def deregister(self, Plugin):


Test patch:
diff --git a/assets/cards/test.html b/assets/cards/test.html
index d9155b53..93c307ba 100644
--- a/assets/cards/test.html
+++ b/assets/cards/test.html
@@ -1,3 +1,2 @@
 <h1>Test</h1>
-
 <p>This is test plugin card</p>
\ No newline at end of file
diff --git a/tests/test_document.py b/tests/test_document.py
index 7883e834..852d517d 100644
--- a/tests/test_document.py
+++ b/tests/test_document.py
@@ -20,8 +20,7 @@ def test_document_format():
 
 def test_document_project():
     project = Project(config="livemark.yaml")
-    document = Document("index.md")
-    document.project = project
+    document = Document("index.md", project=project)
     assert document.source == "index.md"
     assert document.project is project
 
@@ -77,8 +76,7 @@ def test_document_build_print():
 
 def test_document_read():
     project = Project(config="livemark.yaml")
-    document = Document("index.md")
-    document.project = project
+    document = Document("index.md", project=project)
     document.read()
     assert document.source == "index.md"
     assert document.target == "index.html"
diff --git a/tests/test_project.py b/tests/test_project.py
index 78397788..6fe9ad7c 100644
--- a/tests/test_project.py
+++ b/tests/test_project.py
@@ -5,5 +5,14 @@
 
 
 def test_project():
+    project = Project(source="index.md")
+    assert project.document.source == "index.md"
+
+
+# Read
+
+
+def test_project_read():
     project = Project(config="livemark.yaml")
+    project.read()
     assert project.config["brand"]["text"] == "Livemark"