Skip to content

Add observable framework #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion .github/workflows/pages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ on:
# Runs on pushes targeting main
push:
branches: ["main"]
pull_request:
branches: ["main"]

# Run this workflow at 3am UTC
schedule: [{ cron: "0 15 * * *"}]

# Allows you to run this workflow mannually from the Actions tab
workflow_dispatch:
Expand All @@ -20,10 +25,28 @@ concurrency:
cancel-in-progress: true

jobs:
build-observable:
runs-on: ubuntu-latest
defaults:
run:
working-directory: './posts/observable'
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- id: cache-data
uses: actions/cache@v4
with:
path: src/.observablehq/cache
key: data-${{ hashFiles('src/data/*') }}-${{ steps.date.outputs.date }}
- run: npm ci
- run: npm run build
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4
- uses: haskell/actions/setup@v2
with:
ghc-version: '9.2.7'
Expand Down Expand Up @@ -62,6 +85,7 @@ jobs:
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
if: github.event_name == 'push'
steps:
- name: Deploy to GitHub Pages
id: deployment
Expand Down
4 changes: 4 additions & 0 deletions posts/observable/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.DS_Store
/dist/
node_modules/
yarn-error.log
53 changes: 53 additions & 0 deletions posts/observable/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
# ldgrp Data Sandbox

This is an [Observable Framework](https://observablehq.com/framework) app. To start the local preview server, run:

```
npm run dev
```

Then visit <http://localhost:3000> to preview your app.

For more, see <https://observablehq.com/framework/getting-started>.

## 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 app 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 app. 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 [app configuration](https://observablehq.com/framework/config) file, such as the pages and sections in the sidebar navigation, and the app’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 app to Observable |
| `npm run clean` | Clear the local data loader cache |
| `npm run observable` | Run commands like `observable help` |
37 changes: 37 additions & 0 deletions posts/observable/observablehq.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// See https://observablehq.com/framework/config for documentation.
export default {
// The app’s title; used in the sidebar and webpage titles.
title: "ldgrp Data Sandbox",

// The pages and sections in the sidebar. If you don’t specify this option,
// all pages will be listed in alphabetical order. Listing pages explicitly
// lets you organize them into sections and have unlisted pages.
// pages: [
// {
// name: "Examples",
// pages: [
// {name: "Dashboard", path: "/example-dashboard"},
// {name: "Report", path: "/example-report"}
// ]
// }
// ],

// Content to add to the head of the page, e.g. for a favicon:
head: '<link rel="icon" href="observable.png" type="image/png" sizes="32x32">',

// The path to the source root.
root: "src",

// Some additional configuration options and their defaults:
// theme: "default", // try "light", "dark", "slate", etc.
// header: "", // what to show in the header (HTML)
// footer: "Built with Observable.", // what to show in the footer (HTML)
// sidebar: true, // whether to show the sidebar
// toc: true, // whether to show the table of contents
// pager: true, // whether to show previous & next links in the footer
// output: "dist", // path to the output root for build
// search: true, // activate search
// linkify: true, // convert URLs in Markdown to links
// typographer: false, // smart quotes and other typographic improvements
cleanUrls: false, // drop .html from URLs
};
Loading
Loading