Update readme (#2027)
This PR updates the tldraw readme. ### Change Type - [x] `patch` — Bug fix
This commit is contained in:
parent
fa32173409
commit
53a8fd6c69
4 changed files with 40 additions and 37 deletions
1
apps/examples/.gitignore
vendored
Normal file
1
apps/examples/.gitignore
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
.vercel
|
|
@ -55,127 +55,127 @@ type Example = {
|
|||
export const allExamples: Example[] = [
|
||||
{
|
||||
title: 'Basic (development)',
|
||||
path: '/develop',
|
||||
path: 'develop',
|
||||
element: <BasicExample />,
|
||||
},
|
||||
{
|
||||
title: 'Collaboration (with Yjs)',
|
||||
path: '/yjs',
|
||||
path: 'yjs',
|
||||
element: <YjsExample />,
|
||||
},
|
||||
{
|
||||
title: 'Editor API',
|
||||
path: '/api',
|
||||
path: 'api',
|
||||
element: <APIExample />,
|
||||
},
|
||||
{
|
||||
title: 'Multiple editors',
|
||||
path: '/multiple',
|
||||
path: 'multiple',
|
||||
element: <MultipleExample />,
|
||||
},
|
||||
{
|
||||
title: 'Readonly Example',
|
||||
path: '/readonly',
|
||||
path: 'readonly',
|
||||
element: <ReadOnlyExample />,
|
||||
},
|
||||
{
|
||||
title: 'Scroll example',
|
||||
path: '/scroll',
|
||||
path: 'scroll',
|
||||
element: <ScrollExample />,
|
||||
},
|
||||
{
|
||||
title: 'Custom shapes / tools',
|
||||
path: '/custom-config',
|
||||
path: 'custom-config',
|
||||
element: <CustomConfigExample />,
|
||||
},
|
||||
{
|
||||
title: 'Sublibraries',
|
||||
path: '/exploded',
|
||||
path: 'exploded',
|
||||
element: <ExplodedExample />,
|
||||
},
|
||||
{
|
||||
title: 'Error boundary',
|
||||
path: '/error-boundary',
|
||||
path: 'error-boundary',
|
||||
element: <ErrorBoundaryExample />,
|
||||
},
|
||||
{
|
||||
title: 'Custom UI',
|
||||
path: '/custom-ui',
|
||||
path: 'custom-ui',
|
||||
element: <CustomUiExample />,
|
||||
},
|
||||
{
|
||||
title: 'Hide UI',
|
||||
path: '/hide-ui',
|
||||
path: 'hide-ui',
|
||||
element: <HideUiExample />,
|
||||
},
|
||||
{
|
||||
title: 'UI components',
|
||||
path: '/custom-components',
|
||||
path: 'custom-components',
|
||||
element: <CustomComponentsExample />,
|
||||
},
|
||||
{
|
||||
title: 'UI events',
|
||||
path: '/ui-events',
|
||||
path: 'ui-events',
|
||||
element: <UiEventsExample />,
|
||||
},
|
||||
{
|
||||
title: 'Canvas events',
|
||||
path: '/canvas-events',
|
||||
path: 'canvas-events',
|
||||
element: <CanvasEventsExample />,
|
||||
},
|
||||
{
|
||||
title: 'Store events',
|
||||
path: '/store-events',
|
||||
path: 'store-events',
|
||||
element: <StoreEventsExample />,
|
||||
},
|
||||
{
|
||||
title: 'User presence',
|
||||
path: '/user-presence',
|
||||
path: 'user-presence',
|
||||
element: <UserPresenceExample />,
|
||||
},
|
||||
{
|
||||
title: 'UI zones',
|
||||
path: '/zones',
|
||||
path: 'zones',
|
||||
element: <ZonesExample />,
|
||||
},
|
||||
{
|
||||
title: 'Persistence',
|
||||
path: '/persistence',
|
||||
path: 'persistence',
|
||||
element: <PersistenceExample />,
|
||||
},
|
||||
{
|
||||
title: 'Snapshots',
|
||||
path: '/snapshots',
|
||||
path: 'snapshots',
|
||||
element: <SnapshotExample />,
|
||||
},
|
||||
{
|
||||
title: 'Custom styles',
|
||||
path: '/custom-styles',
|
||||
path: 'custom-styles',
|
||||
element: <CustomStylesExample />,
|
||||
},
|
||||
{
|
||||
title: 'Shape meta property',
|
||||
path: '/shape-meta',
|
||||
path: 'shape-meta',
|
||||
element: <ShapeMetaExample />,
|
||||
},
|
||||
{
|
||||
title: 'Only editor',
|
||||
path: '/only-editor',
|
||||
path: 'only-editor',
|
||||
element: <OnlyEditorExample />,
|
||||
},
|
||||
{
|
||||
title: 'Asset props',
|
||||
path: '/asset-props',
|
||||
path: 'asset-props',
|
||||
element: <AssetPropsExample />,
|
||||
},
|
||||
{
|
||||
title: 'External content sources',
|
||||
path: '/external-content-sources',
|
||||
path: 'external-content-sources',
|
||||
element: <ExternalContentSourcesExample />,
|
||||
},
|
||||
// not listed
|
||||
{
|
||||
path: '/end-to-end',
|
||||
path: 'end-to-end',
|
||||
element: <EndToEnd />,
|
||||
},
|
||||
]
|
||||
|
@ -201,12 +201,13 @@ function App() {
|
|||
}
|
||||
|
||||
const router = createBrowserRouter([
|
||||
...allExamples,
|
||||
{
|
||||
path: '/',
|
||||
element: <App />,
|
||||
},
|
||||
...allExamples,
|
||||
])
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
const root = createRoot(rootElement!)
|
||||
|
||||
|
|
|
@ -1,24 +1,26 @@
|
|||
<div alt style="text-align: center; transform: scale(.5);">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/tldraw/tldraw-lite/raw/main/assets/github-hero-dark.png" />
|
||||
<img alt="Signia" src="https://github.com/tldraw/tldraw-lite/raw/main/assets/github-hero-light.png" />
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/tldraw/tldraw/raw/main/assets/github-hero-dark.png" />
|
||||
<img alt="tldraw" src="https://github.com/tldraw/tldraw/raw/main/assets/github-hero-light.png" />
|
||||
</picture>
|
||||
</div>
|
||||
|
||||
# @tldraw/tldraw
|
||||
|
||||
This is the alpha version of [tldraw](https://beta.tldraw.com). It is very much a work in progress.
|
||||
This is the pre-release version of [tldraw](https://github.com/tldraw/tldraw).
|
||||
|
||||
See the pre-release docs at [canary.tldraw.dev](https://canary.tldraw.com).
|
||||
|
||||
## Installation
|
||||
|
||||
Install the `@tldraw/tldraw` package using `@alpha` for the latest alpha release.
|
||||
Install the `@tldraw/tldraw` package using `@canary` for the latest canary release. (Or `@alpha` for the latest alpha release.)
|
||||
|
||||
```bash
|
||||
yarn add @tldraw/tldraw@alpha
|
||||
yarn add @tldraw/tldraw@canary
|
||||
# or
|
||||
npm install @tldraw/tldraw@alpha
|
||||
npm install @tldraw/tldraw@canary
|
||||
# or
|
||||
pnpm i @tldraw/tldraw@alpha
|
||||
pnpm i @tldraw/tldraw@canary
|
||||
```
|
||||
|
||||
Then start the local development server.
|
||||
|
@ -37,15 +39,14 @@ An extremely minimal usage (without our UI) might look like this:
|
|||
|
||||
```tsx
|
||||
import { Tldraw } from '@tldraw/tldraw'
|
||||
import '@tldraw/tldraw/styles-editor.css'
|
||||
import '@tldraw/tldraw/styles-ui.css'
|
||||
import '@tldraw/tldraw/tldraw.css'
|
||||
|
||||
export default function () {
|
||||
return <Tldraw />
|
||||
}
|
||||
```
|
||||
|
||||
See the [examples repo](https://github.com/tldraw/tldraw-examples) for more examples.
|
||||
See the [examples folder](https://github.com/tldraw/tldraw/tree/main/apps/examples) for more examples.
|
||||
|
||||
## License
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
"rewrites": [
|
||||
{
|
||||
"source": "/(.*)",
|
||||
"destination": "/index.html"
|
||||
"destination": "/"
|
||||
}
|
||||
]
|
||||
}
|
Loading…
Reference in a new issue