initilize rednote route

.github/workflows/ci.yml

@@ -24,12 +24,12 @@ jobs:
 
         - uses: pnpm/action-setup@v2.0.1
           with:
-            version: 8.6.10
+            version: 9.15.1
 
         - name: Setup Node.js environment
           uses: actions/setup-node@v3
           with:
-            node-version: 18
+            node-version: 22
             cache: 'pnpm'
 
         - name: Install dependencies

apps/weixin-md/components/Footer/Footer.tsx

@@ -37,7 +37,7 @@ export const Footer = () => {
               <path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"></path>
             </svg>
           </a>
-          <a
+          {/* <a
             href="https://weixin.sogou.com/weixin?query=a_warm_tree"
             target="_blank"
             rel="noreferrer"
@@ -55,14 +55,14 @@ export const Footer = () => {
               <path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"></path>
               <path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"></path>
             </svg>
-          </a>
+          </a> */}
           <a
             href="https://yeshu.cloud/about"
             target="_blank"
             className="ml-4 transition-colors duration-200 text-gray-400 hover:text-gray-800 dark:hover:text-white cursor-pointer no-underline hover:no-underline"
             rel="noreferrer"
           >
-            @也树
+            @yeshu
           </a>
         </div>
       </div>

apps/weixin-md/components/RednoteEditor/RednoteEditor.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import { MarkdownEditor, Preview } from "ui";
+import { defaultTheme, WXRenderer } from "md-converter";
+import { marked } from "marked";
+
+export const RednoteEditor = () => {
+  const renderer = new WXRenderer({ theme: defaultTheme });
+  const output = renderer.assemble();
+  marked.use({ renderer: output });
+  const [preview, setPreview] = useState("");
+  const handleChange = (value: string) => {
+    const content = marked.parse(value);
+    const suffix = renderer.buildSuffix();
+    setPreview(content + suffix);
+  };
+  return (
+    <div className="mx-auto flex max-w-screen-xl w-full h-full">
+      <div className="border border-zinc-200 w-3/5">
+        <MarkdownEditor onChange={handleChange}></MarkdownEditor>
+      </div>
+      <div className="border border-zinc-200 border-l-0 w-2/5">
+        <Preview preview={preview}></Preview>
+      </div>
+    </div>
+  );
+};

apps/weixin-md/components/RednoteEditor/index.ts

@@ -0,0 +1 @@
+export * from "./RednoteEditor";

apps/weixin-md/components/RednoteHeader/RednoteHeader.tsx

@@ -0,0 +1,51 @@
+export const RednoteHeader = () => {
+  const handleDownloadImages = () => {};
+
+  return (
+    <header aria-label="Page Header">
+      <div className="mx-auto max-w-screen-xl py-6">
+        <div className="sm:flex sm:items-center sm:justify-between">
+          <div className="text-center sm:text-left">
+            <h1 className="text-2xl font-bold text-gray-900 sm:text-3xl">
+              Rednote Markdown Converter
+            </h1>
+            <p className="mt-1.5 text-sm text-gray-500">
+              {`A highly concise Rednote Markdown editor! 🎉`}
+            </p>
+          </div>
+          <div className="mt-4 flex flex-col gap-4 sm:mt-0 sm:flex-row sm:items-center">
+            <button
+              className="block rounded-lg bg-indigo-600 px-5 py-3 text-sm font-medium text-white transition hover:bg-indigo-700 focus:outline-none"
+              type="button"
+              onClick={handleDownloadImages}
+            >
+              Download images
+            </button>
+            <a
+              href="https://github.com/xdlrt/mds"
+              target="_blank"
+              className="inline-flex items-center justify-center rounded-lg border border-gray-200 px-5 py-3 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 focus:outline-none cursor-pointer"
+              rel="noreferrer"
+            >
+              <span className="text-sm font-medium">Github</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="ml-1.5 h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};

apps/weixin-md/components/RednoteHeader/index.ts

@@ -0,0 +1 @@
+export * from "./RednoteHeader";

apps/weixin-md/package.json

@@ -27,6 +27,6 @@
     "eslint": "8.28.0",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
-    "typescript": "^4.9.5"
+    "typescript": "^5.7.3"
   }
 }

apps/weixin-md/pages/_app.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import Web from ".";
+import type { AppProps } from "next/app";
 import "../styles/globals.css";
 
-const Index = () => {
-  return <Web />;
-};
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
 
-export default Index;
+export default MyApp;

apps/weixin-md/pages/index.tsx

@@ -8,7 +8,7 @@ import Script from "next/script";
 
 export default function Web() {
   return (
-    <div className="w-full h-screen flex flex-col">
+    <div className="w-full h-screen flex flex-col px-3 md:px-6">
       <Head>
         <title>公众号排版工具 | 一颗小树</title>
         <meta

apps/weixin-md/pages/rednote.tsx

@@ -0,0 +1,37 @@
+import Head from "next/head";
+import React from "react";
+import { Footer } from "../components/Footer";
+import { ToastRoot } from "../components/Toast";
+import Script from "next/script";
+import { RednoteEditor } from "../components/RednoteEditor";
+import { RednoteHeader } from "../components/RednoteHeader";
+
+export default function RedNote() {
+  return (
+    <div className="w-full h-screen flex flex-col px-3 md:px-6">
+      <Head>
+        <title>Rednote Markdown Converter</title>
+        <meta name="description" content="Rednote Markdown Converter" />
+        <link rel="shortcut icon" href="/favicon.png" />
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+      </Head>
+
+      <RednoteHeader />
+      <div style={{ height: "calc(100% - 110px - 52px)" }}>
+        <RednoteEditor />
+      </div>
+      <Footer />
+      <ToastRoot />
+      <Script src="https://www.googletagmanager.com/gtag/js?id=G-8HS3PBBC70" />
+      <Script id="google-analytics">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', 'G-8HS3PBBC70');
+        `}
+      </Script>
+    </div>
+  );
+}

package.json

@@ -33,7 +33,7 @@
     "postcss": "^8.4.27",
     "prettier": "latest",
     "tailwindcss": "^3.3.3",
-    "turbo": "latest"
+    "turbo": "^2.3.3"
   },
   "engines": {
     "node": ">=18.0.0"

packages/eslint-config-custom/package.json

@@ -11,7 +11,7 @@
     "eslint-plugin-react": "7.31.11"
   },
   "devDependencies": {
-    "typescript": "^4.9.5"
+    "typescript": "^5.7.3"
   },
   "publishConfig": {
     "access": "public"

packages/md-converter/package.json

@@ -17,7 +17,7 @@
     "eslint": "8.28.0",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
-    "typescript": "^4.9.5",
+    "typescript": "^5.7.3",
     "vitest": "^0.31.4"
   },
   "dependencies": {

packages/ui/index.tsx

@@ -1,3 +1,3 @@
-import * as React from "react";
 export * from "./md-editor";
 export * from "./preview";
+export * from "./rednote-preview";

packages/ui/md-editor/editor.tsx

@@ -2,7 +2,7 @@ import CodeMirror from "@uiw/react-codemirror";
 import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
 import { languages } from "@codemirror/language-data";
 
-interface MarkdownEditorProps {
+export interface MarkdownEditorProps {
   onChange?: (value: string) => void;
 }
 

packages/ui/package.json

@@ -16,7 +16,7 @@
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "tsconfig": "workspace:*",
-    "typescript": "^4.9.5"
+    "typescript": "^5.7.3"
   },
   "dependencies": {
     "@codemirror/lang-markdown": "^6.2.0",

packages/ui/rednote-preview/index.ts

@@ -0,0 +1 @@
+export * from "./preview";

packages/ui/rednote-preview/preview.tsx

@@ -0,0 +1,20 @@
+export const RednotePreview = ({ preview }: { preview: string }) => {
+  if (!preview)
+    return (
+      <div className="flex items-center justify-center h-full text-gray-400">
+        这里空空如也
+      </div>
+    );
+  return (
+    <div className="preview-wrap flex items-center justify-center h-full overflow-y-auto break-all">
+      <div className="h-full">
+        <div
+          id="preview"
+          className="p-4 shadow-2xl"
+          style={{ width: 300, height: 400 }}
+          dangerouslySetInnerHTML={{ __html: preview }}
+        ></div>
+      </div>
+    </div>
+  );
+};