sandwichfarm / myrelay.page

your relay is awesome, its canonical should be too

myrelay.page

Your relay is awesome, its landing page should be too.

A nostr.watch R&D project made possible by OpenSats

why

That websocket URI representing your relay is floating all over the internet now. Its canonical https shouldn't be a 500, a blank page or some random page. + I both need to do this to eat my own dog food and it's something I've wanted to do since early 2023.

overview

SvelteKit CSR site with SSR disabled that implements ndk, nostr-zap and @nostrwatch/nocap. Utilizes NIP-65, NIP-66, NIP-78 and NIP-115.

Why SvelteKit if no SSR?: No justification other than habit. Convert it in a PR and I won't complain.

Try it without build/deploy

You can preview your relay on myrelay.page and even edit it without building or deploying it through the netlify build (which is always latest). Important: Works for wss relays only! Also see requirements for editing

https://relaypage.netlify.app/?url=$YOUR_RELAY_URL

for example

• snort
• damus
• damus
• nostr.land

todo

• general
  • tailwind
  • shadcn-svelete UI components
  • progressive load w/skeletons
  • NIP-07 support
  • NIP-46 support
  • mobile compat
  • options generic
  • manually set URL via .env for build-time URL setting for explicit control and unhandled edge-cases
• unique blocks
  • nip-11
  • operator profile/feed
  • map
  • relay feed
  • speed test (need to patch @nostrwatch/nocap)
• repeatable blocks
  • html
  • image
  • md
  • feed
• stateful meta-data
  • nip-11
  • operator profile
  • operator notes
  • notes from relay
  • long-form content feed
  • NIP-19 encoded nevent jumps
  • relay Geodata
  • NIP-66 Monitor Data
    • seen by monitors
    • round-trip time of monitors
    • map reactiveness
    • ssl
  • uptime
• parsing
  • notes: images
  • notes: videos
  • notes: spotify
  • notes: tidal
  • notes: NIP-19 encoded nostr: links
• authed User Interactivity
  • login
  • add relay to relay list [10002]
  • zap relay operator
  • follow relay operator
  • "People you follow who are here"
  • "Notes you have here"
• no-build customization via NIP-78
  • general
    • theme import
    • show/hide blocks
    • order blocks
    • per block customization
    • hide login
    • disable join
  • theming
    • default runtime themes
    • theme selection
    • theme customization
  • runtime-imported CSR blocks (svelte)
    • http/https
      • custom block imports
      • custom block options
    • git
      • custom block imports
      • custom block options
    • blossom
      • custom block imports
      • custom block options
  • internationalization (i18n)
    • i18n mapped language
    • NIP-78 overrides

Deploy

early alpha, things will change, history will be full of haphazard commit messages, force pushes to reset history eminent ... but have at it.

build

pnpm install
pnpm build

Artifacts will end up in the build directory. You just neeed to serve them.

docker

docker build .

Image is not available on a registry yet

Important Notes

1. To use the editor, you need to login with the pubkey listed in your NIP-11. The pubkey must be hex in alignment with NIP-11, not your NIP-19 encoded npub
2. myrelay.page is self-configuring, you don't need to set a URL. In the event it is not working more than likely, it's one of the following causes:

• If you run a wss relay, you must serve myrelay.page from https,
• if you run a ws (unsecured) relay, for instance from onion or a local relay, you must serve myrelay.page from http
• You are not serving myrelay.page from the https url equivalent of your relay, see below if testing locally.

dev

pnpm dev

You can show a myrelay.page for any relay from localhost by appending ?url=wss://relay.snort.social for instance.

serving from relay canonical

Depending on your relay software, you'll need to do some proxying to direct websocket, NIP-11 and/or NIP-05 traffic to your relay, and http(s) traffic without application/nostr+json to the myrelay.page static path or port.

nginx/caddy/haproxy

caddy

• strfry: see caddy/strfry/Caddyfile
• nostream: soon
• nostr-rs-relay: soon

nginx

soon

haproxy

soon

myrelay.page's Issues

Theme settings generics

Require theme generics for NIP-78 config read/write and settings panel generation (dom).

• Color: color [:ColorPickerInput]
• Typography: font-family, size, style, leading/tracking, Color
• Background: Color, url, position x/y, repeat, scale
• BackgroundTint: Background, opacity, enable

add info icon/tooltip generic

will be needed in coming updates.

different theming approach

going to refactor themes, as is they work, and are fine, but different approach enables hybrid premade themes with tweaks and customizations completely at runtime, without any prebuild step.

leverage css vars

• https://www.sitepoint.com/theming-tailwind-css-variables-clean-architecture/
• (better) https://svelte.dev/repl/8123d474edb04f198c3b83363716a709?version=4.2.15

prepare for storification

rationale

• svelte patterns
• performance
• maintenance
• lower bar for contribution

why not do this from the start
I like strong separation of concerns during alpha, and specifically when the alpha is a proof of concept. This particular alpha was proving specific concepts that that nothing to do with UI/UX or svelte. Removing svelte from the equation significantly reduced lead time for (in)validation. Now that the concept is validated, beta is on the roadmap, which means this is necessary. I kept this particular issue in mind during development, so this issue should take 1, maybe 2 days to complete.

new stores

• ControlFlowStore
• ConfigStore: stores site config

migrated stores/contexts

• $MRP.$.ndk - :context Ndk
• $MRP.$.signal -> :context Signal ... Signal (emitter) will remain for control-flow concerns and editor reactivity, everything else will rely on svelte state management as it should.
• $MRP.nostr.relay -> RelayStore
• $MRP.nostr.owner -> OperatorStore
• $MRP.nostr.owner.feed && MRPFeed instances -> FeedStore
• NoteStore
• $MRP.nostr.user -> CurrentUserStore
• $MRP.nostr.user.profile &* $MRP.nostr.owner.profile && $MRP.nostr.user.follows[*].profile -> ProfileStore

component level

• MRPFeed: class store moved to component level writable (no context keys), class becomes utility that extends fetchers for filter generation, filter/event validation and sanitization.
• MRPUser: ^^^

remains core class for utility

• MRPFeed: fetchers remain
• MRPUser: fetchers remain
• MRPData: extendable class that wraps emitter for stage/status tracking (unchanged)

new generics

• MRPFetchers: extendable fetcher generic.

removed classes

• MRPEditor: data

controlflow

• MRP, MRP.nostr and MRP.nostr.relay control flow logic coalesced into singleton and persisted in ControlFlow store.

mobile & desktop map ping overlap

on mobile (iPhone 12 mini, SE) and on desktop there is overlap of ping readings in Europe

Sandwich advises:

There's no easy solution to this other than hiding the point if it's close to the relay, if a relay is nearby a monitor it'll overlap. Unfortunately, the Unovis TopoJSON implementation does not provide great support for label positioning/sizing. Happens on desktop as well.

Missing options implementations in feed

THere are several options that have inputs, but are not implemented, here's a few

• exclude operator notes
• excludeOperator
• hideNotesContainingImages
• hideNotesContainingVideos

Ignore for now

• noteTemplate (only one template, depends on #4 )

typography

Typography cohesion fell apart at some point, revisit.

Fix smol phone rendering

iPhone 12 mini
iOS 17.4.1
Safari
Brave Version 1.63.2 (183) BraveCore 1.63.183 (122.0.6261.128) Device iPhone13,1 (iOS 17.4.1)

"publish" buttons should only be visible when there's some changes.

state bug, easy fix

Add basic configurations

• show/hide blocks
• reorder
• custom stylesheet

fix header spacing when logged in

options

1. more compact user bar
2. move user bar

Map improvements

• disable monitors
• show monitors only on hover (only show relay point)
• enable specific monitor operators (depends on nostr-protocol/nips#1182 implementation for NIP-66 monitors)
• enable specific monitors (default: all) workaround for #18
• Fix current user location (default: opt-in)
• Too optimistic, better error handling (history.nostr.watch cert didn't renew correctly, meaning that monitor events were not populated for an hour, resulting in a null dataset that was not handled. Irrelevant to this, need to publish monitor events to more relays)

# in url breaks site

Sanitize the url better, remove hashes and params from detected URL.

Refactor core

Presently everything initializes via a singular class instance. I did it like this because I wrote the entire core before writing the interface.

Need to break everything out into their own context.

• smoother hydration and simpler maintenance
• simplifies implementation and creation of runtime imported components
• less traversal
• easier to contribute

contexts

1. relay
   • operator
   • feed
2. currentUser
   • ...NDKUser
   • profile
   • relays
   • follows
3. monitors

Prepend single digit nips with 0 for link

Add preferred client or nevent proxy to global/feed options

Ability to set which proxy (njump, etc), client or user default to use to viewing notes in a feed.

missing favicon can cause forever load

Add preferred client/jumper to config

Ability to set preferred client on global level, and additionally within each feed.

depends on #5

custom CSR component import

• determine hydration strategy (binding, context keys, etc)
• add interface

env

configurability and data during build

• relay url, for cases where page is hosted somewhere other than https canonical or may be dynamic but point at the same relay
• owner pubkey (speeds up load time, otherwise NIP-11 needs to be fetched before loading site config, but optional)

Improve editor UX

• Use dummy data in editor to avoid overly complex editor UX and implementation.
• limit block height
• remove anchors from sort or preventDefault to avoid page-jump
• add anchors to blocks
• add floating block browser to more easily sort/jump to blocks

If website is not set in operator profile, do not show "undefined"

There are several other values, particularly in operator-profile that are also not handled correctly.

fix build failure on runners

works locally, heap overflow on runners.

Notes

• Started after options were added. Potentially because options are dynamically imported JS files, try convering options to Typescript and explicitly include in build.
• Try a local runner?
• No new dependencies were added before the failures started.

shrugs