pelican-jdr/src/components/MarkdownFile.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { marked } from "marked";
import axios from "axios";

const props = defineProps<{
  path: string;
}>();

const htmlContent = ref("");

onMounted(() => {
  axios
    .get(`/${props.path}.md`)
    .then((response) => (htmlContent.value = marked.parse(response.data)))
    .catch(
      () =>
        (htmlContent.value = marked.parse(
          "# 404 Not Found \n \n La page recherchée n'a pas pu être trouvée"
        ))
    );
});
</script>

<template>
  <main id="content" class="pt-1">
    <div v-html="htmlContent"></div>
    <slot></slot>
  </main>
</template>