PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
tldraw/apps/docs/styles/globals.css

1600 lines
27 KiB
CSS
Raw Normal View History

Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@700;800&family=Inter:wght@400;600&display=swap');
:root {
--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-heading: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono',
'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono',
'Courier New', monospace;
--color-tint-0: rgba(144, 144, 144, 0.08);
--color-tint-1: rgba(144, 144, 144, 0.12);
--color-tint-2: rgba(144, 144, 144, 0.15);
--color-tint-3: rgba(144, 144, 144, 0.3);
--color-tint-4: rgba(144, 144, 144, 0.5);
--color-tint-5: rgb(144, 144, 144);
--color-tint-6: rgb(81, 81, 81);
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
--color-blockquote: rgb(242, 247, 255);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
/* Light theme */
--color-text: #1d1d1d;
[Docs] Tweak sidebar titles (#2706) This PR adjusts the way that sidebar titles look. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-01 18:16:30 +00:00
--color-text-secondary: #666;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
--color-background: #ffffff;
--color-contrast: #ffffff;
--color-accent: #2f80ed;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
--color-footer-background: hsl(240, 5%, 8%);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
--color-footer-text: #fafafa;
--shadow-small: 0px 0px 16px -2px rgba(0, 0, 0, 0.12), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
--shadow-big: 0px 0px 16px -2px rgba(0, 0, 0, 0.24), 0px 0px 4px 0px rgba(0, 0, 0, 0.24);
/* Code colors */
--hl: #4e484e;
--hl-0: rgb(138, 142, 153);
--hl-1: rgb(54, 59, 69);
--hl-2: rgb(144, 81, 188);
--hl-3: rgb(178, 66, 69);
--hl-4: rgb(69, 141, 155);
--hl-5: rgb(100, 144, 65);
--hl-6: rgb(179, 108, 50);
--hl-7: rgb(73, 131, 216);
--hl-8: rgb(180, 133, 64);
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
/* Shape */
--border-radius-menu: 4px;
docs: fix scroll position and theming issue for code snippets (#2883) - scrolling to a section was hiding the header under the top layout when clicking on the sidebar - dark mode wasn't hydrating correctly and we only render on client, for now ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-20 14:24:54 +00:00
/* Sizes */
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
--header-height: 80px;
--header-padding: 24px;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
[data-theme='dark'] {
/* Dark theme */
--color-text: #fafafa;
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
--color-text-secondary: #999;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
--color-background: hsl(240, 5%, 8%);
--color-contrast: #000;
--color-accent: #74b0ff;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
--color-footer-background: hsl(240, 5%, 8%);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
--color-footer-text: #ccc;
--shadow-small: 0px 0px 16px -2px rgba(0, 0, 0, 0.52), 0px 0px 4px 0px rgba(0, 0, 0, 0.62);
--shadow-big: 0px 0px 16px -2px rgba(0, 0, 0, 0.54), 0px 0px 4px 0px rgba(0, 0, 0, 0.54);
--color-tint-0: rgba(144, 144, 144, 0.07);
--color-tint-1: rgba(144, 144, 144, 0.12);
--color-tint-2: rgba(144, 144, 144, 0.17);
--color-tint-3: rgba(144, 144, 144, 0.4);
--color-tint-4: rgba(144, 144, 144, 0.6);
--color-tint-5: rgb(144, 144, 144);
--color-tint-6: rgb(186, 186, 186);
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
--color-blockquote: rgb(34, 47, 55);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
/* Code colors */
--hl: #c8c5f1;
--hl-0: #5c6370;
--hl-1: #5c6370;
--hl-2: #c678dd;
--hl-3: #e06c75;
--hl-4: #56b6c2;
--hl-5: #98c379;
--hl-6: #d19a66;
--hl-7: #61aeee;
--hl-8: #e6c07b;
}
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
html {
background-color: #000;
border-bottom: none;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
scroll-padding-top: calc(var(--header-height) + var(--header-padding));
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
body {
background-color: var(--color-background);
font-family: var(--font-body);
font-size: 16px;
line-height: 28px;
font-weight: 400;
color: var(--color-text);
min-height: 100vh;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
}
.layout {
display: grid;
width: 100%;
max-width: 1440px;
grid-template-columns: 250px 1fr;
docs: fix scroll position and theming issue for code snippets (#2883) - scrolling to a section was hiding the header under the top layout when clicking on the sidebar - dark mode wasn't hydrating correctly and we only render on client, for now ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-20 14:24:54 +00:00
grid-template-rows: var(--header-height) 1fr;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
column-gap: 48px;
row-gap: 0px;
padding: 0px;
margin: 0px auto;
}
.layout_with_headerlinks {
grid-template-columns: 250px 1fr 250px;
}
.layout__header {
grid-row: 1;
grid-column: 1 / span 3;
width: 100%;
position: sticky;
background-color: var(--color-background);
z-index: 900;
top: 0px;
display: grid;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
padding: 0px 16px;
[docs] Small style changes (#2805) This PR has some superficial style changes for the docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-13 10:07:29 +00:00
grid-template-columns: 250px 1fr auto;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
gap: 16px;
justify-content: center;
align-items: center;
color: var(--color-text);
}
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
.layout__header__left img {
width: calc(136px);
height: auto;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
.layout__header__links {
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
display: flex;
align-items: center;
justify-content: space-between;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
gap: 8px;
}
.layout__header__sections {
display: flex;
align-items: center;
}
.layout__header__socials {
display: flex;
align-items: center;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
.layout_header__section {
text-decoration: none;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
padding: 13px 12px;
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
font-size: 14px;
color: var(--color-text);
[docs] Small style changes (#2805) This PR has some superficial style changes for the docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-13 10:07:29 +00:00
position: relative;
}
.layout_header__section::after {
position: absolute;
display: block;
content: '';
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
inset: 7px 2px;
[docs] Small style changes (#2805) This PR has some superficial style changes for the docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-13 10:07:29 +00:00
background-color: var(--bg);
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
border-radius: var(--border-radius-menu);
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
}
.layout_header__section[data-active='true'] {
[docs] Small style changes (#2805) This PR has some superficial style changes for the docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-13 10:07:29 +00:00
--bg: var(--color-tint-1);
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
}
@media (hover: hover) {
[docs] Small style changes (#2805) This PR has some superficial style changes for the docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-13 10:07:29 +00:00
.layout_header__section:hover {
--bg: var(--color-tint-1);
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
}
}
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
.icon-button {
display: block;
position: relative;
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
--bg: transparent;
color: var(--color-text);
cursor: pointer;
}
.icon-button::after {
position: absolute;
display: block;
content: '';
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
inset: 0;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
background-color: var(--bg);
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
border-radius: var(--border-radius-menu);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
transition: background-color 0.1s ease-in-out;
transition-delay: 0s;
}
@media (hover: hover) {
.icon-button:hover {
--bg: var(--color-tint-1);
color: var(--color-text);
transition: background-color 0.2s ease-in-out;
transition-delay: 0.1s;
}
.menu__button > .icon {
--bg: var(--color-tint-1);
color: var(--color-background);
}
}
.icon {
flex-shrink: 0;
width: 20px;
height: 20px;
background-color: currentColor;
}
.icon.small {
flex-shrink: 0;
width: 16px;
height: 16px;
background-color: currentColor;
}
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
.main-content {
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
justify-self: center;
width: 100%;
min-height: calc(100vh - 64px);
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
padding: var(--header-padding) 0px 96px 0px;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
font-weight: 400;
overflow-x: hidden;
overflow-y: visible;
}
.article__table-of-contents {
display: none;
}
.article__details {
display: flex;
align-items: flex-start;
Fix translations link (#2477) This PR fixes a bug in the docs! ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-01-17 10:10:44 +00:00
justify-content: space-between;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
margin: 40px 0px;
gap: 16px;
max-width: 100%;
overflow: hidden;
}
.article__details__edit {
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
flex-shrink: 0;
}
.article__details__timestamp {
font-size: 14px;
color: var(--color-tint-5);
text-align: right;
}
/* Prev / Next Links */
.article__links {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
padding-bottom: 4px;
margin-top: 64px;
align-items: flex-start;
justify-content: space-between;
max-width: 100%;
}
.article__links .icon {
display: inline-block;
}
.article__links__link {
display: block;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--color-accent);
padding: 10px 16px;
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
border-radius: var(--border-radius-menu);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.article__links__prev {
grid-column: 1;
justify-self: flex-start;
}
.article__links__next {
grid-column: 2;
justify-self: flex-end;
}
/* Common Styles */
.article h1 {
font-size: 2.5em;
line-height: 1.15;
word-break: keep-all;
font-family: var(--font-heading);
font-weight: 800;
}
.article > h2,
.article > h3,
.article > h4,
.article > h5,
.article > h6 {
line-height: 1.2;
font-family: var(--font-heading);
word-break: keep-all;
}
.article h2 {
font-size: 1.8em;
}
.article__api-docs h2 {
margin-bottom: 40px;
}
.article > h1,
.article > h2 {
pointer-events: none;
font-weight: 800;
}
Quick start guide (#2692) Following on from #2686, this PR replaces the introduction page with a Quick Start guide. Next Steps: - Better UX around the code blocks, throughout the site. A copy button would be great. - Collapsible extra info on the release version and rendering an inline component - Maybe remove the embed - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add a quick start guide --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-12 09:53:11 +00:00
.article > h2 {
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
margin-top: 48px;
Quick start guide (#2692) Following on from #2686, this PR replaces the introduction page with a Quick Start guide. Next Steps: - Better UX around the code blocks, throughout the site. A copy button would be great. - Collapsible extra info on the release version and rendering an inline component - Maybe remove the embed - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add a quick start guide --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-12 09:53:11 +00:00
}
.article > p + h2 {
margin-top: 48px;
}
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
.article > h3 {
font-size: 1.5em;
Quick start guide (#2692) Following on from #2686, this PR replaces the introduction page with a Quick Start guide. Next Steps: - Better UX around the code blocks, throughout the site. A copy button would be great. - Collapsible extra info on the release version and rendering an inline component - Maybe remove the embed - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add a quick start guide --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-12 09:53:11 +00:00
padding-top: 16px;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
pointer-events: none;
font-weight: 700;
}
.article > h4,
.article > h5,
.article > h6 {
margin-top: 32px;
font-weight: 700;
}
.article > h1 > a,
.article > h2 > a,
.article > h3 > a,
.article > h4 > a,
.article > h5 > a,
.article > h6 > a {
color: var(--color-text);
pointer-events: all;
}
.page-header {
margin-bottom: 48px;
}
.article__api-docs .page-header {
margin-bottom: 0px;
}
.page-header h1 {
margin-top: 0px;
}
.page-header h2 {
margin-top: 10px;
}
.article details {
margin: 20px 0px;
list-style: none;
margin-bottom: 40px;
}
.article details summary {
display: flex;
align-items: center;
list-style: none;
cursor: pointer;
}
.article details summary * {
cursor: pointer;
}
.article details summary::before {
font-size: 10px;
content: '▶';
margin-right: 8px;
}
.article details summary::-webkit-details-marker {
display: none;
}
.article details[open] summary::before {
content: '▼';
}
.article details ul {
list-style-type: disc;
margin: 0px 0px;
}
.article p.article__small {
margin: 8px 0px 32px 0px;
}
.article p.article__small small {
font-size: 14px;
color: var(--color-tint-6);
}
.article p.article__small small::first-letter {
text-transform: uppercase;
}
.article a {
color: var(--color-accent);
text-decoration: none;
cursor: pointer;
}
@media (hover: hover) {
.article a:hover {
text-decoration: underline;
}
}
.article > p {
margin: 20px 0px;
}
.article > blockquote {
max-width: 100%;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
margin: 32px 0px;
padding: 16px;
border-radius: var(--border-radius-menu);
background-color: var(--color-blockquote);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
.article pre {
max-width: 100%;
margin: 32px 0px;
padding: 16px;
background-color: var(--color-tint-0);
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
border-radius: var(--border-radius-menu);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
font-size: 13px;
overflow-x: auto;
}
.article__api-docs pre {
margin: 24px 0px;
}
.article code {
font-family: var(--font-mono);
}
.article p code,
Update readmes / docs for 2.0 (#3011) This PR updates the readmes for our 2.0 release. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 18:12:16 +00:00
.article li code,
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
.article td code {
background-color: var(--color-tint-0);
font-size: 15px;
font-weight: 500;
padding: 2px 5px;
margin: 0px -2px;
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
border-radius: var(--border-radius-menu);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
.article pre > code {
font-size: 14px;
width: 100%;
tab-size: 16px;
}
.article ol {
margin: 20px 0px;
padding-left: 16px;
Quick start guide (#2692) Following on from #2686, this PR replaces the introduction page with a Quick Start guide. Next Steps: - Better UX around the code blocks, throughout the site. A copy button would be great. - Collapsible extra info on the release version and rendering an inline component - Maybe remove the embed - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add a quick start guide --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-12 09:53:11 +00:00
margin-left: 8px;
}
.article ol h3 a {
color: var(--color-text);
}
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
.article ol h3 {
Quick start guide (#2692) Following on from #2686, this PR replaces the introduction page with a Quick Start guide. Next Steps: - Better UX around the code blocks, throughout the site. A copy button would be great. - Collapsible extra info on the release version and rendering an inline component - Maybe remove the embed - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add a quick start guide --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-12 09:53:11 +00:00
font-size: 1.17em;
line-height: 28px;
}
.article ol ul {
list-style-type: disc;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
.article ul {
margin: 20px 0px;
padding-left: 16px;
}
.article li {
margin: 8px 0px;
}
.article hr {
margin: 56px 0px 32px 0px;
padding: 0px 4px;
height: 1px;
width: calc(100% - 8px);
background-color: var(--color-tint-2);
border: none;
}
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
.article.article__example hr {
margin: 0;
}
Better example intros (#2912) Moves the article content above the iframe and adds the description to the title. - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Adds more info to the examples section of the docs.
2024-02-22 09:05:35 +00:00
.page-header > p {
margin-top: 1rem;
}
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
.article table {
margin: 20px 0px;
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
border-radius: var(--border-radius-menu);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
overflow: hidden;
width: 100%;
text-align: left;
border: 1px solid var(--color-tint-2);
}
.article table th {
padding: 8px 16px;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: var(--color-tint-5);
letter-spacing: 0.07em;
border-bottom: 1px solid var(--color-tint-2);
}
.article td:nth-of-type(1) {
width: 25%;
max-width: 50%;
}
.article table td {
padding: 8px 16px;
}
.article table td:nth-of-type(1) {
font-family: var(--font-mono);
}
.article__image {
display: block;
width: 100%;
margin: 32px 0px;
display: flex;
flex-direction: column;
gap: 12px;
}
.article__image > img {
width: 100%;
max-width: 100%;
height: auto;
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
border-radius: var(--border-radius-menu);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
border: 1px solid var(--color-tint-2);
}
.article__embed {
display: block;
width: 100%;
height: 640px;
margin: 32px 0px;
display: flex;
flex-direction: column;
gap: 12px;
}
.article__embed > iframe {
width: 100%;
height: 100%;
max-width: 100%;
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
border-radius: var(--border-radius-menu);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
border: 1px solid var(--color-tint-2);
}
Quick start guide (#2692) Following on from #2686, this PR replaces the introduction page with a Quick Start guide. Next Steps: - Better UX around the code blocks, throughout the site. A copy button would be great. - Collapsible extra info on the release version and rendering an inline component - Maybe remove the embed - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add a quick start guide --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-12 09:53:11 +00:00
.article__embed--quickstart {
aspect-ratio: 16 / 9;
min-height: 405px;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
margin: 32px 0px;
Quick start guide (#2692) Following on from #2686, this PR replaces the introduction page with a Quick Start guide. Next Steps: - Better UX around the code blocks, throughout the site. A copy button would be great. - Collapsible extra info on the release version and rendering an inline component - Maybe remove the embed - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add a quick start guide --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-12 09:53:11 +00:00
}
@media screen and (max-width: 520px) {
.article__embed--quickstart {
aspect-ratio: 1 / 1;
height: auto;
width: 100%;
}
}
.article__embed--quickstart > iframe {
height: 100%;
border: 0;
}
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
.article__caption {
display: block;
text-align: center;
font-size: 14px;
width: 100%;
}
.breadcrumb {
font-size: 14px;
color: var(--color-text);
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
font-weight: 500;
padding-bottom: 4px;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
display: flex;
align-items: center;
gap: 4px;
}
.breadcrumb a {
color: inherit;
}
/* --------------------- Footer --------------------- */
.footer {
position: relative;
display: flex;
flex-direction: column;
grid-column: 1 / span 3;
height: 240px;
padding-bottom: 8px;
background-color: var(--color-footer-background);
align-items: center;
justify-content: center;
font-size: 12px;
gap: 24px;
color: var(--color-footer-text);
overflow: hidden;
}
.footer > * {
z-index: 1;
}
.footer a {
color: var(--color-footer-text);
text-decoration: none;
}
.footer__lockup {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.footer__lockup__icon {
height: 32px;
width: 32px;
flex-shrink: 0;
background-color: currentColor;
}
.footer__socials {
display: flex;
align-items: center;
justify-content: center;
gap: 0px;
border-radius: 6px;
background-color: var(--color-footer-background);
}
.footer__socials a:hover {
color: var(--color-accent);
}
.footer__fancybox {
position: absolute;
inset: 0px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
z-index: 0;
}
.footer__fancybox__item {
docs: fix scrolling issue with sidebar (#2791) This was an annoying change. Next.js feels like it should be preserving the scroll position but it doesn't, it re-renders. Drive-by change to make the transition at the bottom not animate everything (this might have been the CPU usage you were seeing @si14 ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: fix up scrolling.
2024-02-09 11:54:13 +00:00
transition: opacity 3s;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
opacity: 0;
width: 28px;
height: 28px;
margin: 2px;
position: relative;
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
border-radius: var(--border-radius-menu);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
background-color: var(--hl-1);
}
.footer__fancybox__item[data-c='1'] {
background-color: var(--hl-2);
}
.footer__fancybox__item[data-c='2'] {
background-color: var(--hl-3);
}
.footer__fancybox__item[data-c='3'] {
background-color: var(--hl-4);
}
.footer__fancybox__item[data-c='4'] {
background-color: var(--hl-5);
}
.footer__fancybox__item[data-c='5'] {
background-color: var(--hl-6);
}
.footer__fancybox__item[data-c='6'] {
background-color: var(--hl-7);
}
.footer__fancybox__item[data-c='7'] {
background-color: var(--hl-8);
}
.footer__fancybox__item:hover {
docs: fix scrolling issue with sidebar (#2791) This was an annoying change. Next.js feels like it should be preserving the scroll position but it doesn't, it re-renders. Drive-by change to make the transition at the bottom not animate everything (this might have been the CPU usage you were seeing @si14 ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: fix up scrolling.
2024-02-09 11:54:13 +00:00
transition: opacity 0s;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
opacity: 0.32;
}
@media (hover: hover) {
.footer a:hover {
color: var(--color-footer-text);
}
}
/* ---------------------- Links --------------------- */
.layout__headings {
position: sticky;
align-self: start;
docs: fix scroll position and theming issue for code snippets (#2883) - scrolling to a section was hiding the header under the top layout when clicking on the sidebar - dark mode wasn't hydrating correctly and we only render on client, for now ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-20 14:24:54 +00:00
top: var(--header-height);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
margin-left: -12px;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
padding: var(--header-padding) 28px 120px 12px;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
max-height: calc(100vh);
width: 290px;
z-index: 800;
overflow-y: auto;
overflow-x: hidden;
font-size: 14px;
}
.layout__headings .sidebar__link {
color: inherit;
text-decoration: none;
cursor: pointer;
}
.layout__headings .sidebar__link .sidebar__link__title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex-grow: 2;
}
.layout__headings code {
font-family: var(--font-mono);
font-size: 13px;
}
/* --------------------- Sidebar -------------------- */
.sidebar {
position: sticky;
align-self: start;
docs: fix scroll position and theming issue for code snippets (#2883) - scrolling to a section was hiding the header under the top layout when clicking on the sidebar - dark mode wasn't hydrating correctly and we only render on client, for now ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-20 14:24:54 +00:00
top: var(--header-height);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
margin-left: -12px;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
padding: var(--header-padding) 12px 120px 28px;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
width: calc(100% + 24px);
max-height: calc(100vh);
z-index: 800;
overflow-y: auto;
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
overflow-x: hidden;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
font-size: 14px;
}
[docs] Autocomplete styling tweaks (#2732) This PR tweaks the styling in the autocomplete. It removes icons and matches styles to the sidebar. It improves the mobile design to hide the search bar on mobile. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-05 20:46:07 +00:00
.sidebar,
.sidebar button,
.sidebar a {
font-size: 14px;
font-weight: 600;
}
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
.sidebar a,
.sidebar .sidebar__link {
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
text-decoration: none;
}
.sidebar hr {
margin: 11px 4px;
padding: 0px 4px;
height: 1px;
width: calc(100% - 8px);
background-color: var(--color-tint-2);
border: none;
}
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
.sidebar__section__links {
display: none;
}
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
.sidebar__list {
padding: 0px;
margin: 0px;
list-style-type: none;
}
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
.sidebar__list li .sidebar__article,
.sidebar__list li .sidebar__article li {
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
margin-top: -6px;
width: 100%;
}
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
.sidebar__list li .sidebar__article:not(:last-of-type),
.sidebar__list li .sidebar__article lie:not(:last-of-type) {
margin-bottom: -6px;
}
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
.sidebar__list li .sidebar__category li a,
.sidebar__list li .sidebar__article li a {
padding-left: 8px;
}
[Docs] Tweak sidebar titles (#2706) This PR adjusts the way that sidebar titles look. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-01 18:16:30 +00:00
.sidebar__list li .sidebar__category li[data-heading-level='3'] a,
.sidebar__list li .sidebar__article li[data-heading-level='3'] a {
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
padding-left: 16px;
}
[docs] Autocomplete styling tweaks (#2732) This PR tweaks the styling in the autocomplete. It removes icons and matches styles to the sidebar. It improves the mobile design to hide the search bar on mobile. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-05 20:46:07 +00:00
.sidebar__group {
padding-left: 8px;
}
[Docs] Tweak sidebar titles (#2706) This PR adjusts the way that sidebar titles look. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-01 18:16:30 +00:00
.sidebar__list li .sidebar__category .sidebar__group li[data-heading-level='2'] a,
.sidebar__list li .sidebar__article .sidebar__group li[data-heading-level='2'] a {
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
padding-left: 16px;
color: var(--color-text-secondary);
}
[Docs] Tweak sidebar titles (#2706) This PR adjusts the way that sidebar titles look. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-01 18:16:30 +00:00
.sidebar__list li .sidebar__category .sidebar__group li[data-heading-level='3'] a,
.sidebar__list li .sidebar__article .sidebar__group li[data-heading-level='3'] a {
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
padding-left: 24px;
}
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
.sidebar__link {
position: relative;
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
padding: 6px 0;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
display: flex;
align-items: center;
justify-content: flex-start;
color: var(--color-text);
--bg: transparent;
flex-grow: 2;
}
.sidebar__link__indent {
padding-right: 6px;
color: var(--color-tint-4);
flex-shrink: 0;
}
.sidebar__article:nth-of-type(1) {
margin-top: 0px;
}
.sidebar__article:nth-last-of-type(1) {
margin-bottom: 0px;
}
.sidebar__link[data-active='true'] {
--bg: var(--color-tint-1);
}
.sidebar__link::after {
position: absolute;
display: block;
content: '';
top: 4px;
bottom: 4px;
left: -8px;
right: -8px;
background-color: var(--bg);
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
border-radius: var(--border-radius-menu);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
transition: background-color 0.12s ease-in-out;
transition-delay: 0s;
}
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
.uppercase_title {
text-transform: uppercase;
[Docs] Tweak sidebar titles (#2706) This PR adjusts the way that sidebar titles look. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-01 18:16:30 +00:00
font-size: 12px;
font-weight: 500;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
letter-spacing: 0.5px;
color: var(--color-text-secondary);
}
.sidebar__section__title {
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
margin-bottom: 4px;
position: relative;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
padding-bottom: 4px;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
display: flex;
align-items: center;
justify-content: flex-start;
--bg: transparent;
white-space: nowrap;
}
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
.sidebar__section__group__title {
font-weight: normal;
margin-bottom: 4px;
position: relative;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
background: transparent;
border: 0;
width: 100%;
cursor: pointer;
[docs] Autocomplete styling tweaks (#2732) This PR tweaks the styling in the autocomplete. It removes icons and matches styles to the sidebar. It improves the mobile design to hide the search bar on mobile. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-05 20:46:07 +00:00
padding-right: 8px;
margin-left: 8px;
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
}
.sidebar__sections__list > *:nth-last-of-type(n + 2) > .sidebar__list {
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
padding-bottom: 12px;
margin-bottom: 12px;
}
@media (hover: hover) {
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
a.sidebar__link:hover {
cursor: pointer;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
color: var(--color-text);
transition: background-color 0.12s ease-in-out;
transition-delay: 0.1s;
}
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
a.sidebar__link:not([data-active='true']):hover {
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
--bg: var(--color-tint-1);
}
}
.sidebar__close {
display: none;
width: 100%;
align-items: center;
justify-content: flex-end;
color: var(--color-text);
position: fixed;
bottom: 0px;
right: 0px;
width: 100%;
padding: 8px;
font-size: 14px;
gap: 2px;
}
.menu__button {
display: none;
position: fixed;
z-index: 1000;
bottom: 8px;
right: 8px;
background-color: var(--color-text);
border-radius: 6px;
border: 1px solid var(--color-contrast);
color: var(--color-background);
box-shadow: var(--shadow-small);
}
[docs] Fix links, little style tweaks (#2724) This PR is a small but mighty improvement to our docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-05 14:42:55 +00:00
/* --------------------- Search --------------------- */
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
.sidebar .search__wrapper {
display: none;
}
.search__wrapper {
docs: rework search UI (#2723) Reworks search to not be a page and instead to be inline dropdown. <img width="763" alt="Screenshot 2024-02-05 at 13 22 58" src="https://github.com/tldraw/tldraw/assets/469604/4e5a8076-62cd-44bb-b8e7-7f5ecdc4af24"> - rework search completely - rm Search Results css - uses Ariakit and add appropriate hooks / styling - I couldn't use Radix unfortunately since they're still working on adding a Combox: https://github.com/radix-ui/primitives/issues/1342 - I'm open to other suggestions but Ariakit plays nicely with Radix and keeps things open to migrate to Radix in the future - fixes bug with not scrolling to right place when having a direct link - adds categories in the search results - examples / reference / learn - and adds category icons. Let me know if there's a better policy for adding new SVG icons cc @steveruizok ### Change Type - [x] `minor` — New feature ### Test Plan 1. Test searches using normal method for each type (examples, docs, refs) 2. Test searches using AI for each type (ditto) ### Release Notes - Docs: rework the search to be an inline dropdown.
2024-02-05 14:32:50 +00:00
position: relative;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
docs: rework search UI (#2723) Reworks search to not be a page and instead to be inline dropdown. <img width="763" alt="Screenshot 2024-02-05 at 13 22 58" src="https://github.com/tldraw/tldraw/assets/469604/4e5a8076-62cd-44bb-b8e7-7f5ecdc4af24"> - rework search completely - rm Search Results css - uses Ariakit and add appropriate hooks / styling - I couldn't use Radix unfortunately since they're still working on adding a Combox: https://github.com/radix-ui/primitives/issues/1342 - I'm open to other suggestions but Ariakit plays nicely with Radix and keeps things open to migrate to Radix in the future - fixes bug with not scrolling to right place when having a direct link - adds categories in the search results - examples / reference / learn - and adds category icons. Let me know if there's a better policy for adding new SVG icons cc @steveruizok ### Change Type - [x] `minor` — New feature ### Test Plan 1. Test searches using normal method for each type (examples, docs, refs) 2. Test searches using AI for each type (ditto) ### Release Notes - Docs: rework the search to be an inline dropdown.
2024-02-05 14:32:50 +00:00
.search__wrapper:focus-within .search__keyboard {
display: none;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
docs: rework search UI (#2723) Reworks search to not be a page and instead to be inline dropdown. <img width="763" alt="Screenshot 2024-02-05 at 13 22 58" src="https://github.com/tldraw/tldraw/assets/469604/4e5a8076-62cd-44bb-b8e7-7f5ecdc4af24"> - rework search completely - rm Search Results css - uses Ariakit and add appropriate hooks / styling - I couldn't use Radix unfortunately since they're still working on adding a Combox: https://github.com/radix-ui/primitives/issues/1342 - I'm open to other suggestions but Ariakit plays nicely with Radix and keeps things open to migrate to Radix in the future - fixes bug with not scrolling to right place when having a direct link - adds categories in the search results - examples / reference / learn - and adds category icons. Let me know if there's a better policy for adding new SVG icons cc @steveruizok ### Change Type - [x] `minor` — New feature ### Test Plan 1. Test searches using normal method for each type (examples, docs, refs) 2. Test searches using AI for each type (ditto) ### Release Notes - Docs: rework the search to be an inline dropdown.
2024-02-05 14:32:50 +00:00
.search__keyboard {
[docs] Small style changes (#2805) This PR has some superficial style changes for the docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-13 10:07:29 +00:00
display: flex;
align-items: center;
justify-content: center;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
position: absolute;
[docs] Small style changes (#2805) This PR has some superficial style changes for the docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-13 10:07:29 +00:00
height: 100%;
padding: 0px;
top: 0px;
docs: tweak search kbd placement to match loupe (#2834) ### Change Type - [x] `patch` — Bug fix
2024-02-14 10:37:03 +00:00
right: 3px;
docs: rework search UI (#2723) Reworks search to not be a page and instead to be inline dropdown. <img width="763" alt="Screenshot 2024-02-05 at 13 22 58" src="https://github.com/tldraw/tldraw/assets/469604/4e5a8076-62cd-44bb-b8e7-7f5ecdc4af24"> - rework search completely - rm Search Results css - uses Ariakit and add appropriate hooks / styling - I couldn't use Radix unfortunately since they're still working on adding a Combox: https://github.com/radix-ui/primitives/issues/1342 - I'm open to other suggestions but Ariakit plays nicely with Radix and keeps things open to migrate to Radix in the future - fixes bug with not scrolling to right place when having a direct link - adds categories in the search results - examples / reference / learn - and adds category icons. Let me know if there's a better policy for adding new SVG icons cc @steveruizok ### Change Type - [x] `minor` — New feature ### Test Plan 1. Test searches using normal method for each type (examples, docs, refs) 2. Test searches using AI for each type (ditto) ### Release Notes - Docs: rework the search to be an inline dropdown.
2024-02-05 14:32:50 +00:00
z-index: 2;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
color: var(--color-tint-5);
pointer-events: none;
transition: color 0.12s;
}
docs: rework search UI (#2723) Reworks search to not be a page and instead to be inline dropdown. <img width="763" alt="Screenshot 2024-02-05 at 13 22 58" src="https://github.com/tldraw/tldraw/assets/469604/4e5a8076-62cd-44bb-b8e7-7f5ecdc4af24"> - rework search completely - rm Search Results css - uses Ariakit and add appropriate hooks / styling - I couldn't use Radix unfortunately since they're still working on adding a Combox: https://github.com/radix-ui/primitives/issues/1342 - I'm open to other suggestions but Ariakit plays nicely with Radix and keeps things open to migrate to Radix in the future - fixes bug with not scrolling to right place when having a direct link - adds categories in the search results - examples / reference / learn - and adds category icons. Let me know if there's a better policy for adding new SVG icons cc @steveruizok ### Change Type - [x] `minor` — New feature ### Test Plan 1. Test searches using normal method for each type (examples, docs, refs) 2. Test searches using AI for each type (ditto) ### Release Notes - Docs: rework the search to be an inline dropdown.
2024-02-05 14:32:50 +00:00
.search__keyboard kbd {
[docs] Small style changes (#2805) This PR has some superficial style changes for the docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-13 10:07:29 +00:00
display: inline-flex;
gap: 4px;
height: 100%;
align-items: center;
padding: 4px 12px;
margin-right: 0px;
docs: rework search UI (#2723) Reworks search to not be a page and instead to be inline dropdown. <img width="763" alt="Screenshot 2024-02-05 at 13 22 58" src="https://github.com/tldraw/tldraw/assets/469604/4e5a8076-62cd-44bb-b8e7-7f5ecdc4af24"> - rework search completely - rm Search Results css - uses Ariakit and add appropriate hooks / styling - I couldn't use Radix unfortunately since they're still working on adding a Combox: https://github.com/radix-ui/primitives/issues/1342 - I'm open to other suggestions but Ariakit plays nicely with Radix and keeps things open to migrate to Radix in the future - fixes bug with not scrolling to right place when having a direct link - adds categories in the search results - examples / reference / learn - and adds category icons. Let me know if there's a better policy for adding new SVG icons cc @steveruizok ### Change Type - [x] `minor` — New feature ### Test Plan 1. Test searches using normal method for each type (examples, docs, refs) 2. Test searches using AI for each type (ditto) ### Release Notes - Docs: rework the search to be an inline dropdown.
2024-02-05 14:32:50 +00:00
text-align: center;
[docs] Small style changes (#2805) This PR has some superficial style changes for the docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-13 10:07:29 +00:00
font-size: 13px;
color: var(--color-text);
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
docs: rework search UI (#2723) Reworks search to not be a page and instead to be inline dropdown. <img width="763" alt="Screenshot 2024-02-05 at 13 22 58" src="https://github.com/tldraw/tldraw/assets/469604/4e5a8076-62cd-44bb-b8e7-7f5ecdc4af24"> - rework search completely - rm Search Results css - uses Ariakit and add appropriate hooks / styling - I couldn't use Radix unfortunately since they're still working on adding a Combox: https://github.com/radix-ui/primitives/issues/1342 - I'm open to other suggestions but Ariakit plays nicely with Radix and keeps things open to migrate to Radix in the future - fixes bug with not scrolling to right place when having a direct link - adds categories in the search results - examples / reference / learn - and adds category icons. Let me know if there's a better policy for adding new SVG icons cc @steveruizok ### Change Type - [x] `minor` — New feature ### Test Plan 1. Test searches using normal method for each type (examples, docs, refs) 2. Test searches using AI for each type (ditto) ### Release Notes - Docs: rework the search to be an inline dropdown.
2024-02-05 14:32:50 +00:00
.search__ai-toggle {
border: 0;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
color: var(--color-text);
docs: rework search UI (#2723) Reworks search to not be a page and instead to be inline dropdown. <img width="763" alt="Screenshot 2024-02-05 at 13 22 58" src="https://github.com/tldraw/tldraw/assets/469604/4e5a8076-62cd-44bb-b8e7-7f5ecdc4af24"> - rework search completely - rm Search Results css - uses Ariakit and add appropriate hooks / styling - I couldn't use Radix unfortunately since they're still working on adding a Combox: https://github.com/radix-ui/primitives/issues/1342 - I'm open to other suggestions but Ariakit plays nicely with Radix and keeps things open to migrate to Radix in the future - fixes bug with not scrolling to right place when having a direct link - adds categories in the search results - examples / reference / learn - and adds category icons. Let me know if there's a better policy for adding new SVG icons cc @steveruizok ### Change Type - [x] `minor` — New feature ### Test Plan 1. Test searches using normal method for each type (examples, docs, refs) 2. Test searches using AI for each type (ditto) ### Release Notes - Docs: rework the search to be an inline dropdown.
2024-02-05 14:32:50 +00:00
font-size: 14px;
text-align: left;
cursor: pointer;
margin: 4px 0;
background: transparent;
[docs] Autocomplete styling tweaks (#2732) This PR tweaks the styling in the autocomplete. It removes icons and matches styles to the sidebar. It improves the mobile design to hide the search bar on mobile. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-05 20:46:07 +00:00
padding: 0px 8px 8px 8px;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
/* --------------------- Desktop M --------------------- */
@media (max-width: 1200px) {
.layout {
display: grid;
grid-template-columns: 200px 1fr;
column-gap: 40px;
}
.footer {
align-items: center;
justify-content: center;
}
.layout__header {
grid-template-columns: 200px 1fr;
grid-auto-flow: column;
grid-gap: 20px;
}
.layout__headings {
display: none;
}
.article__table-of-contents {
display: inherit;
}
}
/* --------------------- Tablet --------------------- */
@media (max-width: 960px) {
.layout {
display: grid;
grid-template-columns: 1fr;
width: 100%;
column-gap: 0px;
row-gap: 0px;
margin: 0px auto;
}
.layout__header {
grid-template-columns: auto 1fr auto;
grid-gap: 40px;
}
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
.layout__header .NavigationMenuRoot {
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
display: none;
}
.sidebar__section__links {
docs: add full-text search (#2735) ### Change Type - [x] `patch` — Bug fix ### Test Plan 1. Make sure search (AI and regular) still works as expected. ### Release Notes - Docs: Add full-text search.
2024-02-06 09:49:31 +00:00
position: relative;
z-index: 1;
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
display: flex;
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
padding: 12px 0px;
border-bottom: 1px solid var(--color-tint-2);
margin-bottom: 12px;
margin-left: -8px;
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
}
.NavigationMenuTrigger {
font-weight: bold;
}
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
.menu__button {
display: flex;
pointer-events: all;
}
[docs] Autocomplete styling tweaks (#2732) This PR tweaks the styling in the autocomplete. It removes icons and matches styles to the sidebar. It improves the mobile design to hide the search bar on mobile. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-05 20:46:07 +00:00
.search__wrapper {
display: none;
}
.layout__header {
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
grid-template-columns: auto 1fr;
[docs] Autocomplete styling tweaks (#2732) This PR tweaks the styling in the autocomplete. It removes icons and matches styles to the sidebar. It improves the mobile design to hide the search bar on mobile. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know
2024-02-05 20:46:07 +00:00
justify-content: space-between;
}
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
.sidebar {
display: none;
width: 100%;
padding: 24px;
margin: 0px;
padding-bottom: 48px;
background-color: var(--color-background);
}
body.sidebar-open .sidebar {
display: initial;
position: fixed;
inset: 0px;
z-index: 10000;
}
body.sidebar-open .sidebar__close {
display: flex;
background-color: var(--color-background);
width: fit-content;
}
@media (hover: hover) {
.sidebar__article:hover {
color: var(--color-text);
transition: background-color 0.12s ease-in-out;
transition-delay: 0.1s;
}
.sidebar__article:not([data-active='true']):hover {
--bg: var(--color-tint-1);
}
}
.icon-button {
height: 44px;
width: 44px;
}
.sidebar .search__wrapper {
display: block;
position: relative;
width: 100%;
margin-bottom: 16px;
}
.sidebar .search {
height: 44px;
padding: 0px;
}
.sidebar .search__input {
font-size: 16px;
padding-left: 28px;
}
.search__results__article {
height: auto;
}
.search__results {
position: static;
box-shadow: none;
padding: 0px;
padding-top: 8px;
width: 100%;
}
.search__results__list {
padding: 0px;
list-style-type: none;
}
.search__results__wrapper {
height: auto;
}
docs: better code snippets (#2801) Uses sandpack in all places so we can do richer code snippets. Also, drive-by fix to fix sidebar logic. Also, drive-by fix to hide keyboard hint (Cmd+K) for search on mobile. ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: reworks code snippets
2024-02-12 14:30:55 +00:00
.search__keyboard kbd {
display: none;
}
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
.main-content {
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
padding: 24px 16px 16px 16px;
}
.article h1 {
font-size: 36px;
}
.article pre {
margin: 32px -16px;
max-width: calc(100% + 32px);
border-radius: 0px;
}
.article__api-docs pre {
margin: 24px -16px;
}
.article__links {
grid-template-columns: 1fr;
padding-bottom: 20px;
gap: 16px;
}
.article__links__prev {
border: none;
grid-row: 2;
grid-column: 1 / span 2;
height: 100%;
}
.article__links__next {
grid-row: 1;
grid-column: 1 / span 2;
height: 100%;
justify-content: flex-end;
}
}
docs: better code snippets (#2801) Uses sandpack in all places so we can do richer code snippets. Also, drive-by fix to fix sidebar logic. Also, drive-by fix to hide keyboard hint (Cmd+K) for search on mobile. ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: reworks code snippets
2024-02-12 14:30:55 +00:00
Quick start guide (#2692) Following on from #2686, this PR replaces the introduction page with a Quick Start guide. Next Steps: - Better UX around the code blocks, throughout the site. A copy button would be great. - Collapsible extra info on the release version and rendering an inline component - Maybe remove the embed - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add a quick start guide --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-12 09:53:11 +00:00
/* --------------------- Mobile --------------------- */
docs: better code snippets (#2801) Uses sandpack in all places so we can do richer code snippets. Also, drive-by fix to fix sidebar logic. Also, drive-by fix to hide keyboard hint (Cmd+K) for search on mobile. ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: reworks code snippets
2024-02-12 14:30:55 +00:00
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
@media (max-width: 760px) {
.article__image {
margin: 32px -16px;
width: calc(100% + 32px);
border-left: 0px;
border-right: 0px;
}
.article__image > img {
border-radius: 0px;
}
.layout__header {
position: unset;
}
.layout__header .search {
display: none;
}
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
.layout__header__links {
justify-content: flex-end;
}
.layout__header__sections {
display: none;
}
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
.article__links__prev {
border: none;
grid-row: 2;
grid-column: 1 / span 2;
height: 100%;
}
.article__links__next {
grid-row: 1;
grid-column: 1 / span 2;
height: 100%;
width: 100%;
justify-content: flex-end;
}
Quick start guide (#2692) Following on from #2686, this PR replaces the introduction page with a Quick Start guide. Next Steps: - Better UX around the code blocks, throughout the site. A copy button would be great. - Collapsible extra info on the release version and rendering an inline component - Maybe remove the embed - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add a quick start guide --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-12 09:53:11 +00:00
.article__embed--quickstart {
aspect-ratio: 16/9;
min-height: 280px;
}
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
html[data-theme='dark'] .hero__light {
display: none;
}
html[data-theme='light'] .hero__dark {
display: none;
}
[docs] Fix links, little style tweaks (#2724) This PR is a small but mighty improvement to our docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-05 14:42:55 +00:00
/* ------------------ Code Example ------------------ */
.code-example iframe {
border: 0;
min-height: 500px;
height: 50vh;
width: 100%;
}
.code-example .sandpack {
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
margin-top: 20px;
[docs] Fix links, little style tweaks (#2724) This PR is a small but mighty improvement to our docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-05 14:42:55 +00:00
margin-bottom: 32px;
}
.code-example .sandpack {
border-radius: 6px;
padding: 0px;
border: 1px solid var(--color-tint-3);
border-radius: 6px;
overflow: hidden;
}
.code-example .sandpack pre {
background-color: transparent;
margin: 0px;
padding: 0px;
}
docs: better code snippets (#2801) Uses sandpack in all places so we can do richer code snippets. Also, drive-by fix to fix sidebar logic. Also, drive-by fix to hide keyboard hint (Cmd+K) for search on mobile. ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: reworks code snippets
2024-02-12 14:30:55 +00:00
.code-example .sandpack .sp-syntax-string {
color: var(--sp-syntax-color-definition);
}
.code-example .sandpack .sp-syntax-property {
color: var(--sp-syntax-color-keyword);
}
.code-example .sandpack .sp-syntax-static {
color: var(--sp-syntax-color-keyword);
}
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
/* ------------------- Hero images ------------------ */
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
.hero__images__wrapper {
padding-bottom: 24px;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
.hero__images {
margin: 32px 0px;
Add docs (#2470) This PR adds the docs app back into the tldraw monorepo. ## Deploying We'll want to update our deploy script to update the SOURCE_SHA to the newest release sha... and then deploy the docs pulling api.json files from that release. We _could_ update the docs on every push to main, but we don't have to unless something has changed. Right now there's no automated deployments from this repo. ## Side effects To make this one work, I needed to update the lock file. This might be ok (new year new lock file), and everything builds as expected, though we may want to spend some time with our scripts to be sure that things are all good. I also updated our prettier installation, which decided to add trailing commas to every generic type. Which is, I suppose, [correct behavior](https://github.com/prettier/prettier-vscode/issues/955)? But that caused diffs in every file, which is unfortunate. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2]
2024-01-15 12:33:15 +00:00
}
.article__image {
margin: 0px;
}
@media (max-width: 760px) {
.article__image {
margin: 0px -16px;
}
}
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
/* ------------------- Menus ------------------ */
.NavigationMenuRoot {
position: relative;
}
.NavigationMenuList {
list-style: none;
margin: 0;
}
.NavigationMenuTrigger {
outline: none;
user-select: none;
border: 0;
background: none;
background-color: transparent;
transition: background-color 0.12s ease-in-out;
transition-delay: 0.1s;
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
border-radius: var(--border-radius-menu);
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
margin: 0 4px;
padding: 8px 12px;
height: 44px;
line-height: 22px;
white-space: nowrap;
cursor: pointer;
}
.NavigationMenuTrigger span {
text-decoration: none;
font-size: 14px;
color: var(--color-text);
}
@media (hover: hover) {
.NavigationMenuTrigger:hover {
background-color: var(--color-tint-1);
}
}
.NavigationMenuContent {
position: absolute;
[Docs] Tweak sidebar titles (#2706) This PR adjusts the way that sidebar titles look. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-01 18:16:30 +00:00
width: 100%;
top: calc(100% + 4px);
left: 4px;
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
overflow: hidden;
docs: more cleanup following restructure (#2702) - add TOC for Reference section - make external links use _blank to open a new tab - fix some more /gen links spots I missed, oops - add a general redirect from old /gen links → /reference - some more stylistic touchups ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Docs: further cleanup following restructure.
2024-02-01 14:16:17 +00:00
border-radius: var(--border-radius-menu);
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
background-color: var(--color-background);
box-shadow: var(--shadow-small);
}
.NavigationMenuContent li {
list-style: none;
}
.NavigationMenuContent li a {
display: block;
text-decoration: none;
color: var(--color-text);
font-size: 14px;
padding: 8px 12px;
background-color: transparent;
}
@media (hover: hover) {
.NavigationMenuContent li a:hover {
background-color: var(--color-tint-1);
}
}
.NavigationMenuViewport {
[Docs] Tweak sidebar titles (#2706) This PR adjusts the way that sidebar titles look. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-01 18:16:30 +00:00
position: relative;
width: 100%;
height: var(--radix-navigation-menu-viewport-height);
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
}
@media only screen and (min-width: 600px) {
[Docs] Tweak sidebar titles (#2706) This PR adjusts the way that sidebar titles look. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-01 18:16:30 +00:00
.NavigationMenuViewport {
width: var(--radix-navigation-menu-viewport-width);
}
docs: rework docs site to have different sections (#2686) This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
2024-01-30 14:19:25 +00:00
}
.CaretDown {
position: relative;
top: 3px;
transition: transform 250ms ease;
}
[data-state='open'] > .CaretDown {
transform: rotate(-180deg);
}
[docs] Fix links, little style tweaks (#2724) This PR is a small but mighty improvement to our docs. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-02-05 14:42:55 +00:00
/* --------------------- Scroll --------------------- */
.scroll-light {
scrollbar-width: thin;
}
.scroll-light::-webkit-scrollbar {
display: block;
width: 8px;
height: 8px;
position: absolute;
top: 0;
left: 0;
background-color: inherit;
}
.scroll-light::-webkit-scrollbar-button {
display: none;
width: 0;
height: 10px;
}
.scroll-light::-webkit-scrollbar-thumb {
background-clip: padding-box;
width: 0;
min-height: 36px;
border: 2px solid transparent;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.25);
}
.scroll-light::-webkit-scrollbar-thumb:hover {
background-color: rgba(144, 144, 144);
}
[docs] design shuffle (#2951) This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
/* ------------------ Landing page ------------------ */
.landing {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.landing__inner {
width: fit-content;
max-width: 960px;
height: fit-content;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.landing__logo {
display: flex;
align-items: center;
justify-content: center;
}
.landing__logo img {
width: 200px;
height: auto;
}
[data-theme='dark'] .logo-light {
display: none;
}
[data-theme='light'] .logo-dark {
display: none;
}
.landing__blurb {
font-size: 1em;
font-weight: 500;
text-align: center;
margin: 12px 0 16px 0;
}
.landing__links {
list-style-type: none;
display: flex;
gap: 0px;
}
.landing__links a {
text-decoration: none;
color: var(--color-text);
padding: 16px 16px;
position: relative;
font-size: inherit;
font-family: inherit;
font-weight: 600;
}
.landing__links a::after {
position: absolute;
display: block;
content: '';
top: 8px;
bottom: 8px;
left: 1px;
right: 1px;
background-color: var(--color-tint-1);
border-radius: var(--border-radius-menu);
opacity: 0;
}
@media (hover: hover) {
.landing__links a:hover::after {
opacity: 1;
}
}
Reference in a new issue Copy permalink