fix: update stackblitz card to a new format (#1562)

This commit is contained in:
Svyatoslav Kryukov 2023-02-01 21:01:38 +03:00 committed by GitHub
parent b41b9353b8
commit a287284664
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 5 deletions

View file

@ -9,13 +9,13 @@ const props = defineProps<{
root?: boolean 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')) const gitHubCards = $(usePreferences('experimentalGitHubCards'))
</script> </script>
<template> <template>
<LazyStatusPreviewGitHub v-if="gitHubCards && providerName === 'GitHub'" :card="card" /> <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" /> <StatusPreviewCardNormal v-else :card="card" :small-picture-only="smallPictureOnly" :root="root" />
</template> </template>

View file

@ -21,9 +21,9 @@ const maxLines = 20
const meta = $computed(() => { const meta = $computed(() => {
const { description } = props.card 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 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 code = meta?.[3].split('\n').slice(0, maxLines).join('\n')
const project = props.card.title?.replace(' - StackBlitz', '') const project = props.card.title?.replace(' - StackBlitz', '')
const info = $ref<Meta>({ const info = $ref<Meta>({
@ -38,7 +38,12 @@ const meta = $computed(() => {
const vnodeCode = $computed(() => { const vnodeCode = $computed(() => {
if (!meta.code) if (!meta.code)
return null 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, markdown: true,
}) })
return vnode return vnode