https://github.com/reod/koa-head
A document head manager middleware for koa.
https://github.com/reod/koa-head
document head koa koa-head middleware
Last synced: 28 days ago
JSON representation
A document head manager middleware for koa.
- Host: GitHub
- URL: https://github.com/reod/koa-head
- Owner: reod
- Created: 2018-12-05T13:01:33.000Z (over 6 years ago)
- Default Branch: develop
- Last Pushed: 2023-10-26T23:39:39.000Z (over 1 year ago)
- Last Synced: 2025-03-26T20:51:26.584Z (about 2 months ago)
- Topics: document, head, koa, koa-head, middleware
- Language: JavaScript
- Homepage:
- Size: 739 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
[](https://snyk.io/test/github/reod/koa-head?targetFile=package.json)
# koa-head
A document head manager middleware for koa.
## Installation
`npm i koa-head`
## TL;DR example
**note:** this package can be used as native ES6 module but has fallback to CommonJS `require`.
```js
import Koa from "koa";
import koaHead from "koa-head";
const app = new Koa();
app
.use(koaHead())
.use(async (ctx, next) => {
ctx.documentHead.setTitle("Title for my webpage");
ctx.documentHead.addMetaTag({
name: "twitter:card",
content: "summary_large_image"
});
ctx.documentHead.addLink({ rel: "canonical", href: "index.html" });
ctx.documentHead.addStyle("body { background: aliceblue; }");
ctx.documentHead.addScript("{ fixture: 'test fixture' }");
await next();
})
.use(ctx => {
const documentHead = ctx.documentHead.toHTML();
const userData = { name: "John Doe" };
await ctx.myAwesomeLayoutEngine("user-view", {
documentHead,
userData
});
});
app.listen(3333);
```
will make `documentHead` variable to contain:
```html
Title for my webpage
body {
background: aliceblue;
}
{
fixture: "test fixture";
}
```
so you can use it in a place in your layout.
## Available methods
### `.setTitle( string | object )`
Set document title.
### `.addMetaTag( object )`
Add `` tag.
### `.addLink( object )`
Add `` tag.
### `.addStyle( string | object )`
Add `` tag.
### `.addScript( string | object )`
Add `` tag.
### `.toHtml()`
Render all set content to coresponding HTML tags.
## Middleware factory function config
| Option | Description | Default value |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `ctxNamespace` | Name under which middleware is exposed in `cxt` object and is used by other middlewares i.e. `ctx.documentHead.setTitle('Hello')`. | `'documentHead'` |
| `stateNamespace` | Name under which middleware stores values in `ctx.state` | `'documentHead'` |
| `documentTitleFormatter` | If set, all values passed to `.setTitle()` function will pe parsed by this formatter. | `title => title` |
| `toHtml` | Config for toHtml function. | `{ [default_values] }` |
| `toHtml.tagSeparator` | Separator between tags inside one group. | `\n` |
| `toHtml.groupSeparator` | Separator between group of tags. | `\n\n` |