From a287284664e5daddacdb2d4bac63d554c3c9887f Mon Sep 17 00:00:00 2001
From: Svyatoslav Kryukov <s.g.kryukov@yandex.ru>
Date: Wed, 1 Feb 2023 21:01:38 +0300
Subject: [PATCH] fix: update stackblitz card to a new format (#1562)

---
 components/status/StatusPreviewCard.vue       |  4 ++--
 components/status/StatusPreviewStackBlitz.vue | 11 ++++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue
index 9eb68522..8029ba65 100644
--- a/components/status/StatusPreviewCard.vue
+++ b/components/status/StatusPreviewCard.vue
@@ -9,13 +9,13 @@ const props = defineProps<{
   root?: boolean
 }>()
 
-const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
+const providerName = props.card.providerName
 
 const gitHubCards = $(usePreferences('experimentalGitHubCards'))
 </script>
 
 <template>
   <LazyStatusPreviewGitHub v-if="gitHubCards && providerName === 'GitHub'" :card="card" />
-  <LazyStatusPreviewStackBlitz v-else-if="gitHubCards && providerName === 'stackblitz.com'" :card="card" :small-picture-only="smallPictureOnly" :root="root" />
+  <LazyStatusPreviewStackBlitz v-else-if="gitHubCards && providerName === 'StackBlitz'" :card="card" :small-picture-only="smallPictureOnly" :root="root" />
   <StatusPreviewCardNormal v-else :card="card" :small-picture-only="smallPictureOnly" :root="root" />
 </template>
diff --git a/components/status/StatusPreviewStackBlitz.vue b/components/status/StatusPreviewStackBlitz.vue
index 9a5b565d..b4eb0f38 100644
--- a/components/status/StatusPreviewStackBlitz.vue
+++ b/components/status/StatusPreviewStackBlitz.vue
@@ -21,9 +21,9 @@ const maxLines = 20
 
 const meta = $computed(() => {
   const { description } = props.card
-  const meta = description.match(/.+\n\nCode Snippet from (.+), lines ([\w-]+)\n\n(.+)/s)
+  const meta = description.match(/.*Code Snippet from (.+), lines (\S+)\n\n(.+)/s)
   const file = meta?.[1]
-  const lines = meta?.[2].replaceAll('N', '')
+  const lines = meta?.[2]
   const code = meta?.[3].split('\n').slice(0, maxLines).join('\n')
   const project = props.card.title?.replace(' - StackBlitz', '')
   const info = $ref<Meta>({
@@ -38,7 +38,12 @@ const meta = $computed(() => {
 const vnodeCode = $computed(() => {
   if (!meta.code)
     return null
-  const vnode = contentToVNode(`<p>\`\`\`${meta.file?.split('.')?.[1] ?? ''}\n${meta.code}\n\`\`\`\</p>`, {
+  const code = meta.code
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/`/g, '&#96;')
+
+  const vnode = contentToVNode(`<p>\`\`\`${meta.file?.split('.')?.[1] ?? ''}\n${code}\n\`\`\`\</p>`, {
     markdown: true,
   })
   return vnode