fix: update stackblitz card to a new format

elk-zone · Feb 1, 2023 · e364d3e · e364d3e
1 parent 4c054a3
commit e364d3e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git 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
@@ -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