Skip to content
/ koa-head Public

A document head manager middleware for koa.

Notifications You must be signed in to change notification settings

reod/koa-head

Repository files navigation

Known Vulnerabilities

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.

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:

<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>

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