Templates NEW HTML starter

Usage in Nunjucks layout:

{% extends 'blades/html.njk' %}

{% block body %}...{% endblock %}

Living example: /anyblades/build-awesome-starter/blob/main/_includes/default.njk

How it works

<!doctype html>
<html lang="{{ site.lang | d('en') }}">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
    <link rel="icon" href="{{ site.favicon | d('/favicon.svg') }}" />
    {% if site.favicon_alt %}
      <link rel="alternate icon" href="{{ site.favicon_alt }}" type="image/png" />
    {% endif %}
    <title>
      {{- title | string | striptags ~ ' | ' if title -}}
      {{- site.title -}}
    </title>
    <meta name="description" content="{{ description | striptags }}" />

    {%- for href in site.styles %}
      <link rel="stylesheet" href="{{ href }}" />
    {%- endfor %}
    {# prettier-ignore-start #}<style>
      {{ site.inline_styles | d([]) | join('\n') }}
    </style>{# prettier-ignore-end #}

    {%- for src in site.scripts %}
      <script src="{{ src }}" defer></script>
    {%- endfor %}
    {# prettier-ignore-start #}<script type="module">
      {{ site.inline_scripts | d([]) | join('\n') }}
    </script>{# prettier-ignore-end #}

    {{ content_for_header | safe }}
  </head>

  <body>
    {% block body %}
    {% endblock %}
  </body>
</html>
{#```
- `title | string` avoids error with `| striptags` when you pass a pure number.

Usage in Liquid layout:

{% capture body %}...{% endcapture %}

{% include blades/html.liquid %}

Living example: /anyblades/bladeswitch/blob/main/_includes/default.liquid

How it works

<!doctype html>
<html lang="{{ site.lang | default: 'en' }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
    <link rel="icon" href="{{ site.favicon | default: '/favicon.svg' }}">
    {% if site.favicon_alt %}
      <link rel="alternate icon" href="{{ site.favicon_alt }}" type="image/png">
    {% endif %}
    <title>
      {%- if title %}{{ title | strip_html | append: ' | ' }}{% endif -%}
      {{- site.title -}}
    </title>
    <meta name="description" content="{{ description | strip_html }}">

    {%- for href in site.styles %}
      <link rel="stylesheet" href="{{ href | relative_url }}">
    {%- endfor %}
    <style>
      {{ site.inline_styles | join: '\n' }}
    </style>

    {%- for src in site.scripts %}
      <script src="{{ src }}" defer></script>
    {%- endfor %}
    <script type="module">
      {{ site.inline_scripts | join: '\n' }}
    </script>

    {{ content_for_header }}
  </head>

  <body>
    {{ body }}
  </body>
</html>
{% comment %}```