Merge branch 'origin/main' into 'next-release/main'

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>

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';

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>

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';

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';