feature: TLDraw plugin for Docusaurus

This is intended to be used by us to embed architectual diagrams in our
documentation using TLDraw and Docusaurus.

packages/docs/docs/intro.mdx

@@ -0,0 +1,12 @@
+---
+sidebar_position: 1
+---
+
+import { Tldr } from 'docusaurus-tldraw-plugin/src/tldr.jsx';
+import digdir from './digdir.tldr';
+
+# Intro
+
+## Tldr
+
+<Tldr children={digdir} />

packages/docs/docusaurus.config.ts

@@ -30,6 +30,10 @@ const config: Config = {
     mermaid: true,
   },
 
+	plugins: [
+		'docusaurus-tldraw-plugin',	
+	],
+
   themes: [
     /* mermaid */
     '@docusaurus/theme-mermaid',

packages/docs/package.json

@@ -24,6 +24,7 @@
     "@mdx-js/react": "^3.0.0",
     "@types/node": "^16.11.10",
     "clsx": "^2.0.0",
+    "docusaurus-tldraw-plugin": "workspace: *",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

packages/docusaurus-tldraw-plugin/Readme.md

@@ -0,0 +1,40 @@
+# Docusaurus Tldraw plugin
+
+## Usage
+
+1. Add the dependency to your Docusaurus project:
+
+```json
+"dependencies": {
+    "docusaurus-tldraw-plugin": "workspace: *",
+}
+```
+
+2. Add the usage of the plugin to your `docusaurus.config.ts` file:
+
+```javascript
+const config: Config = {
+    // ...
+
+	plugins: [
+		'docusaurus-tldraw-plugin',	
+	],
+
+    // ...
+};
+```
+
+3. Create a diagram on [tldraw.com](https://tldraw.com) or using the [TLDraw VSCode plugin](https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode)
+
+4. Use the diagram as a part of your documentation in an `.mdx` file:
+
+```mdx
+import { Tldr } from 'docusaurus-tldraw-plugin/src/tldr.jsx';
+import document from './document.tldr';
+
+# Intro
+
+## Tldr
+
+<Tldr children={document} />
+```

packages/docusaurus-tldraw-plugin/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "docusaurus-tldraw-plugin",
+  "version": "1.0.0",
+  "description": "Docusaurus plugin for embedding tldraw drawings in docs",
+  "main": "src/index.js",
+  "scripts": {
+    "test": ""
+  },
+  "keywords": [
+    "docusaurus",
+    "tldraw",
+    "plugin"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@docusaurus/core": "3.1.1",
+    "react": "^18.2.0",
+    "tldraw": "^2.0.1"
+  }
+}

packages/docusaurus-tldraw-plugin/src/index.js

@@ -0,0 +1,31 @@
+const tdlrPlugin = async (context, opts) => {
+	return {
+		// Plugin name
+		name: 'docusaurus-tldraw-plugin',
+
+		// Webpack config
+		configureWebpack(config, isServer, utils) {
+			return {
+				module: {
+					rules: [
+						{ test: /\.tldr$/, type: 'asset/source' },
+					],
+				},
+			};
+		},
+
+		// Inject Google Fonts into the header
+		injectHtmlTags({ content }) {
+			return {
+				headTags: [
+					{ tagName: 'link', attributes: { rel: 'preconnect', href: 'https://fonts.googleapis.com' } },
+					{ tagName: 'link', attributes: { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: true } },
+					{ tagName: 'link', attributes: { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap' } },
+				],
+			};
+		},
+
+	};
+};
+
+export default tdlrPlugin;

packages/docusaurus-tldraw-plugin/src/tldr.jsx

@@ -0,0 +1,38 @@
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import 'tldraw/tldraw.css';
+import { useMemo } from 'react';
+import { Tldraw, parseTldrawJsonFile, createTLSchema } from 'tldraw';
+
+export const Tldr = ({ children, height }) => {
+	const { value: store, err } = useMemo(() =>
+		parseTldrawJsonFile({ json: children, schema: createTLSchema() }),
+		[children]
+	);
+
+	if (err) {
+		console.log(result.err);
+		return <div>Error loading tldr file</div>;
+	}
+	else if(!store) {
+		return <div>Loading document...</div>
+	}
+
+  return (
+		<div style={{ height: height || '500px', position: 'relative', fontFamily: 'Inter' }}>
+			<div style={{ position: 'absolute', inset: 0 }}>
+				<BrowserOnly fallback={<div>Loading...</div>}>
+					{() => {
+						return <Tldraw
+							inferDarkMode
+							store={store}
+							onMount={(editor) => {
+								editor.updateInstanceState({ isReadonly: true });
+							}}
+							/>;
+				}}
+				</BrowserOnly>
+			</div>
+		</div>
+  );
+}
+