Fix build issues due to server-side rendering, fix broken links

Author: AlexeyMz

docs/concepts/data-provider.md

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # Data Provider
 
-Reactodia defines a contract ([`DataProvider`](/docs/api/workspace/interfaces/DataProvider) interface) to query a subset of data from external source ([data graph](./graph-model.md#data-graph)) to provide means for incremental data loading when exploring the graph.
+Reactodia defines a contract ([`DataProvider`](/docs/api/workspace/interfaces/DataProvider) interface) to query a subset of data from external source ([data graph](/docs/concepts/graph-model#data-graph)) to provide means for incremental data loading when exploring the graph.
 
 ## IRI and RDF
 
@@ -17,7 +17,7 @@ Reactodia uses RDF ([Resource Description Framework](https://en.wikipedia.org/wi
 
 For interoperability with other RDF-based libraries for JavaScript, the property values for entities and relations are stored as either **named node** or **literal** values using commonly used [RDF/JS](https://rdf.js.org/) representation.
 
-To provide improved type-safety with TypeScript when dealing with various kinds of IRIs from the [data graph](./graph-model.md#data-graph), the library uses the following [branded string types](https://www.learningtypescript.com/articles/branded-types):
+To provide improved type-safety with TypeScript when dealing with various kinds of IRIs from the [data graph](/docs/concepts/graph-model#data-graph), the library uses the following [branded string types](https://www.learningtypescript.com/articles/branded-types):
 
 | Type            | Description |
 |-----------------|-------------|

docs/concepts/design-system.mdx

@@ -3,10 +3,11 @@ sidebar_position: 10
 title: Design System
 ---
 
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import * as React from 'react';
-import * as Reactodia from '@reactodia/workspace';
 import { ButtonToggle } from '@site/src/components/ButtonToggle';
 import { ColorBoxes } from '@site/src/components/ColorBoxes';
+import { WithReactodiaStyles } from '@site/src/components/WithReactodiaStyles';
 
 # Basic Design System
 
@@ -26,14 +27,14 @@ Toggle active color scheme at the top to see how the default colors are defined
 
 ### Grays {#color-grays}
 
-<Reactodia.WorkspaceRoot>
+<WithReactodiaStyles>
     <ColorBoxes
         colors={Array.from(
             {length: 11},
             (_, i) => `var(--reactodia-color-gray-${i * 100})`)
         }
     />
-</Reactodia.WorkspaceRoot>
+</WithReactodiaStyles>
 
 Color-scheme independent gray colors gradient from 0 (white) to 1000 (black) in increments of 100:
 ```css
@@ -42,14 +43,14 @@ Color-scheme independent gray colors gradient from 0 (white) to 1000 (black) in
 
 ### Emphasis {#color-emphasis}
 
-<Reactodia.WorkspaceRoot>
+<WithReactodiaStyles>
     <ColorBoxes
         colors={Array.from(
             {length: 11},
             (_, i) => `var(--reactodia-color-emphasis-${i * 100})`)
         }
     />
-</Reactodia.WorkspaceRoot>
+</WithReactodiaStyles>
 
 Color-scheme specific gray colors gradient from 0 (same as schema color) to 1000 (opposite to schema color) in increments of 100:
 ```css
@@ -58,15 +59,15 @@ Color-scheme specific gray colors gradient from 0 (same as schema color) to 1000
 
 ### Content and Background
 
-<Reactodia.WorkspaceRoot>
+<WithReactodiaStyles>
     <ColorBoxes
         colors={[
             'var(--reactodia-color-content)',
             'var(--reactodia-color-content-inverse)',
             'var(--reactodia-color-content-contrast)',
         ]}
     />
-</Reactodia.WorkspaceRoot>
+</WithReactodiaStyles>
 
 Color-scheme specific color for a text-like content, pure inverse for the background, and a contrast (which is suitable for content on top of a background of the named color):
 ```css
@@ -75,14 +76,14 @@ Color-scheme specific color for a text-like content, pure inverse for the backgr
 --reactodia-color-content-contrast
 ```
 
-<Reactodia.WorkspaceRoot>
+<WithReactodiaStyles>
     <ColorBoxes
         colors={[
             'var(--reactodia-background-color)',
             'var(--reactodia-background-color-surface)',
         ]}
     />
-</Reactodia.WorkspaceRoot>
+</WithReactodiaStyles>
 
 Color-scheme specific color for a background-like layers, and a surface one which can be used for layers placed on top of the main background:
 ```css
@@ -133,39 +134,39 @@ Additionally, each color has a contrast foreground (to put on the named color) a
 
 #### `primary` color
 
-<Reactodia.WorkspaceRoot>
+<WithReactodiaStyles>
     <NamedColorBoxes color='primary' />
-</Reactodia.WorkspaceRoot>
+</WithReactodiaStyles>
 
 #### `secondary` color
 
-<Reactodia.WorkspaceRoot>
+<WithReactodiaStyles>
     <NamedColorBoxes color='secondary' />
-</Reactodia.WorkspaceRoot>
+</WithReactodiaStyles>
 
 #### `success` color
 
-<Reactodia.WorkspaceRoot>
+<WithReactodiaStyles>
     <NamedColorBoxes color='success' />
-</Reactodia.WorkspaceRoot>
+</WithReactodiaStyles>
 
 #### `info` color
 
-<Reactodia.WorkspaceRoot>
+<WithReactodiaStyles>
     <NamedColorBoxes color='info' />
-</Reactodia.WorkspaceRoot>
+</WithReactodiaStyles>
 
 #### `warning` color
 
-<Reactodia.WorkspaceRoot>
+<WithReactodiaStyles>
     <NamedColorBoxes color='warning' />
-</Reactodia.WorkspaceRoot>
+</WithReactodiaStyles>
 
 #### `danger` color
 
-<Reactodia.WorkspaceRoot>
+<WithReactodiaStyles>
     <NamedColorBoxes color='danger' />
-</Reactodia.WorkspaceRoot>
+</WithReactodiaStyles>
 
 ## Text
 
@@ -316,9 +317,9 @@ export const Buttons = () => {
     );
 };
 
-<Reactodia.WorkspaceRoot style={{marginBottom: 10}}>
+<WithReactodiaStyles>
     <Buttons />
-</Reactodia.WorkspaceRoot>
+</WithReactodiaStyles>
 
 There are specific CSS properties to define the style of various buttons:
 ```tsx live
@@ -378,9 +379,9 @@ export const Inputs = () => {
     );
 };
 
-<Reactodia.WorkspaceRoot style={{marginBottom: 10}}>
+<WithReactodiaStyles>
     <Inputs />
-</Reactodia.WorkspaceRoot>
+</WithReactodiaStyles>
 
 There are specific CSS properties to define the style of various inputs, including `<input type="text">` and `<select>`:
 

docs/concepts/graph-model.md

@@ -10,17 +10,17 @@ The central part of the Reactodia state is the diagram content which is a mutabl
 
 The diagram is composed of *abstract* [elements](/docs/api/workspace/classes/Element.md) and [links](/docs/api/workspace/classes/Link.md) and can be though of as collection of graph nodes and edges drawn on the canvas surface.
 
-Each **element** is identified by a [generated ID](/docs/api/workspace/classes/Element.md#generateid), stores a [position](/docs/api/workspace/classes/Element.md#position) (in [paper coordinates](./canvas-coordinates.md)) and an arbitrary persisted [element state](/docs/api/workspace/classes/Element.md#elementstate).
+Each **element** is identified by a [generated ID](/docs/api/workspace/classes/Element.md#generateid), stores a [position](/docs/api/workspace/classes/Element.md#position) (in [paper coordinates](/docs/concepts/canvas-coordinates)) and an arbitrary persisted [element state](/docs/api/workspace/classes/Element.md#elementstate).
 
-Each **link** is identified by a [generated ID](/docs/api/workspace/classes/Link.md#generateid), has source and target element IDs, and a [link type IRI](/docs/api/workspace/type-aliases/LinkTypeIri.md). In its state it stores path geometry as a [collection of points](/docs/api/workspace/classes/Link.md#vertices) (in [paper coordinates](./canvas-coordinates.md)) and an arbitrary persisted [link state](/docs/api/workspace/classes/Link.md#linkstate).
+Each **link** is identified by a [generated ID](/docs/api/workspace/classes/Link.md#generateid), has source and target element IDs, and a [link type IRI](/docs/api/workspace/type-aliases/LinkTypeIri.md). In its state it stores path geometry as a [collection of points](/docs/api/workspace/classes/Link.md#vertices) (in [paper coordinates](/docs/concepts/canvas-coordinates)) and an arbitrary persisted [link state](/docs/api/workspace/classes/Link.md#linkstate).
 
 :::note
 Currently there is only one concrete element type besides the data graph ones: [`VoidElement`](/docs/api/workspace/classes/VoidElement.md) which is displayed as nothing (empty point) but can be connected to with the links.
 :::
 
 ## Data graph
 
-While elements and links are considered to be diagram graph nodes and edges, some of them can represent entities and relations from (external) data graph defined by the [`DataProvider`](./data-provider.md):
+While elements and links are considered to be diagram graph nodes and edges, some of them can represent entities and relations from (external) data graph defined by the [`DataProvider`](/docs/concepts/data-provider):
 
 | Cell type | Description |
 |-----------|-------------|
@@ -32,16 +32,16 @@ While elements and links are considered to be diagram graph nodes and edges, som
 :::note
 An IRI is [Internationalized Resource Identifier](https://en.wikipedia.org/wiki/Internationalized_Resource_Identifier) which is basically a URI but may additionally contain most unicode characters.
 
-See how the library uses [IRIs and RDF](./data-provider.md#iri-and-rdf) for more details.
+See how the library uses [IRIs and RDF](/docs/concepts/data-provider#iri-and-rdf) for more details.
 :::
 
 Basically, a sub-graph of a full external data graph composed of entities and relations forms a diagram on the canvas. By exploring that graph, other entities and relation are added to the diagram content, expanding the view of the data graph and presenting more interconnections throughout the data.
 
-Using the [graph authoring](./graph-authoring.md) feature it is possible to work on the changes to the data graph and apply it once ready.
+Using the [graph authoring](/docs/concepts/graph-authoring) feature it is possible to work on the changes to the data graph and apply it once ready.
 
 ## Manipulating the diagram
 
-To access and manipulate the diagram one can use [diagram model](/docs/api/workspace/classes/DataDiagramModel.md) from [`WorkspaceContext`](./workspace-context.md):
+To access and manipulate the diagram one can use [diagram model](/docs/api/workspace/classes/DataDiagramModel.md) from [`WorkspaceContext`](/docs/concepts/workspace-context):
 ```ts
 function WorkingWithDiagramModel() {
     const {model} = Reactodia.useWorkspace();
@@ -92,7 +92,7 @@ function WorkingWithDiagramModel() {
 
 ## Link visibility
 
-Some links can be hidden from the canvas by setting its link type visibility with [`setLinkVisibility()`](/docs/api/workspace/classes/DataDiagramModel.md#setlinkvisibility) to `hidden`. The hidden links are invisible and would not affect the [graph layout](./layout-workers.md).
+Some links can be hidden from the canvas by setting its link type visibility with [`setLinkVisibility()`](/docs/api/workspace/classes/DataDiagramModel.md#setlinkvisibility) to `hidden`. The hidden links are invisible and would not affect the [graph layout](/docs/concepts/layout-workers).
 
 Alternatively, a link type visibility can be set to `withoutLabel` to display it as path (line) only without any additional labels.
 

docs/concepts/i18n.md

@@ -6,7 +6,7 @@ sidebar_position: 9
 
 Reactodia has a built-in support for UI text strings localization.
 Each UI component in the library that displays text labels or descriptions resolves
-them from [translation bundles](#translation-bundle) via [Translation interface](#translation-interface-and-hooks).
+them from [translation bundles](#translation-bundle) via [Translation interface](#custom-translation).
 
 ## Translation bundle
 
@@ -71,7 +71,7 @@ function MultipleTranslations() {
 }
 ```
 
-## Using translation in the custom components
+## Using translation in the custom components {#custom-translation}
 
 The localization mechanism can be used for a custom component nested inside the [`Workspace`](/docs/components/workspace.md) by getting a [`Translation`](/docs/api/workspace/interfaces/Translation.md) instance which can be used to format localizable strings.
 

docs/concepts/workspace-context.md

@@ -4,19 +4,19 @@ sidebar_position: 5
 
 # Workspace Context
 
-Reactodia uses a common context to connect its components with the [graph model](./graph-model.md) and other services such as [graph layout](./layout-workers.md), [i18n](./i18n.md) and [visual graph authoring](./graph-authoring.md).
+Reactodia uses a common context to connect its components with the [graph model](/docs/concepts/graph-model) and other services such as [graph layout](/docs/concepts/layout-workers), [i18n](/docs/concepts/i18n) and [visual graph authoring](/docs/concepts/graph-authoring).
 
 ## Services and stores in the context
 
 The [`WorkspaceContext`](/docs/api/workspace/interfaces/WorkspaceContext) contains references to different services and state stores, here is the important ones:
 
 | Property name | Type             | Description |
 |---------------|------------------|-------------|
-| `model`       | [`DataDiagramModel`](/docs/api/workspace/classes/DataDiagramModel.md) | Stores the diagram content and asynchronously fetches from a data provider.<br/>See [graph model](./graph-model.md). |
+| `model`       | [`DataDiagramModel`](/docs/api/workspace/classes/DataDiagramModel.md) | Stores the diagram content and asynchronously fetches from a data provider.<br/>See [graph model](/docs/concepts/graph-model). |
 | `view`        | [`SharedCanvasState`](/docs/api/workspace/classes/SharedCanvasState.md) | Stores common state and settings for all [canvases](/docs/components/canvas.md) in the workspace. |
-| `editor`      | [`EditorController`](/docs/api/workspace/classes/EditorController.md) | Stores, modifies and validates changes from the visual graph authoring.<br/>See [graph authoring](./graph-authoring.md). |
+| `editor`      | [`EditorController`](/docs/api/workspace/classes/EditorController.md) | Stores, modifies and validates changes from the visual graph authoring.<br/>See [graph authoring](/docs/concepts/graph-authoring). |
 | `overlay`     | [`OverlayController`](/docs/api/workspace/classes/OverlayController.md) | Controls UI overlays for the canvases, including dialogs and tasks. |
-| `translation` | [`Translation`](/docs/api/workspace/interfaces/Translation.md) | Provides a translation for UI text strings.<br/>See [i18n](./i18n.md). |
+| `translation` | [`Translation`](/docs/api/workspace/interfaces/Translation.md) | Provides a translation for UI text strings.<br/>See [i18n](/docs/concepts/i18n). |
 
 ## Getting the workspace context
 
@@ -70,5 +70,5 @@ function Example() {
 ```
 
 :::note
-The library also uses separate context for [i18n](./i18n.md) (which is accessible by [`useTranslation()`](/docs/api/workspace/functions/useTranslation.md) hook and `translation` property of the workspace context) and a nested context for the [`Canvas`](/docs/components/canvas.md).
+The library also uses separate context for [i18n](/docs/concepts/i18n) (which is accessible by [`useTranslation()`](/docs/api/workspace/functions/useTranslation.md) hook and `translation` property of the workspace context) and a nested context for the [`Canvas`](/docs/components/canvas.md).
 :::

src/components/WithReactodiaStyles/index.tsx

@@ -0,0 +1,13 @@
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import type * as Reactodia from '@reactodia/workspace';
+
+export function WithReactodiaStyles(props: Reactodia.WorkspaceRootProps) {
+  return (
+    <BrowserOnly>
+      {() => {
+        const {ReactodiaStyleRoot} = require('./style-root') as typeof import('./style-root');
+        return <ReactodiaStyleRoot {...props} />;
+      }}
+    </BrowserOnly>
+  );
+}

src/components/WithReactodiaStyles/style-root.tsx

@@ -0,0 +1,5 @@
+import * as Reactodia from '@reactodia/workspace';
+
+export function ReactodiaStyleRoot(props: Reactodia.WorkspaceRootProps) {
+  return <Reactodia.WorkspaceRoot {...props} />;
+}