Merge pull request #3766 from bgruening/hof-main-text

this renders HoF text on top as markdown

Author: dannon

astro/src/pages/hall-of-fame/[slug].astro

@@ -1,5 +1,6 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
+import { marked } from 'marked';
 import {
   communitySlug,
   contributorHasHallOfFame,
@@ -42,6 +43,7 @@ const profileDescription =
   (community as any)?.record?.bio ||
   (community as any)?.record?.description ||
   (community as any)?.record?.funding_statement;
+const profileDescriptionHtml = profileDescription ? marked.parse(profileDescription) : '';
 const githubHandle =
   community?.record && (community as any).type === 'contributor'
     ? (() => {
@@ -145,7 +147,11 @@ function formatDate(date: Date | string | undefined): string {
         </div>
         {
           profileDescription ? (
-            <p class="text-white/80 text-lg max-w-3xl whitespace-pre-line">{profileDescription}</p>
+            <div
+              class="profile-description text-lg max-w-3xl"
+              data-profile-description
+              set:html={profileDescriptionHtml}
+            />
           ) : (
             <p class="text-white/80 text-lg max-w-2xl">
               {matchedType
@@ -389,6 +395,37 @@ function formatDate(date: Date | string | undefined): string {
     z-index: 1;
   }
 
+  .profile-description {
+    color: rgb(255 255 255 / 0.8);
+  }
+
+  .profile-description :global(p) {
+    margin: 0.5rem 0;
+  }
+
+  .profile-description :global(p:first-child) {
+    margin-top: 0;
+  }
+
+  .profile-description :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .profile-description :global(ul),
+  .profile-description :global(ol) {
+    margin: 0.5rem 0 0.5rem 1.2rem;
+  }
+
+  .profile-description :global(a) {
+    color: var(--color-galaxy-gold);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .profile-description :global(a:hover) {
+    color: #fff;
+  }
+
   .profile-avatar {
     width: 110px;
     height: 110px;

astro/tests/hall-of-fame.spec.ts

@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/test';
 
 const supporterSlug = 'eurosciencegateway'; // credited via contributions.funding
+const markdownProfileSlug = 'nfdi4bioimage';
 
 test.describe('Hall of Fame', () => {
   test('/hall-of-fame/ lists contributors', async ({ page }) => {
@@ -37,4 +38,19 @@ test.describe('Hall of Fame', () => {
     const backLink = page.locator('a[href="/hall-of-fame/"]').first();
     await expect(backLink).toBeVisible();
   });
+
+  test(`/hall-of-fame/${markdownProfileSlug} renders markdown profile text while keeping contribution teasers plain`, async ({
+    page,
+  }) => {
+    const response = await page.goto(`/hall-of-fame/${markdownProfileSlug}/`);
+    expect(response?.status()).toBe(200);
+
+    const profileDescription = page.locator('[data-profile-description]').first();
+    await expect(profileDescription).toBeVisible();
+    await expect(profileDescription.locator('a[href="https://nfdi4bioimage.de/"]').first()).toBeVisible();
+    await expect(profileDescription).not.toContainText('[NFDI4BIOIMAGE](');
+
+    // News/Event teases are treated as plain text and should not render markdown links.
+    await expect(page.locator('[data-item] p.line-clamp-2 a')).toHaveCount(0);
+  });
 });