Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
mbostock committed Mar 16, 2024
1 parent ea22ce4 commit 878edaf
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 9 deletions.
2 changes: 1 addition & 1 deletion docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ Next, `cd` into your new project folder.

Framework’s local development server lets you preview your site in the browser as you make rapid changes. The preview server generates pages on-the-fly: as you edit files in your editor, changes are instantly streamed to your browser.

<div class="tip">You can work offline with the preview server, but you must be connected to the internet to <a href="./javascript/imports">import libraries</a> from npm. In the future, we intend to support self-hosting imported libraries; please upvote <a href="https://github.com/observablehq/framework/issues/20">#20</a> and <a href="https://github.com/observablehq/framework/issues/360">#360</a> if you are interested in this feature.</div>
<div class="tip">You can develop offline, but you must connect to the internet to <a href="./javascript/imports">import new libraries</a> from npm. Framework self-hosts imports: modules are downloaded from npm and stored in a local cache the first time you import them, and are included in <code>dist</code> when you build your project. In the future, we also plan to support importing from <code>node_modules</code>; please upvote <a href="https://github.com/observablehq/framework/issues/360">#360</a> if you are interested in this feature.</div>

To start the preview server using npm:

Expand Down
2 changes: 1 addition & 1 deletion docs/javascript/imports.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ In addition to resolving versions of directly-imported modules, Observable Frame
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm">
```
<div class="note">We’d also like to download imported modules from the CDN during build, making the built site entirely self-contained; see <a href="https://github.com/observablehq/framework/issues/20">#20</a>. This would further enable subresource integrity hashes; see <a href="https://github.com/observablehq/framework/issues/306">#306</a>.</div>
<div class="note">Framework automatically downloads <code>npm:</code> imports from npm during preview and build, making the built site entirely self-contained. If you prefer not to self-host a module, and instead load it from an external server at runtime, import a full URL instead of using the <code>npm:</code> protocol.</div>
## Implicit imports
Expand Down
14 changes: 7 additions & 7 deletions docs/routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -157,14 +157,14 @@ The resulting output root is:
.
├─ dist
│ ├─ _import
│ │ └─ chart.js
│ │ └─ chart.c79c2048.js
│ ├─ _observablehq
│ │ └─ ... # additional assets for serving the site
│ └─ index.html
└─ ...
```

The import declaration is automatically rewritten during build to point to `./_import/chart.js` instead of `./chart.js`. (In the future [#260](https://github.com/observablehq/framework/issues/260), Observable Framework will add a content hash to the imported module name for cache-breaking.)
The import declaration is automatically rewritten during build to point to `./_import/chart.c79c2048.js` instead of `./chart.js`. The content hash `c79c2048` ensures cache-breaking during deploy, and allows assets to be marked as `cache-control: immutable` to improve performance.

Use a leading slash to denote paths relative to the source root, such as `/chart.js` instead of `./chart.js`. This allows you to use the same path to import a module from anywhere, even in nested folders. Observable Framework always generates relative links so that the generated site can be served under a base path.

Expand All @@ -186,18 +186,18 @@ Any files referenced by `FileAttachment` will automatically be copied to the `_f
.
├─ dist
│ ├─ _file
│ │ └─ quakes.csv
│ │ └─ quakes.e5f2eb94.csv
│ ├─ _observablehq
│ │ └─ ... # additional assets for serving the site
│ └─ index.html
└─ ...
```

`FileAttachment` references are automatically rewritten during build; for example, a reference to `quakes.csv` might be replaced with `_file/quakes.csv`. (In the future [#260](https://github.com/observablehq/framework/issues/260), Observable Framework will add a content hash to the attached file name for cache-breaking.) Only the files you reference statically are copied to the output root (`dist`), so nothing extra or unused is included in the built site.
`FileAttachment` references are automatically rewritten during build; for example, a reference to `quakes.csv` might be replaced with `_file/quakes.e5f2eb94.csv`. (As with imports, file names are given a content hash, here `e5f2eb94`, to improve performance.) Only the files you reference statically are copied to the output root (`dist`), so nothing extra or unused is included in the built site.

[Imported modules](#imports) can use `FileAttachment`, too. In this case, the path to the file is _relative to the importing module_ in the same fashion as `import`; this is accomplished by resolving relative paths at runtime with [`import.meta.url`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta).

Some additional assets are automatically promoted to file attachments and copied to `_file`. For example, if you have a `<link rel="stylesheet" href="style.css">` declared statically in a Markdown page, the `style.css` file will be copied to `_file`, too. The HTML elements eligible for file attachments are `audio`, `img`, `link`, `picture`, and `video`.
Some additional assets are automatically promoted to file attachments and copied to `_file`. For example, if you have a `<link rel="stylesheet" href="style.css">` declared statically in a Markdown page, the `style.css` file will be copied to `_file`, too (and the file name given a content hash). The HTML elements eligible for file attachments are `audio`, `img`, `link`, `picture`, and `video`.

## Data loaders

Expand All @@ -223,7 +223,7 @@ This will produce the following output root:
.
├─ dist
│ ├─ _file
│ │ └─ quakes.json
│ │ └─ quakes.99da78d9.json
│ ├─ _observablehq
│ │ └─ ... # additional assets for serving the site
│ └─ index.html
Expand Down Expand Up @@ -257,7 +257,7 @@ Becomes this output:
├─ dist
│ ├─ _file
│ │ └─ quakes
│ │ └─ 2021.csv
│ │ └─ 2021.e5f2eb94.csv
│ ├─ _observablehq
│ │ └─ ... # additional assets for serving the site
│ └─ index.html
Expand Down

0 comments on commit 878edaf

Please sign in to comment.