Add help

package.json

@@ -34,6 +34,7 @@
     "prettier": "^3.0.0",
     "typescript": "~5.1.6",
     "vite": "^4.4.9",
+    "vite-plugin-markdown": "^2.1.0",
     "vitest": "^0.34.2",
     "vue-tsc": "^1.8.8"
   }

src/assets/base.css

@@ -71,3 +71,38 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+h1 {
+  font-size: 2.2em;
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 12px;
+  margin-top: 24px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+b,
+strong,
+th {
+  font-weight: 600;
+}
+
+blockquote,
+q {
+  border-left: 4px solid rgb(47, 168, 239);
+  margin: 1.5em 0;
+  padding: 0.5em 1em;
+  font-style: italic;
+}

src/components/common/DiveModal.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const emit = defineEmits(['close'])
+
+</script>
+
+<template>
+    <Teleport to="body">
+        <div class="wrapper" @click="emit('close')">
+            <div class="modal">
+                <slot />
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<style scoped>
+.wrapper {
+    position: fixed;
+    background-color: rgba(255, 255, 255, 0.50);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+
+}
+
+.modal {
+    position: absolute;
+    top: 25%;
+    left: 25%;
+    width: 50%;
+    height: 50%;
+    background: white;
+    border-radius: 20px;
+    padding: 2em;
+    overflow-y: scroll;
+}
+</style>

src/components/controls/DiveControls.vue

@@ -3,13 +3,15 @@ import ManoMeter from './ManoMeter.vue';
 import BuoyancyControlDevice from './BuoyancyControlDevice.vue';
 import FlotabilityIndicator from './FlotabilityIndicator.vue';
 import DiveComputer from './DiveComputer.vue';
+import DiveHelp from './DiveHelp.vue';
 </script>
 <template>
     <div class="controls">
         <DiveComputer class="firstLeft" />
         <ManoMeter class="firstRight" />
         <BuoyancyControlDevice class="secondLeft" />
         <FlotabilityIndicator class="thirdLeft" />
+        <DiveHelp class="bottomLeft" />
     </div>
 </template>
 
@@ -18,6 +20,7 @@ import DiveComputer from './DiveComputer.vue';
     z-index: 1;
     position: absolute;
     width: 100%;
+    height: 100vh;
     display: grid;
     grid-template-columns: 1fr 4fr 1fr;
     grid-template-rows: repeat(4, 1fr);
@@ -42,4 +45,8 @@ import DiveComputer from './DiveComputer.vue';
 .thirdLeft {
     grid-area: 3 / 1 / 4 / 2;
 }
+
+.bottomLeft {
+    grid-area: 4 / 5 / 5 / 6;
+}
 </style>

src/components/controls/DiveHelp.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import QuestionIcon from '../icons/QuestionIcon.vue';
+import DiveModal from '../common/DiveModal.vue';
+// @ts-ignore
+import { VueComponent } from '../../../README.md';
+const open = ref(false);
+</script>
+
+<template>
+    <div class="wrapper">
+        <div class="question" @click="open = true">
+            <QuestionIcon></QuestionIcon>
+        </div>
+        <DiveModal v-if="open" @close="open = false">
+            <VueComponent />
+        </DiveModal>
+    </div>
+</template>
+
+<style scoped>
+.wrapper {
+    place-self: self-end;
+}
+
+.question {
+    cursor: pointer;
+    height: 2em;
+    width: 2em;
+}
+</style>

src/components/icons/QuestionIcon.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+    </svg>
+</template>

vite.config.ts

@@ -2,11 +2,12 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import mdPlugin, { Mode } from 'vite-plugin-markdown'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: '/deep-dive/',
-  plugins: [vue()],
+  plugins: [vue(), mdPlugin({ mode: [Mode.VUE] })],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))