diff --git a/content/articles/first.md b/content/articles/first.md index 9c0bdcf..e4524f6 100644 --- a/content/articles/first.md +++ b/content/articles/first.md @@ -4,8 +4,6 @@ description: "This is a test article." navigation: true --- -## Hello World - Foobarbazbuz. ## Component Rendering diff --git a/content/articles/second.md b/content/articles/second.md index 1e90575..9590273 100644 --- a/content/articles/second.md +++ b/content/articles/second.md @@ -3,6 +3,4 @@ title: "My Second Blog Post" description: "This is another article." --- -# Test! - This is another article. diff --git a/src/components/content/ProseImg.vue b/src/components/content/ProseImg.vue new file mode 100644 index 0000000..d0787cf --- /dev/null +++ b/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: + + {.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 --> diff --git a/src/pages/articles/[slug].vue b/src/pages/articles/[slug].vue index 00602cb..2e90c5d 100644 --- a/src/pages/articles/[slug].vue +++ b/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; }