feat(actively): add actively pages

Author: lazhenyi

src/app/(default)/r/[owner]/[repo]/post/page.tsx

@@ -229,6 +229,7 @@ export default function ProductPostPage(){
                                         setTopic(e.target.value)
                                     }}
                                     onKeyDown={(e) => {
+                                        e.stopPropagation();
                                         if (e.key === "Enter") {
                                             if (Topic.length > 0) {
                                                 setTopics([...Topics, Topic])

src/app/(default)/u/[username]/(default)/page.tsx

@@ -7,6 +7,7 @@ import {AppWrite} from "@/server/Client";
 import {UserDashBored} from "@/server/types";
 import {UserApi} from "@/server/UserApi";
 import {ProductList} from "@/component/user/productlist";
+import {ActivelyReadme} from "@/component/user/activelyReadme";
 
 export default function UserPage(props: { params: Promise<{ username: string}> }) {
     const api = new UserApi();
@@ -33,7 +34,7 @@ export default function UserPage(props: { params: Promise<{ username: string}> }
                (Loading && userDash) ? (
                    <>
                        <TabsPanel value="actively">
-                           actively
+                           <ActivelyReadme readme={userDash.readme}/>
                        </TabsPanel>
                        <TabsPanel value="repository">
                            <UserRepoList userDash={userDash}/>

src/component/repo/repointro.tsx

@@ -36,7 +36,25 @@ export const RepoIntro = ({repo, owner, head}: RepoIntroProps) => {
         <div className="repo-intro">
             <div className="repo-readme">
                 <ReactMarkdown
-                    rehypePlugins={[rehypeRaw]}>
+                    rehypePlugins={[rehypeRaw]}
+                    components={{
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-expect-error
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        code: ({node, inline, className, children, ...props}) => {
+                            const match = /language-(\w+)/.exec(className || '');
+                            return !inline && match ? (
+                                <div className="code-block">
+                                    <code className={className}>{children}</code>
+                                </div>
+                            ) : (
+                                <code className={className} {...props}>
+                                    {children}
+                                </code>
+                            );
+                        }
+                    }}
+                >
                     {README}
                 </ReactMarkdown>
             </div>

src/component/user/activelyReadme.tsx

@@ -0,0 +1,44 @@
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+
+interface ActivelyReadmeProps {
+    readme?: Uint8Array | undefined
+}
+
+export const ActivelyReadme = ({readme}: ActivelyReadmeProps) => {
+    if (readme) {
+        const markdown = readme.toString();
+        return (
+            <div className="markdown-body">
+                <ReactMarkdown
+                    rehypePlugins={[rehypeRaw]}
+                    components={{
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-expect-error
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        code: ({node, inline, className, children, ...props}) => {
+                            const match = /language-(\w+)/.exec(className || '');
+                            return !inline && match ? (
+                                <div className="code-block">
+                                    <code className={className}>{children}</code>
+                                </div>
+                            ) : (
+                                <code className={className} {...props}>
+                                    {children}
+                                </code>
+                            );
+                        }
+                    }}
+                >{markdown}</ReactMarkdown>
+            </div>
+        )
+    }else {
+        return (
+            <div className="markdown-body">
+                <ReactMarkdown
+                    rehypePlugins={[rehypeRaw]}
+                >{`# No README.md`}</ReactMarkdown>
+            </div>
+        )
+    }
+}

src/style/main.css

@@ -7,4 +7,17 @@
 @import "./dashbored.css";
 @import "./usersetting.css";
 @import "./market.css";
-@import "./product.css";
+@import "./product.css";
+
+
+.code-block  {
+    color: white;
+    background: black;
+    overflow-x: auto;
+    white-space: pre;
+    font-size: 14px;
+    font-family: monospace;
+    padding: 10px;
+    margin: 10px 0;
+    border-radius: 5px;
+}

src/style/repo.css

@@ -129,7 +129,7 @@
 .repo-intro {
     display: flex;
     .repo-readme {
-        width: auto;
+        width: 100%;
     }
     .repo-intro-card {
         @media screen and (max-width: 1500px) {