Stencil-head NPM

Head Component

Head component for Stencil and Web Components

Handle document meta/head tags with web components an easy way.

Autocomplete|Intellisense for the most common properties, adding more every day.

Install

Run npm i stencil-head --save

Usage

import {HeadInterface, Head } from 'stencil-head'

const head: HeadInterface = {
      title: 'Home Page | app-head',
}
<Head data={head}/>

Example

import {Component, h} from '@stencil/core'
import {HeadInterface, Head } from 'stencil-head'

@Component({
  tag: 'app-home'
})
export class AppHome {

  render() {
    const head: HeadInterface = {
      title: 'Home Page | app-head',
      html: {
        lang: 'en'
      },
      metas: [{
        name: 'description',
        content: 'This is the description for the home page'
      },
      {
      property: 'og:description',
      content: 'This is the og:description for the home page'
      }],
    }
    return (
      <div>
        <Head data={head}/>
        <div class='app-home'>
          <h1>
            <app-translate keyLang="key"/>
          </h1>
          <p>
            Welcome to the Stencil App Starter.
            You can use this starter to build entire apps all with
            web components using Stencil!
            Check out our docs on <a href='https://stenciljs.com'>stenciljs.com</a> to get started.
          </p>
        </div>
      </div>
    )
  }
}

Note the declaration of the constant head This includes as a return interface HeadInterface that way you can get all the autocomplete in any IDE that supports Typescript

 export interface HeadInterface {
  html?: object;
  charset?: "utf-8" | "iso-8859-1" | string;
  title: string;
  metas?: MetaInterface[];
  links?: Link[];
  scripts?: Script[];
  styles?: string[];
  baseHref?: string;
}

In the following link you can see all properties and interfaces. https://github.com/chiqui3d/stencil-head/blob/master/src/interfaces.ts

Returns all Head properties in string format

import {HeadInterface, BaseHead } from 'stencil-head'

const head: HeadInterface = {
  title: 'Home Page | app-head',
  baseHref: 'http://localhost:3333/',
  metas: [{
    name: 'description',
    content: 'Esto es una descripción de la página de inicio'
  },
    {
      property: 'og:description',
      content: 'Esto es una descripción de la página de inicio'
    }],
  links: [{
    rel: 'stylesheet',
    href: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
    integrity: 'sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T',
    crossorigin: 'anonymous'
  },
    {
      href: 'https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'
    },
    {
      rel: 'canonical',
      href: 'https://github.com/chiqui3d/stencil-head'
    }],
  scripts: [{
    src: 'https://code.jquery.com/jquery-3.3.1.slim.min.js',
    integrity: 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo',
    crossorigin: 'anonymous'
  },
    {
      src: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js',
      integrity: 'sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1',
      crossorigin: 'anonymous'
    },
    {
      src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js',
      integrity: 'sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM',
      crossorigin: 'anonymous'
    },
    {
      type: 'text/javascript',
      code: `console.log('Hello app-head');`
    }],
  styles: [
    `h2{color:blue}`
  ]
}
const headHtml = new BaseHead(head).html();
console.log(headHtml)
}

output:

<base href="http://localhost:3333/">
<title>Home Page | app-head</title>
<meta name="description" content="Esto es una descripción de la página de inicio">
<meta property="og:description" content="Esto es una descripción de la página de inicio">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons">
<link rel="canonical" href="https://github.com/chiqui3d/stencil-head">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">console.log('Hello app-head');</script>
<style type="text/css">h2{color:blue}</style>

Note

I'm currently using it for several static websites with the Stencil --prerender option https://stenciljs.com/docs/prerendering, and it works great. I just need to do some tests for the title and description to see how Google treats this currently when added by Javascript, although currently Google says that it can read Javascript.