From a5e6ae87feea4cd6af4f7bdc4955dc1bafb0a77f Mon Sep 17 00:00:00 2001
From: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
Date: Mon, 12 Feb 2024 09:53:11 +0000
Subject: [PATCH] Quick start guide (#2692)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/mdx-components/generic.tsx     |  6 +-
 .../content/getting-started/quick-start.mdx   | 84 ++++++++++++++-----
 apps/docs/styles/globals.css                  | 57 +++++++++++--
 3 files changed, 114 insertions(+), 33 deletions(-)

diff --git a/apps/docs/components/mdx-components/generic.tsx b/apps/docs/components/mdx-components/generic.tsx
index c39e37174..1985d6721 100644
--- a/apps/docs/components/mdx-components/generic.tsx
+++ b/apps/docs/components/mdx-components/generic.tsx
@@ -150,13 +150,13 @@ export const Footnotes = (props: any) => {
 /* -------------------- API docs -------------------- */
 
 export const ApiHeading = (props: any) => {
-	return <div className="article__api-heading" {...props} />
+	return <div {...props} />
 }
 
 export const Embed = (props: any) => {
 	return (
-		<div className="article__embed">
-			<iframe className="iframe" src={props.src} width="100%" height="600p" frameBorder="0" />
+		<div className={props.className || 'article__embed'}>
+			<iframe className="iframe" src={props.src} width="100%" height={600} />
 			{props.caption && <span className="article__caption">{props.caption}</span>}
 		</div>
 	)
diff --git a/apps/docs/content/getting-started/quick-start.mdx b/apps/docs/content/getting-started/quick-start.mdx
index 9d0acc872..229e0bbe2 100644
--- a/apps/docs/content/getting-started/quick-start.mdx
+++ b/apps/docs/content/getting-started/quick-start.mdx
@@ -1,46 +1,84 @@
 ---
-title: Introduction
+title: Quick Start
 status: published
 author: steveruizok
 date: 3/22/2023
 order: 0
 ---
 
-Welcome to the developer docs for tldraw, a React library for creating whiteboards and other infinite canvas experiences. These docs are for the 2.0 version which is currently in beta.
+<h2>Add a tldraw canvas to your React app in just 5 minutes.</h2>
 
-<a className="hero__images" href="https://examples.tldraw.com">
-	<img src={'/images/hero_light.png'} alt="tldraw demo" className="article__image hero__light" />
-	<img src={'/images/hero_dark.png'} alt="tldraw demo" className="article__image hero__dark" />
-</a>
+The tldraw SDK provides a really simple way to craft infinite canvas experiences for the web. It's perfect for collaborative applications, productivity tools, interfacing with multi-modal AI, and more.
 
-- 🔗 Check out the [CodeSandbox](https://codesandbox.io/s/tldraw-example-canary-2lrzmy)
-- 🧑‍💻 Visit the [tldraw repo on Github](https://github.com/tldraw/tldraw)
-- 💬 Join the [Discord](https://discord.com/invite/SBBEVCA4PG)
+By the end of this guide you will have made something that looks like this: 
 
-## What can I do with tldraw?
+<Embed className="article__embed--quickstart" src="https://vite-template-five.vercel.app/" />
 
-You can use the [Tldraw](?) React component to embed a fully featured and extendable whiteboard in your app. See the [CodeSandbox](https://codesandbox.io/s/tldraw-example-canary-2lrzmy) for a minimal example.
 
-For multiplayer whiteboards, you can plug the component into the [collaboration backend](/docs/collaboration) of your choice. Check out our [Yjs example](https://github.com/tldraw/tldraw-yjs-example) to see how you might use tldraw together with [Yjs](https://yjs.dev/).
+Follow the steps below to make your own version of it, or [clone the repo](https://github.com/tldraw/vite-template) to skip to the end. 
 
-You can use the [Editor](?) API to create, update, and delete shapes, control the camera—or do just about anything else. You can extend tldraw with your own [custom shapes](/docs/shapes) and [custom tools](/docs/tools). You can use our [user interface](/docs/user-interface) overrides to change the contents of menus and toolbars, or else hide the UI and replace it with your own.
+<hr />
+<ol className="ordered-list__quickstart">
+  <li>
+    ### Installation
 
-If you want to go even deeper, you can use the [TldrawEditor](?) component as a more minimal engine without the default tldraw shapes or user interface.
+    - Set up a React project however you normally do. [We recommend Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).
+    - Install the tldraw library using this command:
+    
+    ```bash
+    npm install @tldraw/tldraw@beta
+    ```
+  </li>
+  <li>
+    ### Import Styles
+    <br />
+    To import fonts and CSS for tldraw:
 
-## How do I learn tldraw?
+    - Create or edit a css file called `index.css`
+    - Copy and paste this into the file:
+    ```CSS
+    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap");
+    @import url("@tldraw/tldraw/tldraw.css");
 
-In addition to the docs on this website, we provide [many examples](https://github.com/tldraw/tldraw/tree/main/apps/examples/src/examples) in the tldraw repo that demonstrate different ways of using the tldraw library. You can view them running [here](https://examples.tldraw.com/); or else you can clone the tldraw repo and start a local development server to see them in action.
+    body {
+      font-family: "Inter";
+    }
+    ```
+  </li>
+  <li>
+    ### Render Tldraw Component
+    <br />
+    To render the Tldraw component
 
-You can ask questions and get help on our [Discord](https://discord.com/invite/SBBEVCA4PG) channel or in our Github [issues](https://github.com/tldraw/tldraw/issues).
+    - Import the `<Tldraw />` component from `@tldraw/tldraw`
+    - Import the `index.css` CSS file from earlier
+    - Wrap the Tldraw component in a `<div>` element with the style attribute set to: `{ position: 'fixed', inset: 0 }`
+    
+    <p className="">This will render a full screen canvas:</p>
 
-## Community
+    ```javascript
+    import { Tldraw } from "@tldraw/tldraw";
+    import "./index.css";
 
-Found a bug or want to request a feature? Create an issue [here](https://github.com/tldraw/tldraw/issues). To connect with the team and other users, join us on our [Discord](https://discord.gg/JMbeb96jsh). To follow along with updates, you can also [subscribe to our Substack newsletter](https://tldraw.substack.com/) or follow us on [Twitter/X](https://twitter.com/tldraw).
+    export default function App() {
+      return (
+        <div style={{ position: 'fixed', inset: 0 }}>
+          <Tldraw />
+        </div>
+      );
+    }
+    ```
+  </li>
+</ol>
 
-## License
+<hr />
 
-tldraw's source code and distributed packages are provided under the non-commercial [tldraw license](https://github.com/tldraw/tldraw/blob/master/LICENSE.md).
+### Next Steps
 
-This license does not permit commercial use. If you wish to use tldraw in a commercial product or enterprise, you will need to purchase a commercial license. To obtain a commercial license, please contact us at [hello@tldraw.com](mailto:hello@tldraw.com).
+You did it! Now that you have your canvas working, you may be wondering: what next? You can try: 
 
-To learn more, see our [license](/community/license) page.
+- Giving the editor a makeover by [customizing the UI](/docs/user-interface)
+- Adding your own [shapes](/docs/shapes) and [tools](/docs/tools)
+- Providing collaboration using [multiplayer](https://github.com/tldraw/tldraw-yjs-example) 
+
+We provide the above examples and more in our [examples section](/examples/basic/develop). Go build something creative and please do share it with us in our [#show-and-tell](https://discord.com/invite/SBBEVCA4PG) channel on Discord!
diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
index 30b2a11d9..92ddddc8c 100644
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@@ -340,18 +340,21 @@ body {
 
 .article > h1,
 .article > h2 {
-	/* margin-top: 24px; */
-	padding-top: 106px;
-	margin-top: -82px;
 	pointer-events: none;
 	font-weight: 800;
 }
 
+.article > h2 {
+	margin-top: 16px;
+}
+
+.article > p + h2 {
+	margin-top: 48px;
+}
+
 .article > h3 {
-	/* margin-top: 24px; */
 	font-size: 1.5em;
-	padding-top: 106px;
-	margin-top: -90px;
+	padding-top: 16px;
 	pointer-events: none;
 	font-weight: 700;
 }
@@ -498,6 +501,21 @@ body {
 .article ol {
 	margin: 20px 0px;
 	padding-left: 16px;
+	margin-left: 8px;
+}
+
+.article ol h3 a {
+	color: var(--color-text);
+}
+
+.article ol h3,
+.article ol li::marker {
+	font-size: 1.17em;
+	line-height: 28px;
+}
+
+.article ol ul {
+	list-style-type: disc;
 }
 
 .article ul {
@@ -581,6 +599,8 @@ body {
 	gap: 12px;
 }
 
+
+
 .article__embed > iframe {
 	width: 100%;
 	height: 100%;
@@ -589,6 +609,24 @@ body {
 	border: 1px solid var(--color-tint-2);
 }
 
+.article__embed--quickstart {
+	aspect-ratio: 16 / 9;
+	min-height: 405px;
+}
+
+@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;
+}
+
 .article__caption {
 	display: block;
 	text-align: center;
@@ -1210,7 +1248,7 @@ body {
 		justify-content: flex-end;
 	}
 }
-
+/* --------------------- Mobile --------------------- */
 @media (max-width: 760px) {
 	.article__image {
 		margin: 32px -16px;
@@ -1245,6 +1283,11 @@ body {
 		width: 100%;
 		justify-content: flex-end;
 	}
+
+	.article__embed--quickstart {
+		aspect-ratio: 16/9;
+		min-height: 280px;
+	}
 }
 
 html[data-theme='dark'] .hero__light {