Tweak Markdown page rendering

content/articles/first.md

@@ -4,8 +4,6 @@ description: "This is a test article."
 navigation: true
 ---
 
-## Hello World
-
 Foobarbazbuz.
 
 ## Component Rendering

content/articles/second.md

@@ -3,6 +3,4 @@ title: "My Second Blog Post"
 description: "This is another article."
 ---
 
-# Test!
-
 This is another article.

src/components/content/ProseImg.vue

@@ -0,0 +1,69 @@
+<!-- https://github.com/nuxt-modules/mdc/blob/main/src/runtime/components/prose/ProseImg.vue -->
+
+<template>
+	<a :href="refinedSrc" target="_blank">
+		<component :is="ImageComponent" :class="props.class" :src="refinedSrc" :alt="props.alt" :loading="props.loading"
+			:title="props.title" :width="props.width" :height="props.height" v-bind="$attrs" />
+	</a>
+</template>
+
+<script setup lang="ts">
+import { withTrailingSlash, withLeadingSlash, joinURL } from "ufo"
+import { useRuntimeConfig, computed } from "#imports"
+
+import ImageComponent from "#build/mdc-image-component.mjs"
+
+const props = defineProps({
+	src: {
+		type: String,
+		default: ""
+	},
+	alt: {
+		type: String,
+		default: ""
+	},
+	width: {
+		type: [String, Number],
+		default: undefined
+	},
+	height: {
+		type: [String, Number],
+		default: undefined
+	},
+	// Added props compared to upstream
+	class: {
+		type: String,
+		default: "img-fluid"
+	},
+	title: {
+		type: String,
+		default: ""
+	},
+	loading: {
+		type: String,
+		default: "lazy" // eager, lazy
+	},
+})
+
+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>
+
+<!--
+	 Usage:
+
+	 ![alt text](/img/path-to-img.png "title text"){.img-fluid loading=lazy}
+
+	 <a href="/img/path-to-img.png" target="_blank">
+		<img class="img-fluid" src="/img/path-to-img.png" alt="alt text" loading="lazy" title="title text">
+	 </a>
+-->
+
+<!-- v-bind="$attrs" will pass through any additional props that haven't been specified in defineProps -->

src/pages/articles/[slug].vue

@@ -4,7 +4,6 @@
 			<ArticlesTableOfContents v-if="article.navigation" :toc="article.body.toc" />
 
 			<h1>{{ article.title }}</h1>
-			<p>{{ article.description }}</p>
 			<ContentRenderer :value="article" />
 		</template>
 		<template v-else>
@@ -35,7 +34,7 @@
 }
 
 /* Select <pre class="shiki"> */
-:deep(pre.shiki) {
+:deep(pre[class^="language-"]) {
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: 1rem;
@@ -54,7 +53,7 @@
 }
 
 /* Select <code> */
-:deep(code:not(.shiki):not(pre code)) {
+:deep(code:not([class^="language-"]):not(pre code)) {
 	/* reset font to black */
 	color: inherit;
 }