Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/romellogoodman/hypertextscriptinglanguage.js
A library for scripting html.
https://github.com/romellogoodman/hypertextscriptinglanguage.js
Last synced: about 17 hours ago
JSON representation
A library for scripting html.
- Host: GitHub
- URL: https://github.com/romellogoodman/hypertextscriptinglanguage.js
- Owner: romellogoodman
- Created: 2022-06-16T04:52:19.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-28T04:29:41.000Z (over 2 years ago)
- Last Synced: 2024-12-19T11:35:43.695Z (about 1 month ago)
- Language: JavaScript
- Size: 256 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> NOTE:
> This package is in hibernation mode.
> The core of its functionality has been added to [goodgraphics.js](https://github.com/romellogoodman/goodgraphics.js).
# hypertextscriptinglanguage
[](https://badge.fury.io/js/hypertextscriptinglanguage)
A library for scripting html.
Demo: [Codesandbox Demo](https://codesandbox.io/s/hypertextscriptinglanguage-demo-tnnh1t)
## Table of contents
- [Usage](#usage)
- [API Reference](#api)
- [Contributing](#contributing)
## Usage
### Install
npm
```
npm i hypertextscriptinglanguage
```
unpkg
```
```
### Use
```js
const page = new SCRIPT();
page.h1('hello world');
const html = page.markup();
```
## API
### `new SCRIPT(options)`
Creates a new instance. `options` is a JavaScript object with the following properties:
- `@param {String} container` Selector or DOM element used as container for the SVG. Defaults to 'html'.
- `@param {Number} fontsize` The font size for the document. Defaults to 16.
### `$tag(content, attributes)`
The library supports a majorty of html tags as the primary interface. In the example above we create a `
` tag with it's content and add it to the document's ``. This function is a wrapper around `this.head` and `this.body`
- `@param {String} content` The content of the element.
- `@param {Object} attributes` Key value pairs of attributes to apply to the tag.
Nesting can be created when content is passed an array `[]`.
```js
const page = new SCRIPT();
page.ul([
//
page.li([
//
page.span('item'),
page.span('1'),
]),
page.li('item 2'),
page.li('item 3'),
]);
```
### `head(tag, content, attributes)`
Adds an element to the head of the document.
- `@param {String} tag` The tag of the element.
- `@param {String} content` The content of the element.
- `@param {Object} attributes` Key value pairs of attributes to apply to the tag.
### `body(tag, content, attributes)`
Adds an element to the body of the document.
- `@param {String} tag` The tag of the element.
- `@param {String} content` The content of the element.
- `@param {Object} attributes` Key value pairs of attributes to apply to the tag.
### `comment(content)`
Adds a comment to the head of the document.
### `markup()`
- `@return {String}` The html markup for the document.
### `draw()`
Draws the markup.
### `remove()`
Removes the markup.
### `redraw()`
Re-draws the markup.
### `empty()`
Empties the markup and resets the SCRIPT.
## Contributing
All contributors and all contributions both big and small are welcome in this project. The examples are built on top of [`Eleventy`](https://www.11ty.dev/) and can be run using:
```sh
npm run dev
npm run examples
```