setup docs build (#20)

* setup docusaurus template

* set up search bar

* initial work on customizing content/styles

* set up docs build

* format + adopt signal nomenclature

.gitignore

@@ -46,4 +46,7 @@ packages/*/index.d.ts
 *.bak
 
 # api-extractor output
-api
+api
+
+# docs generated 
+packages/*/docs

.prettierrc.js

@@ -1,10 +1,9 @@
 module.exports = {
-	"trailingComma": "es5",
-	"singleQuote": true,
-	"semi": false,
-	"printWidth": 100,
-	"tabWidth": 2,
-	"useTabs": true,
-	"plugins": ["prettier-plugin-organize-imports", "prettier-plugin-jsdoc"],
-
+	trailingComma: 'es5',
+	singleQuote: true,
+	semi: false,
+	printWidth: 100,
+	tabWidth: 2,
+	useTabs: true,
+	plugins: ['prettier-plugin-organize-imports'],
 }

docs/.gitignore

@@ -0,0 +1,22 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.api-docs-input

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn 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
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/docs/.gitignore

@@ -0,0 +1,2 @@
+tlstate
+tlstate-react

docs/docs/intro.md

@@ -0,0 +1,47 @@
+---
+sidebar_position: 1
+---
+
+# Getting started
+
+Let's discover **Docusaurus in less than 5 minutes**.
+
+## Getting Started
+
+Get started by **creating a new site**.
+
+Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+
+### What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
+  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+
+## Generate a new site
+
+Generate a new Docusaurus site using the **classic template**.
+
+The classic template will automatically be added to your project after you run the command:
+
+```bash
+npm init docusaurus@latest my-website classic
+```
+
+You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+
+The command also installs all necessary dependencies you need to run Docusaurus.
+
+## Start your site
+
+Run the development server:
+
+```bash
+cd my-website
+npm run start
+```
+
+The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
+
+The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+
+Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

docs/docusaurus.config.js

@@ -0,0 +1,121 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const lightCodeTheme = require('prism-react-renderer/themes/github')
+const darkCodeTheme = require('prism-react-renderer/themes/dracula')
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+	title: 'tlstate',
+	tagline: 'Scaleable reactive signals',
+	favicon: 'img/favicon.png',
+
+	// Set the production url of your site here
+	url: 'https://your-docusaurus-test-site.com',
+	// Set the /<baseUrl>/ pathname under which your site is served
+	// For GitHub pages deployment, it is often '/<projectName>/'
+	baseUrl: '/',
+
+	// GitHub pages deployment config.
+	// If you aren't using GitHub pages, you don't need these.
+	organizationName: 'tldraw', // Usually your GitHub org/user name.
+	projectName: 'tlstate', // Usually your repo name.
+
+	onBrokenLinks: 'throw',
+	onBrokenMarkdownLinks: 'warn',
+
+	// Even if you don't use internalization, 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',
+			/** @type {import('@docusaurus/preset-classic').Options} */
+			({
+				docs: {
+					sidebarPath: require.resolve('./sidebars.js'),
+				},
+				theme: {
+					customCss: require.resolve('./src/css/custom.css'),
+				},
+			}),
+		],
+	],
+
+	plugins: [require.resolve('docusaurus-lunr-search')],
+
+	themeConfig:
+		/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+		({
+			// Replace with your project's social card
+			image: 'img/docusaurus-social-card.jpg',
+			navbar: {
+				title: 'tlstate',
+				logo: {
+					alt: 'tlstate logo',
+					src: 'img/logo-small.svg',
+				},
+				items: [
+					{
+						type: 'doc',
+						docId: 'intro',
+						position: 'left',
+						label: 'Getting Started',
+					},
+					{
+						href: 'https://github.com/tldraw/tlstate',
+						label: 'GitHub',
+						position: 'right',
+					},
+				],
+			},
+			footer: {
+				style: 'dark',
+				links: [
+					{
+						title: 'Docs',
+						items: [
+							{
+								label: 'Getting Started',
+								to: '/docs/intro',
+							},
+						],
+					},
+					{
+						title: 'Community',
+						items: [
+							{
+								label: 'Discord',
+								href: 'https://discord.com/invite/SBBEVCA4PG',
+							},
+							{
+								label: 'Twitter',
+								href: 'https://twitter.com/tldraw',
+							},
+						],
+					},
+					{
+						title: 'More',
+						items: [
+							{
+								label: 'GitHub',
+								href: 'https://github.com/tldraw/tlstate',
+							},
+						],
+					},
+				],
+				copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+			},
+			prism: {
+				theme: lightCodeTheme,
+				darkTheme: darkCodeTheme,
+			},
+		}),
+}
+
+module.exports = config

docs/package.json

@@ -0,0 +1,53 @@
+{
+	"name": "docs",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"docusaurus": "docusaurus",
+		"start": "docusaurus start",
+		"build-docs": "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": "2.3.1",
+		"@docusaurus/preset-classic": "2.3.1",
+		"@docusaurus/theme-classic": "^2.3.1",
+		"@docusaurus/types": "^2.3.1",
+		"@mdx-js/react": "^1.6.22",
+		"autocomplete.js": "^0.38.1",
+		"classnames": "^2.3.2",
+		"clsx": "^1.2.1",
+		"docusaurus-lunr-search": "^2.3.2",
+		"hogan.js": "^3.0.2",
+		"lunr": "^2.3.9",
+		"prism-react-renderer": "^1.3.5",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
+	},
+	"devDependencies": {
+		"@docusaurus/module-type-aliases": "2.3.1",
+		"@tsconfig/docusaurus": "^1.0.5",
+		"typescript": "^4.7.4"
+	},
+	"browserslist": {
+		"production": [
+			">0.5%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"engines": {
+		"node": ">=16.14"
+	}
+}

docs/sidebars.js

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    'intro',
+    'hello',
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['tutorial-basics/create-a-document'],
+    },
+  ],
+   */
+};
+
+module.exports = sidebars;