Merge pull request #11 from opendata-swiss/dataset-detail-markdown

use external link component in markdown

Author: BenjaminHofstetter

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

@@ -0,0 +1,56 @@
+<template>
+    <NuxtLink
+    v-if="isExternal"
+    :href="props.href"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="link--external">
+    <slot />
+  </NuxtLink>
+
+  <NuxtLinkLocale
+    v-else
+    :href="props.href"
+    :target="props.target"
+    :class="{ 'link--external': isExternal }"
+  >
+    <slot />
+  </NuxtLinkLocale>
+
+</template>
+
+<script setup lang="ts">
+
+import type { PropType } from 'vue'
+import isAbsolute from 'is-absolute-url';
+
+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(() => {
+  if (!props.href) {
+    return false
+  }
+
+  if(props.href.startsWith('mailto')) {
+    return false
+  }
+
+  if(isAbsolute(props.href)) {
+    const base = import.meta.client ? window.location : useRequestURL()
+
+    return new URL(props.href).host !== base.host;
+  }
+
+  return false
+});
+</script>

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

@@ -36,7 +36,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">
@@ -50,7 +50,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/OdsDatasetMetaInfo.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/app/components/dataset-detail/OdsDetailsTable.vue

@@ -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/nuxt.config.ts

@@ -27,6 +27,7 @@
     "bootstrap": "^5.3.7",
     "decap-cms-app": "^3.8.3",
     "eslint": "^9.31.0",
+    "is-absolute-url": "^4.0.1",
     "nuxt": "^4.0.0",
     "pinia": "^3.0.3",
     "react-bootstrap-typeahead": "^6.4.1",
@@ -46,9 +47,9 @@
     "@mdi/font": "^7.4.47",
     "@types/vue-select": "^3.16.8",
     "decap-server": "^3.3.0",
-    "vite-plugin-vuetify": "^2.1.1",
     "vite-plugin-node-polyfills": "^0.24.0",
     "vite-plugin-static-copy": "^3.1.1",
+    "vite-plugin-vuetify": "^2.1.1",
     "vuetify": "^3.9.2"
   }
-}
+}

opendata.swiss/ui/package-lock.json

@@ -65,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">