chore: 将notes根组件改善为rsc

Author: coderz-w

src/app/(app)/notes/[nid]/page.tsx

@@ -1,13 +1,15 @@
-'use client';
-
-import { m } from 'framer-motion';
-import { PropsWithChildren, useEffect, useRef } from 'react';
-
-import { NoteTitle, NoteDateMeta, IndentArticleContainer, NoteMarkdown } from './pageExtra';
-
-import { cn } from '@/lib/helper';
-
-export default function Page({ params }: { params: Record<string, any> }) {
+'use server';
+
+import {
+  NoteTitle,
+  NoteDateMeta,
+  IndentArticleContainer,
+  NoteMarkdown,
+  PaperLayout,
+  PageTransition,
+} from './pageExtra';
+
+export default async function Page({ params }: { params: Record<string, any> }) {
   const { nid } = params;
   console.log('id', nid);
 
@@ -20,59 +22,6 @@ export default function Page({ params }: { params: Record<string, any> }) {
   );
 }
 
-const PageTransition = ({ children }: PropsWithChildren) => {
-  return (
-    <m.div
-      initial={{ y: 80, opacity: 0.001 }}
-      animate={{
-        y: 0,
-        opacity: 1,
-        transition: { duration: 0.5, type: 'spring', damping: 20, stiffness: 200 },
-      }}
-      className=" min-w-0"
-    >
-      {children}
-    </m.div>
-  );
-};
-
-const PaperLayout = ({ children, className }: PropsWithChildren<{ className?: string }>) => {
-  const paperLayoutRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (!paperLayoutRef.current) return;
-    //侧边可能需要
-
-    const mainHeight = paperLayoutRef.current.offsetHeight;
-    console.log(mainHeight);
-
-    const ob = new ResizeObserver((entries) => {
-      const mainHeight = (entries[0].target as HTMLElement).offsetHeight;
-      if (mainHeight) console.log(mainHeight);
-    });
-    ob.observe(paperLayoutRef.current);
-
-    return () => {
-      ob.disconnect();
-    };
-  }, []);
-
-  return (
-    <main
-      ref={paperLayoutRef}
-      className={cn(
-        'relative bg-white dark:bg-zinc-900 md:col-start-1 lg:col-auto',
-        '-m-4 p-[2rem_1rem] md:m-0 lg:p-[30px_45px]',
-        'rounded-[0_6px_6px_0] border-zinc-200/70 shadow-sm dark:border-neutral-800 dark:shadow-[#333] lg:border',
-        'note-layout-main',
-        'min-w-0',
-        className,
-      )}
-    >
-      {children}
-    </main>
-  );
-};
-
 const PageInner = () => (
   <>
     <div>

src/app/(app)/notes/[nid]/pageExtra.tsx

@@ -1,4 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+'use client';
+
+import React, { PropsWithChildren, useEffect, useRef } from 'react';
+import { m } from 'framer-motion';
 
 import text from './test.md';
 
@@ -50,3 +53,56 @@ const MarkdownRenderers: Record<string, any> = {
 export const NoteMarkdown = () => {
   return <MainMarkdown className="mt-10" allowsScript renderers={MarkdownRenderers} value={text} />;
 };
+
+export const PaperLayout = ({ children, className }: PropsWithChildren<{ className?: string }>) => {
+  const paperLayoutRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!paperLayoutRef.current) return;
+    //侧边可能需要
+
+    const mainHeight = paperLayoutRef.current.offsetHeight;
+    console.log(mainHeight);
+
+    const ob = new ResizeObserver((entries) => {
+      const mainHeight = (entries[0].target as HTMLElement).offsetHeight;
+      if (mainHeight) console.log(mainHeight);
+    });
+    ob.observe(paperLayoutRef.current);
+
+    return () => {
+      ob.disconnect();
+    };
+  }, []);
+
+  return (
+    <main
+      ref={paperLayoutRef}
+      className={cn(
+        'relative bg-white dark:bg-zinc-900 md:col-start-1 lg:col-auto',
+        '-m-4 p-[2rem_1rem] md:m-0 lg:p-[30px_45px]',
+        'rounded-[0_6px_6px_0] border-zinc-200/70 shadow-sm dark:border-neutral-800 dark:shadow-[#333] lg:border',
+        'note-layout-main',
+        'min-w-0',
+        className,
+      )}
+    >
+      {children}
+    </main>
+  );
+};
+
+export const PageTransition = ({ children }: PropsWithChildren) => {
+  return (
+    <m.div
+      initial={{ y: 80, opacity: 0.001 }}
+      animate={{
+        y: 0,
+        opacity: 1,
+        transition: { duration: 0.5, type: 'spring', damping: 20, stiffness: 200 },
+      }}
+      className=" min-w-0"
+    >
+      {children}
+    </m.div>
+  );
+};

src/app/(app)/notes/[nid]/test.md

@@ -4,10 +4,14 @@
 
 整个博客，不仅仅由 yyblog 组成，还有 ybg-cli 脚手架，用于自动创建删除文章以及编译文章。
 ![Minion](https://octodex.github.com/images/minion.png)
+
 ```javascript
-console.log("Hello, world!");console.log("Hello, world!");
-console.log("Hello, world!");console.log("Hello, world!");
-console.log("Hello, world!");console.log("Hello, world!");
+console.log('Hello, world!');
+console.log('Hello, world!');
+console.log('Hello, world!');
+console.log('Hello, world!');
+console.log('Hello, world!');
+console.log('Hello, world!');
 ```
 
 - **yyblog**

src/styles/md.css

@@ -132,15 +132,14 @@
   }
 }
 
-.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+.prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
   opacity: 0.7;
   font-weight: 600 !important;
   font-size: 0.875em !important;
 }
 
-.prose :where(code):not(:where([class~="not-prose"] *, pre *)) {
+.prose :where(code):not(:where([class~='not-prose'] *, pre *)) {
   padding: 1px 8px;
-  border-radius: .0625rem;
+  border-radius: 0.0625rem;
   color: var(--accent-color) !important;
 }
-