hanna/fabrica

feat(web): arbitrary profile links; fix markdown-preview header seam

4292e09 · hanna committed on 2026-07-25

Replace the fixed website/GitHub/Mastodon profile fields with up to five
free-form links (migration 0003 adds a newline-separated `links` column;
the old columns are left unused). Brand icons are inferred from each link's
host (GitHub, Mastodon, else a globe), and the settings page offers five URL
slots. Also fix the markdown blob preview so it continues the blob-header
box instead of rendering as a detached card with a seam.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k

assets/base.css +16 −0

crates/model/src/entity.rs +3 −6

crates/store/src/tests.rs +6 −4

crates/store/src/users.rs +34 −18

crates/web/src/pages.rs +33 −19

crates/web/src/repo.rs +35 −35

migrations/postgres/0003_user_links.sql +4 −0

migrations/sqlite/0003_user_links.sql +5 −0

 .card form button[type="submit"] {
   margin-top: 1.1rem;
+}
+.field-hint {
+  margin: 0.25rem 0 0.5rem;
+  font-size: 0.85em;
+}
+.link-slot {
+  margin-bottom: 0.5rem;
+}
 /* Centered auth card (sign in, invite activation). */
 .auth-wrap {
   color: var(--fb-accent);
+}
+/* Rendered markdown preview continues the blob-header box (no seam). */
+.blob-preview {
+  padding: 1.25rem 1.5rem;
+  background: var(--fb-bg-raised);
+  border: 1px solid var(--fb-border);
+  border-top: none;
+  border-radius: 0 0 var(--fb-radius) var(--fb-radius);
+}
 table.blob {
   width: 100%;
   border-collapse: collapse;

     pub pronouns: Option<String>,
     /// Optional free-text bio shown on the profile.
     pub bio: Option<String>,
-    /// Optional personal website URL.
-    pub website: Option<String>,
     /// Optional location string.
     pub location: Option<String>,
-    /// Optional `GitHub` handle (username only, no `@`).
+    /// Up to five arbitrary profile links (their brand icons are inferred from
-    pub social_github: Option<String>,
+    /// the URL host).
-    /// Optional Mastodon handle (e.g. `@user@instance`).
+    pub links: Vec<String>,
-    pub social_mastodon: Option<String>,
     /// Content type of the uploaded avatar, or `None` to use a generated
     /// identicon. The bytes live on disk, not in this row.
     pub avatar_mime: Option<String>,

                     display_name: Some("Professor".to_string()),
                     pronouns: Some("they/them".to_string()),
                     bio: Some("Hello there.".to_string()),
-                    website: Some("https://example.com".to_string()),
                     location: Some("Everywhere".to_string()),
-                    social_github: Some("prof".to_string()),
+                    links: vec![
-                    social_mastodon: Some("@prof@example.social".to_string()),
+                        "https://example.com".to_string(),
+                        "https://github.com/prof".to_string(),
+                    ],
                 },
+            )
             .await
         let got = fx.store.user_by_id(&user.id).await.unwrap().unwrap();
         assert_eq!(got.pronouns.as_deref(), Some("they/them"));
         assert_eq!(got.bio.as_deref(), Some("Hello there."));
-        assert_eq!(got.social_mastodon.as_deref(), Some("@prof@example.social"));
+        assert_eq!(got.links.len(), 2, "two links stored");
+        assert_eq!(got.links[1], "https://github.com/prof");
         assert!(got.avatar_mime.is_none(), "no avatar yet");
         // Setting then clearing the avatar content type round-trips.

 /// The columns of `users` in a fixed order, shared by every `SELECT` so the
 /// row-mapping in [`Store::map_user`] can rely on names.
 pub(crate) const USER_COLUMNS: &str = "id, username, email, display_name, pronouns, bio, \
-     website, location, social_github, social_mastodon, avatar_mime, password_hash, \
+     location, links, avatar_mime, password_hash, \
      must_change_password, is_admin, disabled_at, created_at, updated_at";
 /// The editable profile fields, set together by the settings page. Each `None`
     pub pronouns: Option<String>,
     /// Free-text bio.
     pub bio: Option<String>,
-    /// Website URL.
-    pub website: Option<String>,
     /// Location.
     pub location: Option<String>,
-    /// `GitHub` handle.
+    /// Up to five arbitrary profile links.
-    pub social_github: Option<String>,
+    pub links: Vec<String>,
-    /// Mastodon handle.
+}
-    pub social_mastodon: Option<String>,
+/// Encode profile links for storage: trimmed, non-empty, capped at five, joined
+/// by newlines, or `None` when the list is empty.
+fn encode_links(links: &[String]) -> Option<String> {
+    let joined = links
+        .iter()
+        .map(|s| s.trim())
+        .filter(|s| !s.is_empty())
+        .take(5)
+        .collect::<Vec<_>>()
+        .join("\n");
+    (!joined.is_empty()).then_some(joined)
+}
+/// Decode the stored newline-separated links column into a bounded list.
+fn decode_links(raw: Option<&str>) -> Vec<String> {
+    raw.map(|s| {
+        s.lines()
+            .map(str::trim)
+            .filter(|l| !l.is_empty())
+            .take(5)
+            .map(str::to_string)
+            .collect()
+    })
+    .unwrap_or_default()
+}
 /// Fields needed to create a user. The server fills in the id, timestamps, and
             display_name: new.display_name,
             pronouns: None,
             bio: None,
-            website: None,
             location: None,
-            social_github: None,
+            links: Vec::new(),
-            social_mastodon: None,
             avatar_mime: None,
             password_hash: new.password_hash,
             must_change_password: new.must_change_password,
         user_id: &str,
         profile: ProfileUpdate,
     ) -> Result<bool, StoreError> {
-        let sql = "UPDATE users SET display_name = $1, pronouns = $2, bio = $3, website = $4, \
+        let sql = "UPDATE users SET display_name = $1, pronouns = $2, bio = $3, \
-             location = $5, social_github = $6, social_mastodon = $7, updated_at = $8 WHERE id = $9";
+             location = $4, links = $5, updated_at = $6 WHERE id = $7";
         let updated = sqlx::query(sql)
             .bind(profile.display_name)
             .bind(profile.pronouns)
             .bind(profile.bio)
-            .bind(profile.website)
             .bind(profile.location)
-            .bind(profile.social_github)
+            .bind(encode_links(&profile.links))
-            .bind(profile.social_mastodon)
             .bind(now_ms())
             .bind(user_id)
             .execute(&self.pool)
             display_name: row.try_get("display_name")?,
             pronouns: row.try_get("pronouns")?,
             bio: row.try_get("bio")?,
-            website: row.try_get("website")?,
             location: row.try_get("location")?,
-            social_github: row.try_get("social_github")?,
+            links: decode_links(row.try_get::<Option<String>, _>("links")?.as_deref()),
-            social_mastodon: row.try_get("social_mastodon")?,
             avatar_mime: row.try_get("avatar_mime")?,
             password_hash: row.try_get("password_hash")?,
             must_change_password: self.get_bool(row, "must_change_password")?,

     /// Free-text bio.
     #[serde(default)]
     bio: String,
-    /// Website URL.
-    #[serde(default)]
-    website: String,
     /// Location.
     #[serde(default)]
     location: String,
-    /// `GitHub` handle.
+    /// Up to five arbitrary profile links (`serde_urlencoded` has no sequence
+    /// support, so each slot is its own field).
+    #[serde(default)]
+    link1: String,
+    #[serde(default)]
+    link2: String,
     #[serde(default)]
-    social_github: String,
+    link3: String,
-    /// Mastodon handle.
     #[serde(default)]
-    social_mastodon: String,
+    link4: String,
+    #[serde(default)]
+    link5: String,
     /// CSRF token (`_csrf`).
     #[serde(rename = "_csrf")]
     csrf: String,
+}
+/// The number of profile-link slots offered on the settings page.
+const LINK_SLOTS: usize = 5;
 /// `POST /settings` — persist the viewer's profile fields.
 pub async fn settings_submit(
     State(state): State<AppState>,
     if verify_csrf(&jar, &headers, Some(&form.csrf)).is_err() {
         return AppError::Forbidden.into_response();
+    }
+    let links: Vec<String> = [
+        &form.link1,
+        &form.link2,
+        &form.link3,
+        &form.link4,
+        &form.link5,
+    ]
+    .iter()
+    .map(|s| s.trim().to_string())
+    .filter(|s| !s.is_empty())
+    .take(LINK_SLOTS)
+    .collect();
     let update = store::ProfileUpdate {
         display_name: norm(&form.display_name),
         pronouns: norm(&form.pronouns),
         bio: norm(&form.bio),
-        website: norm(&form.website),
         location: norm(&form.location),
-        social_github: norm(&form.social_github).map(|s| s.trim_start_matches('@').to_string()),
+        links,
-        social_mastodon: norm(&form.social_mastodon),
     };
     match state.store.update_profile(&user.id, update).await {
         Ok(_) => Redirect::to("/settings").into_response(),
                     textarea id="bio" name="bio" rows="3" { (val(&user.bio)) }
                     label for="location" { "Location" }
                     input type="text" id="location" name="location" value=(val(&user.location));
-                    label for="website" { "Website" }
+                    label for="link1" { "Links" }
-                    input type="text" id="website" name="website"
+                    p class="muted field-hint" { "Up to five links (website, GitHub, Mastodon, …); icons are chosen from the address." }
-                          value=(val(&user.website)) placeholder="https://example.com";
+                    @for i in 0..LINK_SLOTS {
-                    label for="social_github" { "GitHub" }
+                        input type="url" id=(format!("link{}", i + 1)) name=(format!("link{}", i + 1))
-                    input type="text" id="social_github" name="social_github"
+                              class="link-slot" value=(user.links.get(i).map_or("", String::as_str))
-                          value=(val(&user.social_github)) placeholder="username";
+                              placeholder="https://example.com";
-                    label for="social_mastodon" { "Mastodon" }
+                    }
-                    input type="text" id="social_mastodon" name="social_mastodon"
-                          value=(val(&user.social_mastodon)) placeholder="@user@instance";
                     button class="btn btn-primary" type="submit" { "Save profile" }
+                }
+            }

                 p { a class="btn" href=(raw_url) { "Download" } }
+            }
         } @else if show_preview {
-            div class="card markdown" {
+            div class="blob-preview markdown" {
                 (markdown::render(&String::from_utf8_lossy(&blob.content)))
+            }
         } @else {
     field.map(|s| s.trim()).filter(|s| !s.is_empty())
+}
-/// The profile's location and social links, each an icon-prefixed row.
+/// The profile's location and its arbitrary links, each an icon-prefixed row.
+/// The brand icon is inferred from the link's host.
 fn profile_links(owner: &User) -> Vec<Markup> {
     let mut out = Vec::new();
     if let Some(location) = non_empty(owner.location.as_ref()) {
         out.push(html! { li { (icon(Icon::MapPin)) span { (location) } } });
+    }
-    if let Some(site) = non_empty(owner.website.as_ref()) {
+    for link in &owner.links {
-        let href = if site.starts_with("http://") || site.starts_with("https://") {
+        let href = normalize_url(link);
-            site.to_string()
+        let shown = href
-        } else {
-            format!("https://{site}")
-        };
-        let shown = site
             .trim_start_matches("https://")
-            .trim_start_matches("http://");
+            .trim_start_matches("http://")
-        out.push(html! {
+            .trim_end_matches('/');
-            li { a href=(href) rel="nofollow noopener" { (icon(Icon::Globe)) span { (shown) } } }
-        });
-    }
-    if let Some(handle) = non_empty(owner.social_github.as_ref()) {
-        let handle = handle.trim_start_matches('@');
         out.push(html! {
             li {
-                a href=(format!("https://github.com/{handle}")) rel="nofollow noopener" {
+                a href=(href) rel="nofollow noopener me" {
-                    (icon(Icon::Github)) span { (handle) }
+                    (icon(link_icon(&href))) span { (shown) }
+                }
+            }
         });
+    }
-    if let Some(handle) = non_empty(owner.social_mastodon.as_ref()) {
-        out.push(html! { li { (mastodon_link(handle)) } });
-    }
     out
+}
-/// Render a Mastodon `@user@instance` handle as a link when well-formed, else as
+/// Prefix a bare URL with `https://` when it has no scheme.
-/// plain text.
+fn normalize_url(url: &str) -> String {
-fn mastodon_link(handle: &str) -> Markup {
+    let url = url.trim();
-    let trimmed = handle.trim_start_matches('@');
+    if url.starts_with("http://") || url.starts_with("https://") {
-    if let Some((user, instance)) = trimmed.split_once('@')
+        url.to_string()
-        && !user.is_empty()
+    } else {
-        && !instance.is_empty()
+        format!("https://{url}")
-    {
+    }
-        return html! {
+}
-            a href=(format!("https://{instance}/@{user}")) rel="nofollow noopener me" {
-                (icon(Icon::Mastodon)) span { "@" (user) "@" (instance) }
+/// Choose a brand icon for a link from its host.
-            }
+fn link_icon(url: &str) -> Icon {
-        };
+    let host = url
+        .trim_start_matches("https://")
+        .trim_start_matches("http://")
+        .split('/')
+        .next()
+        .unwrap_or("")
+        .to_ascii_lowercase();
+    if host == "github.com" || host.ends_with(".github.com") {
+        Icon::Github
+    } else if host.contains("mastodon") {
+        Icon::Mastodon
+    } else {
+        Icon::Globe
+    }
-    html! { span { (icon(Icon::Mastodon)) span { (handle) } } }
+}
 /// The repo sub-header: slug, description, and a tab strip sharing its line with

+-- Replace the fixed website/social handle fields with a free list of up to five
+-- arbitrary profile links, stored newline-separated. The older social_* and
+-- website columns are left in place but are no longer read or written.
+ALTER TABLE users ADD COLUMN links TEXT;