Adjust loading component in blog page fix #38

This commit is contained in:
DefectingCat
2022-06-06 21:41:15 +08:00
parent a095c3bb58
commit a623f82e6f
5 changed files with 112 additions and 114 deletions

View File

@ -13,7 +13,7 @@ const PostCardLoading = () => {
)} )}
> >
<div className="flex-1"> <div className="flex-1">
<h2 className="mb-4 bg-gray-300 rounded-lg w-96 h-9 dark:bg-gray-500"></h2> <h2 className="mb-4 bg-gray-300 rounded-lg w-full md:w-96 h-9 dark:bg-gray-500"></h2>
<div className="flex items-center text-sm"> <div className="flex items-center text-sm">
<div className="w-16 h-5 mr-4 bg-gray-300 rounded-md last:mr-0 dark:bg-gray-500"></div> <div className="w-16 h-5 mr-4 bg-gray-300 rounded-md last:mr-0 dark:bg-gray-500"></div>
@ -21,7 +21,7 @@ const PostCardLoading = () => {
</div> </div>
</div> </div>
<div className="w-24 h-6 bg-gray-300 rounded-md dark:bg-gray-500"></div> <div className="hidden md:block w-24 h-6 bg-gray-300 rounded-md dark:bg-gray-500"></div>
</article> </article>
); );
}; };

View File

@ -4,7 +4,6 @@ date: '2022-04-06'
tags: ['Hello world'] tags: ['Hello world']
--- ---
import Layout from 'layouts/MDXLayout'; import Layout from 'layouts/MDXLayout';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
@ -16,7 +15,7 @@ export const meta = {
tags: ['Hello world'], tags: ['Hello world'],
}; };
export default ({children}) => ( export default ({ children }) => (
<Layout {...meta} showTOC={false}> <Layout {...meta} showTOC={false}>
{children} {children}
</Layout> </Layout>

View File

@ -4,9 +4,10 @@ date: '2022-04-13'
tags: ['three.js', 'JavaScript'] tags: ['three.js', 'JavaScript']
--- ---
import Layout from 'layouts/MDXLayout'; import Layout from 'layouts/MDXLayout';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import Image from 'components/mdx/Image';
import image1 from 'public/images/p/how-to-load-a-background-with-threejs/Skybox_example.png';
export const RUASandpack = dynamic(() => import('components/RUA/RUASandpack')); export const RUASandpack = dynamic(() => import('components/RUA/RUASandpack'));
@ -16,7 +17,7 @@ export const meta = {
tags: ['three.js', 'JavaScript'], tags: ['three.js', 'JavaScript'],
}; };
export default ({children}) => <Layout {...meta}>{children}</Layout>; export default ({ children }) => <Layout {...meta}>{children}</Layout>;
## Three.js setup ## Three.js setup
@ -59,46 +60,46 @@ renderer.render(scene, camera);
Now, we can get a black canvas in our document. Now, we can get a black canvas in our document.
export const main = ` 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 (
<>
<canvas ref={ref}></canvas>
</>
)
}`;
`;
export const styles = `* { export const styles = `* {
padding: 0; padding: 0;
@ -141,7 +142,7 @@ We need set texture to cube box each side. so we need six pictures.
The skybos is six images that can be connected each other. The skybos is six images that can be connected each other.
<Image src={image1} alt="Skyboxes example"/> <Image src={image1} alt="Skyboxes example" />
We just need load six images in some order, and set them to the scene background. We just need load six images in some order, and set them to the scene background.
@ -183,67 +184,67 @@ controls.enablePan = false;
controls.update(); controls.update();
``` ```
export const main2 = ` 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 (
<>
<canvas ref={ref}></canvas>
</>
);
}
`; `;
<RUASandpack <RUASandpack

View File

@ -4,7 +4,6 @@ date: '2022-04-14'
tags: [Linux, Server] tags: [Linux, Server]
--- ---
import Layout from 'layouts/MDXLayout'; import Layout from 'layouts/MDXLayout';
import Image from 'components/mdx/Image'; import Image from 'components/mdx/Image';
import image1 from 'public/images/p/my-develop-environmental/logo.svg'; import image1 from 'public/images/p/my-develop-environmental/logo.svg';
@ -16,11 +15,11 @@ export const meta = {
tags: ['Linux', 'Server'], tags: ['Linux', 'Server'],
}; };
export default ({children}) => <Layout {...meta}>{children}</Layout>; export default ({ children }) => <Layout {...meta}>{children}</Layout>;
最近迁移了自己的小服务器,也顺便把本机的环境重新设置了一下,其中环节还是有点复杂的小细节的。所以打算整理下思路,方便以后再设置同样环境。 最近迁移了自己的小服务器,也顺便把本机的环境重新设置了一下,其中环节还是有点复杂的小细节的。所以打算整理下思路,方便以后再设置同样环境。
<Image src={image1} placeholder="" priority/> <Image src={image1} placeholder="" priority />
## 对于服务器 ## 对于服务器
@ -204,7 +203,7 @@ source $HOME/.cargo/env
对于 Windoiws 环境则需要在“设置”-“高级系统设置”-“环境变量”中添加对应的变量到用户/系统变量中。 对于 Windoiws 环境则需要在“设置”-“高级系统设置”-“环境变量”中添加对应的变量到用户/系统变量中。
<Image src={image2} alt="Windows environmentail"/> <Image src={image2} alt="Windows environmentail" />
当然这几个主要的变量可以放在 `.zshrc` 中,以后更新还会用到的。 当然这几个主要的变量可以放在 `.zshrc` 中,以后更新还会用到的。

View File

@ -4,7 +4,6 @@ date: '2022-04-18'
tags: ['Next.js', 'JavaScript'] tags: ['Next.js', 'JavaScript']
--- ---
import Layout from 'layouts/MDXLayout'; import Layout from 'layouts/MDXLayout';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import Image from 'components/mdx/Image'; import Image from 'components/mdx/Image';
@ -21,7 +20,7 @@ export const meta = {
tags: ['Next.js', 'JavaScript'], tags: ['Next.js', 'JavaScript'],
}; };
export default ({children}) => <Layout {...meta}>{children}</Layout>; export default ({ children }) => <Layout {...meta}>{children}</Layout>;
I use next.js and mdx plugin to build my blog site. It's a next.js SSG project. I use next.js and mdx plugin to build my blog site. It's a next.js SSG project.
@ -45,7 +44,7 @@ They introduct the [Algolia Crawler web interface](https://crawler.algolia.com/a
But i can't login with my Algolia account. But i can't login with my Algolia account.
<Image src={image1} alt="Can't login to Algolia Crawler"/> <Image src={image1} alt="Can't login to Algolia Crawler" />
So i need find another way to generate my post index. So i need find another way to generate my post index.
@ -55,7 +54,7 @@ The DocSearch frontend UI read result as specific format. We just need to provid
Then DocSearch fronted UI can works. Then DocSearch fronted UI can works.
<Image src={image2} alt="Index format"/> <Image src={image2} alt="Index format" />
So we need post same format to Algolia. So we need post same format to Algolia.