Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make HTML template configurable: (Make <head> tag fully customizable)

See original GitHub issue

👏 for starting a static site generator using a modern framework with 0kb client-side JS by default and optional client-side hydration!

Currently the HTML template is statically defined in Page.ts:

    page.htmlString = `<!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          ${page.headString}
        </head>
        <body class="${page.request.route}">
          ${layoutHtml}
          ${page.hydrateStack.length > 0 ? page.beforeHydrate : '' /* page.hydrateStack.length is correct here */}
          ${page.hydrateStack.length > 0 ? page.hydrate : ''}
          ${page.customJsStack.length > 0 ? page.customJs : ''}
          ${page.footerStack.length > 0 ? page.footer : ''}
        </body>
      </html>
    `;

It would be great if this template would be configurable, so for instance html[lang] could easily be changed. Maybe this can be offered through a hook, or by introducing a src/template.html file like in Sapper.

This would help with #6, as I’m currently forced to overwrite the html[lang] with a hook:

  {
    hook: 'html',
    name: 'setHtmlLang',
    description: 'Overwrite html[lang="en"] with html[lang="{ request.locale }"]',
    priority: 50,
    run: ({ htmlString, request }) => {
      return {
        htmlString: htmlString.replace('<html lang="en">', `<html lang="${ request.locale }">`),
      };
    },
  },

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:12 (9 by maintainers)

Top GitHub Comments

1reaction

akvadrakocommented, Sep 10, 2020

@nickreese thanks for the quick fix. It’s working well for me.

1reaction

nickreesecommented, Sep 9, 2020

For anyone that finds this, if you want to remove both meta tags, add elderAddMetaCharsetToHead and elderAddMetaViewportToHead to your hooks.disable array in your elder.config.js.

Top Results From Across the Web

How to Customize an HTML Template - Web Design TutsPlus

To edit an HTML template all you need to know is which tags represent the parts of the page you want to change,...

Create the HTML Layout Templates - Weebly Cloud

Create an HTML Template File ; The Foundation ; Mandatory Theme Tags ; Optional Tags; Custom Tags; Add a Header Area; Add a...

The Content Template element - HTML - MDN Web Docs

The HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may...

Customize the user interface with HTML templates - Azure AD ...

Learn how to customize the user interface with HTML templates for your applications that use Azure Active Directory B2C.

Creating a custom HTML theme - Tumblr

These template tags define custom colors, fonts, and other options that apply to your appearance on mobile devices and the default theme. Variable,...