Design initial notecrumbs HTML note renderer

[danieldaquino]

Context

We have a system to render a Nostr note preview on a webpage (Similar to njump), as a gateway to let people share and view Nostr notes even if they do not have Damus.

We have the backend code mostly ready, but we need to design the frontend in a way consistent with the Damus brand.

Please read this thread for more context: https://groups.google.com/a/damus.io/g/patches/c/uiLkFz56N2k

Acceptance criteria

• [ ] Create a design for the note preview page
• [ ] Implement the design in code
  • As of writing, the note renderer backend generates HTML directly to the client. The simplest way to accomplish the design portion might be to simply create a CSS file for the HTML output from the backend.
  • [ ] Make this design dark-mode friendly (Get color scheme preference from the user's settings via CSS's prefers-color-scheme
  • The implementation can be split into a separate ticket if necessary

[jb55]

Also some more context why we can't just use njump directly:

damus.io/nevent.. links are deeplinks. They will open up damus directly in some contexts (imessage, signal, telegram, etc). Some apps actively prevent deeplinks from working to discourage people from leaving their app (Twitter, etc). The html landing page serves as a fallback that allows us to put an "open in damus" popup at the top in these situations.

This "open in damus" popup will be a damus:nostr: URI. If we want to support a generic handler we could have an alternative "Open in another nostr client" as an alternative action, which is handled by a plain nostr: URI.

Let me know if this makes sense or if ya'll think there is a better way to do it.

[alltheseas]

@robagreda

[danieldaquino]

@jb55, following up on our standup, I will come up with a reasonable initial CSS for this today. Please stay tuned!

[danieldaquino]

@jb55, I made a small simple CSS file for the HTML given.

There is not much HTML to work with right now — we can make this design richer if we also have the profile image, display name, posted date, etc rendered on the HTML

For now I tried to work with your HTML with minimal modifications (I only added a wrapper container div to centralize the note on the screen) as a starting point.

Here is the code: https://codepen.io/danieldaquino/pen/LYayqoM

Here are the screenshots:

	Phone	Tablet	Desktop
Light
Dark

Please let me know if there is something else I can help with here!

[danieldaquino]

@jb55, one other note (also from standup), it seems to be possible to put deep links into the app smart banner: https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners

I believe it would look similar to this:

<meta name="apple-itunes-app" content="app-id=1628663131, app-argument=damus:nostr:note1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s"/>

(Although it did not work on the Codepen, presumably because of the domain it is hosted on)

[jb55]

On Fri, Jan 19, 2024 at 03:12:19PM -0800, Daniel D’Aquino wrote:

@jb55, one other note (also from standup), it seems to be possible to put deep links into the app smart banner: https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners

I believe it would look similar to this:

<meta name="apple-itunes-app" content="app-id=1628663131, app-argument=damus:nostr:note1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s"/>

perfect. will add this.

[jb55]

On Fri, Jan 19, 2024 at 02:57:34PM -0800, Daniel D’Aquino wrote:

@jb55, I made a small simple CSS file for the HTML given.

Thanks! I'll integrate this initial version and throw this up on the damus io links soon.

[danieldaquino]

@jb55, did a more refined design with modified HTML containing more note elements, and more layout around the note.

Here is how it looks like on various screens and light/dark mode:

I posted the code here: https://codepen.io/danieldaquino/pen/LYayqoM

Please let me know if you need more design refinements, or if this is enough for the first version.

Thank you!

[danieldaquino]

@jb55, quick note on my previous comment: I hid the "Open in Damus" button for mobile screens because I am assuming the Apple AppStore banner will show up with a button pointing to the same link

[jb55]

On Mon, Jan 22, 2024 at 01:12:27PM -0800, Daniel D’Aquino wrote:

@jb55, quick note on my previous comment: I hid the "Open in Damus" button for mobile screens because I am assuming the Apple AppStore banner will show up with a button pointing to the same link

ah yeah I noticed this and removed the button.

Your changes are live btw! Looks great. I still need to tweak it a bit so that it actually loads profile pictures, but works pretty well so far.

[alltheseas]

I receive a partially loaded preview

What is the number in the top right?

[jb55]

its the unix timestamp, I haven't formatted it to the "2 days ago" string yet.