-
+
diff --git a/components/RUA/loading/VercelLoading.module.css b/components/RUA/loading/VercelLoading.module.css
index 73d6121..fb8efa5 100644
--- a/components/RUA/loading/VercelLoading.module.css
+++ b/components/RUA/loading/VercelLoading.module.css
@@ -1,69 +1,69 @@
.container {
- position: absolute;
- bottom: 10px;
- right: 30px;
+ position: absolute;
+ bottom: 10px;
+ right: 30px;
- border-radius: 3px;
- background: #000;
- color: #fff;
- font: initial;
- cursor: initial;
- letter-spacing: initial;
- text-shadow: initial;
- text-transform: initial;
- visibility: initial;
+ border-radius: 3px;
+ background: #000;
+ color: #fff;
+ font: initial;
+ cursor: initial;
+ letter-spacing: initial;
+ text-shadow: initial;
+ text-transform: initial;
+ visibility: initial;
- padding: 7px 10px 8px 10px;
- align-items: center;
- box-shadow: 0 11px 40px 0 rgba(0, 0, 0, 0.25),
+ padding: 7px 10px 8px 10px;
+ align-items: center;
+ box-shadow: 0 11px 40px 0 rgba(0, 0, 0, 0.25),
0 2px 10px 0 rgba(0, 0, 0, 0.12);
- display: none;
- opacity: 0;
- transition: opacity 0.1s ease, bottom 0.1s ease;
- animation: fade-in 0.1s ease-in-out;
+ display: none;
+ opacity: 0;
+ transition: opacity 0.1s ease, bottom 0.1s ease;
+ animation: fade-in 0.1s ease-in-out;
}
.container.visible {
- display: flex;
+ display: flex;
}
.container.building {
- bottom: 20px;
- opacity: 1;
+ bottom: 20px;
+ opacity: 1;
}
.icon-wrapper {
- width: 16px;
- height: 16px;
+ width: 16px;
+ height: 16px;
}
.icon-wrapper > svg {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
.icon-group {
- animation: strokedash 1s ease-in-out both infinite;
+ animation: strokedash 1s ease-in-out both infinite;
}
@keyframes fade-in {
- from {
- bottom: 10px;
- opacity: 0;
- }
- to {
- bottom: 20px;
- opacity: 1;
- }
+ from {
+ bottom: 10px;
+ opacity: 0;
+ }
+ to {
+ bottom: 20px;
+ opacity: 1;
+ }
}
@keyframes strokedash {
- 0% {
- stroke-dasharray: 0 226;
- }
- 80%,
- 100% {
- stroke-dasharray: 659 226;
- }
+ 0% {
+ stroke-dasharray: 0 226;
+ }
+ 80%,
+ 100% {
+ stroke-dasharray: 659 226;
+ }
}
diff --git a/components/RUA/tab/index.tsx b/components/RUA/tab/index.tsx
index 36f039e..687a0e1 100644
--- a/components/RUA/tab/index.tsx
+++ b/components/RUA/tab/index.tsx
@@ -1,6 +1,5 @@
import classNames from 'classnames';
-import React, { useState } from 'react';
-import { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
import { ItemProps } from './TabItem';
type Props = {
diff --git a/components/gists/styles.module.css b/components/gists/styles.module.css
index 1b04b49..4145650 100644
--- a/components/gists/styles.module.css
+++ b/components/gists/styles.module.css
@@ -1,14 +1,16 @@
.wrapper {
- @apply overflow-hidden rounded-lg;
- @apply mb-8 shadow-lg;
- font-size: 16px;
- /* box-shadow: 0 13px 27px -5px rgb(50 50 93 / 25%),
- 0 8px 16px -8px rgb(0 0 0 / 30%), 0 -6px 16px -6px rgb(0 0 0 / 3%); */
+ @apply overflow-hidden rounded-lg;
+ @apply mb-8 shadow-lg;
+ font-size: 16px;
+ /* box-shadow: 0 13px 27px -5px rgb(50 50 93 / 25%),
+ 0 8px 16px -8px rgb(0 0 0 / 30%), 0 -6px 16px -6px rgb(0 0 0 / 3%); */
}
+
.wrapper pre {
- margin: unset;
- border-radius: unset;
+ margin: unset;
+ border-radius: unset;
}
+
.wrapper .loading span {
- margin: unset;
+ margin: unset;
}
diff --git a/components/mdx/Image.module.css b/components/mdx/Image.module.css
index 3423dd0..c357d4a 100644
--- a/components/mdx/Image.module.css
+++ b/components/mdx/Image.module.css
@@ -1,16 +1,16 @@
.imageContainer {
- width: 100%;
- padding: 10px 0;
- position: relative;
+ width: 100%;
+ padding: 10px 0;
+ position: relative;
}
.imageContainer > span {
- position: unset !important;
+ position: unset !important;
}
.imageContainer .image {
- object-fit: contain;
- width: 100% !important;
- position: relative !important;
- height: unset !important;
+ object-fit: contain;
+ width: 100% !important;
+ position: relative !important;
+ height: unset !important;
}
diff --git a/components/post/PostTOC.module.css b/components/post/PostTOC.module.css
index ef6ced5..36f0d0f 100644
--- a/components/post/PostTOC.module.css
+++ b/components/post/PostTOC.module.css
@@ -1,3 +1,3 @@
.head:hover:before {
- content: unset !important;
+ content: unset !important;
}
diff --git a/next.config.mjs b/next.config.mjs
index 3b73ff3..25fbb47 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -26,7 +26,7 @@ const composedConfig = composePlugins([
outputStandalone: true,
},
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
- images: { domains: ['avatars.githubusercontent.com'] },
+ images: {domains: ['avatars.githubusercontent.com']},
},
]);
diff --git a/pages/_app.tsx b/pages/_app.tsx
index a6b19e9..e6fa4e3 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -8,7 +8,7 @@ import 'styles/rua.css';
import { MDXProvider } from '@mdx-js/react';
import Anchor from 'components/mdx/Anchor';
import { useRouter } from 'next/router';
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
const VercelLoading = dynamic(
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 3ec9521..0370033 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document';
+import { Head, Html, Main, NextScript } from 'next/document';
export default function Document() {
return (
diff --git a/pages/api/hello.ts b/pages/api/hello.ts
index f8bcc7e..89e4d6b 100644
--- a/pages/api/hello.ts
+++ b/pages/api/hello.ts
@@ -1,13 +1,13 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from 'next';
type Data = {
- name: string
-}
+ name: string;
+};
export default function handler(
req: NextApiRequest,
res: NextApiResponse
) {
- res.status(200).json({ name: 'John Doe' })
+ res.status(200).json({ name: 'John Doe' });
}
diff --git a/pages/blog.tsx b/pages/blog.tsx
index 03e755f..ae3e1f2 100644
--- a/pages/blog.tsx
+++ b/pages/blog.tsx
@@ -3,7 +3,7 @@ import { ReactElement } from 'react';
import { postLists } from 'lib/posts';
import cn from 'classnames';
import dynamic from 'next/dynamic';
-import PostCardLoading from 'components/RUA/loading/PostCardLoading'
+import PostCardLoading from 'components/RUA/loading/PostCardLoading';
const PostCard = dynamic(() => import('components/PostCard'), {
loading: () => ,
diff --git a/pages/g/[id].tsx b/pages/g/[id].tsx
index 703ec1a..bf352f6 100644
--- a/pages/g/[id].tsx
+++ b/pages/g/[id].tsx
@@ -1,4 +1,4 @@
-import { GetStaticProps, InferGetStaticPropsType, GetStaticPaths } from 'next';
+import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
import dynamic from 'next/dynamic';
import { ReactElement } from 'react';
import { SignalGist } from 'types';
diff --git a/pages/p/hello-world.mdx b/pages/p/hello-world.mdx
index dceb9e1..13021c7 100644
--- a/pages/p/hello-world.mdx
+++ b/pages/p/hello-world.mdx
@@ -4,6 +4,7 @@ date: '2022-04-06'
tags: ['Hello world']
---
+
import Layout from 'layouts/MDXLayout';
import dynamic from 'next/dynamic';
@@ -15,7 +16,7 @@ export const meta = {
tags: ['Hello world'],
};
-export default ({ children }) => (
+export default ({children}) => (
{children}
diff --git a/pages/p/how-to-load-a-background-with-threejs.mdx b/pages/p/how-to-load-a-background-with-threejs.mdx
index 2f6260a..4d26a79 100644
--- a/pages/p/how-to-load-a-background-with-threejs.mdx
+++ b/pages/p/how-to-load-a-background-with-threejs.mdx
@@ -4,10 +4,9 @@ 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'));
@@ -17,7 +16,7 @@ export const meta = {
tags: ['three.js', 'JavaScript'],
};
-export default ({ children }) => {children};
+export default ({children}) => {children};
## Three.js setup
@@ -60,46 +59,46 @@ 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 const main = `
-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;
@@ -142,7 +141,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.
-
+
We just need load six images in some order, and set them to the scene background.
@@ -184,67 +183,67 @@ 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 const main2 = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-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 (
- <>
-
-
- );
-}
`;
{children};
+export default ({children}) => {children};
最近迁移了自己的小服务器，也顺便把本机的环境重新设置了一下，其中环节还是有点复杂的小细节的。所以打算整理下思路，方便以后再设置同样环境。
-
+
## 对于服务器
@@ -203,7 +204,7 @@ source $HOME/.cargo/env
对于 Windoiws 环境则需要在“设置”-“高级系统设置”-“环境变量”中添加对应的变量到用户/系统变量中。
-
+
当然这几个主要的变量可以放在 `.zshrc` 中，以后更新还会用到的。
diff --git a/pages/p/setting-up-docsearch-for-nextjs.mdx b/pages/p/setting-up-docsearch-for-nextjs.mdx
index 3f6f386..76cf65b 100644
--- a/pages/p/setting-up-docsearch-for-nextjs.mdx
+++ b/pages/p/setting-up-docsearch-for-nextjs.mdx
@@ -4,6 +4,7 @@ date: '2022-04-18'
tags: ['Next.js', 'JavaScript']
---
+
import Layout from 'layouts/MDXLayout';
import dynamic from 'next/dynamic';
import Image from 'components/mdx/Image';
@@ -20,7 +21,7 @@ export const meta = {
tags: ['Next.js', 'JavaScript'],
};
-export default ({ children }) => {children};
+export default ({children}) => {children};
I use next.js and mdx plugin to build my blog site. It's a next.js SSG project.
@@ -44,7 +45,7 @@ They introduct the [Algolia Crawler web interface](https://crawler.algolia.com/a
But i can't login with my Algolia account.
-
+
So i need find another way to generate my post index.
@@ -54,7 +55,7 @@ The DocSearch frontend UI read result as specific format. We just need to provid
Then DocSearch fronted UI can works.
-
+
So we need post same format to Algolia.
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..12a703d 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {},
autoprefixer: {},
},
-}
+};
diff --git a/public/images/img/64.svg b/public/images/img/64.svg
index ce3638d..0d89ca4 100644
--- a/public/images/img/64.svg
+++ b/public/images/img/64.svg
@@ -1 +1,3175 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/images/img/avatar.svg b/public/images/img/avatar.svg
index ae8c564..682b354 100644
--- a/public/images/img/avatar.svg
+++ b/public/images/img/avatar.svg
@@ -1 +1,462 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/images/img/comment-line-dark.svg b/public/images/img/comment-line-dark.svg
index 421bf32..ecd9f1e 100644
--- a/public/images/img/comment-line-dark.svg
+++ b/public/images/img/comment-line-dark.svg
@@ -1,12 +1,12 @@
-