You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/getting-started.md
+28-118
Original file line number
Diff line number
Diff line change
@@ -97,87 +97,19 @@ If you prefer Yarn, run:
97
97
98
98
You can run the above command anywhere, but you may want to `cd` to your `~/Development` directory first (or wherever you do local development).
99
99
100
-
The first prompt asks where to create your new project. Enter `hello-framework`to create a directory named `hello-framework` within the current directory. Or just hit Enter, as this is the default. (You can create a project in a different directory by entering a relative path; on macOS or Linux, such paths start with `../` or `~/` or `/`_etc._)
100
+
This command will ask you a series of questions in order to initialize your new project. For this tutorial, you can simply hit Enter to accept the default values. When you’re done, you should see something like this:
Next you’ll enter the project’s title. The title will appear in the sidebar as well as on all pages. You can hit Enter here to accept the default title, which is derived from the directory name you entered in the previous step.
Next, you’ll be asked whether you want sample files in your new project. These files demonstrate common techniques and are handy for learning — you can edit the code and see what happens. You’ll want them now for this tutorial, but in the future you can omit them if you’d prefer a minimal starter project.
<spanclass="focus">◆</span> Include sample files to help you get started?
130
-
<spanclass="focus">│</span> <spanclass="green">●</span> Yes, include sample files <spanclass="muted">(recommended)</span>
131
-
<spanclass="focus">│</span> <spanclass="muted">○ No, create an empty project</span>
132
-
<spanclass="focus">└</span></pre>
133
-
134
-
If you use npm or Yarn as your preferred package manager, declare your allegiance now. The package manager you used to launch `observable create` will be selected by default, so you can just hit Enter again to continue. If you prefer a different package manager (say pnpm), choose `No`; you can install dependencies after the project is created.
If you’ll continue developing your project after you finish this tutorial and want source control, answer `Yes` to initialize a git repository. Or say `No` — you can always do it later by running `git init`.
@@ -533,74 +467,50 @@ _Ta-da!_ 🎉 Perhaps not the most exciting dashboard yet, but it has potential!
533
467
534
468
## 3. Publish
535
469
536
-
When you’re ready to share your project — whether privately with specific people you want to invite, or publicly with the world — you can quickly deploy it to [Observable](https://observablehq.com) using the `deploy` command:
470
+
When you’re ready to share your project — either privately or publicly — you can quickly deploy it to [Observable](https://observablehq.com) using the `deploy` command:
537
471
538
472
<predata-copy>npm run deploy</pre>
539
473
540
474
Or with Yarn:
541
475
542
476
<predata-copy>yarn deploy</pre>
543
477
544
-
<divclass="note">If you don’t have an Observable account yet, the first time you deploy you’ll be prompted to create one. Observable is free for individuals and small teams, and we offer paid tiers for larger teams.</div>
545
-
546
-
If this is your first time deploying to Observable, you’ll be prompted to create a new project. This determines where you project lives on Observable.
547
-
548
-
<divclass="tip">Your deploy configuration is saved to <code>docs<spanclass="wbr">/</span>.observablehq<spanclass="wbr">/</span>deploy.json</code>. When collaborating on a project, you should commit this file to git so your collaborators don’t have to separately configure deploy.</div>
<spanclass="blue">●</span> To configure deploy, we need to ask you a few questions.
554
-
<spanclass="muted">│</span>
555
-
<spanclass="green">◇</span> Deploying to the <b>ACME Inc. (@acme)</b> workspace.
556
-
<spanclass="muted">│</span>
557
-
<spanclass="blue">◆</span> No projects found. Do you want to create a new project?
558
-
<spanclass="blue">│</span> <spanclass="green">●</span> Yes, continue / <spanclass="muted">○ No, cancel</span>
559
-
<spanclass="blue">└</span>
560
-
</pre>
561
-
562
-
<divclass="note">If you have multiple workspaces on Observable, you’ll be prompted to chose a workspace before creating a project. And if you’ve previously deployed projects to your chosen workspace, you can chose to deploy to an existing project, overwriting its contents.</div>
478
+
<divclass="note">If you don’t have an Observable account yet, you will be prompted to sign up. Observable is free for individuals and small teams, and we offer paid tiers for larger teams.</div>
563
479
564
-
When creating a new project, you need to specify a <i>slug</i> which — together with your workspace username — determines the URL of your project. The slug is a short identifier consisting of lowercase letters, numbers, and hyphens. By default, Framework will suggest a slug based on your project’s title. You can change the slug later, and Observable will automatically redirect to the latest URL.
480
+
This command will ask you a few questions to configure your deploy, including which Observable workspace to use and whether the project should be public or private. You can also enter an optional message to associate with the deploy, but for now feel free to leave this blank by hitting Enter.
Lastly, you can enter an optional deploy message. Deploy messages are shown on Observable and help you keep track of deploy history. For now, you can just leave this blank by hitting Enter.
<spanclass="green">◇</span> What slug do you want to use?
494
+
<spanclass="muted">│ hello-framework</span>
586
495
<spanclass="muted">│</span>
587
-
<spanclass="blue">●</span> To configure deploy, we need to ask you a few questions.
496
+
<spanclass="green">◇</span> Who is allowed to access your project?
497
+
<spanclass="muted">│ Private</span>
588
498
<spanclass="muted">│</span>
589
-
<spanclass="green">◇</span> Which Observable workspace do you want to use?
590
-
<spanclass="muted">│ ACME Inc. (@acme)</span>
499
+
<spanclass="green">◇</span> What changed in this deploy?
500
+
<spanclass="muted">│</span> <spanclass="muted">Enter a deploy message (optional)</span>
591
501
<spanclass="muted">│</span>
592
-
<spanclass="green">◇</span> Which project do you want to use?
593
-
<spanclass="muted">│ Create a new project</span>
502
+
<spanclass="green">◇</span> 18 uploaded
594
503
<spanclass="muted">│</span>
595
-
<spanclass="green">◇</span> What slug do you want to use?
596
-
<spanclass="muted">│ hello-framework</span>
504
+
<spanclass="green">◇</span> Deploy complete
597
505
<spanclass="muted">│</span>
598
-
<spanclass="blue">◆</span> What changed in this deploy?
599
-
<spanclass="blue">│</span> <spanclass="muted"><spanclass="invert">E</span>nter a deploy message (optional)</span>
600
-
<spanclass="blue">└</span>
506
+
<spanclass="muted">└</span> <spanclass="muted">Deployed project now visible at <u>https://example.observablehq.cloud/hello-framework/</u></span>
601
507
</pre>
602
508
603
-
When deploy completes, Framework will show your project’s URL on observablehq.cloud. From there you can invite people to your private workspace to see your project, or make your project public so anyone can see it.
509
+
When deploy completes, Framework will show your project’s URL on observablehq.cloud.
510
+
511
+
<divclass="tip">Your deploy configuration is saved to <code>docs<spanclass="wbr">/</span>.observablehq<spanclass="wbr">/</span>deploy.json</code>. When collaborating on a project, you should commit this file to git so your collaborators don’t have to separately configure deploy.</div>
512
+
513
+
From there you can invite people to your private workspace to see your project, or make your project public so anyone can see it.
Copy file name to clipboardExpand all lines: docs/markdown.md
+17-1
Original file line number
Diff line number
Diff line change
@@ -235,7 +235,7 @@ The `note`, `tip`, `warning`, and `caution` classes can be used to insert labele
235
235
<divclass="caution">This is a caution.</div>
236
236
```
237
237
238
-
Markdown is not supported within HTML, so if you want rich formatting or links within a note, you must write it as HTML. (In the future, we may add support for notes within Markdown.)
238
+
Per [CommonMark](https://spec.commonmark.org/0.30/#html-blocks), the contents of an HTML block (such as a `<div class="note">`) are interpreted as HTML. For rich formatting or links within a note, use HTML.
239
239
240
240
<divclass="tip">
241
241
<p>This is a <i>styled</i> tip using <small>HTML</small>.</p>
@@ -247,6 +247,22 @@ Markdown is not supported within HTML, so if you want rich formatting or links w
247
247
</div>
248
248
```
249
249
250
+
Alternatively, use blank lines to separate the contents of the note from the note container, and then the contents will be interpreted as Markdown.
251
+
252
+
<divclass="tip">
253
+
254
+
This is a *styled* tip using **Markdown**.
255
+
256
+
</div>
257
+
258
+
```md run=false
259
+
<div class="tip">
260
+
261
+
This is a *styled* tip using **Markdown**.
262
+
263
+
</div>
264
+
```
265
+
250
266
You can override the note’s label using the `label` attribute.
251
267
252
268
<divclass="warning"label="⚠️ Danger ⚠️">No lifeguard on duty. Swim at your own risk!</div>
0 commit comments