Merge pull request #24 from esciencecenter-digital-skills/add_submodu…

…le_rendering_back

Add separate reveal.js and markdown rendering

components/ModuleCard.vue

@@ -29,7 +29,7 @@ export default {
     },
     thumbnail: {
       type: String,
-      default: './public/nlesc-logo.svg'
+      default: './nlesc-logo.svg'
     },
     url: {
       type: String,

components/Slides.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="w-full box-border h-screen">
+        <div class="reveal">
+            <div class="slides">
+                <section :data-markdown="slidescontent" data-separator="^\r?\n---\r?\n$" data-separator-notes="^Note:" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    export default {
+      props: {
+        slidescontent: {
+          type: String,
+          default: 'Missing Document'
+        }
+      }
+}
+</script>
+
+<script setup lang="ts">
+    
+    import RevealMarkdown from 'reveal.js/plugin/markdown/markdown.esm.js'
+
+    import RevealNotes from 'reveal.js/plugin/notes/notes.js'
+//    import RevealMath from 'reveal.js/plugin/math/math.js'
+    import Search from 'reveal.js/plugin/search/search.esm.js'
+    import Decorations from '~/layouts/nlesc-decorations.js'
+
+    onMounted(() => {
+        console.log('Slides Mounted');
+
+        // On client side only, dynamically load reveal.js
+        // (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,
+                            progress: true,
+                            center: true,
+                            hash: true,
+                            transition: 'none',
+                            embedded: true,
+                            showNotes: true,
+                            plugins: [RevealMarkdown, RevealNotes, Decorations, Search]
+                      });
+ 
+                        console.log('Check', deck);
+
+                    });
+            }
+    });
+</script>

layouts/style.scss

@@ -4,6 +4,9 @@
 @import url("https://fonts.googleapis.com/css?family=Assistant");
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 
+@import url('reveal.js/dist/reveal.css');
+@import url('~/layouts/nlesc-decorations.scss');
+
 #footer{
   a {
     text-decoration: underline;

nuxt.config.ts

@@ -29,6 +29,13 @@ export default defineNuxtConfig({
   content: {
     // https://content.nuxtjs.org/api/configuration
     documentDriven: true,
+
+    markdown: {
+      remarkPlugins: [
+        'remark-directive'
+      ]
+    },
+
     sources: {
       github: {
         prefix: '/', // Prefix for routes used to query contents
@@ -38,7 +45,6 @@ export default defineNuxtConfig({
         dir: "/", // Directory where contents are located. It could be a subdirectory of the repository.
     // Imagine you have a blog inside your content folder. You can set this option to `content/blog` with the prefix option to `/blog` to avoid conflicts with local files.
       }
-
     }
   },
   app: {
@@ -51,9 +57,10 @@ export default defineNuxtConfig({
   ssr: true,
   target: "static",
 
+  css: ['~/layouts/style.scss'],
+
   // https://nuxt.com/docs/api/configuration/nuxt-config
   postcss: {
-    css: ['./layouts/'],
     plugins: {
       tailwindcss: {},
       autoprefixer: {},