feat: add react ssr example

bytedance · Jun 21, 2020 · 80fa166 · 80fa166
1 parent 147c343
commit 80fa166
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 0 deletions.
diff --git a/examples/react-ssr/.gitignore b/examples/react-ssr/.gitignore
@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
diff --git a/examples/react-ssr/README.md b/examples/react-ssr/README.md
@@ -0,0 +1,3 @@
+# example-react-ssr
+
+An example to use ByteMD in React SSR with Next.js
diff --git a/examples/react-ssr/package.json b/examples/react-ssr/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "example-react-ssr",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "9.4.4",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
+  }
+}
diff --git a/examples/react-ssr/pages/_app.js b/examples/react-ssr/pages/_app.js
@@ -0,0 +1,8 @@
+import 'github-markdown-css';
+import 'highlight.js/styles/vs.css';
+import 'katex/dist/katex.css';
+import 'bytemd/dist/index.css';
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
diff --git a/examples/react-ssr/pages/index.js b/examples/react-ssr/pages/index.js
@@ -0,0 +1,85 @@
+import Head from 'next/head';
+import { Editor } from 'bytemd/react';
+import highlight from '@bytemd/plugin-highlight';
+import math from '@bytemd/plugin-math';
+// import mermaid from '@bytemd/plugin-mermaid';
+import { useMemo, useState, useEffect, Fragment } from 'react';
+
+export default function Home() {
+  const [value, setValue] = useState('');
+  const [enabled, setEnabled] = useState({
+    mermaid: true,
+    highlight: true,
+    math: true,
+  });
+
+  useEffect(() => {
+    const init = async () => {
+      const res = await fetch(
+        'https://raw.githubusercontent.com/bytedance/bytemd/master/assets/demo.md'
+      );
+      const text = await res.text();
+      setValue(text);
+    };
+
+    init();
+  }, []);
+
+  const plugins = useMemo(
+    () =>
+      [
+        // enabled.mermaid && mermaid(), // TODO: https://github.com/vercel/next.js/issues/706
+        enabled.highlight && highlight(),
+        enabled.math && math(),
+      ].filter((x) => x),
+    [enabled]
+  );
+
+  return (
+    <div>
+      <Head>
+        <title>Create Next App</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <div style={{ padding: '10px 0' }}>
+        Plugins:
+        {['math', 'highlight', 'mermaid'].map((p) => (
+          <Fragment key={p}>
+            {' '}
+            <label>
+              <input
+                type="checkbox"
+                checked={enabled[p]}
+                onChange={(e) => {
+                  const { checked } = e.target;
+                  setEnabled((v) => ({
+                    ...v,
+                    [p]: checked,
+                  }));
+                }}
+              />
+              {p}
+            </label>
+          </Fragment>
+        ))}
+      </div>
+      <Editor
+        value={value}
+        plugins={plugins}
+        onChange={(v) => {
+          setValue(v);
+        }}
+      />
+
+      <style jsx global>{`
+        body {
+          margin: 0 10px;
+        }
+        .bytemd {
+          height: 90vh !important;
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/examples/react-ssr/public/favicon.ico b/examples/react-ssr/public/favicon.ico