Memory Banks

A personal web app to store & search URLs and descriptions you want to save.

Install

TODO

Architecture

HTML view
CSS styles
JS application

HTML

Preexisting HTML view for search form. User browser form submissions, rather than javascript event handler.

<form role="search" method="GET" action="#"></form>

Search state is stored in URL as search params, application/x-www-form-urlencoded, so URLs can be saved & shared.

CSS

Styles preexisting HTML
Styles classes provided by search results list

Javascript (3 independent parts)

Script to hydrate view from state stored in URL search params
Web component for search results view
Javascript class providing search functionality, business logic, & data access

Shared Types

interface Fact {
  badge: string;
  title: string;
  content: string;
  keyValue: [string, string][];
  link: URL;
}

Javascript Class Interface

interface ExternalBrain {
  init(): Promise<void>; // Loads data from internet sources
  search(searchTerm: string): Fact[];
}

UNDECIDED: Web Component for Search Results View OR `lit-html` component? Shadow DOM?

interface {
    properties: {
        status: 'loading' | 'failure' | 'success';
        factsList: Fact[];
    }
}
/**
 * @cssprop --wc-external-brain-badge-bkg - `background` of a fact's badge. Maybe you want to do reverse-text coloring?
 * @cssprop --wc-external-brain-badge-text - `color` of a fact's badge. Maybe you want to do reverse-text coloring?
 */

andrew-pyle/memory-banks