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 |