fix: do not use v-html on a custom component

Author: danielroe

app/components/Readme.vue

@@ -1,8 +1,11 @@
-<!-- simple component only taking slot -->
+<script setup lang="ts">
+defineProps<{
+  html: string
+}>()
+</script>
+
 <template>
-  <article class="readme prose prose-invert max-w-[70ch]">
-    <slot />
-  </article>
+  <article class="readme prose prose-invert max-w-[70ch]" v-html="html" />
 </template>
 
 <style scoped>

app/pages/[...package].vue

@@ -954,7 +954,7 @@ function handleClick(event: MouseEvent) {
           </a>
         </h2>
         <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
-        <Readme v-if="readmeData?.html" v-html="readmeData.html" @click="handleClick" />
+        <Readme v-if="readmeData?.html" :html="readmeData.html" @click="handleClick" />
         <p v-else class="text-fg-subtle italic">
           {{ $t('package.readme.no_readme') }}
           <a v-if="repositoryUrl" :href="repositoryUrl" rel="noopener noreferrer" class="link">{{

app/pages/code/[...path].vue

@@ -442,7 +442,7 @@ defineOgImageComponent('Default', {
             v-show="markdownViewMode === 'preview'"
             class="flex justify-center p-4"
           >
-            <Readme v-html="fileContent.markdownHtml.html" />
+            <Readme :html="fileContent.markdownHtml.html" />
           </div>
 
           <CodeViewer