feat: update guide (#24)

* feat: support jsonl file

* chore: update pnpm-lock

* chore: format files

* chore: add pyproject rules

* feat: update guide

* feat: update guide

Author: myzxlin

packages/secretnote/src/components/sh-viewer/index.less

@@ -1,26 +1,25 @@
-import './index.less';
+import hljs from 'highlight.js';
+import { useEffect } from 'react';
+
+import 'highlight.js/styles/a11y-dark.css';
 
 interface IProps {
-  code: string[];
+  code: string;
   className?: string;
   style?: React.CSSProperties;
 }
 
-const ShViewer = (props: IProps) => {
-  const { code, className, style } = props;
+const ShViewer = ({ code }: IProps) => {
+  useEffect(() => {
+    hljs.highlightAll();
+  }, []);
 
   return (
-    <div className={`${className || ''} language-sh`} style={style}>
-      <pre>
-        <code>
-          {code.map((line, index) => (
-            <span className="line" key={index}>
-              <span className="caret">&gt;</span> <span className="code">{line}</span>
-            </span>
-          ))}
-        </code>
-      </pre>
-    </div>
+    <pre style={{ background: '#2b2b2b', padding: '12px 0', borderRadius: 8 }}>
+      <code className="language-bash" style={{ padding: '0 1em' }}>
+        {code}
+      </code>
+    </pre>
   );
 };
 

packages/secretnote/src/components/sh-viewer/index.tsx

@@ -12,7 +12,7 @@
   }
 
   .process {
-    width: 720px;
+    width: 800px;
     height: 100%;
 
     .header {

packages/secretnote/src/modules/welcome/index.less

@@ -30,23 +30,22 @@ interface DescriptionProps {
 const PrepareNodeDes = (props: DescriptionProps) => {
   return (
     <div className="step">
-      <div className="text">最简单的方式就是使用 docker image 启动两个计算节点。</div>
-      <ShViewer code={['docker run -it secretflow/secretnote']} />
       <div className="text">
-        启动成功后，我们可以打开地址
-        <a
-          className="link"
-          href="http://127.0.0.1:8090"
-          target="_blank"
-          rel="noreferrer"
-        >
-          127.0.0.1:8090
-        </a>
-        访问 secretnote
-        页面并在右上角节点管理区域将两个节点添加进来。(两个节点地址默认为 127.0.0.1:8090
-        和 127.0.0.1:8092)。
+        最简单的方式就是使用 docker image 启动两个计算节点。分别在两台机器上启动容器：
+      </div>
+      <ShViewer
+        code={`# alice 机器\ndocker run -it -p 8888:8888 -e "SELF_PARTY=alice" secretflow/secretnote:unstable-amd64`}
+      />
+      <ShViewer
+        code={`# bob 机器\ndocker run -it -p 8888:8888 -e "SELF_PARTY=bob" secretflow/secretnote:unstable-amd64`}
+      />
+      <div className="text">
+        启动成功后，可以通过访问任意一台机器的 Web
+        页面（例如：http://ip-alice:8888）访问
+        SecretNote，并在右上角节点管理区域将两个节点添加进来（两个节点地址为
+        http://ip-alice:8888 和 http://ip-bob:8888）。
       </div>
-      <img src={addNodeImgUrl} alt="add node" style={{ margin: 0 }} />
+      <img src={addNodeImgUrl} alt="add node" style={{ width: 450, margin: 0 }} />
       {!props.finished && (
         <Button type="link" onClick={() => props.done(0)}>
           完成