Initial version

src/components/profiles/CardProfile.ts

@@ -0,0 +1,121 @@
+import { html, css, LitElement } from 'lit';
+import { property, customElement, state } from 'lit/decorators.js';
+import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
+import { getProfile } from '@utils/profileUtils';
+
+@customElement('arx-nostr-card-profile')
+export class CardProfile extends LitElement {
+  @property() profile!: NDKUserProfile;
+  @property() npub = '';
+
+  @state()
+  private displayName = '';
+
+  @state()
+  private profileUrl = '';
+
+  @state()
+  private website = '';
+
+  @state()
+  private about = '';
+
+  @state()
+  private firstLineOfAbout = '';
+
+  static override styles = [
+    css`
+      .card {
+        padding: 1rem;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        max-width: 300px;
+      }
+
+      a {
+        color: var(--primary);
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      h3 {
+        margin: 0;
+        font-size: 1.2rem;
+      }
+
+      p {
+        margin: 0.25rem 0;
+        color: var(--secondary);
+        font-size: 0.9rem;
+      }
+
+      .bio {
+        white-space: pre-line;
+        font-size: 0.9rem;
+        color: var(--primary);
+        margin: 0.5rem 0;
+        padding-top: 0.5rem;
+        border-top: 1px solid var(--border);
+      }
+
+      .website-link {
+        display: block;
+        margin-top: 0.5rem;
+        font-size: 0.9rem;
+        color: var(--accent);
+      }
+
+      .website-link:hover {
+        text-decoration: underline;
+      }
+    `,
+  ];
+
+  override firstUpdated() {
+    const { displayName, profileUrl } = getProfile(this);
+    this.displayName = displayName;
+    this.profileUrl = profileUrl;
+    this.website = this.profile.website || '';
+    const lines = (this.profile.about || '').split('\n');
+    let firstLine = lines[0].trim();
+
+    let remainingContent = lines
+      .slice(1)
+      .join('\n')
+      .trim()
+      .split(/-+\n/, 2)
+      .filter(section => section.trim() !== '')
+      .join('\n')
+      .trim();
+
+    if (firstLine.length > 20) {
+      remainingContent = `${firstLine}\n${remainingContent}`;
+      firstLine = '';
+    }
+
+    this.about = remainingContent;
+    this.firstLineOfAbout = firstLine;
+  }
+
+  override render() {
+    return html`
+      <div class="card">
+        <router-link to=${this.profileUrl}>
+          <arx-nostr-avatar .profile=${this.profile} size="large"></arx-nostr-avatar>
+          <div>
+            <h3>${this.displayName}</h3>
+            <p v-if=${this.firstLineOfAbout}>${this.firstLineOfAbout}</p>
+          </div>
+        </router-link>
+
+        <div v-if=${this.about} class="bio">${this.about}</div>
+
+        <a v-if=${this.website} href=${this.website} target="_blank" rel="noreferrer noopener" class="website-link">
+          ${this.website}
+        </a>
+      </div>
+    `;
+  }
+}

src/components/profiles/LargeProfile.ts

@@ -0,0 +1,61 @@
+import { html, css, LitElement } from 'lit';
+import { property, customElement, state } from 'lit/decorators.js';
+import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
+import { getProfile } from '@utils/profileUtils';
+import firstLine from '@utils/firstLine';
+
+@customElement('arx-nostr-large-profile')
+export class LargeProfile extends LitElement {
+  @property() profile!: NDKUserProfile;
+  @property() npub = '';
+
+  @state()
+  private displayName = '';
+
+  @state()
+  private profileUrl = '';
+
+  @state()
+  private about = '';
+
+  static override styles = [
+    css`
+      a {
+        color: var(--primary);
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .bio {
+        white-space: pre-line;
+        font-size: 0.9rem;
+        color: var(--primary);
+        margin: 0.5rem 0;
+      }
+    `,
+  ];
+
+  override firstUpdated() {
+    const { displayName, profileUrl } = getProfile({
+      profile: this.profile,
+      npub: this.npub,
+    });
+    this.displayName = displayName;
+    this.profileUrl = profileUrl;
+    this.about = firstLine(this.profile.about);
+  }
+
+  override render() {
+    return html`
+      <router-link to=${this.profileUrl}>
+        <arx-nostr-avatar .profile=${this.profile} size="large"></arx-nostr-avatar>
+        <div>
+          <h3>${this.displayName}</h3>
+          <div class="bio">${this.about}</div>
+        </div>
+      </router-link>
+    `;
+  }
+}

src/components/profiles/MediumProfile.ts

@@ -0,0 +1,64 @@
+import { html, css, LitElement } from "lit";
+import { property, customElement, state } from "lit/decorators.js";
+import type { NDKUserProfile } from "@nostr-dev-kit/ndk";
+import { getProfile } from "@utils/profileUtils";
+import firstLine from "@utils/firstLine";
+
+import "@components/EveLink";
+
+@customElement("arx-nostr-medium-profile")
+export class MediumProfile extends LitElement {
+  @property() profile!: NDKUserProfile;
+  @property() npub = "";
+
+  @state()
+  private displayName = "";
+
+  @state()
+  private profileUrl = "";
+
+  @state()
+  private truncatedAbout = "";
+
+  static override styles = [
+    css`
+      arx-eve-link::part(link) {
+        color: var(--primary);
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+    `,
+  ];
+
+  override firstUpdated() {
+    const { displayName, profileUrl } = getProfile({
+      profile: this.profile,
+      npub: this.npub,
+    });
+    this.displayName = displayName;
+    this.profileUrl = profileUrl;
+    this.truncatedAbout = this.getTruncatedAbout();
+  }
+
+  getTruncatedAbout() {
+    const about = firstLine(this.profile.about);
+    return about?.length > 80 ? `${about.substring(0, 80)}...` : about;
+  }
+
+  override render() {
+    return html`
+      <arx-eve-link href=${this.profileUrl}>
+        <arx-nostr-avatar
+          .profile=${this.profile}
+          size="medium"
+        ></arx-nostr-avatar>
+        <div>
+          <div>${this.displayName}</div>
+          <div class="bio">${this.truncatedAbout}</div>
+        </div>
+      </arx-eve-link>
+    `;
+  }
+}

src/components/profiles/ShortProfile.ts

@@ -0,0 +1,51 @@
+import { html, css, LitElement } from "lit";
+import { property, customElement, state } from "lit/decorators.js";
+import type { NDKUserProfile } from "@nostr-dev-kit/ndk";
+import { getProfile } from "@utils/profileUtils";
+
+import "@components/EveLink";
+
+@customElement("arx-nostr-short-profile")
+export class ShortProfile extends LitElement {
+  @property() profile!: NDKUserProfile;
+  @property() npub = "";
+
+  @state()
+  private displayName = "";
+
+  @state()
+  private profileUrl = "";
+
+  static override styles = [
+    css`
+      arx-eve-link::part(link) {
+        color: var(--primary);
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+    `,
+  ];
+
+  protected override firstUpdated(): void {
+    const { displayName, profileUrl } = getProfile({
+      profile: this.profile,
+      npub: this.npub,
+    });
+    this.displayName = displayName;
+    this.profileUrl = profileUrl;
+  }
+
+  override render() {
+    return html`
+      <arx-eve-link href=${this.profileUrl}>
+        <arx-nostr-avatar
+          .profile=${this.profile}
+          size="short"
+        ></arx-nostr-avatar>
+        <span>${this.displayName}</span>
+      </arx-eve-link>
+    `;
+  }
+}