https://github.com/bbkane/observable.bbkane.com
https://github.com/bbkane/observable.bbkane.com
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bbkane/observable.bbkane.com
- Owner: bbkane
- Created: 2024-10-08T13:45:57.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-09-22T01:56:12.000Z (9 months ago)
- Last Synced: 2025-11-12T15:34:42.971Z (8 months ago)
- Language: TypeScript
- Size: 1.65 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# observable.bbkane.com
This is an [Observable Framework](https://observablehq.com/framework) project. To start the local preview server, run:
```
npm run dev
```
Then visit to preview your project.
For more, see .
## Project structure
A typical Framework project looks like this:
```ini
.
├─ src
│ ├─ components
│ │ └─ timeline.js # an importable module
│ ├─ data
│ │ ├─ launches.csv.js # a data loader
│ │ └─ events.json # a static data file
│ ├─ example-dashboard.md # a page
│ ├─ example-report.md # another page
│ └─ index.md # the home page
├─ .gitignore
├─ observablehq.config.js # the project config file
├─ package.json
└─ README.md
```
**`src`** - This is the “source root” — where your source files live. Pages go here. Each page is a Markdown file. Observable Framework uses [file-based routing](https://observablehq.com/framework/routing), which means that the name of the file controls where the page is served. You can create as many pages as you like. Use folders to organize your pages.
**`src/index.md`** - This is the home page for your site. You can have as many additional pages as you’d like, but you should always have a home page, too.
**`src/data`** - You can put [data loaders](https://observablehq.com/framework/loaders) or static data files anywhere in your source root, but we recommend putting them here.
**`src/components`** - You can put shared [JavaScript modules](https://observablehq.com/framework/javascript/imports) anywhere in your source root, but we recommend putting them here. This helps you pull code out of Markdown files and into JavaScript modules, making it easier to reuse code across pages, write tests and run linters, and even share code with vanilla web applications.
**`observablehq.config.js`** - This is the [project configuration](https://observablehq.com/framework/config) file, such as the pages and sections in the sidebar navigation, and the project’s title.
## Command reference
| Command | Description |
| ----------------- | -------------------------------------------------------- |
| `npm install` | Install or reinstall dependencies |
| `npm run dev` | Start local preview server |
| `npm run build` | Build your static site, generating `./dist` |
| `npm run deploy` | Deploy your project to Observable |
| `npm run clean` | Clear the local data loader cache |
| `npm run observable` | Run commands like `observable help` |
# Ben Notes
Currently trying to get TypeScript working. See https://github.com/observablehq/framework/pull/1632/files
Update with:
```bash
npm update @observablehq/framework
```
TypeScript files must be imported with the .js extension and Observable Framework does not typecheck, it just strips the types
See https://github.com/observablehq/framework/blob/main/docs/javascript.md for details, but semicolons matter here. Don't add semicolons to a thing that's supposed to plot!
node --experimental-strip-types --test src/components/commitdays_pure.test.ts
Needed to install types to get node types
```
npm i --save-dev @types/node
```
I think the reason I'm not getting my CSS is maybe that it thhe response headers show text/html - https://stackoverflow.com/a/67202997/2958070
# Commits over time
https://observablehq.com/d/d766ad521dd479d9
For some reason, the observable plot lib doesn't like this? It doesn't like the fill property...
Even though I see it in https://observablehq.com/plot/transforms/bin
# Cache invalidation
https://observablehq.com/framework/data-loaders#caching
During preview: looks at the `mtime` of data loaders (./src/data/git-commits.csv.py) . `touch` the file to invalidate the cache
During build: looks at `./src/.observablehq/cache/`. Delete that to invalidate the cache
Because my data loader (git-commits.csv.py) reads a separate file (./src/data/repos.json), and that file isn't checked, the cache isn't invalidated when I add a repo to that file. So I need to manually invalidate the cache using one of the methods above. I'm going to update `npm run build` to auto-invalidate the cache.