https://github.com/static-dev/spike-page-id

generates a css-friendly page identifier for easy css scoping
https://github.com/static-dev/spike-page-id

Last synced: about 1 year ago
JSON representation

generates a css-friendly page identifier for easy css scoping

• Host: GitHub
• URL: https://github.com/static-dev/spike-page-id
• Owner: static-dev
• License: other
• Created: 2016-08-31T22:09:54.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2019-02-05T12:42:56.000Z (about 7 years ago)
• Last Synced: 2025-02-25T03:18:19.192Z (about 1 year ago)
• Language: JavaScript
• Size: 525 KB
• Stars: 0
• Watchers: 4
• Forks: 2
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Contributing: contributing.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Spike Page ID

[![npm](https://img.shields.io/npm/v/spike-page-id.svg?style=flat-square)](https://npmjs.com/package/spike-page-id)

[![tests](https://img.shields.io/travis/static-dev/spike-page-id.svg?style=flat-square)](https://travis-ci.org/static-dev/spike-page-id?branch=master)

[![dependencies](https://img.shields.io/david/static-dev/spike-page-id.svg?style=flat-square)](https://david-dm.org/static-dev/spike-page-id)

[![coverage](https://img.shields.io/coveralls/static-dev/spike-page-id.svg?style=flat-square)](https://coveralls.io/r/static-dev/spike-page-id?branch=master)

Generates a css-friendly page identifier from a webpack loader context

> **Note:** This project is in early development, and versioning is a little different. [Read this](http://markup.im/#q4_cRZ1Q) for more details.

### Installation

`npm install spike-page-id -S`

> **Note:** This project is compatible with node v6+ only

### Usage

In your spike config:

```js

const htmlStandards = require('reshape-standard')

const pageId = require('spike-page-id')

module.exports = {

  // other config…

  reshape: (ctx) => {

    return htmlStandards({

      locals: { pageId: pageId(ctx) }

    })

  }

}

```

Now in your html, let's say it's called `index.sgr`:

```

html

  head

    title My page

  body(id='{{ pageId }}')

    p hello world

```

This will render something like:

```html

  

    My page

  

  

    
hello world

  


```

If you are working with a page that's nested inside other folders, it will include all folders relative to the project root, separated by a hyphen. So for example:

- `views/index.sgr` > `index`

- `views/posts/welcome.sgr` > `posts-welcome`

…and that's about it!

### License & Contributing

- Details on the license [can be found here](LICENSE.md)

- Details on running tests and contributing [can be found here](contributing.md)