Tasks

• update section about “Ideal solution” in diagrams article
• write about playwright for Mermaid and Euler diagrams
• write about not-content
• implement Faceted search
• Implement remark-dataview plugin in BrainDB monorepo
  • ”Alphabetical index” and “Recently changed” can be first candidates
  • For more complex things I need DQL parser ↗
• add View Transitions ↗
  • see starlight#694 ↗
• implement better user action tracking (beyond page navigations)
  • if search was used
  • if external links were clicked
  • if page preview was shown
• remove H1 on tags page
• publish Astro components for
  • LinkPreview
  • ”Snake” table of content
  • Alphabetical index (BrainDB instance as param)
  • Recently changed (BrainDB instance as param)

Ideas

• sidebar: show “new” (or “fresh”) badge based on git update time?
• Footnotes
  • mention how footnotes can be shown on the side, like in Tufte design ↗
  • https://gwern.net/sidenote ↗

Color tag

I can easily generate color from tag:

import ch from "color-hash";
const colorHash = new ch.default();
colorHash.hex(tag);

I can use it in:

• color-chip near the tag or maybe color underline?
• Euler diagram
• content graph
• social images - to generate colorful “border”

Metadata

Metadata can come from frontmatter or can be computed

Content:

	frontmatter	auto generated	usage
Title	title	File name	<title>, og:title, twitter:title, Social images autogenration
Description	description	Text summarization	<meta name="description">, og:description, twitter:description, Social images autogenration
Image	?	Social images autogenration	og:image, twitter:image, cover image for post, small image for list
Slug	slug	File name or path	wikilinks, url generation
Last Updated	lastUpdated	Based on git	”Last updated” on on page or in list, “Recently changed” page, schema ↗ (dateModified), sitemap ↗ (lastmod), search
Tags	tags	-	Tag list page, Tags on page or in list, search

Functional: tableOfContents, banner, pagefind, draft, sidebar

Other:

• It should be possible to assign metdata for each page and/or tag. For example, it can be color or icon. Then this metadata can be reused:
  • color and icon for nodes in Content graph visualization
  • icons can be shown for tags (like this: #link )
  • icons can be shown for pages in sidebar and near link to them
  • page may have stage field (idea, draft, in progress, or finished). Right now I use emojis: 🧠, 🚷, 🚧. Similar idea: Taxonomy of note types ↗
  • some pages have aka field
  • for tags color can be generated automaticially: “scale” ↗ or color-hash ↗
• Functional metadata:
  • I can implement alias with “catch all” [...path].astro (Permanent links)
    • but also need to exclude it from sitemap

    ---
    export function getStaticPaths() {
      return [{ params: { path: "test-redirect" } }];
    }
    ---

  • description
    • Can I generate it automatically? Let’s say take hast-util-to-string, trim() and slcie first 150 chars
    • https://github.com/topics/text-summarization?l=javascript ↗
  • exclude from sitemap

From other articles

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

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