diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 9c98459f1..c1979da0b 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -9,7 +9,7 @@ on: - '.nvmrc' - 'packages/**/*' - '!packages/**/*.md' - - '!packages/docs/*' + - '!packages/website/**/*' - 'scripts/**/*' - 'babel.config.js' - 'package.json' @@ -21,7 +21,7 @@ on: - '.github/workflows/build.yml' - 'packages/**/*' - '!packages/**/*.md' - - '!packages/docs/*' + - '!packages/website/**/*' - 'scripts/**/*' - 'babel.config.js' - 'package.json' diff --git a/.github/workflows/generate-documentation.yml b/.github/workflows/generate-website.yml similarity index 54% rename from .github/workflows/generate-documentation.yml rename to .github/workflows/generate-website.yml index 595873ba4..5b8941127 100644 --- a/.github/workflows/generate-documentation.yml +++ b/.github/workflows/generate-website.yml @@ -1,14 +1,14 @@ -name: Generate documentation +name: Generate website on: pull_request: branches: - development paths: - - '.github/workflows/generate-documentation.yml' + - '.github/workflows/generate-website.yml' - '.nvmrc' - 'packages/core/*' - - 'packages/docs/*' + - 'packages/website/*' - 'package.json' jobs: @@ -25,3 +25,13 @@ jobs: - name: Build @maxgraph/core API docs working-directory: packages/core run: npm run docs:api + - name: Build website + working-directory: packages/website + run: npm run build + - name: Upload website artifact + uses: actions/upload-artifact@v3 + with: + name: website-${{github.sha}} + path: | + packages/core/build/api/ + packages/website/build/ diff --git a/.gitignore b/.gitignore index 7fd96f7f4..59cd9e288 100644 --- a/.gitignore +++ b/.gitignore @@ -22,7 +22,7 @@ package-lock.json /out/ # production -/build +build/ # misc .DS_Store diff --git a/README.md b/README.md index 7af8c9865..f3096b9f6 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ [![npm version](https://img.shields.io/npm/v/@maxgraph/core?color=blue&style=flat)](https://www.npmjs.com/package/@maxgraph/core) [![build status](https://github.com/maxGraph/maxGraph/workflows/Build/badge.svg)](https://github.com/maxGraph/maxGraph/actions/workflows/build.yml) - + `maxGraph` is a TypeScript library which can display and allow interaction with vector diagrams. At a high level, it provides: - **Nodes**, also known as **vertices** which are typically represented by shapes like rectangles. - **Edges** which can be lines and arrows which normally point between one node and another. @@ -12,7 +12,7 @@ It provides many of the diagramming features which would be expected by a piece or LibreOffice® Impress such as being able to resize, move or rotate nodes, but has a stronger focus on automatic layout algorithms and applications of [Graph Theory](https://en.wikipedia.org/wiki/Graph_theory). It is suited towards software which requires finer-grained customization of functionality than off-the-shelf packages. - + The `maxGraph` library uses no third-party software, it requires no plugins and can be integrated in virtually any framework (it's vanilla JS). @@ -107,11 +107,11 @@ graph.batchUpdate(() => { You will see something like in the following _maxGraph panning_ demo: -![maxGraph panning demo](packages/docs/images/maxgraph_demo.gif "maxGraph panning demo") +![maxGraph panning demo](docs/images/maxgraph_demo.gif "maxGraph panning demo") For more details, have a look at the [storybook stories](packages/html/stories). -Notice that some elements produced by `maxGraph` require to use [CSS and images](./packages/docs/css-and-images.md) provided in the npm package. +Notice that some elements produced by `maxGraph` require to use [CSS and images](packages/website/docs/usage/css-and-images.md) provided in the npm package. ## TypeScript support @@ -134,7 +134,7 @@ Until we provide a complete documentation, you can check the mxGraph resources `maxGraph` APIs are not fully compatible with `mxGraph` APIs. The concepts are the same, so experienced `mxGraph` users should be able to switch from `mxGraph` to `maxGraph` without issues. -For a complete guide, see the [dedicated migration page](packages/docs/migrate-from-mxgraph.md). +For a complete guide, see the [dedicated migration page](packages/website/docs/usage/migrate-from-mxgraph.md). ## History @@ -225,4 +225,4 @@ Examples of use can be found in the [maxgraph-integration-examples](https://gith ### Release -See the dedicated [release](packages/docs/release.md) page. +See the dedicated [release](packages/website/docs/development/release.md) page. diff --git a/packages/docs/images/maxgraph_demo.gif b/docs/images/maxgraph_demo.gif similarity index 100% rename from packages/docs/images/maxgraph_demo.gif rename to docs/images/maxgraph_demo.gif diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json index bcdcca5fb..dc87f39b0 100644 --- a/packages/core/tsconfig.json +++ b/packages/core/tsconfig.json @@ -13,7 +13,7 @@ }, "include": ["src/**/*.ts"], "typedocOptions": { - "out": "../docs/build/api", + "out": "build/api", "readme": "none", "excludeExternals": true, "excludePrivate": true diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore deleted file mode 100644 index 567609b12..000000000 --- a/packages/docs/.gitignore +++ /dev/null @@ -1 +0,0 @@ -build/ diff --git a/packages/website/.gitignore b/packages/website/.gitignore new file mode 100644 index 000000000..84ba12e04 --- /dev/null +++ b/packages/website/.gitignore @@ -0,0 +1,2 @@ +.docusaurus/ +build/ diff --git a/packages/website/README.md b/packages/website/README.md new file mode 100644 index 000000000..5e5cd1f90 --- /dev/null +++ b/packages/website/README.md @@ -0,0 +1,43 @@ +# Website + +This website is built using [Docusaurus 3](https://docusaurus.io/), a modern static website generator. + +### Installation + +``` +$ npm install +``` + +### Local Development + +``` +$ npm start +``` + +This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. + +### Build + +``` +$ npm build +``` + +This command generates static content into the `build` directory and can be served using any static contents hosting service. + + diff --git a/packages/website/babel.config.js b/packages/website/babel.config.js new file mode 100644 index 000000000..e00595dae --- /dev/null +++ b/packages/website/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: [require.resolve('@docusaurus/core/lib/babel/preset')], +}; diff --git a/packages/website/docs/development/_category_.json b/packages/website/docs/development/_category_.json new file mode 100644 index 000000000..a539abff7 --- /dev/null +++ b/packages/website/docs/development/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Development", + "position": 3, + "link": { + "type": "generated-index", + "description": "Everything you need to know when you are developing maxGraph." + } +} diff --git a/packages/docs/release.md b/packages/website/docs/development/release.md similarity index 91% rename from packages/docs/release.md rename to packages/website/docs/development/release.md index 5790dfb0f..34d639618 100644 --- a/packages/docs/release.md +++ b/packages/website/docs/development/release.md @@ -1,3 +1,7 @@ +--- +description: Explain how to do a release of maxGraph. +--- + # Release how-to This page explains the steps needed to release a new version of maxgraph@core. @@ -21,8 +25,8 @@ released. Rename it if necessary. - Close the milestone. Changes in the source code -- Update the version in [package.json](../core/package.json) and the `VERSION` constant in the [Client](../core/src/Client.ts) file. -- Update the [CHANGELOG](../../CHANGELOG.md) to list the major changes included in the new version. Be generic and add a +- Update the version in `packages/core/package.json` and the `VERSION` constant in the `packages/core/src/Client.ts` file. +- Update the `CHANGELOG` file to list the major changes included in the new version. Be generic and add a link to the future GitHub release that will contain detailed release notes, as shown below. ```markdown For more details, see the [0.1.0 Changelog](https://github.com/maxGraph/maxGraph/releases/tag/v0.1.0) on @@ -59,7 +63,7 @@ Create a [new draft release](https://github.com/maxGraph/maxGraph/releases/) - save it as a draft Generate the list of the major changes by using the [automatically generated release notes](https://docs.github.com/en/repositories/releasing-projects-on-github/automatically-generated-release-notes). -It is based on the labels of the merged Pull Requests included in this release and the [GitHub release configuration](../../.github/release.yml). +It is based on the labels of the merged Pull Requests included in this release and the [GitHub release configuration](https://github.com/maxGraph/maxGraph/blob/development/.github/release.yml). If the list is incorrect (for example, an item is not in the correct category), update the label(s) or the associated Pull Request and regenerate the list. diff --git a/packages/website/docs/intro.md b/packages/website/docs/intro.md new file mode 100644 index 000000000..6f7796271 --- /dev/null +++ b/packages/website/docs/intro.md @@ -0,0 +1,36 @@ +--- +sidebar_position: 1 +--- + +# Introduction + + +`maxGraph` is a TypeScript library which can display and allow interaction with vector diagrams. At a high level, it provides: +- **Nodes**, also known as **vertices** which are typically represented by shapes like rectangles. +- **Edges** which can be lines and arrows which normally point between one node and another. + +It provides many of the diagramming features which would be expected by a piece of presentation software like Microsoft® PowerPoint™ +or LibreOffice® Impress such as being able to resize, move or rotate nodes, but has a stronger focus on automatic layout +algorithms and applications of [Graph Theory](https://en.wikipedia.org/wiki/Graph_theory). It is suited towards software +which requires finer-grained customization of functionality than off-the-shelf packages. + + +## About this documentation + +:::warning + +This documentation is a **work in progress**. Please be patient, the content will be updated progressively. + +::: + + +## Getting Started + +Please check the maxGraph repository **README**: +- [installation](https://github.com/maxGraph/maxGraph/blob/development/README.md#install) +- [getting started](https://github.com/maxGraph/maxGraph/blob/development/README.md#getting-started) + + +## Usage + +Let's continue with the [Usage](/docs/category/usage) documentation. diff --git a/packages/website/docs/usage/_category_.json b/packages/website/docs/usage/_category_.json new file mode 100644 index 000000000..95126787b --- /dev/null +++ b/packages/website/docs/usage/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Usage", + "position": 2, + "link": { + "type": "generated-index", + "description": "Everything you need to know to use maxGraph." + } +} diff --git a/packages/docs/css-and-images.md b/packages/website/docs/usage/css-and-images.md similarity index 86% rename from packages/docs/css-and-images.md rename to packages/website/docs/usage/css-and-images.md index ae8edc392..b06f31bb5 100644 --- a/packages/docs/css-and-images.md +++ b/packages/website/docs/usage/css-and-images.md @@ -1,9 +1,13 @@ +--- +description: Integrate CSS and Images assets required by maxGraph. +--- + # CSS and Images ## CSS Some features of `maxGraph` create elements in the DOM to let interact with the `Graph`. -For instance, it happens hen using _Rubberband_, _Tooltip_, _MaxWindow_, _Editor_ and _Toolbar_. +For instance, it happens when using _Rubberband_, _Tooltip_, _MaxWindow_, _Editor_ and _Toolbar_. These elements require the application to provide CSS rules for correct display. diff --git a/packages/docs/migrate-from-mxgraph.md b/packages/website/docs/usage/migrate-from-mxgraph.md similarity index 95% rename from packages/docs/migrate-from-mxgraph.md rename to packages/website/docs/usage/migrate-from-mxgraph.md index 25bf21a16..b5dbf28e2 100644 --- a/packages/docs/migrate-from-mxgraph.md +++ b/packages/website/docs/usage/migrate-from-mxgraph.md @@ -9,9 +9,16 @@ Here's a breakdown of the proposed changes: 2. [General guidelines](#general-guidelines) 3. [Specific code changes](#specific-code-changes) -> **Note:** **⚠️⚠️⚠️ This page is under construction. ⚠️⚠️⚠️ +:::warning + +**This page is under construction.** + Comments are welcome by creating an [issue](https://github.com/maxGraph/maxGraph/issues) -or starting a [discussion](https://github.com/maxGraph/maxGraph/discussions/categories/q-a)!**. +or starting a [discussion](https://github.com/maxGraph/maxGraph/discussions/categories/q-a)!. + +Feel free to create a [Pull Request](https://github.com/maxGraph/maxGraph/pulls) to enrich the content or fix errors. + +::: The `maxGraph` APIs are not fully compatible with the `mxGraph` APIs, but the `maxGraph` APIs are close to the former `mxGraph` APIs. The concepts are the same, so experienced `mxGraph` users should be able to switch from `mxGraph` to `maxGraph` without problems. @@ -292,9 +299,9 @@ Several functions from the `mxGraphDataModel` class have been moved to the `Cell ### Misc -Codec renaming and output: https://github.com/maxGraph/maxGraph/pull/70 +- Codec renaming and output: https://github.com/maxGraph/maxGraph/pull/70 +- `mxDictionary`<T> to `Dictionary`<K, V> -mxDictionary -> Dictionary ### Event handling @@ -425,10 +432,9 @@ by a semicolon as follows: > Styles are a collection of key, value pairs and a stylesheet is a collection of named styles. The names are referenced by the cellstyle, which is stored -in with the following format: [stylename;|key=value;]. The +in 'mxCell.style' with the following format: [stylename;|key=value;]. The string is resolved to a collection of key, value pairs, where the keys are overridden with the values in the string. -> See also - https://jgraph.github.io/mxgraph/docs/tutorial.html#3.3 @@ -441,8 +447,11 @@ In maxGraph, the style is no more defined as a string but as a `CellStyle` objec Most of the time, the name of `CellStyle` properties is the same as the style keys in the mxGraph style. -⚠️⚠️⚠ **WARNING**: Be aware of the properties that have been renamed or whose value types have changed, as described in the [style-properties-change](./migrate-from-mxgraph.md#style-properties-change) paragraph. +:::warning +Be aware of the properties that have been renamed or whose value types have changed, as described in the [style-properties-change](./migrate-from-mxgraph.md#style-properties-change) paragraph. + +::: **Migration example** @@ -468,7 +477,7 @@ graph.insertVertex({ **Special migration case** In `mxGraph`, to not merge properties of the default style, the style string must start with a `;` (semicolon) as in `;style1;style2;prop1=value1;.....`. -This is documented in the [mxStylesheet documentation](jgraph/mxgraph@v4.2.2/javascript/src/js/view/mxStylesheet.js#L33-L38). +This is documented in the [mxStylesheet documentation](https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxStylesheet.js#L33-L38). > To override the default style for a cell, add a leading semicolon to the style definition, e.g. ;shadow=1 This is currently not supported in maxGraph: https://github.com/maxGraph/maxGraph/issues/154 "Add a way to not use default style properties when calculating cell styles". diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts new file mode 100644 index 000000000..acfd8cd39 --- /dev/null +++ b/packages/website/docusaurus.config.ts @@ -0,0 +1,136 @@ +import {themes as prismThemes} from 'prism-react-renderer'; +import type {Config} from '@docusaurus/types'; +import type * as Preset from '@docusaurus/preset-classic'; + +const config: Config = { + title: 'maxGraph', + tagline: 'A TypeScript library which can display and allow interaction with vector diagrams.', + favicon: 'img/favicon.ico', + + // Set the production url of your site here + url: 'https://maxgraph.github.io/', + // Set the // pathname under which your site is served + // For GitHub pages deployment, it is often '//' + baseUrl: '/', // TODO baseUrl: '/maxGraph/', + + // GitHub pages deployment config. + // If you aren't using GitHub pages, you don't need these. + organizationName: 'maxGraph', // Usually your GitHub org/user name. + projectName: 'maxGraph', // Usually your repo name. + + onBrokenLinks: 'throw', + onBrokenMarkdownLinks: 'warn', + + // Even if you don't use internationalization, you can use this field to set + // useful metadata like html lang. For example, if your site is Chinese, you + // may want to replace "en" with "zh-Hans". + i18n: { + defaultLocale: 'en', + locales: ['en'], + }, + + presets: [ + [ + 'classic', + { + docs: { + sidebarPath: './sidebars.ts', + // Please change this to your repo. + // Remove this to remove the "edit this page" links. + editUrl: + 'https://github.com/maxGraph/maxGraph/tree/main/packages/docs/', + }, + theme: { + customCss: './src/css/custom.css', + }, + } satisfies Preset.Options, + ], + ], + + themeConfig: { + // Replace with your project's social card + // image: 'img/docusaurus-social-card.jpg', + docs: { + sidebar: { + hideable: true, + }, + }, + navbar: { + title: 'maxGraph', + logo: { + alt: 'maxGraph Logo', + src: 'img/logo.svg', + }, + items: [ + { + type: 'docSidebar', + sidebarId: 'docsSidebar', + position: 'left', + label: 'Documentation', + }, + // {to: '/storybook', label: 'Demo', position: 'left'}, + // {to: '/docs/api', label: 'API', position: 'left'}, + { + href: 'https://github.com/maxGraph/maxGraph', + label: 'GitHub', + position: 'right', + }, + ], + }, + footer: { + style: 'dark', + links: [ + { + title: 'Content', + items: [ + { + label: 'Documentation', + to: '/docs/intro', + }, + // { + // label: 'Demo', + // to: '/storybook', + // }, + // { + // label: 'API', + // to: '/docs/api', + // }, + ], + }, + { + title: 'Community', + items: [ + { + label: 'Questions', + href: 'https://github.com/maxGraph/maxGraph/discussions/categories/q-a', + }, + { + label: 'Issues', + href: 'https://github.com/maxGraph/maxGraph/issues', + }, + { + label: 'Announces', + href: 'https://github.com/maxGraph/maxGraph/discussions/categories/announces', + }, + ], + }, + { + title: 'More', + items: [ + { + label: 'GitHub', + href: 'https://github.com/maxGraph/maxGraph', + }, + ], + }, + ], + copyright: `Copyright © ${new Date().getFullYear()} - The maxGraph project Contributors. Built with Docusaurus.`, + }, + prism: { + theme: prismThemes.github, + darkTheme: prismThemes.dracula, + }, + } satisfies Preset.ThemeConfig, +}; + +export default config; diff --git a/packages/docs/old-mxgraph/api-specification.txt b/packages/website/old-mxgraph/api-specification.txt similarity index 100% rename from packages/docs/old-mxgraph/api-specification.txt rename to packages/website/old-mxgraph/api-specification.txt diff --git a/packages/docs/old-mxgraph/css/manual-colors.css b/packages/website/old-mxgraph/css/manual-colors.css similarity index 100% rename from packages/docs/old-mxgraph/css/manual-colors.css rename to packages/website/old-mxgraph/css/manual-colors.css diff --git a/packages/docs/old-mxgraph/css/manual-styles.css b/packages/website/old-mxgraph/css/manual-styles.css similarity index 100% rename from packages/docs/old-mxgraph/css/manual-styles.css rename to packages/website/old-mxgraph/css/manual-styles.css diff --git a/packages/docs/old-mxgraph/images/MX_MANUAL_html_1cc55dd3.png b/packages/website/old-mxgraph/images/MX_MANUAL_html_1cc55dd3.png similarity index 100% rename from packages/docs/old-mxgraph/images/MX_MANUAL_html_1cc55dd3.png rename to packages/website/old-mxgraph/images/MX_MANUAL_html_1cc55dd3.png diff --git a/packages/docs/old-mxgraph/images/MX_MANUAL_html_ba4bf13.png b/packages/website/old-mxgraph/images/MX_MANUAL_html_ba4bf13.png similarity index 100% rename from packages/docs/old-mxgraph/images/MX_MANUAL_html_ba4bf13.png rename to packages/website/old-mxgraph/images/MX_MANUAL_html_ba4bf13.png diff --git a/packages/docs/old-mxgraph/images/MX_MANUAL_html_m75de608.png b/packages/website/old-mxgraph/images/MX_MANUAL_html_m75de608.png similarity index 100% rename from packages/docs/old-mxgraph/images/MX_MANUAL_html_m75de608.png rename to packages/website/old-mxgraph/images/MX_MANUAL_html_m75de608.png diff --git a/packages/docs/old-mxgraph/images/architecture.png b/packages/website/old-mxgraph/images/architecture.png similarity index 100% rename from packages/docs/old-mxgraph/images/architecture.png rename to packages/website/old-mxgraph/images/architecture.png diff --git a/packages/docs/old-mxgraph/images/callgraph.png b/packages/website/old-mxgraph/images/callgraph.png similarity index 100% rename from packages/docs/old-mxgraph/images/callgraph.png rename to packages/website/old-mxgraph/images/callgraph.png diff --git a/packages/docs/old-mxgraph/images/editor.png b/packages/website/old-mxgraph/images/editor.png similarity index 100% rename from packages/docs/old-mxgraph/images/editor.png rename to packages/website/old-mxgraph/images/editor.png diff --git a/packages/docs/old-mxgraph/images/graph.png b/packages/website/old-mxgraph/images/graph.png similarity index 100% rename from packages/docs/old-mxgraph/images/graph.png rename to packages/website/old-mxgraph/images/graph.png diff --git a/packages/docs/old-mxgraph/images/logo.jpg b/packages/website/old-mxgraph/images/logo.jpg similarity index 100% rename from packages/docs/old-mxgraph/images/logo.jpg rename to packages/website/old-mxgraph/images/logo.jpg diff --git a/packages/docs/old-mxgraph/images/model.png b/packages/website/old-mxgraph/images/model.png similarity index 100% rename from packages/docs/old-mxgraph/images/model.png rename to packages/website/old-mxgraph/images/model.png diff --git a/packages/docs/old-mxgraph/images/mx_man_architecture.png b/packages/website/old-mxgraph/images/mx_man_architecture.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_architecture.png rename to packages/website/old-mxgraph/images/mx_man_architecture.png diff --git a/packages/docs/old-mxgraph/images/mx_man_collapse_swim.png b/packages/website/old-mxgraph/images/mx_man_collapse_swim.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_collapse_swim.png rename to packages/website/old-mxgraph/images/mx_man_collapse_swim.png diff --git a/packages/docs/old-mxgraph/images/mx_man_drill_down.png b/packages/website/old-mxgraph/images/mx_man_drill_down.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_drill_down.png rename to packages/website/old-mxgraph/images/mx_man_drill_down.png diff --git a/packages/docs/old-mxgraph/images/mx_man_drilling.png b/packages/website/old-mxgraph/images/mx_man_drilling.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_drilling.png rename to packages/website/old-mxgraph/images/mx_man_drilling.png diff --git a/packages/docs/old-mxgraph/images/mx_man_edge_routing.png b/packages/website/old-mxgraph/images/mx_man_edge_routing.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_edge_routing.png rename to packages/website/old-mxgraph/images/mx_man_edge_routing.png diff --git a/packages/docs/old-mxgraph/images/mx_man_expand_swim.png b/packages/website/old-mxgraph/images/mx_man_expand_swim.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_expand_swim.png rename to packages/website/old-mxgraph/images/mx_man_expand_swim.png diff --git a/packages/docs/old-mxgraph/images/mx_man_graph_analysis.jpg b/packages/website/old-mxgraph/images/mx_man_graph_analysis.jpg similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_graph_analysis.jpg rename to packages/website/old-mxgraph/images/mx_man_graph_analysis.jpg diff --git a/packages/docs/old-mxgraph/images/mx_man_graph_interaction.png b/packages/website/old-mxgraph/images/mx_man_graph_interaction.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_graph_interaction.png rename to packages/website/old-mxgraph/images/mx_man_graph_interaction.png diff --git a/packages/docs/old-mxgraph/images/mx_man_graph_layout.png b/packages/website/old-mxgraph/images/mx_man_graph_layout.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_graph_layout.png rename to packages/website/old-mxgraph/images/mx_man_graph_layout.png diff --git a/packages/docs/old-mxgraph/images/mx_man_graph_vis.png b/packages/website/old-mxgraph/images/mx_man_graph_vis.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_graph_vis.png rename to packages/website/old-mxgraph/images/mx_man_graph_vis.png diff --git a/packages/docs/old-mxgraph/images/mx_man_hello_struct.png b/packages/website/old-mxgraph/images/mx_man_hello_struct.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_hello_struct.png rename to packages/website/old-mxgraph/images/mx_man_hello_struct.png diff --git a/packages/docs/old-mxgraph/images/mx_man_hello_world.png b/packages/website/old-mxgraph/images/mx_man_hello_world.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_hello_world.png rename to packages/website/old-mxgraph/images/mx_man_hello_world.png diff --git a/packages/docs/old-mxgraph/images/mx_man_log_group_struct.png b/packages/website/old-mxgraph/images/mx_man_log_group_struct.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_log_group_struct.png rename to packages/website/old-mxgraph/images/mx_man_log_group_struct.png diff --git a/packages/docs/old-mxgraph/images/mx_man_non_realtive_edge_pos.png b/packages/website/old-mxgraph/images/mx_man_non_realtive_edge_pos.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_non_realtive_edge_pos.png rename to packages/website/old-mxgraph/images/mx_man_non_realtive_edge_pos.png diff --git a/packages/docs/old-mxgraph/images/mx_man_non_relative_pos.png b/packages/website/old-mxgraph/images/mx_man_non_relative_pos.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_non_relative_pos.png rename to packages/website/old-mxgraph/images/mx_man_non_relative_pos.png diff --git a/packages/docs/old-mxgraph/images/mx_man_overlap.png b/packages/website/old-mxgraph/images/mx_man_overlap.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_overlap.png rename to packages/website/old-mxgraph/images/mx_man_overlap.png diff --git a/packages/docs/old-mxgraph/images/mx_man_rel_vert_pos.png b/packages/website/old-mxgraph/images/mx_man_rel_vert_pos.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_rel_vert_pos.png rename to packages/website/old-mxgraph/images/mx_man_rel_vert_pos.png diff --git a/packages/docs/old-mxgraph/images/mx_man_simple_graph.png b/packages/website/old-mxgraph/images/mx_man_simple_graph.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_simple_graph.png rename to packages/website/old-mxgraph/images/mx_man_simple_graph.png diff --git a/packages/docs/old-mxgraph/images/mx_man_simple_workflow.png b/packages/website/old-mxgraph/images/mx_man_simple_workflow.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_simple_workflow.png rename to packages/website/old-mxgraph/images/mx_man_simple_workflow.png diff --git a/packages/docs/old-mxgraph/images/mx_man_stencil_loaded.png b/packages/website/old-mxgraph/images/mx_man_stencil_loaded.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_stencil_loaded.png rename to packages/website/old-mxgraph/images/mx_man_stencil_loaded.png diff --git a/packages/docs/old-mxgraph/images/mx_man_styles.png b/packages/website/old-mxgraph/images/mx_man_styles.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_styles.png rename to packages/website/old-mxgraph/images/mx_man_styles.png diff --git a/packages/docs/old-mxgraph/images/mx_man_top_level.png b/packages/website/old-mxgraph/images/mx_man_top_level.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_top_level.png rename to packages/website/old-mxgraph/images/mx_man_top_level.png diff --git a/packages/docs/old-mxgraph/images/mx_man_vertex_props.png b/packages/website/old-mxgraph/images/mx_man_vertex_props.png similarity index 100% rename from packages/docs/old-mxgraph/images/mx_man_vertex_props.png rename to packages/website/old-mxgraph/images/mx_man_vertex_props.png diff --git a/packages/docs/old-mxgraph/images/mxgraph_logo.gif b/packages/website/old-mxgraph/images/mxgraph_logo.gif similarity index 100% rename from packages/docs/old-mxgraph/images/mxgraph_logo.gif rename to packages/website/old-mxgraph/images/mxgraph_logo.gif diff --git a/packages/docs/old-mxgraph/js/toc.js b/packages/website/old-mxgraph/js/toc.js similarity index 100% rename from packages/docs/old-mxgraph/js/toc.js rename to packages/website/old-mxgraph/js/toc.js diff --git a/packages/docs/old-mxgraph/known-issues.html b/packages/website/old-mxgraph/known-issues.html similarity index 100% rename from packages/docs/old-mxgraph/known-issues.html rename to packages/website/old-mxgraph/known-issues.html diff --git a/packages/docs/old-mxgraph/manual.html b/packages/website/old-mxgraph/manual.html similarity index 99% rename from packages/docs/old-mxgraph/manual.html rename to packages/website/old-mxgraph/manual.html index f9c029fe8..a67bc52e2 100644 --- a/packages/docs/old-mxgraph/manual.html +++ b/packages/website/old-mxgraph/manual.html @@ -1565,7 +1565,7 @@ children of that parent appear in the display as the complete graph.

The same graph expanded using folding instead looks like:

+ WIDTH=695 HEIGHT=227 BORDER=0>

Exiting the group using the shape->exit group option, which invokes mxGraph.exitGroup, brings you back to the original 3 vertex top level graph.

diff --git a/packages/docs/old-mxgraph/manual_javavis.html b/packages/website/old-mxgraph/manual_javavis.html similarity index 99% rename from packages/docs/old-mxgraph/manual_javavis.html rename to packages/website/old-mxgraph/manual_javavis.html index 05f49f66a..89825fb36 100644 --- a/packages/docs/old-mxgraph/manual_javavis.html +++ b/packages/website/old-mxgraph/manual_javavis.html @@ -1088,7 +1088,7 @@ children of that parent appear in the display as the complete graph.

The same graph expanded using folding instead looks like:

+ WIDTH=695 HEIGHT=227 BORDER=0>

Exiting the group using the shape->exit group option, which invokes mxGraph.exitGroup, brings you back to the original 3 vertex top level graph.

diff --git a/packages/docs/old-mxgraph/stencils.xsd b/packages/website/old-mxgraph/stencils.xsd similarity index 100% rename from packages/docs/old-mxgraph/stencils.xsd rename to packages/website/old-mxgraph/stencils.xsd diff --git a/packages/docs/old-mxgraph/tutorial.html b/packages/website/old-mxgraph/tutorial.html similarity index 100% rename from packages/docs/old-mxgraph/tutorial.html rename to packages/website/old-mxgraph/tutorial.html diff --git a/packages/website/package.json b/packages/website/package.json new file mode 100644 index 000000000..043bc4b94 --- /dev/null +++ b/packages/website/package.json @@ -0,0 +1,46 @@ +{ + "name": "@maxgraph/docs", + "private": true, + "scripts": { + "docusaurus": "docusaurus", + "start": "docusaurus start", + "build": "docusaurus build", + "swizzle": "docusaurus swizzle", + "deploy": "docusaurus deploy", + "clear": "docusaurus clear", + "serve": "docusaurus serve", + "write-translations": "docusaurus write-translations", + "write-heading-ids": "docusaurus write-heading-ids", + "typecheck": "tsc" + }, + "dependencies": { + "@docusaurus/core": "3.0.0", + "@docusaurus/preset-classic": "3.0.0", + "@mdx-js/react": "^3.0.0", + "clsx": "^1.2.1", + "prism-react-renderer": "^2.1.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "devDependencies": { + "@docusaurus/module-type-aliases": "3.0.0", + "@docusaurus/tsconfig": "3.0.0", + "@docusaurus/types": "3.0.0", + "typescript": "~5.2.2" + }, + "browserslist": { + "production": [ + ">0.5%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 3 chrome version", + "last 3 firefox version", + "last 5 safari version" + ] + }, + "engines": { + "node": ">=18.0" + } +} diff --git a/packages/website/sidebars.ts b/packages/website/sidebars.ts new file mode 100644 index 000000000..794b96727 --- /dev/null +++ b/packages/website/sidebars.ts @@ -0,0 +1,31 @@ +import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'; + +/** + * Creating a sidebar enables you to: + - create an ordered group of docs + - render a sidebar for each doc of that group + - provide next/previous navigation + + The sidebars can be generated from the filesystem, or explicitly defined here. + + Create as many sidebars as you want. + */ +const sidebars: SidebarsConfig = { + // By default, Docusaurus generates a sidebar from the docs folder structure + docsSidebar: [{ type: 'autogenerated', dirName: '.' }], + + // But you can create a sidebar manually + /* + tutorialSidebar: [ + 'intro', + 'hello', + { + type: 'category', + label: 'Tutorial', + items: ['tutorial-basics/create-a-document'], + }, + ], + */ +}; + +export default sidebars; diff --git a/packages/website/src/components/HomepageFeatures/index.tsx b/packages/website/src/components/HomepageFeatures/index.tsx new file mode 100644 index 000000000..a660da31b --- /dev/null +++ b/packages/website/src/components/HomepageFeatures/index.tsx @@ -0,0 +1,73 @@ +import clsx from 'clsx'; +import Heading from '@theme/Heading'; +import styles from './styles.module.css'; + +type FeatureItem = { + title: string; + Svg: React.ComponentType>; + description: JSX.Element; +}; + +const FeatureList: FeatureItem[] = [ + { + title: 'Based on mature technology', + Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, + description: ( + <> + maxGraph is the successor of{' '} + mxGraph (which is now EOL in its + public version), the diagram library that powers{' '} + draw.io. + + ), + }, + { + title: 'Fully typed', + Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, + description: ( + <> + maxGraph is written in TypeScript and provides precise types to guide + you easily when developing or reading API documentation. + + ), + }, + { + title: 'Flexible with convenient defaults', + Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, + description: ( + <> + maxGraph is highly configurable and offers numerous extension points. + But it also provides numerous built-in elements, for example for shapes and + styles. + + ), + }, +]; + +function Feature({ title, Svg, description }: FeatureItem) { + return ( +
+
+ +
+
+ {title} +

{description}

+
+
+ ); +} + +export default function HomepageFeatures(): JSX.Element { + return ( +
+
+
+ {FeatureList.map((props, idx) => ( + + ))} +
+
+
+ ); +} diff --git a/packages/website/src/components/HomepageFeatures/styles.module.css b/packages/website/src/components/HomepageFeatures/styles.module.css new file mode 100644 index 000000000..b248eb2e5 --- /dev/null +++ b/packages/website/src/components/HomepageFeatures/styles.module.css @@ -0,0 +1,11 @@ +.features { + display: flex; + align-items: center; + padding: 2rem 0; + width: 100%; +} + +.featureSvg { + height: 200px; + width: 200px; +} diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css new file mode 100644 index 000000000..2bc6a4cfd --- /dev/null +++ b/packages/website/src/css/custom.css @@ -0,0 +1,30 @@ +/** + * Any CSS included here will be global. The classic template + * bundles Infima by default. Infima is a CSS framework designed to + * work well for content-centric websites. + */ + +/* You can override the default Infima variables here. */ +:root { + --ifm-color-primary: #2e8555; + --ifm-color-primary-dark: #29784c; + --ifm-color-primary-darker: #277148; + --ifm-color-primary-darkest: #205d3b; + --ifm-color-primary-light: #33925d; + --ifm-color-primary-lighter: #359962; + --ifm-color-primary-lightest: #3cad6e; + --ifm-code-font-size: 95%; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); +} + +/* For readability concerns, you should choose a lighter palette in dark mode. */ +[data-theme='dark'] { + --ifm-color-primary: #25c2a0; + --ifm-color-primary-dark: #21af90; + --ifm-color-primary-darker: #1fa588; + --ifm-color-primary-darkest: #1a8870; + --ifm-color-primary-light: #29d5b0; + --ifm-color-primary-lighter: #32d8b4; + --ifm-color-primary-lightest: #4fddbf; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); +} diff --git a/packages/website/src/pages/index.module.css b/packages/website/src/pages/index.module.css new file mode 100644 index 000000000..9f71a5da7 --- /dev/null +++ b/packages/website/src/pages/index.module.css @@ -0,0 +1,23 @@ +/** + * CSS files with the .module.css suffix will be treated as CSS modules + * and scoped locally. + */ + +.heroBanner { + padding: 4rem 0; + text-align: center; + position: relative; + overflow: hidden; +} + +@media screen and (max-width: 996px) { + .heroBanner { + padding: 2rem; + } +} + +.buttons { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx new file mode 100644 index 000000000..3f91c38e8 --- /dev/null +++ b/packages/website/src/pages/index.tsx @@ -0,0 +1,42 @@ +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Layout from '@theme/Layout'; +import HomepageFeatures from '@site/src/components/HomepageFeatures'; +import Heading from '@theme/Heading'; + +import styles from './index.module.css'; + +function HomepageHeader() { + const { siteConfig } = useDocusaurusContext(); + return ( +
+
+ + {siteConfig.title} + +

{siteConfig.tagline}

+
+ + maxGraph Introduction + +
+
+
+ ); +} + +export default function Home(): JSX.Element { + const { siteConfig } = useDocusaurusContext(); + return ( + + +
+ +
+ + ); +} diff --git a/packages/website/src/pages/markdown-page.md b/packages/website/src/pages/markdown-page.md new file mode 100644 index 000000000..9756c5b66 --- /dev/null +++ b/packages/website/src/pages/markdown-page.md @@ -0,0 +1,7 @@ +--- +title: Markdown page example +--- + +# Markdown page example + +You don't need React to write simple standalone pages. diff --git a/packages/website/static/.nojekyll b/packages/website/static/.nojekyll new file mode 100644 index 000000000..e69de29bb diff --git a/packages/website/static/img/docusaurus.png b/packages/website/static/img/docusaurus.png new file mode 100644 index 000000000..f458149e3 Binary files /dev/null and b/packages/website/static/img/docusaurus.png differ diff --git a/packages/website/static/img/favicon.ico b/packages/website/static/img/favicon.ico new file mode 100644 index 000000000..c01d54bcd Binary files /dev/null and b/packages/website/static/img/favicon.ico differ diff --git a/packages/website/static/img/logo.svg b/packages/website/static/img/logo.svg new file mode 100644 index 000000000..9db6d0d06 --- /dev/null +++ b/packages/website/static/img/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/static/img/undraw_docusaurus_mountain.svg b/packages/website/static/img/undraw_docusaurus_mountain.svg new file mode 100644 index 000000000..af961c49a --- /dev/null +++ b/packages/website/static/img/undraw_docusaurus_mountain.svg @@ -0,0 +1,171 @@ + + Easy to Use + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/undraw_docusaurus_react.svg b/packages/website/static/img/undraw_docusaurus_react.svg new file mode 100644 index 000000000..94b5cf08f --- /dev/null +++ b/packages/website/static/img/undraw_docusaurus_react.svg @@ -0,0 +1,170 @@ + + Powered by React + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/undraw_docusaurus_tree.svg b/packages/website/static/img/undraw_docusaurus_tree.svg new file mode 100644 index 000000000..d9161d339 --- /dev/null +++ b/packages/website/static/img/undraw_docusaurus_tree.svg @@ -0,0 +1,40 @@ + + Focus on What Matters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json new file mode 100644 index 000000000..314eab8a4 --- /dev/null +++ b/packages/website/tsconfig.json @@ -0,0 +1,7 @@ +{ + // This file is not used in compilation. It is here just for a nice editor experience. + "extends": "@docusaurus/tsconfig", + "compilerOptions": { + "baseUrl": "." + } +}