rehype-plugin-auto-resolve-layout-shift

!build  !Version

Flexible improve CLS plugin for rehype.

> Caution:
>
> Optimization of this plugin takes some time, so it is recommended to do it only during production builds.

Installation

``bash
$ yarn add rehype-plugin-auto-resolve-layout-shift # or npm install
`

Usage

$3

This is a way to specify width/height based on an exact value, taking into account the width of your application's container.

This is the most recommended option, although it requires some effort.

> Calculation Formula
>
> 1. width <= maxWidth: width=width,height=height
> 2. width > maxWidth: width = width (maxWidth / width), height = height (maxWidth / width)

1. Add width/height attribute to your markdown document

`javascript
import fs from 'fs'
import resolveLayoutShiftPlugin from 'rehype-plugin-auto-resolve-layout-shift'
import unified from 'unified'
import markdown from 'remark-parse'
import remark2rehype from 'remark-rehype'
import html from 'rehype-stringify'

async function process(markdown: string) {
return new Promise((resolve, reject) => {
unified()
.use(markdown)
.use(remark2rehype)
.use(resolveLayoutShiftPlugin, { type: 'maxWidth', maxWidth: '800' })
.use(html)
.process(markdown, (err, file) => {
if (err) {
return reject(err)
}
return resolve(file.toString())
})
})
}

async function run() {
const input = ### test content


const output = await process(input)
console.log(output) //

test content

\n


}
`

2. Add width/height attribute to your HTML document

`javascript

import fs from 'fs'
import resolveLayoutShiftPlugin from 'rehype-plugin-auto-resolve-layout-shift'
import unified from 'unified'
import parse from 'rehype-parse'
import slug from 'rehype-slug'
import stringify from 'rehype-stringify'

async function process(html: string) {
return new Promise((resolve, reject) => {
unified()
.use(parse)
.use(slug)
.use(resolveLayoutShiftPlugin)
.use(stringify)
.process(html, (err, file) => {
if (err) {
return reject(err)
}
return resolve(file.toString())
})
})
}

async function run() {
const input =

test

\n
const output = await process(input)
console.log(output) //

test

\n
`

$3

The default is to specify half the size for the img source.

This assumes a high-definition display such as Retina.

1. Add width/height attribute to your markdown document

`javascript
import fs from 'fs'
import resolveLayoutShiftPlugin from 'rehype-plugin-auto-resolve-layout-shift'
import unified from 'unified'
import markdown from 'remark-parse'
import remark2rehype from 'remark-rehype'
import html from 'rehype-stringify'

async function process(markdown: string) {
return new Promise((resolve, reject) => {
unified()
.use(markdown)
.use(remark2rehype)
.use(resolveLayoutShiftPlugin)
.use(html)
.process(markdown, (err, file) => {
if (err) {
return reject(err)
}
return resolve(file.toString())
})
})
}

async function run() {
const input = ### test content


const output = await process(input)
console.log(output) //

test content

\n


}
`

2. Add width/height attribute to your HTML document

`javascript

import fs from 'fs'
import resolveLayoutShiftPlugin from 'rehype-plugin-auto-resolve-layout-shift'
import unified from 'unified'
import parse from 'rehype-parse'
import slug from 'rehype-slug'
import stringify from 'rehype-stringify'

async function process(html: string) {
return new Promise((resolve, reject) => {
unified()
.use(parse)
.use(slug)
.use(resolveLayoutShiftPlugin)
.use(stringify)
.process(html, (err, file) => {
if (err) {
return reject(err)
}
return resolve(file.toString())
})
})
}

async function run() {
const input =

test

\n
const output = await process(input)
console.log(output) //

test

\n
`

$3

#### @nuxt/content

in your nuxt.config.js

`javascript
const rehypePlugins = [
// plugins config,
]

if (process.env.NODE_ENV === 'production') {
rehypePlugins.push(
['rehype-plugin-auto-resolve-layout-shift', { maxWidth: 650 }]
)
}

export default {
// ...
content: {
markdown: {
rehypePlugins
}
},
// ...
}
``

For more information, see official document.

LICENCE

MIT