Skip to content

Commit 20c7da4

Browse files
ds300ds300
authored
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
1 parent 8109d6c commit 20c7da4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+9049
-848
lines changed

‎.gitignore

+4-1
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,7 @@ packages/*/index.d.ts
4646
*.bak
4747

4848
# api-extractor output
49-
api
49+
api
50+
51+
# docs generated
52+
packages/*/docs

‎.prettierrc.js

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
module.exports = {
2-
"trailingComma": "es5",
3-
"singleQuote": true,
4-
"semi": false,
5-
"printWidth": 100,
6-
"tabWidth": 2,
7-
"useTabs": true,
8-
"plugins": ["prettier-plugin-organize-imports", "prettier-plugin-jsdoc"],
9-
2+
trailingComma: 'es5',
3+
singleQuote: true,
4+
semi: false,
5+
printWidth: 100,
6+
tabWidth: 2,
7+
useTabs: true,
8+
plugins: ['prettier-plugin-organize-imports'],
109
}

‎docs/.gitignore

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Dependencies
2+
/node_modules
3+
4+
# Production
5+
/build
6+
7+
# Generated files
8+
.docusaurus
9+
.cache-loader
10+
11+
# Misc
12+
.DS_Store
13+
.env.local
14+
.env.development.local
15+
.env.test.local
16+
.env.production.local
17+
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*
21+
22+
.api-docs-input

‎docs/README.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Website
2+
3+
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
4+
5+
### Installation
6+
7+
```
8+
$ yarn
9+
```
10+
11+
### Local Development
12+
13+
```
14+
$ yarn start
15+
```
16+
17+
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18+
19+
### Build
20+
21+
```
22+
$ yarn build
23+
```
24+
25+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
26+
27+
### Deployment
28+
29+
Using SSH:
30+
31+
```
32+
$ USE_SSH=true yarn deploy
33+
```
34+
35+
Not using SSH:
36+
37+
```
38+
$ GIT_USER=<Your GitHub username> yarn deploy
39+
```
40+
41+
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

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

‎docs/docs/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
tlstate
2+
tlstate-react

‎docs/docs/intro.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Getting started
6+
7+
Let's discover **Docusaurus in less than 5 minutes**.
8+
9+
## Getting Started
10+
11+
Get started by **creating a new site**.
12+
13+
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
14+
15+
### What you'll need
16+
17+
- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
18+
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
19+
20+
## Generate a new site
21+
22+
Generate a new Docusaurus site using the **classic template**.
23+
24+
The classic template will automatically be added to your project after you run the command:
25+
26+
```bash
27+
npm init docusaurus@latest my-website classic
28+
```
29+
30+
You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
31+
32+
The command also installs all necessary dependencies you need to run Docusaurus.
33+
34+
## Start your site
35+
36+
Run the development server:
37+
38+
```bash
39+
cd my-website
40+
npm run start
41+
```
42+
43+
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.
44+
45+
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/.
46+
47+
Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

‎docs/docusaurus.config.js

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
// @ts-check
2+
// Note: type annotations allow type checking and IDEs autocompletion
3+
4+
const lightCodeTheme = require('prism-react-renderer/themes/github')
5+
const darkCodeTheme = require('prism-react-renderer/themes/dracula')
6+
7+
/** @type {import('@docusaurus/types').Config} */
8+
const config = {
9+
title: 'tlstate',
10+
tagline: 'Scaleable reactive signals',
11+
favicon: 'img/favicon.png',
12+
13+
// Set the production url of your site here
14+
url: 'https://your-docusaurus-test-site.com',
15+
// Set the /<baseUrl>/ pathname under which your site is served
16+
// For GitHub pages deployment, it is often '/<projectName>/'
17+
baseUrl: '/',
18+
19+
// GitHub pages deployment config.
20+
// If you aren't using GitHub pages, you don't need these.
21+
organizationName: 'tldraw', // Usually your GitHub org/user name.
22+
projectName: 'tlstate', // Usually your repo name.
23+
24+
onBrokenLinks: 'throw',
25+
onBrokenMarkdownLinks: 'warn',
26+
27+
// Even if you don't use internalization, you can use this field to set useful
28+
// metadata like html lang. For example, if your site is Chinese, you may want
29+
// to replace "en" with "zh-Hans".
30+
i18n: {
31+
defaultLocale: 'en',
32+
locales: ['en'],
33+
},
34+
35+
presets: [
36+
[
37+
'classic',
38+
/** @type {import('@docusaurus/preset-classic').Options} */
39+
({
40+
docs: {
41+
sidebarPath: require.resolve('./sidebars.js'),
42+
},
43+
theme: {
44+
customCss: require.resolve('./src/css/custom.css'),
45+
},
46+
}),
47+
],
48+
],
49+
50+
plugins: [require.resolve('docusaurus-lunr-search')],
51+
52+
themeConfig:
53+
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
54+
({
55+
// Replace with your project's social card
56+
image: 'img/docusaurus-social-card.jpg',
57+
navbar: {
58+
title: 'tlstate',
59+
logo: {
60+
alt: 'tlstate logo',
61+
src: 'img/logo-small.svg',
62+
},
63+
items: [
64+
{
65+
type: 'doc',
66+
docId: 'intro',
67+
position: 'left',
68+
label: 'Getting Started',
69+
},
70+
{
71+
href: 'https://github.com/tldraw/tlstate',
72+
label: 'GitHub',
73+
position: 'right',
74+
},
75+
],
76+
},
77+
footer: {
78+
style: 'dark',
79+
links: [
80+
{
81+
title: 'Docs',
82+
items: [
83+
{
84+
label: 'Getting Started',
85+
to: '/docs/intro',
86+
},
87+
],
88+
},
89+
{
90+
title: 'Community',
91+
items: [
92+
{
93+
label: 'Discord',
94+
href: 'https://discord.com/invite/SBBEVCA4PG',
95+
},
96+
{
97+
label: 'Twitter',
98+
href: 'https://twitter.com/tldraw',
99+
},
100+
],
101+
},
102+
{
103+
title: 'More',
104+
items: [
105+
{
106+
label: 'GitHub',
107+
href: 'https://github.com/tldraw/tlstate',
108+
},
109+
],
110+
},
111+
],
112+
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
113+
},
114+
prism: {
115+
theme: lightCodeTheme,
116+
darkTheme: darkCodeTheme,
117+
},
118+
}),
119+
}
120+
121+
module.exports = config

‎docs/package.json

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"name": "docs",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"docusaurus": "docusaurus",
7+
"start": "docusaurus start",
8+
"build-docs": "docusaurus build",
9+
"swizzle": "docusaurus swizzle",
10+
"deploy": "docusaurus deploy",
11+
"clear": "docusaurus clear",
12+
"serve": "docusaurus serve",
13+
"write-translations": "docusaurus write-translations",
14+
"write-heading-ids": "docusaurus write-heading-ids",
15+
"typecheck": "tsc"
16+
},
17+
"dependencies": {
18+
"@docusaurus/core": "2.3.1",
19+
"@docusaurus/preset-classic": "2.3.1",
20+
"@docusaurus/theme-classic": "^2.3.1",
21+
"@docusaurus/types": "^2.3.1",
22+
"@mdx-js/react": "^1.6.22",
23+
"autocomplete.js": "^0.38.1",
24+
"classnames": "^2.3.2",
25+
"clsx": "^1.2.1",
26+
"docusaurus-lunr-search": "^2.3.2",
27+
"hogan.js": "^3.0.2",
28+
"lunr": "^2.3.9",
29+
"prism-react-renderer": "^1.3.5",
30+
"react": "^17.0.2",
31+
"react-dom": "^17.0.2"
32+
},
33+
"devDependencies": {
34+
"@docusaurus/module-type-aliases": "2.3.1",
35+
"@tsconfig/docusaurus": "^1.0.5",
36+
"typescript": "^4.7.4"
37+
},
38+
"browserslist": {
39+
"production": [
40+
">0.5%",
41+
"not dead",
42+
"not op_mini all"
43+
],
44+
"development": [
45+
"last 1 chrome version",
46+
"last 1 firefox version",
47+
"last 1 safari version"
48+
]
49+
},
50+
"engines": {
51+
"node": ">=16.14"
52+
}
53+
}

‎docs/sidebars.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* Creating a sidebar enables you to:
3+
- create an ordered group of docs
4+
- render a sidebar for each doc of that group
5+
- provide next/previous navigation
6+
7+
The sidebars can be generated from the filesystem, or explicitly defined here.
8+
9+
Create as many sidebars as you want.
10+
*/
11+
12+
// @ts-check
13+
14+
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
15+
const sidebars = {
16+
// By default, Docusaurus generates a sidebar from the docs folder structure
17+
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
18+
19+
// But you can create a sidebar manually
20+
/*
21+
tutorialSidebar: [
22+
'intro',
23+
'hello',
24+
{
25+
type: 'category',
26+
label: 'Tutorial',
27+
items: ['tutorial-basics/create-a-document'],
28+
},
29+
],
30+
*/
31+
};
32+
33+
module.exports = sidebars;

0 commit comments

Comments
 (0)