From efb0a05055d25c322377376ee9617d9558b03224 Mon Sep 17 00:00:00 2001
From: Aly Raffauf <aly@raffauflabs.com>
Date: Wed, 22 Jul 2026 23:13:54 -0400
Subject: [PATCH] better content labels

---
 src/components/actor-app.tsx             |  6 ++++-
 src/components/bluesky-profile.tsx       | 15 +++++++++++-
 src/components/grain-photos.tsx          |  5 +++-
 src/components/profile-section.tsx       | 30 ++++++++++++++++++++++--
 src/components/rocksky-scrobble-list.tsx |  7 ++++--
 src/components/standard-documents.tsx    |  5 +++-
 src/components/tangled-repo-list.tsx     |  5 +++-
 src/styles/globals.css                   | 27 +++++++++++++++++++++
 8 files changed, 91 insertions(+), 9 deletions(-)

diff --git a/src/components/actor-app.tsx b/src/components/actor-app.tsx
index 7ca85f8..9b6988a 100644
--- a/src/components/actor-app.tsx
+++ b/src/components/actor-app.tsx
@@ -106,7 +106,11 @@ export function ActorApp() {
     >
       <MasonryGrid>
         {profile ? (
-          <BlueskyProfile handle={identity.handle} profile={profile} />
+          <BlueskyProfile
+            did={identity.did}
+            handle={identity.handle}
+            profile={profile}
+          />
         ) : (
           <IdentityCard identity={identity} />
         )}
diff --git a/src/components/bluesky-profile.tsx b/src/components/bluesky-profile.tsx
index ba0d2c0..6f9bc1b 100644
--- a/src/components/bluesky-profile.tsx
+++ b/src/components/bluesky-profile.tsx
@@ -3,12 +3,14 @@ import { useState } from "react";
 import type { BlueskyProfile } from "~/lib/providers/bluesky";
 
 type BlueskyProfileProps = {
+  did: string;
   handle: string | null;
   profile: BlueskyProfile;
 };
 
-export function BlueskyProfile({ handle, profile }: BlueskyProfileProps) {
+export function BlueskyProfile({ did, handle, profile }: BlueskyProfileProps) {
   const [avatarUrl, setAvatarUrl] = useState(profile.avatarUrl);
+  const profileIdentifier = handle ?? did;
 
   return (
     <section className="bluesky-profile profile-card border">
@@ -63,6 +65,17 @@ export function BlueskyProfile({ handle, profile }: BlueskyProfileProps) {
           </p>
         )} */}
       </div>
+
+      <footer className="profile-divider mt-4 flex justify-end border-t pt-3">
+        <a
+          className="profile-source-link"
+          href={`https://bsky.app/profile/${profileIdentifier}`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          bsky
+        </a>
+      </footer>
     </section>
   );
 }
diff --git a/src/components/grain-photos.tsx b/src/components/grain-photos.tsx
index 6dd8fb3..815b76b 100644
--- a/src/components/grain-photos.tsx
+++ b/src/components/grain-photos.tsx
@@ -6,7 +6,10 @@ type GrainPhotosProps = {
 
 export function GrainPhotos({ photos }: GrainPhotosProps) {
   return (
-    <ProfileSection title="Photos">
+    <ProfileSection
+      title="Photos"
+      source={{ name: "grain", href: "https://grain.social" }}
+    >
       <div className="grid gap-3 md:grid-cols-3">
         {photos.map((photo) =>
           photo.postUrl ? (
diff --git a/src/components/profile-section.tsx b/src/components/profile-section.tsx
index ac58dbe..0a5b803 100644
--- a/src/components/profile-section.tsx
+++ b/src/components/profile-section.tsx
@@ -2,14 +2,40 @@ import type { ReactNode } from "react";
 
 type ProfileSectionProps = {
   children: ReactNode;
+  source?: {
+    href: string;
+    name: string;
+  };
   title: string;
 };
 
-export function ProfileSection({ title, children }: ProfileSectionProps) {
+export function ProfileSection({
+  title,
+  source,
+  children,
+}: ProfileSectionProps) {
   return (
     <section className="profile-card border">
-      <h2 className="sr-only">{title}</h2>
+      {source ? (
+        <header className="mb-4">
+          <h2 className="profile-section-title">{title}</h2>
+        </header>
+      ) : (
+        <h2 className="sr-only">{title}</h2>
+      )}
       {children}
+      {source && (
+        <footer className="profile-divider mt-4 flex justify-end border-t pt-3">
+          <a
+            className="profile-source-link"
+            href={source.href}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {source.name}
+          </a>
+        </footer>
+      )}
     </section>
   );
 }
diff --git a/src/components/rocksky-scrobble-list.tsx b/src/components/rocksky-scrobble-list.tsx
index d6607d2..20077f8 100644
--- a/src/components/rocksky-scrobble-list.tsx
+++ b/src/components/rocksky-scrobble-list.tsx
@@ -12,7 +12,10 @@ type RockskyScrobbleProps = Pick<
 
 export function RockskyScrobbleList({ scrobbles }: RockskyScrobbleListProps) {
   return (
-    <ProfileSection title="Music">
+    <ProfileSection
+      title="Music"
+      source={{ name: "rocksky", href: "https://rocksky.app" }}
+    >
       <div className="max-w-3xl">
         {scrobbles.map((scrobble) => (
           <RockskyScrobble
@@ -57,7 +60,7 @@ function RockskyScrobble({
       href={spotifyLink}
       target="_blank"
       rel="noreferrer"
-      className="profile-external-link profile-divider grid grid-cols-[3rem_1fr_auto] items-center gap-3 border-b py-2.5"
+      className="profile-external-link profile-divider grid grid-cols-[3rem_1fr_auto] items-center gap-3 border-b py-2.5 last:border-b-0"
     >
       {albumArtUrl ? (
         <img
diff --git a/src/components/standard-documents.tsx b/src/components/standard-documents.tsx
index 1db9e89..c1b6d66 100644
--- a/src/components/standard-documents.tsx
+++ b/src/components/standard-documents.tsx
@@ -6,7 +6,10 @@ type StandardDocumentsProps = {
 
 export function StandardDocuments({ documents }: StandardDocumentsProps) {
   return (
-    <ProfileSection title="Writing">
+    <ProfileSection
+      title="Writing"
+      source={{ name: "standard.site", href: "https://standard.site" }}
+    >
       <div>
         {documents.map((document) => (
           <article
diff --git a/src/components/tangled-repo-list.tsx b/src/components/tangled-repo-list.tsx
index 4c9c648..66a8dec 100644
--- a/src/components/tangled-repo-list.tsx
+++ b/src/components/tangled-repo-list.tsx
@@ -9,7 +9,10 @@ type TangledRepoListProps = {
 
 export function TangledRepoList({ repos }: TangledRepoListProps) {
   return (
-    <ProfileSection title="Code">
+    <ProfileSection
+      title="Code"
+      source={{ name: "tangled", href: "https://tangled.org" }}
+    >
       <div>
         {repos.map((repo) => (
           <article
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b888a2f..3d31767 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -79,6 +79,33 @@ body {
   line-height: 1.05;
 }
 
+.profile-section-title {
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.3;
+}
+
+.profile-source-link {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  opacity: 0.48;
+  text-decoration-color: transparent;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
+}
+
+.profile-source-link:hover,
+.profile-source-link:focus-visible {
+  opacity: 0.82;
+  text-decoration-color: currentColor;
+}
+
+.profile-source-link:focus-visible {
+  outline: 2px solid var(--profile-accent);
+  outline-offset: 3px;
+}
+
 .profile-item-title {
   font-size: 0.9375rem;
   font-weight: 650;
-- 
2.51.2