Basic calendar view

src/pages/reference/ReferenceIndexPage.vue

@@ -0,0 +1,12 @@
+<template>
+  <q-page padding>
+    <q-page padding> <ReferencePreviewComponent :entries="items" /> </q-page>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import ReferencePreviewComponent from 'src/components/ReferencePreviewComponent.vue';
+import { ref } from 'vue';
+import { useReferenceStore } from 'src/stores/reference';
+const items = ref(useReferenceStore().allItems);
+</script>

src/pages/reference/ReferenceItemPage.vue

@@ -0,0 +1,12 @@
+<template>
+  <q-page padding>
+    <div class="text-h4">Engine Starting</div>
+    <q-video
+      title="Engine Starting"
+      :ratio="16 / 9"
+      src="https://www.youtube.com/embed/GMHMLDlkKcE"
+    ></q-video>
+  </q-page>
+</template>
+
+<script setup lang="ts"></script>

src/pages/reference/ReferencePage.vue

@@ -0,0 +1,8 @@
+<template>
+  <toolbar-component pageTitle="Reference" />
+  <router-view />
+</template>
+
+<script setup lang="ts">
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+</script>