From 0b12d84500faca253b7c7a03e5c56ee979866a80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Mon, 16 Oct 2023 22:41:15 +0200
Subject: [PATCH] fix: handle links and image for modules

---
 app.vue                              |  1 +
 components/module/ModuleProseA.vue   | 31 +++++++++++++++++++++++
 components/module/ModuleProseImg.vue | 38 ++++++++++++++++++++++++++++
 package.json                         |  3 ++-
 pages/modules/[slug].vue             |  7 +++--
 pnpm-lock.yaml                       |  3 +++
 6 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 components/module/ModuleProseA.vue
 create mode 100644 components/module/ModuleProseImg.vue

diff --git a/app.vue b/app.vue
index aedbd9f07..39f3584de 100644
--- a/app.vue
+++ b/app.vue
@@ -47,6 +47,7 @@ provide('navigation', navigation)
 
 <template>
   <div>
+    <NuxtLoadingIndicator />
     <AppHeader :links="headerLinks" />
 
     <UMain>
diff --git a/components/module/ModuleProseA.vue b/components/module/ModuleProseA.vue
new file mode 100644
index 000000000..d222e46a8
--- /dev/null
+++ b/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>
diff --git a/components/module/ModuleProseImg.vue b/components/module/ModuleProseImg.vue
new file mode 100644
index 000000000..a38c73ddf
--- /dev/null
+++ b/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>
diff --git a/package.json b/package.json
index 3804ba519..6293fb037 100644
--- a/package.json
+++ b/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",
diff --git a/pages/modules/[slug].vue b/pages/modules/[slug].vue
index 94ae4675f..da008cc5c 100644
--- a/pages/modules/[slug].vue
+++ b/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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 10965eaf6..9d8322418 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,6 +65,9 @@ dependencies:
   sitemap:
     specifier: ^7.1.1
     version: 7.1.1
+  ufo:
+    specifier: ^1.3.1
+    version: 1.3.1
 
 devDependencies:
   '@nuxt/devtools':