ElMassimo / ElMassimo/iles

Provide an easier way to alter page content in ssg.beforePageRender hook

Open
#238 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.2k
Forks
36
PR merge metrics
No merged PRs in 30d

Description

Currently, when building for production, we can use the `ssg.beforePageRender` hook to alter the page content before it's generated.

While changing inner content of the body is quite uncommon, prepending & appending to head & body tag is quite common.

**Describe the solution you'd like**
It would be good to have an easier way to inject tags into body & head tags.

**Describe alternatives you've considered**
Currently, we have to use some library like node-html-parser to parse the html & modify tags selectively.

**Additional context**
Some inspirations:

- With Vite's transformIndexHtml, we can return an array of injects (https://vitejs.dev/guide/api-plugin.html#transformindexhtml) like this

```
transformIndexHtml = (html, context) => {
return {
html: html.replace('{{ title }}', 'Test HTML transforms'),
tags: [{
tag: 'meta',
attrs: { name: 'description', content: 'a vite app' },
// default injection is head-prepend
},
{
tag: 'meta',
attrs: { name: 'keywords', content: 'es modules' },
injectTo: 'head',
}]
}
}
```
- Nuxt 3, nitro's "render:html" hook provides the html with an interface - https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/core/runtime/nitro/renderer.ts#L27
And can be used like this:

```
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('render:html', (html, { event }) => {
html.head.push(' ')
html.bodyAppend.push('


Appended by custom plugin')
})
})
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.