Merge pull request #2 from dataforgoodfr/site-observable

Démonstration d'un site en observable.

site-observable/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+dist/
+docs/.observablehq/cache/
+node_modules/
+yarn-error.log

site-observable/README.md

@@ -0,0 +1,53 @@
+# L'observatoire des imaginaires
+
+This is an [Observable Framework](https://observablehq.com/framework) project. To start the local preview server, run:
+
+```
+yarn dev
+```
+
+Then visit <http://localhost:3000> to preview your project.
+
+For more, see <https://observablehq.com/framework/getting-started>.
+
+## Project structure
+
+A typical Framework project looks like this:
+
+```ini
+.
+├─ docs
+│  ├─ 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.ts      # the project config file
+├─ package.json
+└─ README.md
+```
+
+**`docs`** - 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.
+
+**`docs/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.
+
+**`docs/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.
+
+**`docs/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.ts`** - 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                                              |
+| ----------------- | -------------------------------------------------------- |
+| `yarn install`            | Install or reinstall dependencies                        |
+| `yarn dev`        | Start local preview server                               |
+| `yarn build`      | Build your static site, generating `./dist`              |
+| `yarn deploy`     | Deploy your project to Observable                        |
+| `yarn clean`      | Clear the local data loader cache                        |
+| `yarn observable` | Run commands like `observable help`                      |

site-observable/docs/.observablehq/deploy.json

@@ -0,0 +1,5 @@
+{
+  "projectId": "4c462082eae2b53a",
+  "projectSlug": "questionnaire",
+  "workspaceLogin": "observatoire-des-imaginaires"
+}

site-observable/docs/data/movies.csv.py

@@ -0,0 +1,39 @@
+import os
+import tempfile
+from datetime import datetime, timedelta
+
+import pandas as pd
+
+with tempfile.TemporaryDirectory() as temp_dir:
+    os.chdir(temp_dir)
+
+    os.system(
+        "kaggle datasets download -d asaniczka/tmdb-movies-dataset-2023-930k-movies >&2",
+    )
+    os.system("unzip tmdb-movies-dataset-2023-930k-movies.zip >&2")
+
+    df = pd.read_csv("TMDB_movie_dataset_v11.csv", parse_dates=["release_date"])
+
+    # Remove adult movies
+    df = df[df["adult"] == False]  # noqa: E712
+
+    # Calculate the date for the past two years
+    years_ago = datetime.now() - timedelta(days=365 * 2)
+    start_date = years_ago.replace(month=1, day=1)
+
+    # Filter the dataframe based on the start date
+    df["tally_url"] = df.apply(
+        lambda row: (
+            f"""https://tally.so/r/wQ5Og8"""
+            f"""?original_title={row["original_title"]}"""
+            f"""&production_year={row["production_year"]}"""
+            f"""&production_countries={row["production_countries"]}"""
+            f"""&genres={row["genres"]}"""
+        ),
+        axis=1,
+    )
+
+    # Select the columns we want
+    df = df[["id", "title", "tally_url"]]
+
+    print(df.to_csv(index=False))

site-observable/docs/data/shows.csv.py

@@ -0,0 +1,32 @@
+import os
+import tempfile
+
+import pandas as pd
+
+with tempfile.TemporaryDirectory() as temp_dir:
+    os.chdir(temp_dir)
+
+    os.system(
+        "kaggle datasets download -d asaniczka/full-tmdb-tv-shows-dataset-2023-150k-shows >&2",
+    )
+    os.system("unzip full-tmdb-tv-shows-dataset-2023-150k-shows.zip >&2")
+
+    df = pd.read_csv("TMDB_tv_dataset_v3.csv")
+
+    # Remove adult movies
+    df = df[df["adult"] == False]  # noqa: E712
+
+    # Add a column with the tally URL
+    df["tally_url"] = df.apply(
+        lambda row: (
+            f"""https://tally.so/r/wQ5Og8"""
+            f"""?original_title={row["original_name"]}"""
+            f"""&production_countries={row["production_countries"]}"""
+        ),
+        axis=1,
+    )
+
+    # Select the columns we want
+    df = df[["id", "name", "tally_url"]]
+
+    print(df.to_csv(index=False))

site-observable/docs/index.md

@@ -0,0 +1,25 @@
+---
+toc: false
+---
+
+# l'Observatoire des Imaginaires
+
+Veniam deserunt veniam enim dolore irure quis. Aliqua laboris anim incididunt occaecat dolore excepteur dolore ad quis nostrud. In do pariatur incididunt nisi incididunt occaecat irure proident nostrud commodo sint non voluptate sunt. Nisi nostrud cillum ex incididunt ipsum labore magna tempor enim. Laborum deserunt pariatur ex id irure commodo minim laborum incididunt duis irure.
+
+## Films Récents
+
+Nulla laboris aliqua nulla minim minim. Labore minim fugiat velit reprehenderit magna pariatur id sunt sunt eiusmod cillum. Ex ut irure reprehenderit mollit non ad. Cillum consectetur fugiat laborum commodo. Consectetur elit ea laborum elit ad.
+
+Officia aliquip velit fugiat aliquip commodo exercitation. Ipsum labore nostrud do consequat quis et. Laboris veniam nulla non duis Lorem est eiusmod. Eu aliquip duis excepteur excepteur ipsum pariatur incididunt esse laborum incididunt sint eiusmod nostrud cillum. Labore ad reprehenderit deserunt enim laboris exercitation aute adipisicing fugiat sunt cupidatat.
+
+Duis culpa et Lorem duis et occaecat labore id voluptate. Id nostrud fugiat laboris qui ipsum dolore ex proident culpa pariatur cupidatat ex mollit. Reprehenderit nulla mollit magna culpa id irure exercitation nisi qui. Excepteur eiusmod ex irure fugiat incididunt consectetur ipsum do in exercitation reprehenderit in deserunt. Occaecat irure ullamco eu anim exercitation id deserunt enim Lorem officia velit sit nostrud id.
+
+<a href="./movies">Choisir un film</a>
+
+## Séries Récentes
+
+Esse nulla Lorem veniam commodo in est consequat sit. Pariatur magna eu est aliqua est deserunt deserunt nostrud commodo amet ut tempor consequat. Officia fugiat ullamco mollit adipisicing mollit. Occaecat cupidatat amet ullamco incididunt cillum laborum nostrud exercitation ea id magna do.
+
+Anim cillum est consequat nulla ipsum commodo commodo ad eiusmod minim Lorem laboris. Sunt veniam magna laboris duis tempor consequat eu pariatur. Est aute do occaecat voluptate occaecat eiusmod minim fugiat excepteur tempor.
+
+<a href="./series">Choisir une série</a>

site-observable/docs/movies.md

@@ -0,0 +1,42 @@
+---
+title: Choix d'un film
+---
+
+# Chosir un film
+
+```js
+const movies = FileAttachment("data/movies.csv").csv({ typed: true });
+```
+
+Entrez le nom d'un film:
+
+```js
+const query = view(Inputs.text());
+```
+
+```js
+import { DuckDBClient } from "npm:@observablehq/duckdb";
+const db = DuckDBClient.of({ movies: movies });
+```
+
+```js
+const results = db.query(
+  `SELECT * FROM movies WHERE movies.title ILIKE ? ORDER BY movies.title`,
+  [`${query}%`]
+);
+```
+
+```js
+import { html } from "npm:htl";
+```
+
+${results.length} films trouvés:
+
+${results.length > 0 ? results.slice(0,20).forEach((movie) => display(html`<a href="${movie["tally_url"]}">
+${movie["title"]}
+</a><br />`)) : display(html`Désolé, ce film n'est pas répertorié dans notre base. <a href="https://tally.so/r/wQ5Og8">Aller au questionnaire</a>`)}
+
+</div>
+
+<a href="./">Retour</a>
+

site-observable/docs/series.md

@@ -0,0 +1,40 @@
+---
+title: Choix d'une série télévisée
+---
+
+# Choisir une série télévisée
+
+```js
+const shows = FileAttachment("data/shows.csv").csv({ typed: true });
+```
+
+Entrez le nom d'une série télévisée:
+
+```js
+const query = view(Inputs.text());
+```
+
+```js
+import { DuckDBClient } from "npm:@observablehq/duckdb";
+const db = DuckDBClient.of({ shows: shows });
+```
+
+```js
+const results = db.query(`SELECT * FROM shows WHERE shows.name ILIKE ?`, [
+  `${query}%`,
+]);
+```
+
+```js
+import { html } from "npm:htl";
+```
+
+${results.length} séries trouvées:
+
+${results.length > 0 ? results.slice(0, 20).forEach((show) => display(html`<a href="${show["tally_url"]}">
+${show["name"]}
+</a><br />`)) : display(html`Désolé, cette série n'est pas répertoriée dans notre base. <a href="https://tally.so/r/wQ5Og8">Aller au questionnaire</a>`)}
+
+</div>
+
+<a href="./">Retour</a>

site-observable/observablehq.config.ts

@@ -0,0 +1,29 @@
+// See https://observablehq.com/framework/config for documentation.
+export default {
+  // The project’s title; used in the sidebar and webpage titles.
+  title: "L'observatoire des imaginaires",
+  sidebar: false,
+
+  // 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"}
+  //     ]
+  //   }
+  // ],
+
+  // Some additional configuration options and their defaults:
+  theme: "light", // try "light", "dark", "slate", etc.
+  // header: "", // what to show in the header (HTML)
+  footer: "", // what to show in the footer (HTML)
+  // toc: true, // whether to show the table of contents
+  pager: false, // whether to show previous & next links in the footer
+  // root: "docs", // path to the source root for preview
+  // output: "dist", // path to the output root for build
+  // search: true, // activate search
+};

site-observable/package.json

@@ -0,0 +1,22 @@
+{
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf docs/.observablehq/cache",
+    "build": "rimraf dist && observable build",
+    "dev": "observable preview",
+    "deploy": "observable deploy",
+    "observable": "observable"
+  },
+  "dependencies": {
+    "@observablehq/framework": "latest",
+    "d3-dsv": "^3.0.1",
+    "d3-time-format": "^4.1.0"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.5"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}