Skip to content

docs: highlight the getting started page #625

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tbouffard merged 2 commits into from
Jan 8, 2025
Merged

docs: highlight the getting started page #625

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2bbd598
docs: highlight the getting started page
tbouffard Jan 7, 2025
4502e37
improve wording
tbouffard Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<!-- copied into packages/website/docs/manual/getting-started.mdx -->
<!-- copied into packages/website/docs/getting-started.mdx -->

Install the latest version of `maxGraph` from the [npm registry](https://www.npmjs.com/package/@maxgraph/core).

Expand All @@ -59,10 +59,10 @@ pnpm
pnpm add @maxgraph/core
```

<!-- END OF 'copied into packages/website/docs/manual/getting-started.mdx' -->
<!-- END OF 'copied into packages/website/docs/getting-started.mdx' -->

## Getting Started
<!-- copied into packages/website/docs/manual/getting-started.mdx -->
<!-- copied into packages/website/docs/getting-started.mdx -->

Here is an example that shows how to display a rectangle connected to an orange circle.

Expand Down Expand Up @@ -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")

<!-- END OF 'copied into packages/website/docs/manual/getting-started.mdx' -->
<!-- END OF 'copied into packages/website/docs/getting-started.mdx' -->

## Documentation

Expand Down Expand Up @@ -167,12 +167,12 @@ For a complete guide, see the [dedicated migration page](packages/website/docs/u

## Support

<!-- copied into packages/website/docs/manual/getting-started.mdx -->
<!-- copied into packages/website/docs/getting-started.mdx -->
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.
<!-- END OF 'copied into packages/website/docs/manual/getting-started.mdx' -->
<!-- END OF 'copied into packages/website/docs/getting-started.mdx' -->


## History
Expand Down
0 ...al/assets/getting-started/first-graph.gif → ...cs/assets/getting-started/first-graph.gif
View file
Open in desktop
File renamed without changes
0 ...l/assets/getting-started/vertex-style.png → ...s/assets/getting-started/vertex-style.png
View file
Open in desktop
File renamed without changes
14 changes: 12 additions & 2 deletions packages/website/docs/demo-and-examples.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,20 @@
---
sidebar_position: 2
sidebar_position: 3
---

# Demos and Examples
[//]: # (extract of <rootdir>/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.

Expand Down
10 changes: 1 addition & 9 deletions ...s/website/docs/manual/getting-started.mdx → packages/website/docs/getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/). \
Expand Down Expand Up @@ -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)


Expand Down
12 changes: 1 addition & 11 deletions packages/website/docs/intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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).

:::
5 changes: 5 additions & 0 deletions packages/website/docusaurus.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down