nostrweb/src/template.ts

import {nip19} from 'nostr-tools';
import {elem} from './utils/dom';

export type DOMMap = {
  [id: string]: HTMLElement
};

export type ViewTemplateOptions = {
  type: 'home';
} | {
  type: 'feed';
} | {
  type: 'note';
  id: string;
} | {
  type: 'profile';
  id: string;
} | {
  type: 'event';
  id: string;
};

export const renderViewTemplate = (options: ViewTemplateOptions) => {
  const content = elem('div', {className: 'content'});
  const dom: DOMMap = {};
  switch (options.type) {
    case 'home':
      break;
    case 'feed':
      break;
    case 'profile':
      const pubkey = options.id;
      const npub = nip19.npubEncode(pubkey);
      const detail = elem('p');
      const followStatus = elem('small');
      const followBtn = elem('button', {
        className: 'primary',
        name: 'follow',
        data: {'id': options.id}
      }, 'follow');
      const following = elem('span');
      const profileHeader = elem('header', {className: 'hero'}, [
        elem('small', {className: 'hero-npub'}, npub),
        elem('div', {className: 'hero-title'}, [
          elem('h1', {}, pubkey),
          followStatus,
          followBtn,
        ]),
        detail,
        elem('footer', {}, following),
      ]);
      dom.header = profileHeader;
      dom.detail = detail;
      dom.following = following;
      dom.followStatus = followStatus;
      dom.followBtn = followBtn;
      content.append(profileHeader);
      document.title = pubkey;
      break;
    case 'note':
      break;
    case 'event':
      const id = options.id;
      content.append(
        elem('header', {className: 'hero'}, [
          elem('h1', {}, id),
        ])
      );
      document.title = id;
      break;
  }
  const view = elem('section', {className: 'view'}, [content]);
  return {content, dom, view};
};