xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust loading component in blog page fix #38

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
components/RUA/loading/PostCardLoading.tsx
View File

@ -13,7 +13,7 @@ const PostCardLoading = () => {
)}
>
<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="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 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>
);
};

3
pages/p/hello-world.mdx
View File

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

205
pages/p/how-to-load-a-background-with-threejs.mdx
View File

@ -4,9 +4,10 @@ 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 'public/images/p/how-to-load-a-background-with-threejs/Skybox_example.png';
export const RUASandpack = dynamic(() => import('components/RUA/RUASandpack'));
@ -16,7 +17,7 @@ export const meta = {
tags: ['three.js', 'JavaScript'],
};
export default ({children}) => <Layout {...meta}>{children}</Layout>;
export default ({ children }) => <Layout {...meta}>{children}</Layout>;
## Three.js setup
@ -59,46 +60,46 @@ renderer.render(scene, camera);
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 = `* {
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.
<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.
@ -183,67 +184,67 @@ controls.enablePan = false;
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

7
pages/p/my-develop-environmental.mdx
View File

@ -4,7 +4,6 @@ date: '2022-04-14'
tags: [Linux, Server]
---
import Layout from 'layouts/MDXLayout';
import Image from 'components/mdx/Image';
import image1 from 'public/images/p/my-develop-environmental/logo.svg';
@ -16,11 +15,11 @@ export const meta = {
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 环境则需要在“设置”-“高级系统设置”-“环境变量”中添加对应的变量到用户/系统变量中。
<Image src={image2} alt="Windows environmentail"/>
<Image src={image2} alt="Windows environmentail" />
当然这几个主要的变量可以放在 `.zshrc` 中，以后更新还会用到的。

7
pages/p/setting-up-docsearch-for-nextjs.mdx
View File

@ -4,7 +4,6 @@ date: '2022-04-18'
tags: ['Next.js', 'JavaScript']
---
import Layout from 'layouts/MDXLayout';
import dynamic from 'next/dynamic';
import Image from 'components/mdx/Image';
@ -21,7 +20,7 @@ export const meta = {
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.
@ -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.
<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.
@ -55,7 +54,7 @@ The DocSearch frontend UI read result as specific format. We just need to provid
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.