-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add _meta info with information about insert index
- Loading branch information
Showing
23 changed files
with
260 additions
and
94 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
node_modules | ||
.idea | ||
.vscode |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,28 @@ | ||
# Changelog | ||
|
||
All notable changes to this project will be documented in this file. | ||
|
||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), | ||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). | ||
|
||
## [Unreleased] | ||
|
||
### Changed | ||
|
||
## [2.0.0] - 2019-05-29 | ||
|
||
### Added | ||
|
||
- Each item now has a `_meta` property with `insertIndex`. When using build-in rendering it's automagically stripped. | ||
|
||
## [1.1.0] - 2018-12-20 | ||
|
||
### Added | ||
|
||
- Rendering set tags to HTML with `render()` method. | ||
|
||
## [1.0.0] - 2018-12-05 | ||
|
||
### Added | ||
|
||
- First version. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,76 +1,103 @@ | ||
[![Known Vulnerabilities](https://snyk.io/test/github/reod/koa-head/badge.svg?targetFile=package.json)](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`. | ||
|
||
**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'; | ||
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.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' }; | ||
const userData = { name: "John Doe" }; | ||
|
||
await ctx.myAwesomeLayoutEngine('user-view', { | ||
await ctx.myAwesomeLayoutEngine("user-view", { | ||
documentHead, | ||
userData, | ||
}) | ||
userData | ||
}); | ||
}); | ||
|
||
app.listen(3333); | ||
``` | ||
|
||
will make `documentHead` variable to contain: | ||
|
||
```html | ||
<title>Title for my webpage</title> | ||
<meta name="twitter:card" content="summary_large_image" /> | ||
<link rel="canonical" href="index.html" /> | ||
<style type="text/css">body { background: aliceblue; }</style> | ||
<script type="text/javascript">{ fixture: 'test fixture' }</script> | ||
<style type="text/css"> | ||
body { | ||
background: aliceblue; | ||
} | ||
</style> | ||
<script type="text/javascript"> | ||
{ | ||
fixture: "test fixture"; | ||
} | ||
</script> | ||
``` | ||
so you can use it in a place in your layout. | ||
|
||
so you can use it in a place in your layout. | ||
|
||
## Available methods | ||
|
||
### `.setTitle( string | object )` | ||
|
||
Set document title. | ||
|
||
### `.addMetaTag( object )` | ||
|
||
Add `<meta />` tag. | ||
|
||
### `.addLink( object )` | ||
|
||
Add `<link />` tag. | ||
|
||
### `.addStyle( string | object )` | ||
|
||
Add `<style />` tag. | ||
|
||
### `.addScript( string | object )` | ||
|
||
Add `<script />` 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` | | ||
| 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` | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,6 @@ | ||
export default (config, ctx) => prop => { | ||
ctx.state[config.stateNamespace].links.push(prop); | ||
import { insertProp } from "../prop"; | ||
|
||
export default (config, state, ctx) => prop => { | ||
const fullProp = insertProp(state, prop); | ||
ctx.state[config.stateNamespace].links.push(fullProp); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,6 @@ | ||
export default (config, ctx) => prop => { | ||
ctx.state[config.stateNamespace].metaTags.push(prop); | ||
import { insertProp } from "../prop"; | ||
|
||
export default (config, state, ctx) => prop => { | ||
const fullProp = insertProp(state, prop); | ||
ctx.state[config.stateNamespace].metaTags.push(fullProp); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,14 @@ | ||
export default (config, ctx) => script => { | ||
import { insertProp } from "../prop"; | ||
|
||
export default (config, state, ctx) => script => { | ||
const scriptObj = | ||
typeof script === "string" ? { jsText: script } : { ...script }; | ||
|
||
if (!scriptObj.type) { | ||
scriptObj.type = "text/javascript"; | ||
} | ||
|
||
ctx.state[config.stateNamespace].scripts.push(scriptObj); | ||
const fullScriptObj = insertProp(state, scriptObj); | ||
|
||
ctx.state[config.stateNamespace].scripts.push(fullScriptObj); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,14 @@ | ||
export default (config, ctx) => style => { | ||
import { insertProp } from "../prop"; | ||
|
||
export default (config, state, ctx) => style => { | ||
const styleObj = | ||
typeof style === "string" ? { cssText: style } : { ...style }; | ||
|
||
if (!styleObj.type) { | ||
styleObj.type = "text/css"; | ||
} | ||
|
||
ctx.state[config.stateNamespace].styles.push(styleObj); | ||
const fullStyleObj = insertProp(state, styleObj); | ||
|
||
ctx.state[config.stateNamespace].styles.push(fullStyleObj); | ||
}; |
Oops, something went wrong.