fix: handle links and image for modules

app.vue

@@ -47,6 +47,7 @@ provide('navigation', navigation)
 
 <template>
   <div>
+    <NuxtLoadingIndicator />
     <AppHeader :links="headerLinks" />
 
     <UMain>

components/module/ModuleProseA.vue

@@ -0,0 +1,31 @@
+<template>
+  <NuxtLink
+    :href="href"
+    :target="target"
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import { hasProtocol, joinURL } from 'ufo'
+const { data: module } = useNuxtData('module')
+
+const props = defineProps({
+  href: {
+    type: String,
+    default: ''
+  },
+  target: {
+    type: String,
+    default: undefined,
+    required: false
+  }
+})
+
+const href = computed(() => {
+  if (hasProtocol(props.href)) return props.href
+  if (!module.value.github) return props.href
+  return joinURL(module.value.github, 'blob', module.value.stats?.defaultBranch || 'main', props.href)
+})
+</script>

components/module/ModuleProseImg.vue

@@ -0,0 +1,38 @@
+<template>
+  <img
+    :src="src"
+    :alt="alt"
+    :width="width"
+    :height="height"
+  >
+</template>
+
+<script setup lang="ts">
+import { hasProtocol, joinURL } from 'ufo'
+
+const { data: module } = useNuxtData('module')
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: ''
+  },
+  alt: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: [String, Number],
+    default: undefined
+  },
+  height: {
+    type: [String, Number],
+    default: undefined
+  }
+})
+const src = computed(() => {
+  if (hasProtocol(props.src) || !module.value?.repo) return props.src
+  const repo = module.value.repo.split('#')[0]
+  return joinURL('https://raw.githubusercontent.com/', repo, module.value.stats.defaultBranch, props.src)
+})
+</script>

package.json

@@ -31,7 +31,8 @@
     "nuxt": "^3.7.4",
     "perfect-debounce": "^1.0.0",
     "scule": "^1.0.0",
-    "sitemap": "^7.1.1"
+    "sitemap": "^7.1.1",
+    "ufo": "^1.3.1"
   },
   "devDependencies": {
     "@nuxt/devtools": "^0.8.5",

pages/modules/[slug].vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import type { Module } from '~/types'
+import { ModuleProseA, ModuleProseImg } from '#components'
 const route = useRoute()
 
-const { data: module } = await useFetch<Module>(`https://api.nuxt.com/modules/${route.params.slug}`)
+const { data: module } = await useFetch<Module>(`https://api.nuxt.com/modules/${route.params.slug}`, {
+  key: 'module'
+})
 if (!module.value) {
   throw createError({ statusCode: 404, statusMessage: 'Module not found', fatal: true })
 }
@@ -125,7 +128,7 @@ const contributors = computed(() => module.value.contributors.map((contributor)
 
     <UPage :ui="{ right: 'my-8' }">
       <UPageBody prose>
-        <ContentRenderer v-if="module.readme?.body" :value="module.readme" class="module-readme" />
+        <ContentRendererMarkdown v-if="module.readme?.body" :value="module.readme" class="module-readme" :components="{ a: ModuleProseA, img: ModuleProseImg }" />
       </UPageBody>
 
       <template #right>