add gist loading page

format code

content/posts/about-javascript-this.mdx

@@ -355,7 +355,7 @@ if (!Function.prototype.bind)
         // closest thing possible to the ECMAScript 5
         // internal IsCallable function
         throw new TypeError(
-          'Function.prototype.bind - what is trying to be bound is not callable'
+          'Function.prototype.bind - what is trying to be bound is not callable',
         );
       }
 
@@ -368,7 +368,7 @@ if (!Function.prototype.bind)
           baseArgs.push.apply(baseArgs, arguments);
           return fToBind.apply(
             fNOP.prototype.isPrototypeOf(this) ? this : otherThis,
-            baseArgs
+            baseArgs,
           );
         };
 

content/posts/build-own-store-with-usesyncexternalstore.mdx

@@ -116,7 +116,7 @@ export type Store = {
 const Couter = () => {
   const { count, info } = useSyncExternalStore(
     store.subscribe,
-    store.getSnapshot
+    store.getSnapshot,
   );
 
   return (
@@ -166,9 +166,9 @@ const Couter = () => {
 
 ```tsx
 export const createStore: CreateStore = <
-  T extends Record<string, unknown> | unknown[]
+  T extends Record<string, unknown> | unknown[],
 >(
-  initialState: T
+  initialState: T,
 ) => {
   let state = initialState;
 
@@ -201,7 +201,7 @@ export type SetState<S> = (stateOrFn: S | ((state: S) => S)) => void;
 export type GetSnapshot<S> = () => S;
 export type Subscribe = (listener: () => void) => () => void;
 export type CreateStore = <T extends Record<string, unknown> | unknown[]>(
-  initialState: T
+  initialState: T,
 ) => {
   getSnapshot: GetSnapshot<T>;
   setState: SetState<T>;
@@ -270,7 +270,7 @@ Redux 通过我们创建的 Action 来决定如何更新状态，再通过 reduc
 ```tsx
 export type RUAReducer<S extends RUAState, A extends RUAAction> = (
   state: S,
-  action: A
+  action: A,
 ) => S;
 ```
 
@@ -295,7 +295,7 @@ const dispatch: RUADispatch<A> = (action) => {
 ```tsx
 export const createStore = <S extends RUAState, A extends RUAAction>(
   reducer: RUAReducer<S, A>,
-  initialState: S
+  initialState: S,
 ) => {
   let state = initialState;
 
@@ -356,7 +356,7 @@ export type RUAAction<P = unknown, T extends string = string> = {
 };
 export type RUAReducer<S extends RUAState, A extends RUAAction> = (
   state: S,
-  action: A
+  action: A,
 ) => S;
 export type RUADispatch<A extends RUAAction> = (action: A) => void;
 export type GetSnapshot<S> = () => S;

content/posts/create-a-mini-router-for-react.mdx

@@ -164,7 +164,7 @@ const RouterLink: React.FC<Props> = ({ to, children }: Props) => {
     document.dispatchEvent(
       new CustomEvent<string>('route', {
         detail: to,
-      })
+      }),
     );
   };
 
@@ -194,7 +194,7 @@ HTML 自定义事件也很简单，我们在对应的 DOM 上 `dispatchEvent`
 document.dispatchEvent(
   new CustomEvent<string>('route', {
     detail: to,
-  })
+  }),
 );
 ```
 
@@ -277,7 +277,7 @@ export default defineComponent({
     let currentPath = window.location.pathname;
     const component = shallowRef(
       routes.find((item) => item.path === currentPath)?.component ??
-        'Note found'
+        'Note found',
     );
 
     const handleEvent = (e: CustomEvent<string>) => {
@@ -308,7 +308,7 @@ import routes from './routes';
 
 let currentPath = window.location.pathname;
 const component = shallowRef(
-  routes.find((item) => item.path === currentPath)?.component
+  routes.find((item) => item.path === currentPath)?.component,
 );
 
 const handleEvent = (e: CustomEvent<string>) => {

content/posts/how-to-load-a-background-with-threejs.mdx

@@ -15,7 +15,7 @@ const camera = new THREE.PerspectiveCamera(
   75,
   window.innerWidth / window.innerHeight,
   0.1,
-  1000
+  1000,
 );
 ```
 

content/posts/react18-new-hooks.mdx

@@ -95,7 +95,7 @@ useSyncExternalStore<State>(subscribe: (onStoreChange: () => void) => () => void
 ```tsx
 const { count, info } = useSyncExternalStore(
   store.subscribe,
-  store.getSnapshot
+  store.getSnapshot,
 );
 ```
 
@@ -109,7 +109,7 @@ export type State = {
 export type Store = {
   state: State;
   setState: (
-    stateOrFn: Partial<State> | ((state: State) => Partial<State>)
+    stateOrFn: Partial<State> | ((state: State) => Partial<State>),
   ) => void;
   subscribe: (listener: () => void) => () => void;
   listeners: Set<() => void>;