pelican-jdr/src/components/MarkdownFile.vue

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

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

const htmlContent = ref("");

function refresh() {
  const markdownFileUrl = `/${props.path}.md`;
  console.log(`Chargement de l'URL ${markdownFileUrl}`);
  axios
    .get(markdownFileUrl)
    .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"
        ))
    );
}

onMounted(() => {
  refresh();
});

onBeforeUpdate(() => {
  refresh();
});
</script>

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