use RevealAwesoMD for more awsomeness

Co-authored-by: Sawjan Gurung <saw.jan.grg3e@gmail.com>

Author: individual-it

package-common.json

@@ -17,6 +17,7 @@
     "@types/reveal.js": "^4.4.8",
     "reveal.js": "^5.1.0",
     "reveal.js-mermaid-plugin": "^11.4.1"
+    "revealjs-awesomd": "github:opf/revealjs-awesoMD"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.24.5",

src/App.vue

@@ -31,7 +31,7 @@ import {
 } from '@ownclouders/web-pkg'
 import { Resource } from '@ownclouders/web-client/src'
 import Reveal from 'reveal.js'
-import RevealMarkdown from 'reveal.js/plugin/markdown/markdown'
+import RevealAwesoMD from 'revealjs-awesomd/plugin/awesoMD/awesoMD'
 import RevealHighlight from 'reveal.js/plugin/highlight/highlight'
 import RevealMermaid from 'reveal.js-mermaid-plugin/plugin/mermaid/mermaid'
 
@@ -102,7 +102,7 @@ onMounted(async () => {
     })
 
   reveal = new Reveal(unref(revealContainer), {
-    plugins: [RevealMarkdown, RevealHighlight, RevealMermaid]
+    plugins: [RevealAwesoMD, RevealHighlight, RevealMermaid]
   })
 
   await reveal.initialize({

src/css/variables.css

@@ -1,3 +1,4 @@
+@import '../../node_modules/revealjs-awesomd/dist/css/alerts.css';
 /* color */
 :root {
   --code-color: #c1798b;