Add user addresses to profile page, hide details by default

assets/css/layout.css

@@ -113,6 +113,11 @@ main.profile-page img.avatar {
   width: 8rem;
 }
 
+main.profile-page details summary {
+  cursor: pointer;
+  margin-bottom: 1.6rem;
+}
+
 main .article-list .item h3 {
   margin-bottom: 0.5rem;
 }

html.ts

@@ -107,6 +107,19 @@ export function articleListHtml(articles: Article[]): string {
   `;
 }
 
+function userAddressHtml(profile: Profile) {
+  let html = "";
+
+  if (profile.nip05) {
+    html += `<dt>Nostr address</dt><dd>${profile.nip05}</dd>\n`;
+  }
+  if (profile.lud16) {
+    html += `<dt>Lightning address</dt><dd>${profile.lud16}</dd>\n`;
+  }
+
+  return html;
+}
+
 export function profilePageHtml(profile: Profile, articles: Article[]): string {
   const title = `${profile.name} on Nostr`;
 
@@ -121,12 +134,14 @@ export function profilePageHtml(profile: Profile, articles: Article[]): string {
           </p>
         </div>
       </header>
-      <section>
+      <details>
+        <summary>Details</summary>
         <dl>
           <dt>Public key</dt>
           <dd>${profile.npub}</dd>
+          ${userAddressHtml(profile)}
         </dl>
-      </section>
+      </details>
       <section>
         ${articleListHtml(articles)}
       </section>