refactor(website): use gatbsy link for doc links, add ids for headlines

website/package.json

@@ -48,7 +48,8 @@
     "react-flow-renderer": "^6.1.3",
     "react-helmet": "^6.1.0",
     "reflexbox": "^4.0.6",
-    "remark-unwrap-images": "^2.0.0"
+    "remark-unwrap-images": "^2.0.0",
+    "slugify": "^1.4.5"
   },
   "devDependencies": {
     "@octokit/rest": "^18.0.6",

website/src/components/Link/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link as GatsbyLink } from 'gatsby';
+
+const Link = ({ children, to, activeClassName, partiallyActive, ...other }) => {
+  const internal = /^\/(?!\/)/.test(to);
+
+  if (internal) {
+    return (
+      <GatsbyLink
+        to={to}
+        activeClassName={activeClassName}
+        partiallyActive={partiallyActive}
+        {...other}
+      >
+        {children}
+      </GatsbyLink>
+    );
+  }
+  return (
+    <a href={to} {...other}>
+      {children}
+    </a>
+  );
+};
+export default Link;

website/src/markdown/docs/api/component-props.md

@@ -59,14 +59,14 @@ import ReactFlow from 'react-flow-renderer';
 - `paneMoveable`: default: `true` - If set to `false`, panning and zooming is disabled
 
 ### Element Customization
-- `nodeTypes`: object with [node types](#node-types--custom-nodes)
+- `nodeTypes`: object with [node types](/docs/api/node-types/)
-- `edgeTypes`: object with [edge types](#edge-types--custom-edges)
+- `edgeTypes`: object with [edge types](/docs/api/edge-types/)
 - `arrowHeadColor`: default: `#b1b1b7`
 
 ### Connection Line Options
 - `connectionLineType`: connection line type = `default` (bezier), `straight`, `step`, `smoothstep`
 - `connectionLineStyle`: connection style as svg attributes
-- `connectionLineComponent`: [custom connection line component](/example/src/CustomConnectionLine/index.js)
+- `connectionLineComponent`: [custom connection line component](/examples/custom-connectionline/)
 
 ### Keys
 - `deleteKeyCode`: default: `8` (backspace)

website/src/markdown/docs/api/components/provider.md

@@ -18,4 +18,4 @@ const FlowWithOwnProvider = () => (
 );
 ```
 
-It is used in the [provider example](https://github.com/wbkd/react-flow/blob/main/example/src/Provider/index.js).
+It is used in the [provider example](/examples/provider/).

website/src/markdown/docs/api/edge-types.md

@@ -25,4 +25,4 @@ edgeTypes={{
 
 Now you could use the new type `special` for an edge.
 The `straight`, `default` and `step` types would still be available unless you overwrote one of them.
-There is an implementation of a custom edge in the [edges example](/example/src/Edges/index.js).
+There is an implementation of a custom edge in the [edges example](/examples/edges/).

website/src/markdown/docs/api/edges.md

@@ -39,4 +39,4 @@ If you wanted to display this edge, you would need a node with id = 1 (source no
 - `isHidden`: if `true`, the edge will not be rendered
 - `data`: {} you can use this to pass data to your custom edges.
 
-You can find an example with different edges in the [edges example](https://reactflow.dev/edges).
+You can find an example with different edges in the [edges example](/examples/edges/).

website/src/markdown/docs/api/handle.md

@@ -32,7 +32,7 @@ const targetHandleWithValidation = (
 
 ### Validation
 
-The handle receives the additional class names `connecting` when the connection line is above the handle and `valid` if the connection is valid. You can find an example which uses these classes [here](/examples/validation).
+The handle receives the additional class names `connecting` when the connection line is above the handle and `valid` if the connection is valid. You can find an example which uses these classes [here](/examples/validation/).
 
 ### Multiple Handles
 

website/src/markdown/docs/index.md

@@ -7,8 +7,8 @@ React Flow is a library for building node-based applications. These can be simpl
 ## Key Features
 
 * **Easy to use:** Seamless zooming & panning behaviour and single and multi-selections of elements
-* **Customizable:** Different [node](#node-types--custom-nodes) and [edge types](#edge-types--custom-edges) and support for custom nodes with multiple handles and custom edges
+* **Customizable:** Different [node](/docs/api/node-types/) and [edge types](/docs/api/edge-types) and support for custom nodes with multiple handles and custom edges
 * **Fast rendering:** Only nodes that have changed are re-rendered and only those that are in the viewport are displayed
-* **Utils:** Snap-to-grid and graph [helper functions](#helper-functions)
+* **Utils:** Snap-to-grid and graph [helper functions](/docs/api/helper-functions/)
-* **Components:** [Background, Minimap and Controls](#components)
+* **Components:** [Background](/docs/api/components/background/), [Minimap](/docs/api/components/minimap/) and [Controls](/docs/api/components/controls/)(#components)
 * **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/)

website/src/templates/mdx-renderer/DocMdx.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from '@emotion/styled';
-
+import slugify from 'slugify';
 import { MDXProvider } from '@mdx-js/react';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 
 import { H1, H2, H3, H4, Text } from 'components/Typo';
 import CodeBlock from 'components/CodeBlock/Mdx';
 import InfoBox from 'components/InfoBox';
-
+import Link from 'components/Link';
 import { getThemeSpacePx } from 'utils/css-utils';
 
 const DocWrapper = styled.div`
@@ -116,14 +116,32 @@ const DocH4 = styled(H4)`
   margin: ${getThemeSpacePx(6)} 0 ${getThemeSpacePx(3)} 0;
 `;
 
+export const getAnchorId = (props = {}) => {
+  let id = '';
+  let nextChildren = props.children;
+
+  // when a react component is passed instead of just text
+  // we need to go through the children until we reach the text content
+  while (nextChildren) {
+    if (typeof nextChildren === 'string') {
+      id = slugify(nextChildren, { lower: true });
+    }
+
+    nextChildren = nextChildren?.props?.children;
+  }
+
+  return id;
+};
+
 const CustomComponents = {
-  h1: DocH1,
+  h1: (props) => <DocH1 {...props} id={getAnchorId(props)} />,
-  h2: DocH2,
+  h2: (props) => <DocH2 {...props} id={getAnchorId(props)} />,
-  h3: DocH3,
+  h3: (props) => <DocH3 {...props} id={getAnchorId(props)} />,
-  h4: DocH4,
+  h4: (props) => <DocH4 {...props} id={getAnchorId(props)} />,
   p: Text,
   pre: (props) => <div {...props} />,
   code: CodeBlock,
+  a: Link,
   InfoBox,
 };