Skip to content
Astro Digital Garden

Tasks extraction

aka Checklist, TODO

Introduction

Imagine you are writing an article and have a 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 convenient to keep this checklist in the article itself. On the other hand, you may want to see all tasks at a glance. With the help of BrainDB, it is possible to extract all tasks from all pages and list them on one page.

Installation

  1. Install BrainDB

  2. Create TaskList component

    src/components/TaskList.astro
    ---
    import type { Task } from "@braindb/core";
    import { getBrainDb } from "@braindb/astro";
    

    // TODO: shall I sort pages by title (alphabetically) or by date (recent first)?
    const grouped: Record<string, Task[]> = {};
    (await getBrainDb().tasks()).forEach((task) => {
      const doc = task.from();
      if (!doc.frontmatter().draft || import.meta.env.DEV) {
        const path = doc.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>
      ))
    }

  3. Use component, wherever you like

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

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

    <TaskList />

Limitations

For now, I have implemented the bare minimum for task extraction in BrainDB. These are the limitations that 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 a 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 haven’t figured out a good way to render it with Astro. I use plain text instead:

- [ ] code bold

Limitation 3: no subitems

- [ ] task
  - a
  - b

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

- [ ] task

Example

This is an example of <TaskList /> output 👇

Pan and zoom for images

  • Create a Rehype plugin to wrap images in a container ( <figure class="beoe"></figure> ) to avoid creating it on the client side.
  • Do not stretch images if they are smaller than viewport
  • Prevent clicks on drag or pan
  • minimap and full-screen mode, like in reactflow ↗

Last modified time

Icons for external links

Graphviz diagram

  • Highlighting of nodes or edges
  • Search/filter by labels

Content graph visualization

Sidebar

  • Render as partials and fetch from the server instead of prerendering, because there are too many DOM nodes.
  • Tabs should preserve state across navigations.
  • The scroll area should be inside the TabItem .

SEO and SMO meta tags

  • Plugin that places sitemap URL in robots.txt ( astro-robots-txt )
  • Use the "updated at" date in the sitemap (so search engines would rescan those pages first)

Wikilinks

  • Check that anchors correspond to a header in the target document.
  • What about ambiguous links ( bdb.documentsSync({ slug: permalink }).length > 1 )?
  • Image wikilinks ( ![[some.jpg]] )

Social images autogeneration

  • Generate a gradient based on tag colors

Tag list

  • Page for each tag
  • Metadata for tags (color, icon)

Timelime diagram

  • Remove the Graphviz component from the repo; need to use @beoe/astro-graphviz instead.

Client-side content graph

  • Links for nodes
  • Zoom behavior is a bit annoying; is there a way to customize it?
  • Tags probably should have a constant size or damping factor; otherwise, they will always be the biggest nodes.
  • On node hover, highlight neighbor nodes and connecting edges.
  • If there were metadata for tags or pages, like color or icon, it could be used for graph visualization.

Faceted search

  • I can still use facets or pagefind , but I need a different UI.
  • Other potential fields for facets:
  • Sort by:

Link previews

  • Handle non-HTML links (images, PDFs).

Table of Contents

  • Fix bug: it crashes if there are missing header levels, like h4 directly under h2 .
  • Fix "snake" styles.