docs: add a page to highlight demo and examples #602
Conversation
Its content is close to that of the main README file. Also fix a few typos in the main README file.
WalkthroughThis pull request focuses on documentation improvements for the maxGraph library. The changes primarily involve updating the Changes
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
README.md (2)
146-146: Fix typo in webpack nameThe word "Webapck" is misspelled. It should be "Webpack".
Line range hint
142-155: Consider improving the examples section structureThe examples section could be better organized by grouping related examples together. Consider using subsections:
- Interactive Demos (Storybook)
- TypeScript Examples
- JavaScript Examples
- Framework Integration Examples
Here's a suggested structure:
For more complete examples than the "Getting started" example, please have a look at: +## Interactive Demos - the [storybook stories](packages/html/stories) which demonstrates various features of maxGraph. - The stories are currently written in `JavaScript` and will be progressively migrated to `TypeScript`. - A live instance is available on the [maxGraph website](https://maxgraph.github.io/maxGraph/demo). +## TypeScript Examples - the [ts-example](packages/ts-example) project/application that demonstrates how to define and use custom `Shapes` with `maxGraph`. It is a vanilla TypeScript application built by [Vite](https://vitejs.dev/). - the [ts-example-without-defaults](packages/ts-example-without-defaults) project/application that demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla TypeScript application built by [Vite](https://vitejs.dev/). +## JavaScript Examples - the [js-example](packages/js-example) project/application that demonstrates how import and export the `maxGraph` model with XML data. It is a vanilla JavaScript application built by [Webpack](https://webpack.js.org/). - the [js-example-without-defaults](packages/js-example-without-defaults) project/application that demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla JavaScript application built by [Webpack](https://webpack.js.org/). +## Framework Integration - the https://github.com/maxGraph/maxgraph-integration-examples repository which shows how to integrate `maxGraph` with different frameworks and build tools.🧰 Tools
🪛 LanguageTool
[locale-violation] ~142-~142: In American English, “take a look” is more commonly used.
Context: ...n the “Getting started” example, please have a look at: - the [storybook stories](packages...(HAVE_A_LOOK)
[uncategorized] ~149-~149: Possible missing preposition found.
Context: ...oject/application that demonstrates how import and export themaxGraphmodel with XM...(AI_HYDRA_LEO_MISSING_TO)
packages/website/docs/demo-and-examples.md (4)
9-11: Fix markdown list indentationThe nested list items under storybook stories are using 4 spaces for indentation. According to markdown best practices, nested lists should use 2 spaces.
- the [storybook stories](https://github.com/maxGraph/maxGraph/tree/main/packages/html/stories) which demonstrates various features of maxGraph. - - The stories are currently written in `JavaScript` and will be progressively migrated to `TypeScript`. - - A live instance is available on the [maxGraph website](https://maxgraph.github.io/maxGraph/demo). + - The stories are currently written in `JavaScript` and will be progressively migrated to `TypeScript`. + - A live instance is available on the [maxGraph website](https://maxgraph.github.io/maxGraph/demo).🧰 Tools
🪛 Markdownlint (0.37.0)
10-10: Expected: 2; Actual: 4
Unordered list indentation(MD007, ul-indent)
11-11: Expected: 2; Actual: 4
Unordered list indentation(MD007, ul-indent)
14-15: Fix grammatical issues and typosThere are a few issues to address:
- Missing preposition "to" in "demonstrates how import"
- "Webapck" is misspelled (should be "Webpack")
-the [js-example](https://github.com/maxGraph/maxGraph/tree/main/packages/js-example) project/application that demonstrates how import and export the `maxGraph` model with XML data. It is a vanilla JavaScript application built by [Webapck](https://webpack.js.org/). -the [js-example-without-defaults](https://github.com/maxGraph/maxGraph/tree/main/packages/js-example-without-defaults) project/application that demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla JavaScript application built by [Webapck](https://webpack.js.org/). +the [js-example](https://github.com/maxGraph/maxGraph/tree/main/packages/js-example) project/application that demonstrates how to import and export the `maxGraph` model with XML data. It is a vanilla JavaScript application built by [Webpack](https://webpack.js.org/). +the [js-example-without-defaults](https://github.com/maxGraph/maxGraph/tree/main/packages/js-example-without-defaults) project/application that demonstrates how to not use defaults plugins and style defaults (shapes, perimeters, ...). It is a vanilla JavaScript application built by [Webpack](https://webpack.js.org/).🧰 Tools
🪛 LanguageTool
[uncategorized] ~14-~14: Possible missing preposition found.
Context: ...oject/application that demonstrates how import and export themaxGraphmodel with XM...(AI_HYDRA_LEO_MISSING_TO)
16-16: Format bare URL as markdown linkThe bare URL should be formatted as a proper markdown link for consistency.
-the https://github.com/maxGraph/maxgraph-integration-examples repository which shows how to integrate `maxGraph` with different frameworks and build tools. +the [maxgraph-integration-examples](https://github.com/maxGraph/maxgraph-integration-examples) repository which shows how to integrate `maxGraph` with different frameworks and build tools.🧰 Tools
🪛 Markdownlint (0.37.0)
16-16: null
Bare URL used(MD034, no-bare-urls)
19-19: Improve grammar in notice sectionThe sentence structure could be improved for better clarity.
-Notice that some elements produced by `maxGraph` require to use [CSS and images](./usage/css-and-images.md) provided in the npm package. +Notice that some elements produced by `maxGraph` require [CSS and images](./usage/css-and-images.md) provided in the npm package.🧰 Tools
🪛 LanguageTool
[grammar] ~19-~19: Did you mean “using”? Or maybe you should add a pronoun? In active voice, ‘require’ + ‘to’ takes an object, usually a pronoun.
Context: ...elements produced bymaxGraphrequire to use [CSS and images](./usage/css-and-images...(ALLOW_TO)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
README.md(2 hunks)packages/website/docs/demo-and-examples.md(1 hunks)packages/website/docs/development/_category_.json(1 hunks)packages/website/docs/known-issues.md(1 hunks)packages/website/docs/manual/_category_.json(1 hunks)packages/website/docs/usage/_category_.json(1 hunks)
✅ Files skipped from review due to trivial changes (4)
- packages/website/docs/usage/category.json
- packages/website/docs/manual/category.json
- packages/website/docs/development/category.json
- packages/website/docs/known-issues.md
🧰 Additional context used
🪛 LanguageTool
README.md
[locale-violation] ~142-~142: In American English, “take a look” is more commonly used.
Context: ...n the “Getting started” example, please have a look at: - the [storybook stories](packages...
(HAVE_A_LOOK)
packages/website/docs/demo-and-examples.md
[locale-violation] ~7-~7: In American English, “take a look” is more commonly used.
Context: ...e](./manual/getting-started.md), please have a look at: - the [storybook stories](https://...
(HAVE_A_LOOK)
[uncategorized] ~14-~14: Possible missing preposition found.
Context: ...oject/application that demonstrates how import and export the maxGraph model with XM...
(AI_HYDRA_LEO_MISSING_TO)
[grammar] ~19-~19: Did you mean “using”? Or maybe you should add a pronoun? In active voice, ‘require’ + ‘to’ takes an object, usually a pronoun.
Context: ...elements produced by maxGraph require to use [CSS and images](./usage/css-and-images...
(ALLOW_TO)
🪛 Markdownlint (0.37.0)
packages/website/docs/demo-and-examples.md
10-10: Expected: 2; Actual: 4
Unordered list indentation
(MD007, ul-indent)
11-11: Expected: 2; Actual: 4
Unordered list indentation
(MD007, ul-indent)
16-16: null
Bare URL used
(MD034, no-bare-urls)
Improve wording and grammar Fix typos Use links instead of bare url Add a comment in the documentation about content duplicated with the main README
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
README.md (1)
153-153: Add missing comma before "which"Add a comma before "which" to improve readability.
-the [maxgraph-integration-examples](https://github.com/maxGraph/maxgraph-integration-examples) repository which shows how to integrate `maxGraph` with different frameworks and build tools. +the [maxgraph-integration-examples](https://github.com/maxGraph/maxgraph-integration-examples) repository, which shows how to integrate `maxGraph` with different frameworks and build tools.🧰 Tools
🪛 LanguageTool
[uncategorized] ~153-~153: Possible missing comma found.
Context: ...maxGraph/maxgraph-integration-examples) repository which shows how to integratemaxGraph...(AI_HYDRA_LEO_MISSING_COMMA)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
README.md(1 hunks)packages/website/docs/demo-and-examples.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/website/docs/demo-and-examples.md
🧰 Additional context used
🪛 LanguageTool
README.md
[uncategorized] ~153-~153: Possible missing comma found.
Context: ...maxGraph/maxgraph-integration-examples) repository which shows how to integrate maxGraph...
(AI_HYDRA_LEO_MISSING_COMMA)
🔇 Additional comments (1)
README.md (1)
140-155: Documentation improvements look great!
The changes effectively enhance the Examples section by:
- Improving clarity and readability
- Providing comprehensive information about available demos
- Adding clear descriptions for each example
- Including proper references to both TypeScript and JavaScript implementations
🧰 Tools
🪛 LanguageTool
[uncategorized] ~153-~153: Possible missing comma found.
Context: ...maxGraph/maxgraph-integration-examples) repository which shows how to integrate maxGraph...
(AI_HYDRA_LEO_MISSING_COMMA)
The content of the new page is an extract of the main README file.
In the the main README file, also fix a few typos, enhance readability and structure.
Screenshots
Summary by CodeRabbit
Summary by CodeRabbit
New Features
maxGraphlibrary.Bug Fixes
README.mdfile for improved clarity.Documentation
README.md.Chores