Merge pull request #37 from ZenUml/feat/redesign

feat: introduce ZenUML editor

Author: MrCoder

docs/intro.md

@@ -8,6 +8,14 @@ Let's discover **Docusaurus in less than 5 minutes**.
 
 ## Getting Started
 
+```zenuml title=Hello%20World
+new A {
+  b = new B
+  return b
+}
+
+```
+
 Get started by **creating a new site**.
 
 Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.

docusaurus.config.ts

@@ -1,6 +1,7 @@
 import { themes as prismThemes } from 'prism-react-renderer';
 import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
+import ZenUMLPlugin from './src/plugins/zenuml';
 
 const config: Config = {
   title: 'ZenUML',
@@ -58,22 +59,17 @@ const config: Config = {
     [
       'classic',
       {
-        docs: false,
-        blog: false,
-        // docs: {
-        //   sidebarPath: './sidebars.ts',
-        //   // Please change this to your repo.
-        //   // Remove this to remove the "edit this page" links.
-        //   editUrl:
-        //     'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
-        // },
-        // blog: {
-        //   showReadingTime: true,
-        //   // Please change this to your repo.
-        //   // Remove this to remove the "edit this page" links.
-        //   editUrl:
-        //     'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
-        // },
+        // remove false to enable docs
+        docs: false && {
+          sidebarPath: './sidebars.ts',
+          editUrl: 'https://github.com/ZenUml/docs',
+          remarkPlugins: [ZenUMLPlugin],
+        },
+        // remove false to enable blog
+        blog: false && {
+          showReadingTime: true,
+          editUrl: 'https://github.com/ZenUml/docs',
+        },
         theme: {
           customCss: './src/css/custom.css',
         },
@@ -176,7 +172,7 @@ const config: Config = {
             // },
             {
               label: 'GitHub',
-              href: 'https://github.com/facebook/docusaurus',
+              href: 'https://github.com/ZenUml',
             },
             {
               label: 'EULA',

package.json

@@ -31,7 +31,8 @@
     "eslint-config-prettier": "^9.0.0",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.0",

pnpm-lock.yaml

@@ -33,3 +33,11 @@
   --ifm-color-primary-lightest: #00c3ff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.zenuml-embed {
+  border-radius: 6px;
+  overflow: hidden;
+  font-size: 0;
+  margin-bottom: 20px;
+  border: 1px solid #dadde1;
+}

src/css/custom.css

@@ -25,6 +25,7 @@ div[class^='announcementBar_'] [aria-label='Close'] {
 
 .subtitle {
   max-width: 760px;
+  color: #fff;
   margin: 0 auto;
 }
 
@@ -41,8 +42,9 @@ div[class^='announcementBar_'] [aria-label='Close'] {
 }
 
 .getStarted {
-  border: 1px solid var(--ifm-font-color-base-inverse);
-  box-shadow: inset 0 0 0 1px var(--ifm-font-color-base-inverse);
+  color: #fff;
+  border: 1px solid #fff;
+  box-shadow: inset 0 0 0 1px #fff;
 }
 
 .container {

src/pages/index.module.css

@@ -23,7 +23,7 @@ function HomepageHeader() {
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className={styles.container}>
         <div className={styles.left}>
-          <Heading as="h1" className="hero__title">
+          <Heading as="h1" className={clsx('hero__title', styles.title)}>
             Create diagrams faster and better
           </Heading>
           <p className={clsx('hero__subtitle', styles.subtitle)}>

src/pages/index.tsx

@@ -0,0 +1,63 @@
+import { visit } from 'unist-util-visit';
+
+function attr(name, value) {
+  return {
+    type: 'mdxJsxAttribute',
+    name,
+    value,
+  };
+}
+
+async function handleNode(node) {
+  const code = encodeURIComponent(
+    JSON.stringify({
+      js: node.value,
+    }),
+  );
+  const params = new URLSearchParams(node.meta);
+
+  const jsxNode = {
+    type: 'mdxJsxTextElement',
+    name: 'div',
+    attributes: [attr('className', 'zenuml-embed')],
+    children: [
+      {
+        type: 'mdxJsxTextElement',
+        name: 'iframe',
+        attributes: [
+          attr(
+            'src',
+            `https://app.zenuml.com?embed=1&code=${code}&title=${
+              params.get('title') || ''
+            }&stickyOffset=30`,
+          ),
+          attr('width', '100%'),
+          attr('height', '600px'),
+          attr('frameBorder', '0'),
+        ],
+        children: [],
+      },
+    ],
+  };
+
+  Object.keys(node).forEach((key) => delete node[key]);
+  Object.keys(jsxNode).forEach((key) => (node[key] = jsxNode[key]));
+}
+
+const plugin = () => {
+  const transformer = async (ast) => {
+    const nodesToProcess = [];
+    visit(ast, 'code', (node) => {
+      // Need help constructing this AST node?
+      // Use the MDX Playground and explore what your output mdast should look like
+      // https://mdxjs.com/playground/
+      if (node.lang === 'zenuml') {
+        nodesToProcess.push(handleNode(node));
+      }
+    });
+    await Promise.all(nodesToProcess);
+  };
+  return transformer;
+};
+
+export default plugin;