Obsidian Dataview

Dataview is a live index and query engine over your personal knowledge base. You can add metadata to your notes and query them with the Dataview Query Language to list, filter, sort or group your data. Dataview keeps your queries always up to date and makes data aggregation a breeze.

— Obsidian Dataview

Dataview is a plugin for Obsidian. There is a way, though, buiuld your own “Dataview” for Astro. In order to do so one needs:

remark-code-hook, to cath all codeblocks with dataview language
Parse code as DQL (SQL-like language)
Translate (aka compile) DQL AST to BrainDB calls
Translate result to MDAST (or HTML)

Proof of concept

It will take time to repeat full functionality, so lets start with one simple case:

```dataview
TASK
```

Implementation

Install BrainDB
Install remark-code-hook
Terminal window
```
pnpm add @beoe/remark-code-hook
```

Create remarkDataview

import remarkCodeHook from "@beoe/remark-code-hook";

export function remarkDataview(options) {
  const { bdb, ...rest } = options;
  return remarkCodeHook({
    ...rest,
    language: "dataview",
    code: ({ code }) => {
      if (code !== "TASK")
        throw new Error("PoC of Dataview - only TASK supported");

      return "Tasks will be here";
    },
  });
}

Configure Astro

import { remarkDataview } from "./src/plugins/remarkDataview.mjs";

export default defineConfig({
  markdown: {
    remarkPlugins: [[remarkDataview, { bdb }]],
  },
});

Use BrainDB to extract tsasks

import remarkCodeHook from "@beoe/remark-code-hook";

const list = (children) => ({
  type: "list",
  ordered: false,
  start: null,
  spread: false,
  children,
});
const listItem = (children, checked = null) => ({
  type: "listItem",
  spread: false,
  checked,
  children,
});
const paragraph = (children) => ({ type: "paragraph", children });
const link = (children, url) => ({
  type: "link",
  title: null,
  url: url,
  children,
});
const text = (value) => ({ type: "text", value });

export function remarkDataview(options) {
  const { bdb, ...rest } = options;
  return remarkCodeHook({
    ...rest,
    language: "dataview",
    code: ({ code }) => {
      if (code !== "TASK")
        throw new Error("PoC of Daview - only TASK supported");

      const grouped = {};
      bdb.tasksSync().forEach((task) => {
        const path = task.from().path();
        grouped[path] = grouped[path] || [];
        grouped[path].push(task);
      });

      return paragraph(
        Object.values(grouped)
          .flatMap((group) => {
            const doc = group[0].from();
            return [
              paragraph([link([text(doc.title())], doc.url())]),
              list(
                group.map((task) => listItem([task.ast()], task.checked()))
              ),
            ];
          })
      );
    },
  });
}

Beyond proof of concept

For now this is PoC. For full version we need:

DQL parser, for example, based on:
- chevrotain
- nanosql
- js-sql-parser
- sql-parser
- alasql
- etc.
Implement better filtering and sorting in BrainDB

I tried to extract original DQL parser. Not sure about this approach though.

Example

This is an example of output 👇

Content graph visualization

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

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

One more idea is to add favicon of the target instead of ↗.

Last modified time

schema.org microdata
sitemap (lastmod)

Link previews

handle non-html links (images, pdfs)

Social images autogenration

generate gradient based on tag colors

Pan and zoom for images

style pan-zoom buttons
create rehype plugin to wrap images into container (<figure class="beoe"></figure>), to avoid creating it on the client side

Table of contents

fix bug: it crashes if there are missing header levels, like h4 directly in h2
fix "snake" styles

Tag list

page for each tag
metadata for tags (color, icon)

Timelime diagram

removed Graphviz component from the repo need to use @beoe/astro-graphviz instead

Wikilinks

support anchors in wikilinks ([[page#anchor]], [[page#anchor|alias]])
check that anchors correspond to some header in target document
what about ambiguous links (bdb.documentsSync({ slug: permalink }).length > 1)?
image wikilinks (![[some.jpg]])