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 👇

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]] )

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)
• Use LLM to generate descriptions

Table of Contents

• Fix "snake" styles.

Link previews

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

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 .

Last modified time

• sitemap ↗ ( lastmod )
• in the Sidebar to show "new" badge

Icons for external links

• add other favicon providers ↗

Content graph visualization

• Show labels for tags on the graph.
• Create an example with Client-side content graph

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: