open-index/open-npm huggingface dataset:
npm package: @gelight/json2sml
Description: Node package to convert JSON to SML
Author: Mario Linz
Latest version: 1.0.1

# @gelight/json2sml

Node package to convert JSON to SML

## Dependencies

This library depends on SML (Simple Markup Language)

## What is SML?

> [Guide - SML Specification](https://dev.stenway.com/SML/Specification.html)

> [Video - SML in 60sec](https://www.youtube.com/watch?v=qOooyygwX0w)

> [Video - SML Explained](https://www.youtube.com/watch?v=fBzMdzMtH-s&t=221s)

## Using in Node.js

```js
// Import the converter class from the module
import { Converter } from "@gelight/json2sml";

// JSON example
let json = {
    "firstName": "John",
    "lastName": "Smith",
    "age": 27,
    "address": {
        "streetAddress": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postalCode": "10021-3100"
    }
}

// Use the converter to generate your SML document based on your JSON object
let doc = Converter.convert(json);

// Output > Logs all SML attributes from the SML element "address"
console.log(doc.getRoot().getElement("address").getAttributes());
```

Output:
```js
[
  SmlAttribute {
    whitespaces: null,
    comment: null,
    name: 'streetAddress',
    values: [ '21 2nd Street' ]
  },
  SmlAttribute {
    whitespaces: null,
    comment: null,
    name: 'city',
    values: [ 'New York' ]
  },
  SmlAttribute {
    whitespaces: null,
    comment: null,
    name: 'state',
    values: [ 'NY' ]
  },
  SmlAttribute {
    whitespaces: null,
    comment: null,
    name: 'postalCode',
    values: [ '10021-3100' ]
  }
]
```

## Using in browser

```html
<html>
    <head>
        <title>JSON2SML - Node package to convert JSON to SML</title>
    </head>
    <body>
        <script src="https://unpkg.com/@gelight/json2sml"></script>
        <script>
          let json = {
              "firstName": "John",
              "lastName": "Smith",
              "age": 27,
              "address": {
                  "streetAddress": "21 2nd Street",
                  "city": "New York",
                  "state": "NY",
                  "postalCode": "10021-3100"
              }
          };
          
          let doc = JSON2SML.Converter.convert(json);
          
          console.log(doc.getRoot().getElement("address").getAttributes());
          
        </script>
    </body>
</html>
```
npm package: @gelight/sml
Description: Simple Markup Language
Author: Mario Linz
Latest version: 0.3.3

# SML

The Simple Markup Language

> This library unites the world of SML, WhitespaceSV and ReliableTxt.

---

## Release Notes

Latest version: ![npm](https://img.shields.io/npm/v/@gelight/sml?style=for-the-badge)

Detailed release notes for each version are available on [GitHub](https://github.com/GELight/sml/blob/master/CHANGELOG.md).

| Page | Link |
| ---- | ---- |
| Github | https://github.com/Stenway |
| Homepage | https://dev.stenway.com/sml/ |

---

## Documentation Pages on Github

### English Docs

- [**ReliableTxt**](https://github.com/GELight/sml/tree/master/src/doc/en/reliabletxt)
- [**WhitespaceSv**](https://github.com/GELight/sml/tree/master/src/doc/en/wsv)
- [**SML** ( currently only in german )](https://github.com/GELight/sml/tree/master/src/doc/de)

### German Docs

- [**SML**](https://github.com/GELight/sml/tree/master/src/doc/de)
- **ReliableTxt** - documentation is coming soon
- **WhitespaceSv** - documentation is coming soon
npm package: @gelight/sml-editor
Description: Web component for a simple SML editor
Author: Mario Linz
Latest version: 0.0.6

# SLM Editor

Provides a simple web component for sml editing in browser.

## CDN

For using SML as runtime build in your browser you can use the latest version with:

```html
<script src="https://unpkg.com/@gelight/sml-editor"></script>
```
or
```html
<script src="https://cdn.jsdelivr.net/npm/@gelight/sml-editor"></script>
```

## Using

Using the component in your template
```js
<sml-editor auto-resize class="editor"></sml-editor>
```

| Attributes    | Description |
| ------------- | ----------- |
| auto-resize   | Defines whether the component height should be auto sized |
| class         | The class attribute specifies one or more CSS classnames for the component. |

## Events

```js
<script type="text/javascript">
    let editor = document.querySelector('sml-editor');
    editor.addEventListener('change', (e) => {
        console.log(e.detail);
    });
</script>
```

## CSS Customizing

```css
--sml-editor-tab-size: 2;
--sml-editor-color: #8e9fcd;
--sml-editor-bg: linear-gradient(161deg, #333a47 0%, #1c1d24 100%);
--sml-editor-border: 2px solid #4f5b70;
--sml-editor-padding: .8rem;
--sml-editor-max-height: auto;
--sml-editor-height: auto;
--sml-editor-box-shadow: 0 0 .8rem .8rem rgba(0,0,0,0.75);
--sml-editor-text-shadow: 0px 4px 4px rgba(0,0,0,0.85);
--sml-editor-font-family: monospace;
--sml-editor-font-size: 14px;
--sml-editor-line-height: 1.4rem;
--sml-editor-font-weight: 400;
--sml-editor-font-style: initial;
--sml-editor-font-stretch: initial;
--sml-editor-letter-spacing: .1rem;
--sml-editor-text-transform: initial;
```
npm package: @gelight/sml-page-builder
Description: Simple Page Builder based on SML
Author: Mario Linz
Latest version: 0.0.2

# SML Page Builder

The simple page generator based on SML

## Using

Example page definition - *./layouts/**page-layout.sml***
```
Div
    class example-page-layout
    Slot default
End
```

Example page definition - *./pages/**index.sml***
```
Slot
    From ../layouts/page-layout.sml
    Name default
    Section
        class container markdown
        h1
            id title
            Text Hello World
        End
        IncludeGithubMarkdownFile https://raw.githubusercontent.com/ReliableTXT/ReliableTXT/main /ReliableTXT_Specification.md
    End
End
```

Use the SmlPageBuilder to generate html files based on your defined SML files. This example use three other classes `CustomTagText` and `CustomTagIncludeGithubMarkdownFile` to manipulate any attributes or elements with related tag names.
```js
import * as path from "path";
import {
    CustomTagIncludeGithubMarkdownFile,
    CustomTagSlot,
    CustomTagText,
    SmlPageBuilder
} from "@gelight/sml-page-builder";

const PATH = path.resolve(__dirname, "pages");
const OUTPUT_PATH = path.resolve(__dirname, "sites");
const ASSETS_PATH = path.resolve(__dirname, "assets");

new SmlPageBuilder()
    .setAssetsPath(ASSETS_PATH)
    .setPagesPath(PATH)
    .setOutputPath(OUTPUT_PATH)
    .registerCustomTag("Text", CustomTagText)
    .registerCustomTag("Slot", CustomTagSlot)
    .registerCustomTag("IncludeGithubMarkdownFile", CustomTagIncludeGithubMarkdownFile)
    .build();
```
Output:
```html
<div class="example-page-layout">

    <h1 id="title">
        Hello World
    </h1>
    
    ... included Github markdown converted to HTML ...

</div>
```
npm package: @gelight/whitespacesv
Description: WhitespaceSV - The Intuitive and Reliable Alternative to CSV
Author: Mario Linz
Latest version: 0.0.5

# WhitespaceSV - Whitespace Separated Values (WSV)

This package is a port of WhitespaceSV for the node.js world.
The official documentation pages you can find here:

| Page | Link |
| ---- | ---- |
| Github | https://github.com/Stenway |
| Homepage | https://dev.stenway.com/WSV/ |