From 4e93306864dff40a42e01eca72ba633982877c10 Mon Sep 17 00:00:00 2001
From: Robin <robin.kehl@singular-it.de>
Date: Thu, 8 May 2025 12:17:05 +0200
Subject: [PATCH] feat(extension): basic inline code highlighting (#145)

---
 .../extension/components/RelatedIssueItem.vue | 65 +++++++++++++++++++
 .../components/RelatedIssueTitle.vue          | 59 +++++++++++++++++
 .../entrypoints/github-issues.content/App.vue | 48 +-------------
 packages/extension/types.ts                   | 12 ++++
 4 files changed, 138 insertions(+), 46 deletions(-)
 create mode 100644 packages/extension/components/RelatedIssueItem.vue
 create mode 100644 packages/extension/components/RelatedIssueTitle.vue
 create mode 100644 packages/extension/types.ts

diff --git a/packages/extension/components/RelatedIssueItem.vue b/packages/extension/components/RelatedIssueItem.vue
new file mode 100644
index 0000000..9084440
--- /dev/null
+++ b/packages/extension/components/RelatedIssueItem.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <a :href="issue.url" class="my-1 truncate block flex-row gap-1 gap-2">
+      <svg v-if="issue.state === 'open'" class="octicon octicon-issue-opened open" title="Open" aria-label="Open issue"
+           viewBox="0 0 16 16" version="1.1" width="16" height="16" role="img">
+        <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
+        <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
+      </svg>
+
+      <svg v-else class="octicon octicon-issue-closed closed" title="Closed" aria-label="Closed issue"
+           viewBox="0 0 16 16" version="1.1" width="16" height="16" role="img" style="color: #a371f7;">
+        <path
+            d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path>
+        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path>
+      </svg>
+
+      <RelatedIssueTitle class="ml-2 !text-white" :text="issue.title"></RelatedIssueTitle>
+      <br>
+    </a>
+    <a class="ml-4 hover:underline focus:underline" :href="issue.url.split('/issues/')[0]">{{
+        issue.owner
+      }}/{{ issue.repository }}</a>
+    &middot;
+    <span class="inline-flex flex-row gap-1">
+          <span v-if="issue.state === 'closed'">closed</span>
+          <span v-else>updated</span>
+          <time :datetime="issue.updated_at" class="inline-flex flex-row gap-1">
+            {{ formatDate(new Date(issue.updated_at)) }}
+          </time>
+        </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {Issue} from "@/types";
+import RelatedIssueTitle from "@/components/RelatedIssueTitle.vue";
+
+defineProps<{
+  issue: Issue
+}>()
+
+const formatter = new Intl.RelativeTimeFormat()
+
+function formatDate(date: Date) {
+  const diffInSeconds = (date.getTime() - Date.now()) / 1000
+  const units: Array<{ unit: Intl.RelativeTimeFormatUnit, value: number }> = [
+    {unit: 'second', value: diffInSeconds},
+    {unit: 'minute', value: diffInSeconds / 60},
+    {unit: 'hour', value: diffInSeconds / 3600},
+    {unit: 'day', value: diffInSeconds / 86400},
+    {unit: 'month', value: diffInSeconds / 2592000},
+    {unit: 'year', value: diffInSeconds / 31536000},
+  ]
+  const {unit, value} = units.find(({value}) => Math.abs(value) < 60) || units[units.length - 1]!
+  return formatter.format(Math.round(value), unit)
+}
+
+</script>
+
+<style scoped>
+a {
+  color: var(--fgColor-muted, var(--color-fg-muted, #848d97));
+  max-width: fit-content;
+}
+</style>
\ No newline at end of file
diff --git a/packages/extension/components/RelatedIssueTitle.vue b/packages/extension/components/RelatedIssueTitle.vue
new file mode 100644
index 0000000..135faa1
--- /dev/null
+++ b/packages/extension/components/RelatedIssueTitle.vue
@@ -0,0 +1,59 @@
+<template>
+  <span>
+    <template v-for="(part, index) in formattedParts" :key="index">
+        <template v-if="part.isCode">
+          <code>{{ part.content }}</code>
+        </template>
+        <template v-else>
+          {{ part.content }}
+        </template>
+      </template>
+  </span>
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps<{
+  text: string
+}>()
+
+function escapeHtml(text: string) {
+  return text.replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+}
+
+const formattedParts = computed(() => {
+  const escapedText = escapeHtml(props.text);
+  const parts = [];
+  const regex = /`([^`]+)`/g;
+  let lastIndex = 0;
+  let match;
+
+  while ((match = regex.exec(escapedText)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push({isCode: false, content: escapedText.slice(lastIndex, match.index)});
+    }
+    parts.push({isCode: true, content: match[1]});
+    lastIndex = regex.lastIndex;
+  }
+
+  if (lastIndex < escapedText.length) {
+    parts.push({isCode: false, content: escapedText.slice(lastIndex)});
+  }
+
+  return parts;
+})
+</script>
+
+<style scoped>
+code {
+  line-height: 1;
+  padding: .2rem .4rem;
+  background-color: var(--bgColor-neutral-muted);
+  border-radius: 4px;
+  font-size: 85%
+}
+</style>
\ No newline at end of file
diff --git a/packages/extension/entrypoints/github-issues.content/App.vue b/packages/extension/entrypoints/github-issues.content/App.vue
index 39621ec..08dcf74 100644
--- a/packages/extension/entrypoints/github-issues.content/App.vue
+++ b/packages/extension/entrypoints/github-issues.content/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useFetch } from '@vueuse/core'
 import { computed } from 'vue'
+import RelatedIssueItem from "@/components/RelatedIssueItem.vue";
 
 const { owner, repo, issue } = window.location.pathname.match(/\/(?<owner>[^/]+)\/(?<repo>[^/]+)\/issues\/(?<issue>\d+)/)?.groups || {}
 
@@ -16,60 +17,19 @@ const { data: issues } = useFetch(issueUrl, {
   }
 }).json()
 
-const formatter = new Intl.RelativeTimeFormat()
-
-function formatDate (date: Date) {
-  const diffInSeconds = (date.getTime() - Date.now()) / 1000
-  const units: Array<{ unit: Intl.RelativeTimeFormatUnit, value: number }> = [
-    { unit: 'second', value: diffInSeconds },
-    { unit: 'minute', value: diffInSeconds / 60 },
-    { unit: 'hour', value: diffInSeconds / 3600 },
-    { unit: 'day', value: diffInSeconds / 86400 },
-    { unit: 'month', value: diffInSeconds / 2592000 },
-    { unit: 'year', value: diffInSeconds / 31536000 },
-  ]
-  const { unit, value } = units.find(({ value }) => Math.abs(value) < 60) || units[units.length - 1]!
-  return formatter.format(Math.round(value), unit)
-}
 </script>
 
 <template>
   <div class="section w-full">
     <div class="px-2 text-xs flex flex-col gap-2 w-full">
       <h3 class="!text-xs">Related issues</h3>
-      <div v-for="issue of issues">
-        <a :href="issue.url" class="my-1 truncate block flex-row gap-1">
-          <svg v-if="issue.state === 'open'" class="octicon octicon-issue-opened open" title="Open" aria-label="Open issue" viewBox="0 0 16 16" version="1.1" width="16" height="16" role="img"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path></svg>
-          
-          <svg v-else class="octicon octicon-issue-closed closed" title="Closed" aria-label="Closed issue" viewBox="0 0 16 16" version="1.1" width="16" height="16" role="img" style="color: #a371f7;"><path d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path></svg>
-          
-          <span class="ml-2 !text-white" :title="issue.title">
-            {{ issue.title }}
-          </span>
-          <br>
-        </a>
-        <a class="ml-4 hover:underline focus:underline" :href="`https://github.com/${issue.owner}/${issue.repository}`" >{{ issue.owner }}/{{ issue.repository }}</a>
-        &middot;
-        <span class="inline-flex flex-row gap-1">
-          <span v-if="issue.state === 'closed'">closed</span>
-          <span v-else>updated</span>
-          <time :datetime="issue.updated_at" class="inline-flex flex-row gap-1">
-            {{ formatDate(new Date(issue.updated_at)) }}
-          </time>
-        </span>
-      </div>
+      <RelatedIssueItem v-for="issue of issues " :issue="issue" />
       <span v-if="issues.length === 0" class="mt-1 mb-2">No similar issues found.</span>
     </div>
   </div>
 </template>
 
 <style scoped>
-a {
-  color: var(--fgColor-muted, var(--color-fg-muted, #848d97));
-}
-div {
-  color: var(--fgColor-muted, var(--color-fg-muted, #848d97));
-}
 .section {
   display: flex;
   flex-direction: column;
@@ -88,8 +48,4 @@ div {
   background-color: var(--borderColor-muted, var(--color-border-muted, #21262d));
   width: calc(100% - 8px);
 }
-
-a {
-  max-width: fit-content;
-}
 </style>
diff --git a/packages/extension/types.ts b/packages/extension/types.ts
new file mode 100644
index 0000000..2c055ea
--- /dev/null
+++ b/packages/extension/types.ts
@@ -0,0 +1,12 @@
+export interface Issue {
+  description: string
+  labels: Array<string>
+  number: number
+  url: string
+  state: 'open' | 'closed'
+  title: string
+  updated_at: string
+  owner: string
+  repository: string
+  score: number
+}
-- 
2.51.2