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">
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
        <body class="${page.request.route}">
          ${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 : ''}

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:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:12 (9 by maintainers)

github_iconTop GitHub Comments

akvadrakocommented, Sep 10, 2020

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

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.

Read more comments on GitHub >

github_iconTop 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,...
Read more >
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...
Read more >
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...
Read more >
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.
Read more >
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,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found