Tasks extraction

aka Checklist, TODO

Introduction

Imagine you are writing an article and you have some checklist of what else you want to cover in the article.

- [ ] write about ...
- [ ] check that this is correct assumption ...
- [ ] add citation

# My article

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

On one hand it is convinient to keep this checklist in the article itslef. On the other hand you may want to see all tasks at glance. With the help of BrainDB it is possible to extract all tasks from all pages and list them on one page.

Installation

Install BrainDB

Create TaskList component

---
import type { Task } from "@braindb/core";
import { bdb } from "@lib/braindb.mjs";

// TODO: shall I sort pages by title (alphabetically) or by date (recent first)?
const grouped: Record<string, Task[]> = {};
(await bdb.tasks()).forEach((task) => {
  const path = task.from().path();
  grouped[path] = grouped[path] || [];
  grouped[path].push(task);
});
---

{
  Object.values(grouped).map((tasks) => (
    <p>
      <a href={tasks[0].from().url()}>{tasks[0].from().title()}</a>
      <ul>
        {tasks.map((task) => (
          <li>
            <label>
              <input
                type="checkbox"
                disabled="disabled"
                checked={task.checked()}
              />
              &nbsp;{task.text()}
            </label>
          </li>
        ))}
      </ul>
    </p>
  ))
}

Use component, wherever you like

---
title: Tasks
tableOfContents: false
prev: false
next: false
---

import TaskList from "@components/TaskList.astro";

<TaskList />

Limitations

For now I implemented bare minimum for task extraction in BrainDB. Those are limitation which I want to address in the future.

Limitation 1: flat list

- [ ] task
  - [x] sub-task

BrainDB will return this as a flat list instead of hierarchical structure:

- [ ] task
- [x] sub-task

Limitation 2: text only

- [ ] `code` **bold**

BrainDb can return markdown for the content of the task, but for now I didn’t figure out good way to render it with Astro. I use text insted:

- [ ] code bold

Limitation 3: no subitems

- [ ] task
  - a
  - b

For now BrainDb returns only content of the task, but not subitems:

- [ ] task

Example

This is an example of <TaskList /> output 👇

Content graph visualization

show labels for tags on the graph
create an example with graph-client

Euler diagram

Implement area-proportional diagram. Maybe edeap.
Try to implement it without headless browser

Faceted search

I created basic proof of convept using facets and InstantSearch. I don't like it, though. It supports facets for:
I still can use facets or pagefind, but I need different UI.
Other potential fields for facets
Sort by

Icons for external links