Merge pull request #51 from esciencecenter-digital-skills/fix_slides_…

…metadata

Don't render frontmatter for chapters of type "slides" and use standard .md extension

components/Slides.vue

@@ -2,10 +2,13 @@
   <div class="flex relative box-border h-full reveal">
     <div class="slides flex h-full w-full">
       <section
-        :data-markdown="slidescontent"
-        data-separator="^\r?\n---\r?\n$"
+        data-markdown
+        data-separator="^\r?\n===\r?\n$"
+        data-separator-vertical="^\r?\n==\r?\n$"
         data-separator-notes="^Note:"
-      />
+      >
+      {{ stripFrontmatter(slidescontent) }}
+      </section>
     </div>
   </div>
 </template>
@@ -18,6 +21,19 @@ export default {
       default: "Missing Document",
     },
   },
+  methods: {
+    /**
+      Takes a string containing raw markdown (mdstr) and returns it with
+      the yaml frontmatter removed. It does this by deleting the first
+      instance of text between "---" separators. Currently this means that
+      if the markdown file is missing the frontmatter, this function will
+      probably remove the first slide (since reveal.js defaults to "---"
+      as a slides separator.
+    */
+    stripFrontmatter (mdstr) {
+      return mdstr.replace(/^---$.*?^---$/ms, '');
+    },
+  },
 };
 </script>
 
@@ -36,8 +52,6 @@ onMounted(() => {
   // (Importing statically causes errors during server side rendering)
   if (process.browser) {
     import("reveal.js").then((revealModule) => {
-      console.log("Check", revealModule);
-
       const deck = new revealModule.default();
       deck.initialize({
         controls: true,
@@ -49,8 +63,6 @@ onMounted(() => {
         showNotes: true,
         plugins: [RevealMarkdown, RevealNotes, Decorations, Search],
       });
-
-      console.log("Check", deck);
     });
   }
 });

pages/modules/[module]/[chapter].vue

@@ -1,8 +1,8 @@
 <template>
 
   <ContentDoc v-slot="{ doc }">
-    <div v-if="doc._extension === 'pmd'" class='overflow-hidden h-full '>
-      <Slides :slidescontent="baseUrl + doc._file"/>
+    <div v-if="doc.type === 'slides'" class='overflow-hidden h-full '>
+      <Slides :slidescontent="doc.plainText"/>
     </div>
 
     <div v-else  class="flex justify-center items-center">

server/plugins/content.ts

@@ -0,0 +1,26 @@
+// This plugin is needed to solve the current bad implementation of NuxtContent
+// that only makes the post-processed markdown available in body and drops
+// other props (added e.g. during beforeParse) so the raw markdown cannot simply
+// be passed as a custom property.
+//
+// Check e.g. https://github.com/nuxt/content/issues/2056 to see if this
+// eventually gets fixed.
+
+// The following code is the workaround proposed here:
+// https://github.com/nuxt/content/issues/2056#issuecomment-1560200992
+export default defineNitroPlugin((nitroApp) => {
+
+  let files = {}
+
+  nitroApp.hooks.hook("content:file:beforeParse", (file) => {
+    if (file._id.endsWith(".md")) {
+      files[file._id] = file.body;
+    }
+  })
+
+  nitroApp.hooks.hook("content:file:afterParse", (file) => {
+    if (file._id.endsWith(".md")) {
+      file.plainText = files[file._id];
+    }
+  })
+});