import { TPreloadImage, TPreloadImages } from '@/constants/preload_image'
import { getImageProps } from 'next/image'
import { useEffect, useState } from 'react'
function preloadImage(imageInfo: TPreloadImage) {
return new Promise((resolve, reject) => {
const img = new Image()
////////////////////////////////////
const load = getImageProps({
...imageInfo,
})
img.onload = function () {
resolve(img)
}
img.onerror = img.onabort = function () {
reject(load.props.src)
}
img.src = load.props.src
////////////////////////////////////
})
}
export default function useImagePreloader(imageList: TPreloadImages) {
const [imagesPreloaded, setImagesPreloaded] = useState<boolean>(false)
useEffect(() => {
let isCancelled = false
async function effect() {
if (isCancelled) {
return
}
const imagesPromiseList: Promise<any>[] = []
for (const i of imageList) {
imagesPromiseList.push(preloadImage(i))
}
await Promise.all(imagesPromiseList)
if (isCancelled) {
return
}
setImagesPreloaded(true)
}
effect()
return () => {
isCancelled = true
}
}, [imageList])
return { imagesPreloaded }
}
3. Срезать шапку и подвал у каждого html из п1.
4. Конвертировать п1 и п3 в php файлы.
5. Врезать wp/php код в п4.
const Logo = ({ className }) => {
return (
<div className={classNames(classes.logo, {}, [className])}>
<img src={require('images/logo.svg')} alt='logotype' />
<h2 className={classNames(classes.text)}>Healthy food</h2>
</div>
)
}
export default Logonpx storybook@latest init
╭───────────────────────────────────────────────────────╮
│ │
│ Adding Storybook version 8.1.11 to your project.. │
│ │
╰───────────────────────────────────────────────────────╯
• Detecting project type. ✓
Installing dependencies...
up to date, audited 1161 packages in 3s
224 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
√
We were not able to detect the right builder for your project. Please select one: » Webpack 5
⠙ Getting the correct version of 11 packages
Error: Command failed with exit code 3221225477: npm info @storybook/react-webpack5 version --json
at makeError (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\execa\lib\error.js:60:11)
at handlePromise (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\execa\index.js:118:26)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async NPMProxy.executeCommand (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\core-common\dist\index.js:35:1948)
at async NPMProxy.runGetVersions (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\core-common\dist\index.js:37:417)
at async C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\core-common\dist\index.js:33:796
at async Promise.all (index 2)
at async baseGenerator (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\cli\dist\generate.js:96:677)
at async generator8 (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\cli\dist\generate.js:133:1267)
at async installStorybook (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\cli\dist\generate.js:145:4834)
⠼ Getting the correct version of 11 packages