From e5214ccd546e495eb97a4d86ab865f66099c4ff4 Mon Sep 17 00:00:00 2001
From: Kabilar Gunalan <kabi@mit.edu>
Date: Thu, 28 May 2026 22:39:24 -0500
Subject: [PATCH 1/2] Make `Related resource` titles clickable links on
 dandiset landing page

---
 web/src/components/DLP/MetadataCard.vue | 13 ++++++++----
 web/src/components/DLP/OverviewTab.vue  | 28 ++++++++++++++-----------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/web/src/components/DLP/MetadataCard.vue b/web/src/components/DLP/MetadataCard.vue
index 3e6ee96a3..ddc6a8a90 100644
--- a/web/src/components/DLP/MetadataCard.vue
+++ b/web/src/components/DLP/MetadataCard.vue
@@ -35,10 +35,15 @@
                 cols="9"
                 class="text-grey-darken-3"
               >
-                <span v-if="item.name || item.identifier || item.id">
-                  {{ item.name || item.identifier || item.id }}
-                  <br>
-                </span>
+                <slot
+                  name="itemTitle"
+                  :item="item"
+                >
+                  <span v-if="item.name || item.identifier || item.id">
+                    {{ item.name || item.identifier || item.id }}
+                    <br>
+                  </span>
+                </slot>
                 <slot
                   name="content"
                   :item="item"
diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
index 3f48f1314..cfb627bc6 100644
--- a/web/src/components/DLP/OverviewTab.vue
+++ b/web/src/components/DLP/OverviewTab.vue
@@ -88,6 +88,22 @@
       name="Related resources"
       icon="mdi-book"
     >
+      <template #itemTitle="slotProps">
+        <span v-if="slotProps.item.name || slotProps.item.identifier || slotProps.item.id">
+          <a
+            v-if="slotProps.item.url"
+            :href="slotProps.item.url"
+            target="_blank"
+            rel="noopener"
+          >
+            {{ slotProps.item.name || slotProps.item.identifier || slotProps.item.id }}
+          </a>
+          <template v-else>
+            {{ slotProps.item.name || slotProps.item.identifier || slotProps.item.id }}
+          </template>
+          <br>
+        </span>
+      </template>
       <template #content="slotProps">
         <span
           v-if="slotProps.item.identifier"
@@ -117,18 +133,6 @@
           <strong>Relation: </strong>{{ slotProps.item.relation }}
         </span>
       </template>
-      <template #links="slotProps">
-        <v-btn
-          v-if="slotProps.item.url"
-          icon
-          variant="text"
-          :href="slotProps.item.url"
-          target="_blank"
-          rel="noopener"
-        >
-          <v-icon>mdi-link</v-icon>
-        </v-btn>
-      </template>
     </MetadataCard>
 
     <v-card

From eb2c5054a1ea5513c39269b515f79cd710e80b0e Mon Sep 17 00:00:00 2001
From: Ben Dichter <ben.dichter@gmail.com>
Date: Mon, 1 Jun 2026 11:33:13 -0400
Subject: [PATCH 2/2] Style related-resource links to match
 docs.dandiarchive.org

Use the link styling from the documentation site (Material for MkDocs):
indigo (#4051b5), no underline, with a smooth transition to a lighter
blue (#0091eb) on hover/focus, instead of the default underlined link.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/src/components/DLP/OverviewTab.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
index cfb627bc6..383d07552 100644
--- a/web/src/components/DLP/OverviewTab.vue
+++ b/web/src/components/DLP/OverviewTab.vue
@@ -92,6 +92,7 @@
         <span v-if="slotProps.item.name || slotProps.item.identifier || slotProps.item.id">
           <a
             v-if="slotProps.item.url"
+            class="related-resource-link"
             :href="slotProps.item.url"
             target="_blank"
             rel="noopener"
@@ -366,3 +367,19 @@ onUnmounted(() => {
 });
 
 </script>
+
+<style scoped>
+/* Match the link styling used in https://docs.dandiarchive.org/ (Material for
+ * MkDocs): colored, no underline, with a smooth transition to a lighter blue on
+ * hover/focus — rather than the default underlined browser link. */
+.related-resource-link {
+  color: #4051b5;
+  text-decoration: none;
+  transition: color 125ms;
+}
+
+.related-resource-link:hover,
+.related-resource-link:focus {
+  color: #0091eb;
+}
+</style>