Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metaory/markup.json
HTML DOM tree representation in compact JSON -- Draft Spec, Library and CLI
https://github.com/metaory/markup.json
Last synced: 26 days ago
JSON representation
HTML DOM tree representation in compact JSON -- Draft Spec, Library and CLI
- Host: GitHub
- URL: https://github.com/metaory/markup.json
- Owner: metaory
- License: mit
- Created: 2024-08-12T03:07:44.000Z (about 1 month ago)
- Default Branch: master
- Last Pushed: 2024-08-21T11:34:20.000Z (27 days ago)
- Last Synced: 2024-08-21T12:55:58.153Z (27 days ago)
- Language: JavaScript
- Homepage: https://npmjs.com/package/mini-json2html
- Size: 2.12 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
mʌrκup.json
HTML DOM tree representation in compact JSON
First Class Support for Attributes String
Designed around Array indices
---
> [!Caution]
> 🚧 Under Development
---
---
> [!Tip]
> Most of this readme is created from
> [test/preview.json](https://github.com/metaory/markup.json/blob/master/test/preview.json)
---
Library Usage
-------------
```sh
# install
npm install markup.json
# or
pnpm add markup.json
```
```sh
cat tests/mini.json
```
```json
[
["h1", "mʌrκup.json"],
["br"],
["h4", "DOM tree", "representation", "in compact JSON"],
[
"a",
{
"class": "primary",
"data-planet-id": "92432",
"href": ["search?", { "q": "foo", "type": "bar" }],
"style": { "color": "indigo", "background": "fuchsia" }
},
"🔥 First Class Attribute Strings"
],
"draft spec 0.7"
]
```
```sh
markup < tests/sample.json
```
```javascript
import { readFile } from 'node:fs/promises'
import markup from 'markup.json'
const content = JSON.parse(await readFile('./mini.json', { encoding: 'utf8' }))
const html = markup(content)
```
```html
mʌrκup.json
DOM tree
representation
in compact JSON
🔥 First Class Attribute Strings
draft spec 0.7
```
---
CLI Installation
---------
```sh
# install globally
npm i -g markup.json
# or
pnpm add -g markup.json
```
---
CLI Synopsis
------------
markup.json [-]|FILE
Reads input from **standard input** or **FILE**
The `-` is optional pointing to `stdin`
Writes the output to `stdout`
---
CLI Usage
---------
Read input from `stdin` and write result to `stdout`
```sh
cat content.json | markup
```
Select and pipe a node with `jq` and redirect results to file
```sh
# pipe json input and write result to a file
jq '.content' < tests/sample.json | markup > output.html
```
Read input from `argument` and write result to `stdout`
```sh
markup content.json
```
```sh
# npx not tested
# npx markup.json sample.json
```
---
Spec Draft
----------
Every element is a new line
Array's first element is the TAG
Both Attribute and Value can be omitted
second element is the attribute object
attributes are optional
elements
can have
many children
every child
is a new line
values are optional
Attributes with
Array
or
Object
are treated differently
Array Attributes
Attributes with Array as value
joined with
semicolon
and equal sign to delimit keys and values
Object Attributes
elements can
be nested
arrays as values are children
nested
children can have
children!
Attributes with primitive values are rendered as they are written
Spec Draft Notes
----------------
> [!Note]
> The values `"true"` and `"false"` are not allowed on boolean attributes.
> To represent a false value, the attribute has to be omitted altogether.
>
> _ref:_ [2.3.2 Boolean attributes -- html.spec.whatwg.org](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes)
License
-------
[MIT](LICENSE)