Update docs links + guides + build (#1422)

This PR fixes various docs issues.

* Fixes `yarn dev-docs` and `yarn build-docs` not working.
* Updated guides to get assets from the new `tldraw/tldraw` repo instead
of the old `tldraw/tldraw-examples`.
* Updated an old CodeSandbox link to the new StackBlitz. Thanks
@MitjaBezensek for spotting it!

### Change Type

- [x] `documentation` — Changes to the documentation only (will not
publish a new version)

### Release Notes

* [docs] Updated guides to get assets from the new `tldraw/tldraw` repo
instead of the old `tldraw/tldraw-examples`.
* [docs] Updated an old CodeSandbox link to the new StackBlitz.
This commit is contained in:
Lu Wilson 2023-05-22 01:21:54 -07:00 committed by GitHub
parent e43b0103fd
commit 84e8db6847
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 8 additions and 8 deletions

View file

@ -19,7 +19,7 @@ Learn more at [tldraw.dev](https://tldraw.dev).
## Installation & Usage ## Installation & Usage
To learn more about using tldraw in your React application, follow our guide [here](https://tldraw.dev/docs/ucg/installation) or see [this CodeSandbox](https://codesandbox.io/p/github/tldraw/tldraw-examples/main?file=%2FREADME.md). To learn more about using tldraw in your React application, follow our guide [here](https://tldraw.dev/docs/ucg/installation) or see [this StackBlitz](https://stackblitz.com/github/tldraw/tldraw/tree/examples?file=src%2F1-basic%2FBasicExample.tsx).
```tsx ```tsx
import { Tldraw } from '@tldraw/tldraw' import { Tldraw } from '@tldraw/tldraw'

View file

@ -14,5 +14,5 @@ yarn add @tldraw/tldraw@alpha signia signia-react
npm install @tldraw/tldraw@alpha signia signia-react npm install @tldraw/tldraw@alpha signia signia-react
``` ```
Next, copy the following folders: `icons`, `embed-icons`, `fonts`, and `translations` from the [tldraw-examples](https://github.com/tldraw/tldraw-examples/tree/main/public) repository. Put them in your project's public path so that, e.g. `your-website.com/icons` points to the icons folder you copied. (Ability to customize the base asset URL is coming soon!) Next, copy the following folders: `icons`, `embed-icons`, `fonts`, and `translations` from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets). Put them in your project's public path so that, e.g. `your-website.com/icons` points to the icons folder you copied. (Ability to customize the base asset URL is coming soon!)

View file

@ -30,7 +30,7 @@ yarn add @tldraw/tldraw@alpha signia signia-react
npm install @tldraw/tldraw@alpha signia signia-react npm install @tldraw/tldraw@alpha signia signia-react
``` ```
Next, copy the following folders: `icons`, `embed-icons`, `fonts`, and `translations` from the [tldraw-examples](https://github.com/tldraw/tldraw-examples/tree/main/public) repository. Put them in your project's public path so that, e.g. `your-website.com/icons` points to the icons folder you copied. (Ability to customize the base asset URL is coming soon!) Next, copy the following folders: `icons`, `embed-icons`, `fonts`, and `translations` from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets). Put them in your project's public path so that, e.g. `your-website.com/icons` points to the icons folder you copied. (Ability to customize the base asset URL is coming soon!)
## Usage ## Usage
@ -98,7 +98,7 @@ If you wanted to have more granular control, you could also use those subcompone
In order to use the `<Tldraw/>` component, the app must be able to find certain assets on the host. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. If you are using the `<Tldraw/>` component in your app, you must also copy these folders into your public path. In order to use the `<Tldraw/>` component, the app must be able to find certain assets on the host. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. If you are using the `<Tldraw/>` component in your app, you must also copy these folders into your public path.
You can copy these files from the [tldraw-examples](https://github.com/tldraw/tldraw-examples) repository. Place the folders in your project's public path as shown in that repository. You can copy these files from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets) repository. Place the folders in your project's public path as shown in that repository.
> **Note:** This requirement is very likely to change in the near future. > **Note:** This requirement is very likely to change in the near future.

View file

@ -64,13 +64,13 @@ The `<Tldraw/>` component combines several other pieces:
> **Note:** In the future, this library will also include an engine for using our collaboration services. > **Note:** In the future, this library will also include an engine for using our collaboration services.
If you wanted to have more granular control, you could also use those subcomponents directly. See the ["exploded" example](https://github.com/tldraw/tldraw-examples) for what that would look like. If you wanted to have more granular control, you could also use those subcomponents directly. See the ["exploded" example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/5-exploded/ExplodedExample.tsx) for what that would look like.
### Assets ### Assets
In order to use the `<Tldraw/>` component, the app must be able to find certain assets on the host. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. If you are using the `<Tldraw/>` component in your app, you must also copy these folders into your public path. In order to use the `<Tldraw/>` component, the app must be able to find certain assets on the host. These are contained in the `embed-icons`, `fonts`, `icons`, and `translations` folders. If you are using the `<Tldraw/>` component in your app, you must also copy these folders into your public path.
You can copy these files from the [tldraw-examples](https://github.com/tldraw/tldraw-examples) repository. Place the folders in your project's public path as shown in that repository. You can copy these files from the [assets folder](https://github.com/tldraw/tldraw/tree/main/assets). Place the folders in your project's public path as shown in that repository.
> **Note:** This requirement is very likely to change in the near future. > **Note:** This requirement is very likely to change in the near future.

View file

@ -37,9 +37,9 @@
"postinstall": "husky install && yarn refresh-assets", "postinstall": "husky install && yarn refresh-assets",
"refresh-assets": "lazy refresh-assets", "refresh-assets": "lazy refresh-assets",
"build": "lazy build", "build": "lazy build",
"build-docs": "lazy build --filter='apps/docs'", "build-docs": "lazy build --filter='{,bublic/}apps/docs'",
"dev": "lazy run dev --filter='{,bublic/}apps/examples' --filter='{,bublic/}packages/tldraw'", "dev": "lazy run dev --filter='{,bublic/}apps/examples' --filter='{,bublic/}packages/tldraw'",
"dev-docs": "lazy run dev --filter='apps/docs'", "dev-docs": "lazy run dev --filter='{,bublic/}apps/docs'",
"dev-vscode": "code ./apps/vscode/extension && lazy run dev --filter='{,bublic/}apps/vscode/{extension,editor}'", "dev-vscode": "code ./apps/vscode/extension && lazy run dev --filter='{,bublic/}apps/vscode/{extension,editor}'",
"dev-webdriver": "lazy run dev --filter='apps/webdriver' --filter='{,bublic/}apps/vscode/*'", "dev-webdriver": "lazy run dev --filter='apps/webdriver' --filter='{,bublic/}apps/vscode/*'",
"build-types": "lazy inherit", "build-types": "lazy inherit",