From 2bbd5989ad8e7d804db373c6859af8139f61ae6b Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 7 Jan 2025 13:39:45 +0100 Subject: [PATCH 1/2] docs: highlight the getting started page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously, the start page was located in the “manual” folder and was therefore not very visible. This page is the first point of entry for newcomers and therefore needs to be more visible. It has now been moved to 2nd position in the menu to give it greater prominence. The introduction page has also been updated to link to the documentation rather than to the repository README. --- README.md | 14 +++++++------- .../assets/getting-started/first-graph.gif | Bin .../assets/getting-started/vertex-style.png | Bin packages/website/docs/demo-and-examples.md | 14 ++++++++++++-- .../website/docs/{manual => }/getting-started.mdx | 10 +--------- packages/website/docs/intro.md | 12 +----------- packages/website/docusaurus.config.ts | 5 +++++ 7 files changed, 26 insertions(+), 29 deletions(-) rename packages/website/docs/{manual => }/assets/getting-started/first-graph.gif (100%) rename packages/website/docs/{manual => }/assets/getting-started/vertex-style.png (100%) rename packages/website/docs/{manual => }/getting-started.mdx (97%) 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..f1cef89376 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, have 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', From 4502e376ff244dda2892171215e11bb6501af6cd Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Tue, 7 Jan 2025 13:48:58 +0100 Subject: [PATCH 2/2] improve wording --- packages/website/docs/intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/docs/intro.md b/packages/website/docs/intro.md index f1cef89376..c65b570e3e 100644 --- a/packages/website/docs/intro.md +++ b/packages/website/docs/intro.md @@ -34,7 +34,7 @@ To visualize the documentation for a specific version (and the corresponding dem ## Quick Start -To know how to install maxGraph and how to implement a first example, have a look at the [Getting Started](./getting-started.mdx) guide. +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