feat: add nuxt image module (#27)

# What 💻 
* Install the Nuxt Image module

# Why ✋
* Optimizes images 

 # Notes 📝
* Nuxt Content just added NuxtImage support in their `ProseImg`
component literally hours ago. This means that it is not available yet
in an official release. In the meantime, I just copied the code from the
PR and we can remove our `ProseImg` component when the latest release
includes it.

components/content/ProseImg.vue

@@ -0,0 +1,48 @@
+<template>
+  <component
+    :is="imgComponent"
+    :src="refinedSrc"
+    :alt="alt"
+    :width="width"
+    :height="height"
+  />
+</template>
+
+<script setup lang="ts">
+/**
+ * This is a temporary component until the Nuxt Content release includes these changes
+ */
+import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo';
+import { useRuntimeConfig, computed, resolveComponent } from '#imports';
+
+const imgComponent = useRuntimeConfig().public.mdc.useNuxtImage ? resolveComponent('NuxtImg') : 'img';
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  alt: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: [String, Number],
+    default: undefined,
+  },
+  height: {
+    type: [String, Number],
+    default: undefined,
+  },
+});
+
+const refinedSrc = computed(() => {
+  if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
+    const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL));
+    if (_base !== '/' && !props.src.startsWith(_base)) {
+      return joinURL(_base, props.src);
+    }
+  }
+  return props.src;
+});
+</script>

nuxt.config.ts

@@ -20,6 +20,7 @@ export default defineNuxtConfig({
     'nuxt-og-image',
     'nuxt-headlessui',
     '@nuxt/devtools',
+    '@nuxt/image',
   ],
   hooks: {
     // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
@@ -29,6 +30,10 @@ export default defineNuxtConfig({
       globals.forEach((c) => (c.global = true));
     },
   },
+  image: {
+    quality: 90,
+    format: ['avif', 'webp'],
+  },
   fonts: {
     families: [
       { name: 'Raleway', provider: 'google' },
@@ -92,4 +97,11 @@ export default defineNuxtConfig({
       gen: 2,
     },
   },
+  runtimeConfig: {
+    public: {
+      mdc: {
+        useNuxtImage: true,
+      },
+    },
+  },
 });

package.json

@@ -40,6 +40,7 @@
     "@iconify-json/zondicons": "^1.1.8",
     "@nuxt/content": "^2.12.1",
     "@nuxt/fonts": "^0.3.0",
+    "@nuxt/image": "^1.6.0",
     "@nuxt/ui-pro": "^1.0.2",
     "@tsparticles/slim": "^3.3.0",
     "@tsparticles/vue3": "^3.0.1",