Remove dynamic component import

docs/docs-ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docs-ui",
   "description": "Your project description",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "main": "dist/index.html",
   "type": "module",
   "scripts": {
@@ -41,6 +41,6 @@
     "vite": "^5.1.6"
   },
   "peerDependencies": {
-    "@chaoying/flect": "0.2.3"
+    "@chaoying/flect": "0.2.4"
   }
 }

docs/docs-ui/src/components/code-block.tsx

@@ -1,6 +1,41 @@
-import { lazy } from "react";
-import { CodeBlockLazyProps } from "@/components/code-block-lazy";
+import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
+import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
+import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
+import dracula from "react-syntax-highlighter/dist/esm/styles/prism/dracula";
+import { CopyButton } from "@chaoying/flect/components";
 
-export type { CodeBlockLazyProps as CodeBlockProps };
+import { cn } from "@/lib/utils";
 
-export const CodeBlock = lazy(() => import("./code-block-lazy.tsx"));
+SyntaxHighlighter.registerLanguage("python", python);
+SyntaxHighlighter.registerLanguage("tsx", tsx);
+
+export type CodeBlockProps = {
+  package: "docs-ui";
+  type: "code-block";
+  subType: "code-block";
+  className?: string;
+  text: string;
+  language?: string;
+};
+
+export function CodeBlock(props: CodeBlockProps) {
+  return (
+    <div className="relative">
+      <CopyButton
+        package="flect"
+        type="copy-button"
+        value={props.text}
+        className="absolute right-4 top-3 z-20 h-6 w-6 p-1.5"
+      />
+      <SyntaxHighlighter
+        className={cn(props.className)}
+        PreTag="div"
+        language={props.language}
+        style={dracula}
+        wrapLongLines
+      >
+        {props.text}
+      </SyntaxHighlighter>
+    </div>
+  );
+}

docs/docs-ui/src/components/markdown.tsx

@@ -1,6 +1,46 @@
-import { lazy } from "react";
-import { MarkdownLazyProps } from "@/components/markdown-lazy";
+import { cn } from "@/lib/utils";
+import ReactMarkdown, { Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { CodeBlock } from "@/components/code-block";
 
-export type { MarkdownLazyProps as MarkdownProps };
+export interface MarkdownProps {
+  package: "docs-ui";
+  type: "markdown";
+  subType: "markdown";
+  className?: string;
+  text: string;
+}
 
-export const Markdown = lazy(() => import("./markdown-lazy.tsx"));
+export function Markdown(props: MarkdownProps) {
+  const { text, className } = props;
+  const components: Components = {
+    code({ children, className }) {
+      const language = /language-(\w+)/.exec(className || "");
+      if (!language) {
+        return <code className={className}>{children}</code>;
+      }
+      return (
+        <CodeBlock
+          package="docs-ui"
+          type="code-block"
+          subType="code-block"
+          text={children as string}
+          language={language?.[1]}
+        />
+      );
+    },
+  };
+
+  return (
+    <ReactMarkdown
+      className={cn(
+        "prose prose-pre:bg-transparent prose-pre:p-0 max-w-screen-lg",
+        className,
+      )}
+      remarkPlugins={[remarkGfm]}
+      components={components}
+    >
+      {text}
+    </ReactMarkdown>
+  );
+}

docs/docs-ui/vite.config.ts

@@ -1,6 +1,7 @@
 import path from "path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { splitVendorChunkPlugin } from "vite";
 
 const serverConfig = {
   host: true,
@@ -10,11 +11,8 @@ const serverConfig = {
   },
 };
 
-const version = process.env.npm_package_version;
-
 export default defineConfig({
-  plugins: [react()],
-  base: `https://unpkg.com/docs-ui@${version}/dist/`,
+  plugins: [react(), splitVendorChunkPlugin()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),

docs/src/documentation/app/group__docs/actions/dynamic__action_type/page.py

@@ -81,12 +81,12 @@
 async def sitemap(dynamic_url: str) -> list[Sitemap]:
     return [
         Sitemap(
-            url=dynamic_url.format(type=type),
+            url=dynamic_url.format(action_type=action_type),
             last_modified=None,
             change_frequency=None,
             priority=None,
         )
-        for type in ACTION_DOCS_MAP
+        for action_type in ACTION_DOCS_MAP
     ]
 
 

docs/src/documentation/main.py

@@ -7,7 +7,5 @@
     document_app,
     docs_url="/documentation",
     debug=settings.debug,
-    prebuilt_uri="https://unpkg.com/@chaoying/[email protected]/dist/assets",
-    # prebuilt_uri="/Users/chaoying/dev/os/flect/docs/docs-ui/dist/assets",
-    #     prebuilt_uri="/Users/chaoying/dev/os/flect/src/npm-flect-prebuilt/dist/assets"
+    prebuilt_uri="https://unpkg.com/[email protected]/dist/assets",
 )