You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
|
|
import {nip19} from 'nostr-tools';
|
|
import {elem} from './utils/dom';
|
|
|
|
export type DOMMap = {
|
|
[id: string]: HTMLElement
|
|
};
|
|
|
|
export type ViewTemplateOptions = {
|
|
type: 'home';
|
|
id?: string;
|
|
} | {
|
|
type: 'feed';
|
|
} | {
|
|
type: 'note';
|
|
id: string;
|
|
} | {
|
|
type: 'profile';
|
|
id: string;
|
|
} | {
|
|
type: 'contacts';
|
|
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 about = elem('span');
|
|
const detail = elem('p', {}, about);
|
|
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[`about-${pubkey}`] = about;
|
|
dom[`detail-${pubkey}`] = detail;
|
|
dom.following = following;
|
|
dom[`followStatus-${pubkey}`] = followStatus;
|
|
dom[`followBtn-${pubkey}`] = followBtn;
|
|
content.append(profileHeader);
|
|
document.title = pubkey;
|
|
break;
|
|
case 'note':
|
|
break;
|
|
case 'contacts':
|
|
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};
|
|
};
|