<ui-layout>

This component contains doctype, <html>, <head>, <link> and <script>, tags necessary for the base HTML setup.
<template
  is="ui-layout"
  title="string"
  description="string"
  font="string"
  favicon="string"
  googlekey="string"
  lang="string"
>
  <!DOCTYPE html>
  <html lang="{{props.lang ?? 'en' |> esc}}">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title if="props.title">{{props.title ?? '' |> esc}}</title>
      <meta
        if="props.description"
        name="description"
        content="{{props.description ?? '' |> esc}}"
      />
      <link href="{{props.font |> esc}}" rel="stylesheet" if="props.font" />
      <link
        href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
        rel="stylesheet"
        else
      />
      <link
        rel="icon"
        type="image/png"
        href="{{props.favicon}}"
        if="props.favicon"
      />
      <link rel="stylesheet" href="/bundle.css" />
      <script src="/bundle.js"></script>
      <script if="typeof host !== 'undefined'">
        window.api = window.client('{{host}}')
      </script>
    </head>
    <body>
      <div class="ui-layout">
        <slot></slot>
      </div>
      <script>
        if (typeof window.init === 'function') window.init()
      </script>
      <script
        async
        defer
        src="https://maps.googleapis.com/maps/api/js?loading=async&callback=initMaps&key={{props.googlekey ?? ''}}"
        if="typeof props.googlekey !== 'undefined'"
      ></script>
      <ui-flash></ui-flash>
    </body>
  </html>
</template>