diff --git a/README.md b/README.md index d60c5a7768..662ec87863 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ Please try it in your application and [submit an issue](https://github.com/maxGr You can also test `maxGraph` by running the [Storybook examples](#development) or [build the npm package locally](#build-local-npm-package) to get the latest changes. ## Install - + Install the latest version of `maxGraph` from the [npm registry](https://www.npmjs.com/package/@maxgraph/core). @@ -59,10 +59,10 @@ pnpm pnpm add @maxgraph/core ``` - + ## Getting Started - + Here is an example that shows how to display a rectangle connected to an orange circle. @@ -120,9 +120,9 @@ graph.batchUpdate(() => { You will see something like in the following _maxGraph panning_ demo: -![maxGraph panning demo](packages/website/docs/manual/assets/getting-started/first-graph.gif "maxGraph panning demo") +![maxGraph panning demo](packages/website/docs/assets/getting-started/first-graph.gif "maxGraph panning demo") - + ## Documentation @@ -167,12 +167,12 @@ For a complete guide, see the [dedicated migration page](packages/website/docs/u ## Support - + For usage question, please open a new [discussion](https://github.com/maxGraph/maxGraph/discussions/categories/q-a) on GitHub. You can also use [GitHub discussions](https://github.com/maxGraph/maxGraph/discussions) for other topics like `maxGraph` development or to get the latest news. For bug reports, feature requests, or other issues, please open a new [issue](https://github.com/maxGraph/maxGraph/issues) on GitHub. - + ## History diff --git a/packages/website/docs/manual/assets/getting-started/first-graph.gif b/packages/website/docs/assets/getting-started/first-graph.gif similarity index 100% rename from packages/website/docs/manual/assets/getting-started/first-graph.gif rename to packages/website/docs/assets/getting-started/first-graph.gif diff --git a/packages/website/docs/manual/assets/getting-started/vertex-style.png b/packages/website/docs/assets/getting-started/vertex-style.png similarity index 100% rename from packages/website/docs/manual/assets/getting-started/vertex-style.png rename to packages/website/docs/assets/getting-started/vertex-style.png diff --git a/packages/website/docs/demo-and-examples.md b/packages/website/docs/demo-and-examples.md index b145ee4969..7bc22cf3b7 100644 --- a/packages/website/docs/demo-and-examples.md +++ b/packages/website/docs/demo-and-examples.md @@ -1,10 +1,20 @@ --- -sidebar_position: 2 +sidebar_position: 3 --- # Demos and Examples [//]: # (extract of /README.md) -For more comprehensive examples than the [“Getting started” example](./manual/getting-started.mdx), this page provides a list of demos and examples to help you understand how to use `maxGraph` and integrate it into your projects. + + +:::tip + +The documentation does not cover all the features available in `maxGraph`. However, `maxGraph` does provide numerous examples. These examples show how to use the features and how `maxGraph` can be extended to meet new needs. + +This page includes links to the examples and demos available in the `maxGraph` repository. + +::: + +For more comprehensive examples than the [“Getting started” example](./getting-started.mdx), this page provides a list of demos and examples to help you understand how to use `maxGraph` and integrate it into your projects. Note that they are based on `maxGraph` features, which require the use of [CSS and images](./usage/css-and-images.md) provided in the npm package. diff --git a/packages/website/docs/manual/getting-started.mdx b/packages/website/docs/getting-started.mdx similarity index 97% rename from packages/website/docs/manual/getting-started.mdx rename to packages/website/docs/getting-started.mdx index ee9d2f4798..19843f207a 100644 --- a/packages/website/docs/manual/getting-started.mdx +++ b/packages/website/docs/getting-started.mdx @@ -8,15 +8,6 @@ import TabItem from '@theme/TabItem'; # Getting Started -:::warning - -The content of this page is a work in progress. The original `mxGraph` manual is progressively migrated here. - -Original documentation: [Getting Started (mxGraph)](https://jgraph.github.io/mxgraph/docs/manual.html#2) - -::: - - :::note This manual is licensed under [Creative Commons Attribution 4.0 International (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/). \ @@ -225,6 +216,7 @@ vertexStyle.strokeColor = 'green'; ``` Your vertices will now have a dashed green border with a width of 2 pixels. + ![Example of a vertex with green dashed border styling](./assets/getting-started/vertex-style.png) diff --git a/packages/website/docs/intro.md b/packages/website/docs/intro.md index c999c8fab0..c65b570e3e 100644 --- a/packages/website/docs/intro.md +++ b/packages/website/docs/intro.md @@ -34,9 +34,7 @@ To visualize the documentation for a specific version (and the corresponding dem ## Quick Start -Please check the maxGraph repository **README**: -- [installation](https://github.com/maxGraph/maxGraph#install) -- [getting started](https://github.com/maxGraph/maxGraph#getting-started) +To know how to install maxGraph and how to implement a first example, take a look at the [Getting Started](./getting-started.mdx) guide. ## Next Steps @@ -45,12 +43,4 @@ Let's continue with the [Manual](./manual/index.md) to understand the `maxGraph` For more information on how to use specific features, please refer to the [Usage](/docs/category/usage) documentation. -:::tip - -The documentation does not cover all the features available in `maxGraph`. However, `maxGraph` does provide numerous examples. These examples show how to use the features and how `maxGraph` can be extended to meet new needs: -- To see the features in action, please play with the [live demo](https://maxgraph.github.io/maxGraph/demo/) -- Source code for the stories is available at https://github.com/maxGraph/maxGraph/blob/main/packages/html/stories -Other examples are also listed in the [project README](https://github.com/maxGraph/maxGraph/blob/main/README.md#examples). - -::: diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts index 61fe2e45cd..b1da1f4d7d 100644 --- a/packages/website/docusaurus.config.ts +++ b/packages/website/docusaurus.config.ts @@ -166,6 +166,11 @@ const config: Config = { '@docusaurus/plugin-client-redirects', { redirects: [ + // docs/manual/getting-started -> /docs/getting-started + { + to: '/docs/getting-started', + from: '/docs/manual/getting-started', + }, // docs/manual/model-and-cells -> /docs/manual/model-and-transactions { to: '/docs/manual/model-and-transactions',