| 1 | <script setup lang="ts"> |
| 2 | import { useHead } from '@unhead/vue' |
| 3 | import { useStyleTag } from '@vueuse/core' |
| 4 | import { computed } from 'vue' |
| 5 | import { useNav } from '../../composables/useNav' |
| 6 | import { configs } from '../../env' |
| 7 | import NoteDisplay from '../../internals/NoteDisplay.vue' |
| 8 | |
| 9 | const { slides, total } = useNav() |
| 10 | |
| 11 | useStyleTag(` |
| 12 | @page { |
| 13 | size: A4; |
| 14 | margin-top: 1.5cm; |
| 15 | margin-bottom: 1cm; |
| 16 | } |
| 17 | * { |
| 18 | -webkit-print-color-adjust: exact; |
| 19 | } |
| 20 | html, |
| 21 | html body, |
| 22 | html #app, |
| 23 | html #page-root { |
| 24 | height: auto; |
| 25 | overflow: auto !important; |
| 26 | } |
| 27 | `) |
| 28 | |
| 29 | useHead({ |
| 30 | title: `Notes - ${configs.title}`, |
| 31 | }) |
| 32 | |
| 33 | const slidesWithNote = computed(() => slides.value |
| 34 | .map(route => route.meta?.slide) |
| 35 | .filter(slide => slide !== undefined && slide.noteHTML !== '')) |
| 36 | </script> |
| 37 | |
| 38 | <template> |
| 39 | <div id="page-root"> |
| 40 | <div class="m-4"> |
| 41 | <div class="mb-10"> |
| 42 | <h1 class="text-4xl font-bold mt-2"> |
| 43 | {{ configs.title }} |
| 44 | </h1> |
| 45 | <div class="opacity-50"> |
| 46 | {{ new Date().toLocaleString() }} |
| 47 | </div> |
| 48 | </div> |
| 49 | |
| 50 | <div v-for="(slide, index) of slidesWithNote" :key="index" class="flex flex-col gap-4 break-inside-avoid-page"> |
| 51 | <div> |
| 52 | <h2 class="text-lg"> |
| 53 | <div class="font-bold flex gap-2"> |
| 54 | <div class="opacity-50"> |
| 55 | {{ slide?.no }}/{{ total }} |
| 56 | </div> |
| 57 | {{ slide?.title }} |
| 58 | <div class="flex-auto" /> |
| 59 | </div> |
| 60 | </h2> |
| 61 | <NoteDisplay |
| 62 | :note-html="slide!.noteHTML" |
| 63 | class="max-w-full" |
| 64 | /> |
| 65 | </div> |
| 66 | <hr v-if="index < slidesWithNote.length - 1" class="border-main mb-8"> |
| 67 | </div> |
| 68 | </div> |
| 69 | </div> |
| 70 | </template> |
| 71 |