New: Add docs page

.eslintignore

@@ -2,4 +2,5 @@ coverage/
 dist/
 node_modules/
 examples/
+docs/
 webpack.config.js

.github/workflows/docs.yml

@@ -0,0 +1,82 @@
+name: Deploy docs to GitHub Pages
+
+on:
+  push:
+    # NOTE: `new/add-docs-page` is a TEMPORARY entry so the team can review a live
+    # deploy from the docs branch. Remove it before/at merge so main deploys only
+    # from main.
+    branches: [main, release/1.0.0, new/add-docs-page]
+  # Validate the bundle + docs build on any PR that touches them, so reviewers
+  # get a green check without needing Pages enabled or a merge to main. The
+  # deploy job below is skipped for PRs.
+  pull_request:
+    paths:
+      - "docs/site/**"
+      - "src/**"
+      - ".github/workflows/docs.yml"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# One deploy at a time, but keep PR builds from cancelling a main deploy (and
+# vice versa) by scoping the group per ref.
+concurrency:
+  group: pages-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      # 1. Build the Orb browser bundle from source so the live demos stay in sync.
+      - name: Build Orb bundle
+        run: |
+          npm ci
+          npm run build:release
+
+      # 2. Refresh the copies the docs site embeds.
+      - name: Sync bundle into docs site
+        run: |
+          cp dist/browser/orb.min.js docs/site/public/orb.min.js
+          cp dist/browser/orb.worker.min.js docs/site/public/orb.worker.min.js
+          # The module worker loads this shared vendor chunk as a sibling; without
+          # it the worker fails silently and layout simulation never runs.
+          cp dist/browser/orb.worker.vendor.min.js docs/site/public/orb.worker.vendor.min.js
+
+      # 3. Build the VitePress site.
+      - name: Build docs
+        working-directory: docs/site
+        run: |
+          npm install
+          npm run build
+
+      # 4. Package for Pages. Only needed for an actual deploy, so skip on PRs
+      #    (where these steps would also fail until Pages is enabled).
+      - uses: actions/configure-pages@v5
+        if: github.event_name != 'pull_request'
+
+      - uses: actions/upload-pages-artifact@v3
+        if: github.event_name != 'pull_request'
+        with:
+          path: docs/site/.vitepress/dist
+
+  deploy:
+    needs: build
+    # Deploy only from main; PRs run the build job above for validation only.
+    if: github.event_name != 'pull_request'
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -18,45 +18,51 @@
 
 ![](./docs/assets/graph-example.png)
 
-Orb is a graph visualization library. Read more about Orb in the following guides:
+Orb is a graph visualization library. It renders interactive graphs on the 2D Canvas or on
+WebGL, runs force-directed (CPU or GPU), circular, grid, and hierarchical layouts, plots
+geo-located nodes on a map, and gives you full control over the style of every node and edge.
 
-* [Handling nodes and edges](./docs/data.md)
-* [Styling nodes and edges](./docs/styles.md)
-* [Handling events](./docs/events.md)
-* Using different views
-  * [Default view](./docs/view-default.md)
-  * [Map view](./docs/view-map.md)
+## Documentation
 
-## Install
+Full guides, the API reference, and live interactive demos are on the documentation site:
+
+**https://memgraph.github.io/orb/**
+
+Some good places to start:
+
+* [Getting started](https://memgraph.github.io/orb/introduction/getting-started)
+* [Graph data](https://memgraph.github.io/orb/concepts/data) - nodes, edges, and updates
+* [Styling](https://memgraph.github.io/orb/concepts/styling) - colors, shapes, borders, labels
+* [Events](https://memgraph.github.io/orb/concepts/events) and [Interaction](https://memgraph.github.io/orb/concepts/interaction)
+* [Layouts](https://memgraph.github.io/orb/layouts/overview) - force, GPU, and static layouts
+* [Canvas vs WebGL](https://memgraph.github.io/orb/rendering/renderers)
+* [Map view](https://memgraph.github.io/orb/views/map)
+* [API reference](https://memgraph.github.io/orb/reference/api)
 
-> **Important note**: Please note that there might be breaking changes in minor version upgrades until
-> the Orb reaches version 1.0.0, so we recommend to either set strict version (`@memgraph/orb: "0.x.y"`)
-> of the Orb in your `package.json` or to allow only fix updates (`@memgraph/orb: "~0.x.y"`).
+## Install
 
 ### With `npm` (recommended)
 
 ```
 npm install @memgraph/orb
 ```
 
-Below you can find a simple Typescript example using Orb to visualize a small graph. Feel
-free to check other JavaScript examples in `examples/` directory.
-
 ```typescript
 import { OrbView } from '@memgraph/orb';
+
 const container = document.getElementById('graph');
 
-const nodes: MyNode[] = [
+const nodes = [
   { id: 1, label: 'Orb' },
   { id: 2, label: 'Graph' },
   { id: 3, label: 'Canvas' },
 ];
-const edges: MyEdge[] = [
+const edges = [
   { id: 1, start: 1, end: 2, label: 'DRAWS' },
   { id: 2, start: 2, end: 3, label: 'ON' },
 ];
 
-const orb = new OrbView<MyNode, MyEdge>(container);
+const orb = new OrbView(container);
 
 // Initialize nodes and edges
 orb.data.setup({ nodes, edges });
@@ -73,69 +79,24 @@ orb.render(() => {
 > link. Graph simulation will use the main thread, which will affect performance.
 
 ```html
-<!-- Direct reference non-minified -->
-<script src="dist/browser/orb.js"></script>
-<!-- Direct reference minified -->
-<script src="dist/browser/orb.min.js"></script>
-
-<!-- unpkg CDN non-minified -->
-<script src="https://unpkg.com/@memgraph/orb/dist/browser/orb.js"></script>
 <!-- unpkg CDN minified -->
 <script src="https://unpkg.com/@memgraph/orb/dist/browser/orb.min.js"></script>
+<script>
+  // `Orb` is the global namespace of the UMD bundle.
+  const orb = new Orb.OrbView(document.getElementById('graph'));
+  orb.data.setup({ nodes, edges });
+  orb.render(() => orb.recenter());
+</script>
 ```
 
-Below you can find a simple JavaScript example using Orb to visualize a small graph. Feel
-free to check other JavaScript examples in `examples/` directory.
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Orb | Simple graph</title>
-    <script src="https://unpkg.com/@memgraph/orb/dist/browser/orb.min.js"></script>
-    <style>
-      #graph {
-        border: 1px solid #e0e0e0;
-        width: 600px;
-        height: 600px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="graph"></div>
-    <script>
-      const container = document.getElementById("graph");
-
-      const nodes = [
-        { id: 1, label: "Orb" },
-        { id: 2, label: "Graph" },
-        { id: 3, label: "Canvas" },
-      ];
-      const edges = [
-        { id: 1, start: 1, end: 2, label: "DRAWS" },
-        { id: 2, start: 2, end: 3, label: "ON" },
-      ];
-
-      // First `Orb` is just a namespace of the JS package
-      const orb = new Orb.OrbView(container);
-
-      // Initialize nodes and edges
-      orb.data.setup({ nodes, edges });
-
-      // Render and recenter the view
-      orb.render(() => {
-        orb.recenter();
-      });
-    </script>
-  </body>
-</html>
-```
+See the [getting started guide](https://memgraph.github.io/orb/introduction/getting-started)
+for a complete runnable example.
 
 ## Build
 
 ```
-npm run build
+npm run build          # type-check + emit (tsc)
+npm run build:release  # tsc + webpack browser bundle (dist/browser/)
 ```
 
 ## Test
@@ -146,30 +107,38 @@ npm run test
 
 ## Development
 
-If you want to experiment, contribute, or simply play with the Orb locally, you can
-set up your local development environment with:
+If you want to experiment, contribute, or simply play with Orb locally:
 
-* Installation of all project dependencies
+* Install dependencies
 
   ```
   npm install
   ```
 
-* Running webpack build in the watch mode
+* Rebuild the browser bundle on change
 
   ```
   npm run webpack:watch
   ```
 
-* Running a local http server that will serve Orb and `examples/` directory on `localhost:8080`
+* Serve the built bundle from `dist/browser/` on `localhost:8082`
 
   ```
   npm run serve
   ```
 
+* Lint
+
+  ```
+  npm run lint
+  ```
+
+To work on the documentation site itself, see `docs/site/` (a self-contained VitePress
+project with its own `package.json`).
+
 ## License
 
-Copyright (c) 2016-2022 [Memgraph Ltd.](https://memgraph.com)
+Copyright (c) 2016-present [Memgraph Ltd.](https://memgraph.com)
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use
 this file except in compliance with the License. You may obtain a copy of the