tldraw/apps/examples/package.json
alex b373abf605
add descriptions to examples (#2375)
Adds descriptions to examples.

![Kapture 2023-12-22 at 17 08
32](https://github.com/tldraw/tldraw/assets/1489520/d78657cf-b3c3-4160-b58b-7c08ed27823d)

They show as a list on the index page, and on individual examples they
show in a three-js style sidebar. For now, this is disabled completely
on mobile. Examples can still be opened in 'standalone' mode to get rid
of the sidebar.

Note: the 'view code' link won't work until after these changes are
merged.

There's a small impact on authoring examples: each one needs to live in
a folder with a README.md. At a minimum, the readme needs to look like
this:
```md
---
title: My Example
component: ./MyExample.tsx
---

Here is a 1-liner about my example
```

Optionally, you can:
- Add `hide: true` to the frontmatter to remove the example from the
list (you can skip the description this way)
- Add `order: 3` to control the order in which the example appears.
They're alphabetical otherwise
- Add some more description or links to docs below a `---`. This won't
show in the listing, but will be visible on GitHub and on the example
page itself.

As a follow-up, I'd like to add an 'Open in CodeSandbox' link to each
example. These won't work until we've made a release with these examples
(as our special examples codesandbox is tied to our release process) but
the code is there & ready to go!

Have a play, let me know what you think!

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-12-27 17:17:18 +00:00

57 lines
1.4 KiB
JSON

{
"name": "examples.tldraw.com",
"description": "A tiny little drawing app (development).",
"version": "2.0.0-alpha.11",
"private": true,
"packageManager": "yarn@3.5.0",
"author": {
"name": "tldraw Inc.",
"email": "hello@tldraw.com"
},
"homepage": "https://tldraw.dev",
"license": "SEE LICENSE IN LICENSE.md",
"repository": {
"type": "git",
"url": "https://github.com/tldraw/tldraw"
},
"bugs": {
"url": "https://github.com/tldraw/tldraw/issues"
},
"keywords": [
"tldraw",
"drawing",
"app",
"development",
"whiteboard",
"canvas",
"infinite"
],
"scripts": {
"dev": "vite --host",
"build": "vite build",
"lint": "yarn run -T tsx ../../scripts/lint.ts",
"e2e": "playwright test -c ./e2e/playwright.config.ts",
"e2e-ui": "playwright test --ui -c ./e2e/playwright.config.ts"
},
"dependencies": {
"@babel/plugin-proposal-decorators": "^7.21.0",
"@playwright/test": "^1.38.1",
"@tldraw/assets": "workspace:*",
"@tldraw/tldraw": "workspace:*",
"@vercel/analytics": "^1.0.1",
"classnames": "^2.3.2",
"lazyrepo": "0.0.0-alpha.27",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.9.0",
"vite": "^4.3.4"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.2.0",
"dotenv": "^16.0.3",
"remark": "^15.0.1",
"remark-frontmatter": "^5.0.0",
"remark-html": "^16.0.1",
"vfile-matter": "^5.0.0"
}
}