https://github.com/tbeseda/waylon

Node.js HTML string helpers
https://github.com/tbeseda/waylon

helpers html nodejs strings

Last synced: 5 days ago
JSON representation

Node.js HTML string helpers

• Host: GitHub
• URL: https://github.com/tbeseda/waylon
• Owner: tbeseda
• Created: 2023-09-06T16:38:38.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-30T01:29:06.000Z (about 1 year ago)
• Last Synced: 2024-04-24T10:19:50.075Z (7 months ago)
• Topics: helpers, html, nodejs, strings
• Language: JavaScript
• Homepage: http://npmjs.org/package/waylon
• Size: 174 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

☣️ This is a prototype!



  Don't go putting this into production.


  I'm not super keen on the API yet. Breaking changes will be minors and everything else is a patch.


  Until v1. Then I'll keep a CHANGELOG and stick to proper semver.


  





  I'm a Ramblin' Man


  


  





Waylon 🌵




  HTML string helpers, particularly great in Node.js string template literals.


  Lonesome, On'ry, and Mean


  waylon on npmjs.org »


  


  Entities:

  Item

  •

  List

  •

  Collection



## Install

```

npm i waylon

```

## Usage

📝 **Some goals, thoughts, notes:**

- Class methods always return a string of HTML

- User never *has* to author a bracketed HTML tag

- `$` generally denotes "this thing is HTML"

### Item

When you've got a single object: `Item`

```js

import { Item } from "waylon";

const data = { first: "Kris", last: "Kristofferson", born: 1936 };

const kris = new Item(data);

```

```js

const $link = kris.link("https://en.wikipedia.org/wiki/Kris_Kristofferson", data.first);

```

> Kris

```js

const dataAttrs = kris.dataAttrs();

```

> data-first="Kris" data-last="Kristofferson" data-born="1936"

```js

const attrs = kris.attrs();

```

> first="Kris" last="Kristofferson" born="1936"

Suggestions? File an issue.

### List

Suggestions? File an issue.

### Collection

When you've got an array of objects: `Collection`

```js

import { Collection } from "waylon";

const data = [

  { first: "Waylon", last: "Jennings", born: 1937 },

  { first: "Willie", last: "Nelson", born: 1933 },

  { first: "Kris", last: "Kristofferson", born: 1936 },

  { first: "Johnny", last: "Cash", born: 1932 },

];

const highwaymen = new Collection(data);

```

🎶 I Ain't Living Long Like This...

```js

const $list = highwaymen.list(["first", "last"]);

```



Waylon Jennings

Willie Nelson

Kris Kristofferson

Johnny Cash



```js

const $ul = highwaymen.ul("first");

```



Waylon

Willie

Kris

Johnny



```js

const $ol = highwaymen.ol("born");

```



1937

1933

1936

1932



```js

const $table = highwaymen.table();

```

firstlastbornWaylonJennings1937WillieNelson1933KrisKristofferson1936JohnnyCash1932

```js

const $listSeparated = highwaymen.list(["last", "first"], ", ");

```



Jennings, Waylon

Nelson, Willie

Kristofferson, Kris

Cash, Johnny



```js

const $listTemplated = highwaymen.list(

  ({ first, last, born }) => `${first} ${last}: ${born}`,

);

```



Waylon Jennings: 1937

Willie Nelson: 1933

Kris Kristofferson: 1936

Johnny Cash: 1932



## FAQ

Why "waylon"?

`waylon` is pretty scrappy. No dependencies, simple, and straight forward. Not necessarily revolutionary, but not going to conform to the mainstream ~~Nashville Sound~~ way of making HTML.

Also, I was squatting the name on npmjs.org because I'm a big fan of Waylon Jennings. But I don't want to be that guy and just hold a great name. So here we are!



  





  ...

  





  It's just strings.


  Plus, I've never been to Spain.