From 3ad3d96f678e6fcb0645a7434369cf2f90600043 Mon Sep 17 00:00:00 2001 From: DefectingCat Date: Thu, 18 Aug 2022 16:56:29 +0800 Subject: [PATCH] Update image component --- .idea/.gitignore | 5 - .idea/DefectingCat.github.io.iml | 12 -- .idea/git_toolbox_prj.xml | 15 -- .idea/inspectionProfiles/Project_Default.xml | 6 - .idea/modules.xml | 8 -- .idea/prettier.xml | 7 - .idea/vcs.xml | 6 - assets/sandpack/hello-world/main.js | 5 - components/mdx/Image.tsx | 9 +- components/mdx/components.ts | 2 + data/mdxData.ts | 19 ++- .../how-to-load-a-background-with-threejs.mdx | 134 +----------------- .../hook-form-basic/App.ts | 0 .../react-generic/App.ts | 0 .../react-generic/Child.ts | 0 data/sandpack/hello-world/index.ts | 3 + .../index.ts | 108 ++++++++++++++ next.config.mjs | 16 +-- pages/p/[slug].tsx | 3 +- .../Web架构.drawio | 0 .../Web架构.svg | 0 .../image-20210823154009498.webp | Bin .../create-a-mini-router-for-react/router.png | Bin .../create-a-mini-router-for-react/router.psd | Bin .../router.webp | Bin .../迷你路由器.drawio | 0 .../迷你路由器.svg | 0 .../Untitled-1.png | Bin .../Untitled-2.png | Bin .../Untitled-3.png | Bin .../Untitled-4.png | Bin .../Untitled-5.png | Bin .../Untitled.png | Bin .../Skybox_example.png | Bin .../p/my-develop-environmental/logo.svg | 0 .../windows-environmentail.png | Bin .../cannot-login-to-algolia-crawler.png | Bin .../index-format.png | Bin 38 files changed, 139 insertions(+), 219 deletions(-) delete mode 100644 .idea/.gitignore delete mode 100644 .idea/DefectingCat.github.io.iml delete mode 100644 .idea/git_toolbox_prj.xml delete mode 100644 .idea/inspectionProfiles/Project_Default.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/prettier.xml delete mode 100644 .idea/vcs.xml delete mode 100644 assets/sandpack/hello-world/main.js rename {assets => data}/sandpack/generic-component-encapsulate-reusable-component/hook-form-basic/App.ts (100%) rename {assets => data}/sandpack/generic-component-encapsulate-reusable-component/react-generic/App.ts (100%) rename {assets => data}/sandpack/generic-component-encapsulate-reusable-component/react-generic/Child.ts (100%) create mode 100644 data/sandpack/hello-world/index.ts create mode 100644 data/sandpack/how-to-load-a-background-with-threejs/index.ts rename {assets => public}/images/p/create-a-mini-router-for-react/Web架构.drawio (100%) rename {assets => public}/images/p/create-a-mini-router-for-react/Web架构.svg (100%) rename {assets => public}/images/p/create-a-mini-router-for-react/image-20210823154009498.webp (100%) rename {assets => public}/images/p/create-a-mini-router-for-react/router.png (100%) rename {assets => public}/images/p/create-a-mini-router-for-react/router.psd (100%) rename {assets => public}/images/p/create-a-mini-router-for-react/router.webp (100%) rename {assets => public}/images/p/create-a-mini-router-for-react/迷你路由器.drawio (100%) rename {assets => public}/images/p/create-a-mini-router-for-react/迷你路由器.svg (100%) rename {assets => public}/images/p/generic-component-encapsulate-reusable-component/Untitled-1.png (100%) rename {assets => public}/images/p/generic-component-encapsulate-reusable-component/Untitled-2.png (100%) rename {assets => public}/images/p/generic-component-encapsulate-reusable-component/Untitled-3.png (100%) rename {assets => public}/images/p/generic-component-encapsulate-reusable-component/Untitled-4.png (100%) rename {assets => public}/images/p/generic-component-encapsulate-reusable-component/Untitled-5.png (100%) rename {assets => public}/images/p/generic-component-encapsulate-reusable-component/Untitled.png (100%) rename {assets => public}/images/p/how-to-load-a-background-with-threejs/Skybox_example.png (100%) rename {assets => public}/images/p/my-develop-environmental/logo.svg (100%) rename {assets => public}/images/p/my-develop-environmental/windows-environmentail.png (100%) rename {assets => public}/images/p/setting-up-docsearch-for-nextjs/cannot-login-to-algolia-crawler.png (100%) rename {assets => public}/images/p/setting-up-docsearch-for-nextjs/index-format.png (100%) diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index b58b603..0000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -# Default ignored files -/shelf/ -/workspace.xml -# Editor-based HTTP Client requests -/httpRequests/ diff --git a/.idea/DefectingCat.github.io.iml b/.idea/DefectingCat.github.io.iml deleted file mode 100644 index 0c8867d..0000000 --- a/.idea/DefectingCat.github.io.iml +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/git_toolbox_prj.xml b/.idea/git_toolbox_prj.xml deleted file mode 100644 index 02b915b..0000000 --- a/.idea/git_toolbox_prj.xml +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml deleted file mode 100644 index 03d9549..0000000 --- a/.idea/inspectionProfiles/Project_Default.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index f325d5a..0000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/prettier.xml b/.idea/prettier.xml deleted file mode 100644 index 727b8b5..0000000 --- a/.idea/prettier.xml +++ /dev/null @@ -1,7 +0,0 @@ - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 94a25f7..0000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/assets/sandpack/hello-world/main.js b/assets/sandpack/hello-world/main.js deleted file mode 100644 index d9922da..0000000 --- a/assets/sandpack/hello-world/main.js +++ /dev/null @@ -1,5 +0,0 @@ -const main = `export default function App() { - return

Hello world

-}`; - -export default main; diff --git a/components/mdx/Image.tsx b/components/mdx/Image.tsx index ec5a535..a57ca37 100644 --- a/components/mdx/Image.tsx +++ b/components/mdx/Image.tsx @@ -1,17 +1,12 @@ -import NextImage, { ImageProps } from 'next/image'; +import NextImage, { ImageProps } from 'next/future/image'; interface Props extends ImageProps {} const Image = ({ alt, ...rest }: Props) => { - const supportImg = ['jpeg', 'png', 'webp', 'avif']; - const placeholder = supportImg.includes((rest.src as { src: string }).src) - ? 'blur' - : 'empty'; - return ( <> - + {alt && {alt}} diff --git a/components/mdx/components.ts b/components/mdx/components.ts index 85a4f00..952e730 100644 --- a/components/mdx/components.ts +++ b/components/mdx/components.ts @@ -1,9 +1,11 @@ import RUASandpack from 'components/RUA/RUASandpack'; import Anchor from 'components/mdx/Anchor'; +import Image from 'components/mdx/Image'; const components = { RUASandpack, a: Anchor, + Image, }; export default components; diff --git a/data/mdxData.ts b/data/mdxData.ts index 872314e..8a84bee 100644 --- a/data/mdxData.ts +++ b/data/mdxData.ts @@ -1,8 +1,23 @@ -import main from 'assets/sandpack/hello-world/main'; +import { hello } from 'data/sandpack/hello-world'; +import { + main, + main2, + styles, +} from 'data/sandpack/how-to-load-a-background-with-threejs'; + +import skybox_example from 'public/images/p/how-to-load-a-background-with-threejs/Skybox_example.png'; const data = { sandpack: { - 'hello-world': main, + 'hello-world': hello, + 'load-background-main': main, + 'load-background-main2': main2, + 'load-background-styles': styles, + }, + images: { + 'load-background': { + skybox_example, + }, }, }; diff --git a/data/posts/how-to-load-a-background-with-threejs.mdx b/data/posts/how-to-load-a-background-with-threejs.mdx index 43df8f3..95e4d1f 100644 --- a/data/posts/how-to-load-a-background-with-threejs.mdx +++ b/data/posts/how-to-load-a-background-with-threejs.mdx @@ -4,21 +4,6 @@ date: '2022-04-13' tags: ['three.js', 'JavaScript'] --- -import Layout from 'layouts/MDXLayout'; -import dynamic from 'next/dynamic'; -import Image from 'components/mdx/Image'; -import image1 from 'assets/images/p/how-to-load-a-background-with-threejs/Skybox_example.png'; - -export const RUASandpack = dynamic(() => import('components/RUA/RUASandpack')); - -export const meta = { - title: 'How to load a background with three.js', - date: '2022-04-13', - tags: ['three.js', 'JavaScript'], -}; - -export default ({ children }) => {children}; - ## Three.js setup First, we need a little of setup. Let's create a scene and a camera. @@ -60,57 +45,11 @@ renderer.render(scene, camera); Now, we can get a black canvas in our document. -export const main = `import { useEffect, useRef } from 'react'; -import * as THREE from 'three'; - -export default function App() { - const ref = useRef(null); - const scene = new THREE.Scene(); - const camera = new THREE.PerspectiveCamera( - 75, - window.innerWidth / window.innerHeight, - 0.1, - 1000 - ); - useEffect(() => { - const renderer = new THREE.WebGLRenderer({ - canvas: ref.current, - }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - const render = (time) => { - renderer.render(scene, camera); - requestAnimationFrame(render); - }; - requestAnimationFrame(render); - function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); - render(0); - } - window.addEventListener('resize', onWindowResize); - return () => { - window.removeEventListener('resize', onWindowResize); - }; - }, []); - return ( - <> - - - ) -}`; - -export const styles = `* { - padding: 0; - margin: 0; -}`; - + We just need load six images in some order, and set them to the scene background. @@ -184,74 +123,11 @@ controls.enablePan = false; controls.update(); ``` -export const main2 = `import { useEffect, useRef } from "react"; -import * as THREE from "three"; -import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; -const manager = new THREE.LoadingManager(); -manager.onProgress = (item, loaded, total) => { - console.log(loaded, total); -}; - -export default function App() { - const ref = useRef(null); - const scene = new THREE.Scene(); - const sky = new THREE.CubeTextureLoader(manager).load([ - "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_ft.png", - "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_bk.png", - "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_up.png", - "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_dn.png", - "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_rt.png", - "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_lf.png" - ]); - scene.background = sky; - const camera = new THREE.PerspectiveCamera( - 75, - window.innerWidth / window.innerHeight, - 0.1, - 1000 - ); - camera.position.set(0, 1, 0); - camera.up.set(0, 0, 1); - scene.add(camera); - useEffect(() => { - const renderer = new THREE.WebGLRenderer({ - canvas: ref.current - }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - const controls = new OrbitControls(camera, ref.current); - controls.enablePan = false; - controls.target.set(0, 0, 0); - controls.update(); - const render = (time) => { - renderer.render(scene, camera); - requestAnimationFrame(render); - }; - requestAnimationFrame(render); - function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); - render(0); - } - window.addEventListener("resize", onWindowResize); - return () => { - window.removeEventListener("resize", onWindowResize); - }; - }, []); - return ( - <> - - - ); -} -`; - Hello world +}`; diff --git a/data/sandpack/how-to-load-a-background-with-threejs/index.ts b/data/sandpack/how-to-load-a-background-with-threejs/index.ts new file mode 100644 index 0000000..d6eb721 --- /dev/null +++ b/data/sandpack/how-to-load-a-background-with-threejs/index.ts @@ -0,0 +1,108 @@ +export const main = `import { useEffect, useRef } from 'react'; +import * as THREE from 'three'; + +export default function App() { + const ref = useRef(null); + const scene = new THREE.Scene(); + const camera = new THREE.PerspectiveCamera( + 75, + window.innerWidth / window.innerHeight, + 0.1, + 1000 + ); + useEffect(() => { + const renderer = new THREE.WebGLRenderer({ + canvas: ref.current, + }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + const render = (time) => { + renderer.render(scene, camera); + requestAnimationFrame(render); + }; + requestAnimationFrame(render); + function onWindowResize() { + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(window.innerWidth, window.innerHeight); + render(0); + } + window.addEventListener('resize', onWindowResize); + return () => { + window.removeEventListener('resize', onWindowResize); + }; + }, []); + return ( + <> + + + ) +}`; + +export const main2 = `import { useEffect, useRef } from "react"; +import * as THREE from "three"; +import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; +const manager = new THREE.LoadingManager(); +manager.onProgress = (item, loaded, total) => { + console.log(loaded, total); +}; + +export default function App() { + const ref = useRef(null); + const scene = new THREE.Scene(); + const sky = new THREE.CubeTextureLoader(manager).load([ + "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_ft.png", + "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_bk.png", + "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_up.png", + "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_dn.png", + "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_rt.png", + "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_lf.png" + ]); + scene.background = sky; + const camera = new THREE.PerspectiveCamera( + 75, + window.innerWidth / window.innerHeight, + 0.1, + 1000 + ); + camera.position.set(0, 1, 0); + camera.up.set(0, 0, 1); + scene.add(camera); + useEffect(() => { + const renderer = new THREE.WebGLRenderer({ + canvas: ref.current + }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + const controls = new OrbitControls(camera, ref.current); + controls.enablePan = false; + controls.target.set(0, 0, 0); + controls.update(); + const render = (time) => { + renderer.render(scene, camera); + requestAnimationFrame(render); + }; + requestAnimationFrame(render); + function onWindowResize() { + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(window.innerWidth, window.innerHeight); + render(0); + } + window.addEventListener("resize", onWindowResize); + return () => { + window.removeEventListener("resize", onWindowResize); + }; + }, []); + return ( + <> + + + ); +} +`; + +export const styles = `* { + padding: 0; + margin: 0; +}`; diff --git a/next.config.mjs b/next.config.mjs index c545a9e..30ce98d 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,26 +1,11 @@ import remarkFrontmatter from 'remark-frontmatter'; -import mdx from '@next/mdx'; -import rehypePrism from '@mapbox/rehype-prism'; import composePlugins from 'next-compose-plugins'; -import remarkGfm from 'remark-gfm'; -import rehypeSlug from 'rehype-slug'; // import { remarkCodeHike } from '@code-hike/mdx'; // import { createRequire } from 'module'; // const require = createRequire(import.meta.url); // const theme = require('shiki/themes/nord.json'); const composedConfig = composePlugins([ - mdx({ - extension: /\.mdx?$/, - options: { - remarkPlugins: [remarkFrontmatter, remarkGfm], - rehypePlugins: [ - [rehypePrism, { alias: { vue: 'xml' }, ignoreMissing: true }], - rehypeSlug, - ], - providerImportSource: '@mdx-js/react', - }, - }), /** @type {import('next').NextConfig} */ { reactStrictMode: true, @@ -28,6 +13,7 @@ const composedConfig = composePlugins([ experimental: { // runtime: 'nodejs', // outputStandalone: true, + images: { allowFutureImage: true }, }, pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], images: { domains: ['avatars.githubusercontent.com'] }, diff --git a/pages/p/[slug].tsx b/pages/p/[slug].tsx index 32c0593..93b310e 100644 --- a/pages/p/[slug].tsx +++ b/pages/p/[slug].tsx @@ -8,7 +8,6 @@ import rehypePrism from '@mapbox/rehype-prism'; import remarkGfm from 'remark-gfm'; import rehypeSlug from 'rehype-slug'; import dynamic from 'next/dynamic'; -import { MyMatters } from 'types'; const Footer = dynamic(() => import('components/Footer')); const HeadBar = dynamic(() => import('components/NavBar')); @@ -26,7 +25,7 @@ const Slug = ({
- +
diff --git a/assets/images/p/create-a-mini-router-for-react/Web架构.drawio b/public/images/p/create-a-mini-router-for-react/Web架构.drawio similarity index 100% rename from assets/images/p/create-a-mini-router-for-react/Web架构.drawio rename to public/images/p/create-a-mini-router-for-react/Web架构.drawio diff --git a/assets/images/p/create-a-mini-router-for-react/Web架构.svg b/public/images/p/create-a-mini-router-for-react/Web架构.svg similarity index 100% rename from assets/images/p/create-a-mini-router-for-react/Web架构.svg rename to public/images/p/create-a-mini-router-for-react/Web架构.svg diff --git a/assets/images/p/create-a-mini-router-for-react/image-20210823154009498.webp b/public/images/p/create-a-mini-router-for-react/image-20210823154009498.webp similarity index 100% rename from assets/images/p/create-a-mini-router-for-react/image-20210823154009498.webp rename to public/images/p/create-a-mini-router-for-react/image-20210823154009498.webp diff --git a/assets/images/p/create-a-mini-router-for-react/router.png b/public/images/p/create-a-mini-router-for-react/router.png similarity index 100% rename from assets/images/p/create-a-mini-router-for-react/router.png rename to public/images/p/create-a-mini-router-for-react/router.png diff --git a/assets/images/p/create-a-mini-router-for-react/router.psd b/public/images/p/create-a-mini-router-for-react/router.psd similarity index 100% rename from assets/images/p/create-a-mini-router-for-react/router.psd rename to public/images/p/create-a-mini-router-for-react/router.psd diff --git a/assets/images/p/create-a-mini-router-for-react/router.webp b/public/images/p/create-a-mini-router-for-react/router.webp similarity index 100% rename from assets/images/p/create-a-mini-router-for-react/router.webp rename to public/images/p/create-a-mini-router-for-react/router.webp diff --git a/assets/images/p/create-a-mini-router-for-react/迷你路由器.drawio b/public/images/p/create-a-mini-router-for-react/迷你路由器.drawio similarity index 100% rename from assets/images/p/create-a-mini-router-for-react/迷你路由器.drawio rename to public/images/p/create-a-mini-router-for-react/迷你路由器.drawio diff --git a/assets/images/p/create-a-mini-router-for-react/迷你路由器.svg b/public/images/p/create-a-mini-router-for-react/迷你路由器.svg similarity index 100% rename from assets/images/p/create-a-mini-router-for-react/迷你路由器.svg rename to public/images/p/create-a-mini-router-for-react/迷你路由器.svg diff --git a/assets/images/p/generic-component-encapsulate-reusable-component/Untitled-1.png b/public/images/p/generic-component-encapsulate-reusable-component/Untitled-1.png similarity index 100% rename from assets/images/p/generic-component-encapsulate-reusable-component/Untitled-1.png rename to public/images/p/generic-component-encapsulate-reusable-component/Untitled-1.png diff --git a/assets/images/p/generic-component-encapsulate-reusable-component/Untitled-2.png b/public/images/p/generic-component-encapsulate-reusable-component/Untitled-2.png similarity index 100% rename from assets/images/p/generic-component-encapsulate-reusable-component/Untitled-2.png rename to public/images/p/generic-component-encapsulate-reusable-component/Untitled-2.png diff --git a/assets/images/p/generic-component-encapsulate-reusable-component/Untitled-3.png b/public/images/p/generic-component-encapsulate-reusable-component/Untitled-3.png similarity index 100% rename from assets/images/p/generic-component-encapsulate-reusable-component/Untitled-3.png rename to public/images/p/generic-component-encapsulate-reusable-component/Untitled-3.png diff --git a/assets/images/p/generic-component-encapsulate-reusable-component/Untitled-4.png b/public/images/p/generic-component-encapsulate-reusable-component/Untitled-4.png similarity index 100% rename from assets/images/p/generic-component-encapsulate-reusable-component/Untitled-4.png rename to public/images/p/generic-component-encapsulate-reusable-component/Untitled-4.png diff --git a/assets/images/p/generic-component-encapsulate-reusable-component/Untitled-5.png b/public/images/p/generic-component-encapsulate-reusable-component/Untitled-5.png similarity index 100% rename from assets/images/p/generic-component-encapsulate-reusable-component/Untitled-5.png rename to public/images/p/generic-component-encapsulate-reusable-component/Untitled-5.png diff --git a/assets/images/p/generic-component-encapsulate-reusable-component/Untitled.png b/public/images/p/generic-component-encapsulate-reusable-component/Untitled.png similarity index 100% rename from assets/images/p/generic-component-encapsulate-reusable-component/Untitled.png rename to public/images/p/generic-component-encapsulate-reusable-component/Untitled.png diff --git a/assets/images/p/how-to-load-a-background-with-threejs/Skybox_example.png b/public/images/p/how-to-load-a-background-with-threejs/Skybox_example.png similarity index 100% rename from assets/images/p/how-to-load-a-background-with-threejs/Skybox_example.png rename to public/images/p/how-to-load-a-background-with-threejs/Skybox_example.png diff --git a/assets/images/p/my-develop-environmental/logo.svg b/public/images/p/my-develop-environmental/logo.svg similarity index 100% rename from assets/images/p/my-develop-environmental/logo.svg rename to public/images/p/my-develop-environmental/logo.svg diff --git a/assets/images/p/my-develop-environmental/windows-environmentail.png b/public/images/p/my-develop-environmental/windows-environmentail.png similarity index 100% rename from assets/images/p/my-develop-environmental/windows-environmentail.png rename to public/images/p/my-develop-environmental/windows-environmentail.png diff --git a/assets/images/p/setting-up-docsearch-for-nextjs/cannot-login-to-algolia-crawler.png b/public/images/p/setting-up-docsearch-for-nextjs/cannot-login-to-algolia-crawler.png similarity index 100% rename from assets/images/p/setting-up-docsearch-for-nextjs/cannot-login-to-algolia-crawler.png rename to public/images/p/setting-up-docsearch-for-nextjs/cannot-login-to-algolia-crawler.png diff --git a/assets/images/p/setting-up-docsearch-for-nextjs/index-format.png b/public/images/p/setting-up-docsearch-for-nextjs/index-format.png similarity index 100% rename from assets/images/p/setting-up-docsearch-for-nextjs/index-format.png rename to public/images/p/setting-up-docsearch-for-nextjs/index-format.png