❤
npm
Sign UpSign In

attribute-store

0.1.3 • Public • Published

attribute-store NPM version

Store template context on data attributes in static HTML, allowing metadata to be retrieved/updated post-render.

Install

Install with npm:

npm i attribute-store --save-dev

Usage

var attrStore = require('attribute-store');

This is foo.html:

---
title: Home
---
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    this is the body
  </body>
</html>

.set()

To store the YAML front matter from foo.html in data attributes:

// Read the file in as a string
var str = fs.readFileSync('foo.html');
 
// pass the string to attribute-store
var store = attrStore(str);

To store the data from the front-matter in data attributes (by default data is stored on data-metadata on a script tag with the metadata id):

store.set();
console.log(store.html);

Results in:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    this is the body
  <script type="text/x-metadata" id="metadata" data-metadata="{\"title\":\"Home\"}"></script></body>
</html>

.get()

Get the data:

store.get('metadata');

id

Set a custom id:

store.set('foo');
// to get the data:
store.get('foo');

extend

YAML front matter is stored by default. If an object is passed any existing front-matter will be extended.

If front-matter doesn't exist, just pass an object to store:

store.set({name: 'Jon Schlinkert'});

Results in:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    this is the body
  <script type="text/x-metadata" id="metadata" data-metadata="{\"name\":\"Jon Schlinkert\"}"></script></body>
</html>

Or with a custom id:

store.set('foo', {name: 'Jon Schlinkert'});

Results in:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    this is the body
  <script type="text/x-metadata" id="foo" data-metadata="{\"name\":\"Jon Schlinkert\"}"></script></body>
</html>

Author

Jon Schlinkert

License

Copyright (c) 2014 Jon Schlinkert
Released under the MIT license

This file was generated by verb on November 17, 2014.

Readme

Keywords

Package Sidebar

Install

npm i attribute-store

Repository

github.com/jonschlinkert/attribute-store

Homepage

github.com/jonschlinkert/attribute-store

Weekly Downloads

2

Version

0.1.3

License

none

Last publish

Collaborators

  • doowb
  • jonschlinkert
Try on RunKit
Report malware