nostr-web-components/text.ts

collection of web components that provide quick access to basic nostr things

import * as nip27 from '@nostr/tools/nip27'
import { naddrEncode, neventEncode, nprofileEncode, npubEncode } from '@nostr/tools/nip19'

import { nostrLink, relayLink, shorten, shortenURL } from './utils.js'
import { fetchNostrUser } from './nostr.js'

export function renderText(wrapper: HTMLElement, content: string) {
  for (let block of nip27.parse(content)) {
    switch (block.type) {
      case 'text':
        let span = document.createElement('span')
        span.setAttribute('part', 'text')
        span.textContent = block.text
        wrapper.appendChild(span)
        break
      case 'reference': {
        let a = document.createElement('a')
        a.setAttribute('part', 'reference')
        a.target = '_blank'
        if ('id' in block.pointer) {
          // nevent
          a.setAttribute('part', 'nevent')
          let code = neventEncode(block.pointer)
          a.href = nostrLink(code)
          a.target = '_blank'
          a.textContent = shorten(code)
        } else if ('identifier' in block.pointer) {
          // naddr
          a.setAttribute('part', 'naddr')
          let code = naddrEncode(block.pointer)
          a.href = nostrLink(code)
          a.target = '_blank'
          a.textContent = shorten(code)
        } else {
          // npub/nprofile
          a.setAttribute('part', 'npub reference')
          let nprofile = nprofileEncode(block.pointer)
          a.href = nostrLink(nprofile)
          a.target = '_blank'
          let npub = npubEncode(block.pointer.pubkey)
          a.textContent = shorten(npub)
          let pp = block.pointer
          setTimeout(async () => {
            let nu = await fetchNostrUser(pp.pubkey, pp.relays || [])
            a.textContent = nu.shortName
          }, 10)
        }
        wrapper.appendChild(a)
        break
      }
      case 'url': {
        let a = document.createElement('a')
        a.href = block.url
        a.textContent = shortenURL(block.url)
        a.setAttribute('part', 'url')
        a.target = '_blank'
        wrapper.appendChild(a)
        break
      }
      case 'image': {
        let a = document.createElement('a')
        a.href = block.url
        a.setAttribute('part', 'image')
        let img = document.createElement('img')
        img.style.width = '100%'
        img.src = block.url
        img.loading = 'lazy'
        a.appendChild(img)
        wrapper.appendChild(a)
        break
      }
      case 'video': {
        let video = document.createElement('video')
        video.setAttribute('part', 'video')
        video.style.width = '100%'
        video.src = block.url
        video.controls = true
        video.muted = true
        video.playsInline = true
        wrapper.appendChild(video)
        break
      }
      case 'audio': {
        let audio = document.createElement('audio')
        audio.setAttribute('part', 'audio')
        audio.style.width = '100%'
        audio.src = block.url
        audio.controls = true
        wrapper.appendChild(audio)
        break
      }
      case 'relay': {
        let a = document.createElement('a')
        a.href = relayLink(block.url)
        a.setAttribute('part', 'relay')
        a.target = '_blank'
        wrapper.appendChild(a)
        break
      }
      default:
        break
    }
  }
}