use external link component in markdown

opendata.swiss/ui/app/components/OdsProseA.vue

@@ -0,0 +1,50 @@
+<template>
+  <NuxtLink
+    :href="props.href"
+    :target="isExternal ? '_blank' : props.target"
+    :class="{ 'link--external': isExternal }"
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  href: {
+    type: String,
+    default: ''
+  },
+  target: {
+    type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
+    default: undefined,
+    required: false
+  }
+})
+
+const isExternal = computed(() => {
+  try {
+    if (!props.href) {
+      return false;
+    }
+    let baseHost= '';
+    if(import.meta.client) {
+      baseHost = window.location.host;
+    } else {
+      // ssr context
+      baseHost = useRequestURL().host;
+    }
+
+    const url = new URL(props.href, `https://${baseHost}`);
+
+    if(! (url.protocol === 'http:' || url.protocol === 'https:')) {
+      return false;
+    }
+    return url.host !== baseHost;
+  } catch {
+    return false;
+  }
+});
+</script>

opendata.swiss/ui/app/components/dataset-detail/OdsDatasetMetaInfo.vue

@@ -35,7 +35,7 @@
       v-if="props.dataset.getOdsAccrualPeriodicity"
       class="meta-info__item"
     >
-      {{ t('message.dataset_detail.accrual_periodicity') }} <OdsExternalLink :href="props.dataset.getOdsAccrualPeriodicity.resource">{{ props.dataset.getOdsAccrualPeriodicity.label }}</OdsExternalLink>
+      {{ t('message.dataset_detail.accrual_periodicity') }} <a class="link--external" :href="props.dataset.getOdsAccrualPeriodicity.resource">{{ props.dataset.getOdsAccrualPeriodicity.label }}</a>
     </span>
   </p>
   <p class="meta-info catalog-meta-info">
@@ -49,7 +49,6 @@ import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { Dataset } from '~/model/dataset'
 import OdsDatasetCatalogPanel from './OdsDatasetCatalogPanel.vue'
-import OdsExternalLink from '../ExternalLink.vue'
 
 const { locale, t } = useI18n()
 

opendata.swiss/ui/app/components/dataset-detail/OdsDetailsTable.vue

@@ -4,7 +4,7 @@
     <OdsInfoBlock :title="row.label">
       <div v-if="row.type === 'value'">{{ row.value }}</div>
       <div v-if="row.type === 'href'">
-        <OdsExternalLink v-if="row.href && row.href.startsWith('http')" :href="row.href">{{ row.value }}</OdsExternalLink>
+        <a v-if="row.href && row.href.startsWith('http')" :href="row.href" class="link--external">{{ row.value }}</a>
         <a v-if="row.href && !row.href.startsWith('http')" :href="row.href">{{ row.value }}</a>
       </div>
     </OdsInfoBlock>
@@ -17,11 +17,8 @@
 <script setup lang="ts">
 
 import type { PropertyTableEntry, PropertyTableEntryNode } from '@piveau/sdk-vue';
-import OdsExternalLink from '@/components/ExternalLink.vue'
 import { computed } from 'vue'
 
-
-
 interface TableEntry {
   id: string;
   label: string;

opendata.swiss/ui/nuxt.config.ts

@@ -1,11 +1,11 @@
-import vuetify, {transformAssetUrls} from 'vite-plugin-vuetify'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
-import {resolve} from 'node:path'
+import { resolve } from 'node:path'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
-  devtools: {enabled: true},
+  devtools: { enabled: true },
   modules: [
     '@nuxt/eslint',
     '@nuxt/content',
@@ -14,7 +14,7 @@ export default defineNuxtConfig({
     '@nuxt/image',
     (_options, nuxt) => {
       nuxt.hooks.hook('vite:extendConfig', (config) => {
-        config.plugins?.push(vuetify({autoImport: true}))
+        config.plugins?.push(vuetify({ autoImport: true }))
       })
     },
   ],
@@ -33,7 +33,7 @@ export default defineNuxtConfig({
         toc: {
           depth: 3,
           searchDepth: 3,
-        }
+        },
       }
     }
   },
@@ -44,7 +44,13 @@ export default defineNuxtConfig({
       '~/components/content',
     ]
   },
-
+  mdc: {
+    components: {
+      map: {
+        a: 'OdsProseA', // Map <a> tags to the OdsProseA component
+      }
+    }
+  },
   build: {
     transpile: ['vuetify', 'form-data'],
   },
@@ -60,10 +66,10 @@ export default defineNuxtConfig({
     defaultLocale: 'de',
     strategy: 'prefix',
     locales: [
-      {code: 'de', name: 'Deutsch', file: 'de.json'},
-      {code: 'en', name: 'English', file: 'en.json'},
-      {code: 'fr', name: 'Francais', file: 'fr.json'},
-      {code: 'it', name: 'Itlaliano', file: 'it.json'},
+      { code: 'de', name: 'Deutsch', file: 'de.json' },
+      { code: 'en', name: 'English', file: 'en.json' },
+      { code: 'fr', name: 'Francais', file: 'fr.json' },
+      { code: 'it', name: 'Itlaliano', file: 'it.json' },
     ]
   },
   nitro: {

opendata.swiss/ui/pages/datasets/[datasetId]/index.vue

@@ -10,13 +10,8 @@ import OdsDetailsTable from '../../../app/components/dataset-detail/OdsDetailsTa
 import OdsTagList from '../../../app/components/dataset-detail/OdsTagList.vue'
 import OdsDownloadsList from '../../../app/components/dataset-detail/OdsDownloadsList.vue'
 import OdsDatasetMetaInfo from '../../../app/components/dataset-detail/OdsDatasetMetaInfo.vue'
-import OdsDatasetCatalogPanel from '../../../app/components/dataset-detail/OdsDatasetCatalogPanel.vue'
 import { useI18n } from 'vue-i18n';
-const md = `
-::alert
-Hello MDC
-::
-`
+
 const { locale, t } = useI18n();
 const route = useRoute()
 const router = useRouter()
@@ -70,8 +65,7 @@ const breadcrumbs = computed(() => {
          <div class="hero__content">
             <OdsDatasetMetaInfo :dataset="resultEnhanced" />
             <h1 class="hero__title"> {{ resultEnhanced?.getTitle }} </h1>
-            <h2 class="hero__subtitle"> {{ resultEnhanced?.getDescription }} </h2>
-            <pre>{{ resultEnhanced?.getDescription }}</pre>
+            <MDC :value="resultEnhanced?.getDescription ?? ''" />
             <!----><!---->
             <aside class="authors">
                <div class="disc-images" aria-hidden="true">