feat(site): add example/components

packages/graphin-site/examples/components/toolbar/demo/Simple.jsx

@@ -0,0 +1,30 @@
+/* eslint-disable no-undef */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Card } from 'antd';
+import Graphin, { Utils } from '@antv/graphin';
+import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
+import { Toolbar, ContextMenu } from '@antv/graphin-components';
+import '@antv/graphin-components/dist/index.css'; // Graphin 组件 CSS
+
+const data = Utils.mock(10)
+  .circle()
+  .graphin();
+
+const App = () => {
+  return (
+    <div>
+      <Graphin data={data} layout={{ name: 'concentric' }}>
+        <Toolbar />
+        <ContextMenu
+          render={() => {
+            return <Card title="Card title">Card content</Card>;
+          }}
+        />
+      </Graphin>
+    </div>
+  );
+};
+const rootElement = document.getElementById('container');
+ReactDOM.render(<App />, rootElement);

packages/graphin-site/examples/components/toolbar/demo/meta.json

@@ -0,0 +1,13 @@
+{
+    "title": {
+        "zh": "中文分类",
+        "en": "Category"
+    },
+    "demos": [
+        {
+            "filename": "renderRandomData.jsx",
+            "title": "渲染节点：无布局信息",
+            "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
+        }
+    ]
+}

packages/graphin-site/examples/components/toolbar/index.zh.md

@@ -0,0 +1,9 @@
+---
+title: toolbar 工具栏
+order: 0
+redirect_from:
+  - /zh/examples
+  - /en/examples
+---
+
+Toolbar 工具栏

packages/graphin-site/gatsby-browser.js

@@ -4,8 +4,10 @@
 window.react = require('react');
 // eslint-disable-next-line import/no-extraneous-dependencies
 window.reactDom = require('react-dom');
-window.graphin = require('@antv/graphin');
 window.antd = require('antd');
+window.graphin = require('@antv/graphin');
+window.graphinComponents = require('@antv/graphin-components');
 
 require('@antv/graphin/dist/index.css');
+require('@antv/graphin-components/dist/index.css');
 require('antd/dist/antd.css');

packages/graphin-site/gatsby-config.js

@@ -105,6 +105,13 @@ module.exports = {
           en: 'shape',
         },
       },
+      {
+        slug: 'components',
+        title: {
+          zh: '分析组件',
+          en: 'components',
+        },
+      },
     ],
     docsearchOptions: {
       apiKey: '159c16127929bd9fe6a3087f9ddddcb9',

packages/graphin-site/gatsby-node.js

@@ -1,9 +1,10 @@
 exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) => {
-    actions.setWebpackConfig({
-        resolve: {
-            alias: {
-                react: require.resolve('react'),
-            },
-        },
-    });
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        react: require.resolve('react'),
+        'react-dom': require.resolve('react-dom'),
+      },
+    },
+  });
 };