Merge branch 'master' into dev

components/PostCard.tsx

@@ -17,15 +17,20 @@ const PostCard = ({ post }: Props) => {
               'hover:bg-sky-100 hover:bg-opacity-50',
               // 'hover:bg-rua-gray-100 hover:bg-opacity-10',
               'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
-              'flex items-center justify-between text-gray-800 ',
-              'mb-4 dark:text-gray-200'
+              'flex justify-between text-gray-800 ',
+              'mb-4 dark:text-gray-200',
+              'flex-col'
             )}
           >
-            <div className="flex-1">
+            <div className="flex justify-between">
               <h2 className="mb-4 text-3xl font-semibold font-Barlow">
                 {post.title}
               </h2>
 
+              <div className="hidden lg:block">{post.date}</div>
+            </div>
+
+            <div className="flex justify-between">
               <div className="flex items-center text-sm">
                 {post.tags.map((tag) => (
                   <div key={tag} className="mr-4 last:mr-0">
@@ -33,9 +38,9 @@ const PostCard = ({ post }: Props) => {
                   </div>
                 ))}
               </div>
-            </div>
 
-            <div>{post.date}</div>
+              <div className="lg:hidden">{post.date}</div>
+            </div>
           </article>
         </a>
       </Link>

data/posts/generic-component-encapsulate-reusable-component.mdx

@@ -4,17 +4,6 @@ date: '2022-08-12'
 tags: [TypeScript, React]
 ---
 
-import app from 'assets/sandpack/generic-component-encapsulate-reusable-component/hook-form-basic/App.ts';
-import app2 from 'assets/sandpack/generic-component-encapsulate-reusable-component/react-generic/App.ts';
-import child from 'assets/sandpack/generic-component-encapsulate-reusable-component/react-generic/Child.ts';
-
-export const RUASandpack = dynamic(() => import('components/RUA/RUASandpack'));
-export const RUACodeSandbox = dynamic(() =>
-  import('components/RUA/RUACodeSandbox')
-);
-
-export default ({ children }) => <Layout {...meta}>{children}</Layout>;
-
 当前很多 UI 库都会为我们集成可复用的 Form 组件，并且是开箱即用。但有时候我们往往可能需要为自己的组件集成 Form。单纯的手动管理所有的状态可能不是件理想的活，尤其是表单验证。
 
 [React Hook Forms](https://react-hook-form.com/) 为我们提供了完善的状态管理，并且可以集成到任何组件中去。

data/posts/object-around-in-threejs.mdx

@@ -0,0 +1,90 @@
+---
+title: Three.js 中的物体围绕运动
+date: '2022-09-02'
+tags: [Three.js, React]
+---
+
+<Image
+  src="/images/p/object-around-in-threejs/around-cover.jpg"
+  width="1800"
+  height="1201"
+/>
+
+使一个物体围绕另一个物体运动，主要是保证围绕物体的运动轨迹。在 three.js 中，一个 Mesh 实例可以通过其自身的 `add()` 方法，去添加另一个实例。
+
+通过此方法就可以达成添加一个实例成为另一个实例的子节点。当父节点进行运动时（例如自身旋转），子节点也会跟随运动。
+
+在物体围绕运动中，我们可以把围绕物体添加到被围绕物体中。当父节点绕自身旋转时，离父节点有一定距离的围绕物体就会随着父节点的旋转而旋转。但这样做就会导致本不需要运动的父节点自身进行运动。
+
+## Object3D
+
+three.js 提供了一个可以在场景中添加的“点”。它与 Mesh 等物体不同，它相当于在场景中添加一个不可见的点。并且它也拥有 `add()` 方法，也就可以添加其他物体到这个点中。
+
+```tsx
+const target = new THREE.Object3D();
+```
+
+当这个点进行旋转时，被添加的物体也就可以按照预想的方式进行运动。同时它也可以被添加到一个物体中，其位置就会与添加的物体相同，就不用手动为其设置相同的位置了。
+
+```tsx
+const target = new THREE.Object3D();
+
+const material = new THREE.MeshPhongMaterial({
+  color: '#4d4d4d',
+  specular: '#fdfdfd',
+  emissive: 'rgb(0,0,0)',
+});
+const boxGeo = new THREE.BoxGeometry(2, 2, 2);
+const box = new THREE.Mesh(boxGeo, material);
+box.castShadow = true;
+box.receiveShadow = true;
+box.position.set(0, 2, 0);
+box.add(target);
+three.scene.add(box);
+
+const sphereGeo = new THREE.SphereGeometry(0.5, 32, 16);
+const sphere = new THREE.Mesh(sphereGeo, material);
+sphere.castShadow = true;
+sphere.receiveShadow = true;
+sphere.position.set(-2, 2, 0);
+
+// target.position.set(0, 2, 0);
+target.add(sphere);
+three.scene.add(target);
+```
+
+<Image
+  src="/images/p/object-around-in-threejs/around.svg"
+  alt="围绕运动"
+  width="664"
+  height="404"
+/>
+
+### 相对位置
+
+如果被围绕的物体没有通过 `add()` 方法添加 Object3D，那么就需要手动添加 Object3D 到场景中，并设置到特定的位置。可以通过其 `position.set()` 方法设置。这对于 Object3D 本身来说是相对于世界坐标位置的。
+
+如果被围绕物体已经添加到场景中，通过 `add()` 方法添加 Object3D 也会被添加到场景中。且它的位置与父节点相同。
+
+对于围绕物体来说，其自身被 Object3D 通过 `add()` 方法添加到 Object3D 中。而它通过 `position.set()` 进行设置时，就是相对与 Object3D 已经设置过的位置进行设置。
+
+```tsx
+box.position.set(0, 2, 0);
+box.add(target);
+target.add(sphere);
+sphere.position.set(-2, 0, 0);
+// sphere position in world is (-2, 2, 0);
+```
+
+### 获取世界位置
+
+默认情况下 `Mesh.position` 得到是其自身的相对位置。获取世界全局位置需要一个 Vector3 来保存，再使用 `Mesh.getWorldPosition` 来获取。
+
+```tsx
+const position = new THREE.Vector3();
+earth.getWorldPosition(position);
+```
+
+## Demo
+
+<RUACodeSandbox url="https://codesandbox.io/s/arounding-box-b1g4qq" />

pages/blog/[page].tsx

@@ -64,7 +64,7 @@ export const getStaticProps: GetStaticProps<{
 
   return {
     props: {
-      posts: posts.slice(page, PostPerPage),
+      posts: posts.slice((page - 1) * PostPerPage, PostPerPage * page),
       prev: page - 1,
       next: page + 1,
       total: Math.ceil(posts.length / PostPerPage),

pages/index.tsx

@@ -74,7 +74,7 @@ const Home: NextPageWithLayout = () => {
     init,
     ...size,
     alpha: true,
-    // renderOnDemand: true,
+    renderOnDemand: true,
   });
 
   return (