Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

JSX Plugins: Feature to automatically add <!DOCTYPE html> #223

Closed
jrson83 opened this issue Jul 27, 2022 · 2 comments · Fixed by #226
Closed

JSX Plugins: Feature to automatically add <!DOCTYPE html> #223

jrson83 opened this issue Jul 27, 2022 · 2 comments · Fixed by #226
Labels
enhancement New feature or request
Milestone
1.10.2

Comments

@jrson83
Copy link
Contributor

jrson83 commented Jul 27, 2022

Since <!DOCTYPE html> is not valid JSX, but must be included in .html documents for best practices, I suggest adding a feature to automatically add <!DOCTYPE html>, to the JSX plugins. Some more info on stackoverflow.

This can be implemented easily with the snippet taken from the source code of the lume showcase website fabon.info:

/** Register the plugin to support JSX and TSX files */
export default function (userOptions?: Partial<Options>) {
  const options = merge(defaults, userOptions);
  const extensions = Array.isArray(options.extensions)
    ? { pages: options.extensions, components: options.extensions }
    : options.extensions;

  return (site: Site) => {
    const engine = new PreactJsxEngine();

    site.loadPages(extensions.pages, loader, engine);
    site.loadComponents(extensions.components, loader, engine);
    site.process([".html"], addDoctype)

    function addDoctype(page: Page) {
      if (!page.content?.toString().trim().startsWith("<!DOCTYPE")) {
        page.content = `<!DOCTYPE html>${page.content}`;
      }
    }
  };
}

@oscarotero if this is cool for you, let me know and I will create a PR for the JSX plugins.
@oscarotero
Copy link
Member

oscarotero commented Jul 27, 2022 •
edited
Loading

Yes, I understand the pain.
Many plugins and processors use the DOM api to manipulate HTML pages. Internally, Lume convert the HTML string to DOM with this function: https://github.com/lumeland/lume/blob/master/core/utils.ts#L130-L138 and then stringify the DOM to string with this one: https://github.com/lumeland/lume/blob/master/core/utils.ts#L113-L125

As you can see in the documentToString function, if the doctype doesn't exist, it simply returns the documentElement. Editing this function to:

if (!doctype) {
  return `<!DOCTYPE html>\n${documentElement?.outerHTML || ""}`;
}

it could paliate this issue. What do you think? If you want to work on a PR, it would be very appreciated. Thanks!

@jrson83
Copy link
Contributor Author

jrson83 commented Jul 27, 2022

That sounds even better. Sure, I will try to implement this and create a PR.

@oscarotero oscarotero added this to the 1.10.2 milestone Jul 27, 2022
@oscarotero oscarotero added the enhancement New feature or request label Jul 27, 2022
@jrson83 jrson83 mentioned this issue Jul 30, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
1.10.2
Development

Successfully merging a pull request may close this issue.

Add DOCTYPE to HTML document if missing
2 participants
@oscarotero @jrson83