Add slidev infrstructure

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+dist
+*.local
+.vite-inspect
+.remote-assets
+components.d.ts
+venv
+*.pdf

README.md

@@ -63,3 +63,54 @@ $ tree -L 2
 ║ &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; ║<br>
 ║ &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; ║<br>
 ║ &nbsp;&ensp;&ensp;TBD&ensp;&ensp;&ensp;║<br>
+
+## Usage
+
+Historically we used [remarkjs](https://github.com/remarkjs/remark) with our
+own [remark-remplates](https://github.com/3mdeb/remark-templates), but since
+September 2024 we started switching to [slidev](https://sli.dev/).
+
+## How to preview presentation
+
+### slidev
+
+* Install npm manager e.g. [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#install--update-script)
+* Use lts version of npm:
+
+```bash
+nvm install --lts
+nvm use --lts
+```
+
+* Host presentations:
+
+```bash
+npm run dev -- -p 8000 --remote --force
+```
+
+* Open content in browser on http://0.0.0.0:8000
+
+### remarkjs
+
+* Clone repository
+* Initialize submodules
+
+  ```bash
+  git submodule update --init --recursive --checkout
+  ```
+
+* Run local HTTP server e.g.
+
+  ```bash
+  python -m http.server
+  ```
+
+* Open content in browser on http://0.0.0.0:8000
+
+## Contribution
+
+* Please feel free to create issues for improvement ideas and bugs, as well as
+  pull requests to fix any issues.
+* If you intend to provide code improvements, please install all dependencies.
+* Before pushing code for review, ensure that `pre-commit run --all-files` does
+  not return any issues.

components/Counter.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  count: {
+    default: 0,
+  },
+})
+
+const counter = ref(props.count)
+</script>
+
+<template>
+  <div flex="~" w="min" border="~ main rounded-md">
+    <button
+      border="r main"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter -= 1"
+    >
+      -
+    </button>
+    <span m="auto" p="2">{{ counter }}</span>
+    <button
+      border="l main"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter += 1"
+    >
+      +
+    </button>
+  </div>
+</template>

global-top.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <Scroll/>
+    <footer
+      v-if="$nav.currentLayout !== 'cover'"
+      class="absolute bottom-0 left-0 right-0 text-center py-2 text-[#000000]"
+    >
+      <small>© 2024 3mdeb Sp. z o.o. Licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>.
+</small>
+      <div class="absolute bottom-0 right-0 py-2 pr-2 text-right text-[#000000]">
+        <small><SlideCurrentNo/>/<SlidesTotal/></small>
+      </div>
+    </footer>
+  </div>
+</template>

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "presentation",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "slidev build",
+    "dev": "slidev --open",
+    "export": "slidev export"
+  },
+  "dependencies": {
+    "@slidev/cli": "^0.49.29",
+    "@slidev/theme-default": "latest",
+    "@slidev/theme-seriph": "latest",
+    "vue": "^3.4.38"
+  },
+  "devDependencies": {
+    "markdown-it-admon": "^1.0.1"
+  }
+}

pages/imported-slides.md

@@ -0,0 +1,28 @@
+# Imported Slides
+
+You can split your slides.md into multiple files and organize them as you want using the `src` attribute.
+
+#### `slides.md`
+
+```markdown
+# Page 1
+
+Page 2 from main entry.
+
+---
+
+## src: ./subpage.md
+```
+
+<br>
+
+#### `subpage.md`
+
+```markdown
+# Page 2
+
+Page 2 from another file.
+```
+
+[Learn more](https://sli.dev/guide/syntax.html#importing-slides)
+

slides.md

@@ -0,0 +1,24 @@
+---
+theme: ./theme
+background: /intro.png
+# some information about your slides (markdown enabled)
+title: "Presentation Title"
+info: false
+# apply unocss classes to the current slide
+class: text-center
+# https://sli.dev/features/drawing
+drawings:
+  persist: false
+# slide transition: https://sli.dev/guide/animations.html#slide-transitions
+transition: slide-left
+# enable MDC Syntax: https://sli.dev/features/mdc
+mdc: true
+
+---
+
+## Presentation title
+
+---
+# Provide path to slides you want to present.
+src: ./pages/imported-slides.md
+---

snippets/external.ts

@@ -0,0 +1,12 @@
+/* eslint-disable no-console */
+
+// #region snippet
+// Inside ./snippets/external.ts
+export function emptyArray<T>(length: number) {
+  return Array.from<T>({ length })
+}
+// #endregion snippet
+
+export function sayHello() {
+  console.log('Hello from snippets/external.ts')
+}