attribute-store
Advanced tools
Store data from YAML front matter in HTML data-attributes.
Install with npm:
npm i data-store --save-dev
var dataStore = require('data-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>
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 data-store
var store = dataStore(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 the data:
store.get('metadata');
Set a custom id:
store.set('foo');
// to get the data:
store.get('foo');
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>
Jon Schlinkert
Brian Woodward
Copyright (c) 2014 Jon Schlinkert, contributors.
Released under the MIT license
This file was generated by verb-cli on May 01, 2014.
FAQs
Store template context on data attributes in static HTML, allowing metadata to be retrieved/updated post-render.
The npm package attribute-store receives a total of 2 weekly downloads. As such, attribute-store popularity was classified as not popular.
We found that attribute-store demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The U.S. government is rolling back software supply chain mandates, shifting from mandatory SBOMs and attestations to a risk-based approach.
Security News
crates.io adds a Security tab backed by RustSec advisories and narrows trusted publishing paths to reduce common CI publishing risks.
Research
/Security News
A Chrome extension claiming to hide Amazon ads was found secretly hijacking affiliate links, replacing creators’ tags with its own without user consent.