From 39acb2a4be8f133b8ff011458dc84475795987ce Mon Sep 17 00:00:00 2001
From: qwerty287 <80460567+qwerty287@users.noreply.github.com>
Date: Thu, 29 Jan 2026 14:27:55 +0100
Subject: [PATCH] Render MD in pipeline titles (#5999)

Co-authored-by: 6543 <6543@obermui.de>
---
 web/src/components/atomic/RenderMarkdown.vue          |  3 ++-
 web/src/components/pipeline-feed/PipelineFeedItem.vue |  8 +++++++-
 web/src/components/repo/RepoItem.vue                  | 10 ++++++++--
 web/src/components/repo/pipeline/PipelineItem.vue     |  9 +++++----
 web/src/views/repo/pipeline/PipelineWrapper.vue       | 10 +++++++---
 5 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/web/src/components/atomic/RenderMarkdown.vue b/web/src/components/atomic/RenderMarkdown.vue
index df3a60be6..8b7524aeb 100644
--- a/web/src/components/atomic/RenderMarkdown.vue
+++ b/web/src/components/atomic/RenderMarkdown.vue
@@ -9,10 +9,11 @@ import { computed } from 'vue';
 
 const props = defineProps<{
   content: string;
+  inline?: boolean;
 }>();
 
 const contentHTML = computed<string>(() => {
-  const dirtyHTML = marked.parse(props.content);
+  const dirtyHTML = props.inline ? marked.parseInline(props.content) : marked.parse(props.content);
   return DOMPurify.sanitize(dirtyHTML as string, { USE_PROFILES: { html: true } });
 });
 </script>
diff --git a/web/src/components/pipeline-feed/PipelineFeedItem.vue b/web/src/components/pipeline-feed/PipelineFeedItem.vue
index 6d3d79f8d..d761571bc 100644
--- a/web/src/components/pipeline-feed/PipelineFeedItem.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedItem.vue
@@ -12,7 +12,12 @@
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
         {{ repo?.owner }} / {{ repo?.name }}
       </router-link>
-      <span class="overflow-hidden text-ellipsis whitespace-nowrap" :title="message">{{ shortMessage }}</span>
+      <RenderMarkdown
+        class="overflow-hidden text-ellipsis whitespace-nowrap"
+        :title="message"
+        :content="shortMessage"
+        inline
+      />
       <div class="mt-2 flex flex-col">
         <div class="flex items-center space-x-2" :title="created">
           <Icon name="since" />
@@ -31,6 +36,7 @@
 import { computed, toRef } from 'vue';
 
 import Icon from '~/components/atomic/Icon.vue';
+import RenderMarkdown from '~/components/atomic/RenderMarkdown.vue';
 import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
 import usePipeline from '~/compositions/usePipeline';
 import type { PipelineFeed } from '~/lib/api/types';
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index 7ee56a6e7..129a58a48 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -25,7 +25,12 @@
         <template v-if="lastPipeline">
           <div class="flex min-w-0 flex-1 items-center gap-x-1">
             <PipelineStatusIcon v-if="lastPipeline" :status="lastPipeline.status" />
-            <span class="overflow-hidden pl-1 text-ellipsis whitespace-nowrap">{{ shortMessage }}</span>
+            <RenderMarkdown
+              class="overflow-hidden pl-1 text-ellipsis whitespace-nowrap"
+              :title="message"
+              :content="shortMessage"
+              inline
+            />
           </div>
 
           <div class="ml-auto flex shrink-0 items-center gap-x-1">
@@ -46,6 +51,7 @@
 import { computed } from 'vue';
 
 import Icon from '~/components/atomic/Icon.vue';
+import RenderMarkdown from '~/components/atomic/RenderMarkdown.vue';
 import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
 import usePipeline from '~/compositions/usePipeline';
 import type { Repo } from '~/lib/api/types';
@@ -56,5 +62,5 @@ const props = defineProps<{
 }>();
 
 const lastPipeline = computed(() => props.repo.last_pipeline);
-const { since, shortMessage } = usePipeline(lastPipeline);
+const { since, shortMessage, message } = usePipeline(lastPipeline);
 </script>
diff --git a/web/src/components/repo/pipeline/PipelineItem.vue b/web/src/components/repo/pipeline/PipelineItem.vue
index 4ffc3e7d9..a9faf360a 100644
--- a/web/src/components/repo/pipeline/PipelineItem.vue
+++ b/web/src/components/repo/pipeline/PipelineItem.vue
@@ -28,12 +28,12 @@
         <span class="md:display-unset text-wp-text-alt-100 hidden">#{{ pipeline.number }}</span>
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
         <span class="md:display-unset text-wp-text-alt-100 mx-2 hidden">-</span>
-        <span
+        <RenderMarkdown
           class="text-wp-text-100 overflow-hidden text-ellipsis whitespace-nowrap underline md:no-underline"
           :title="message"
-        >
-          {{ shortMessage }}
-        </span>
+          :content="shortMessage"
+          inline
+        />
       </div>
 
       <div
@@ -83,6 +83,7 @@ import { useI18n } from 'vue-i18n';
 
 import Icon from '~/components/atomic/Icon.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
+import RenderMarkdown from '~/components/atomic/RenderMarkdown.vue';
 import { pipelineStatusColors } from '~/components/repo/pipeline/pipeline-status';
 import PipelineRunningIcon from '~/components/repo/pipeline/PipelineRunningIcon.vue';
 import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index 9ef41a536..db76be5ea 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -24,9 +24,12 @@
           <span class="shrink-0 text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
           <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
           <span class="hidden md:inline-block">-</span>
-          <span class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap" :title="message">{{
-            shortMessage
-          }}</span>
+          <RenderMarkdown
+            class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
+            :title="message"
+            :content="shortMessage"
+            inline
+          />
         </div>
 
         <template v-if="repoPermissions!.push && pipeline.status !== 'blocked'">
@@ -114,6 +117,7 @@ import { useRoute, useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
+import RenderMarkdown from '~/components/atomic/RenderMarkdown.vue';
 import DeployPipelinePopup from '~/components/layout/popups/DeployPipelinePopup.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';