| 1 | <script setup lang="ts"> |
| 2 | import { computed } from 'vue' |
| 3 | import { useRouter } from 'vue-router' |
| 4 | import { useNav } from '../composables/useNav' |
| 5 | |
| 6 | const RE_DIGITS = /\d+/ |
| 7 | |
| 8 | const { currentRoute } = useRouter() |
| 9 | const { total } = useNav() |
| 10 | |
| 11 | const guessedSlide = computed(() => { |
| 12 | const path = currentRoute.value.path |
| 13 | const match = path.match(RE_DIGITS) |
| 14 | if (match) { |
| 15 | const slideNo = +match[0] |
| 16 | if (slideNo > 0 && slideNo <= total.value) |
| 17 | return slideNo |
| 18 | } |
| 19 | return null |
| 20 | }) |
| 21 | </script> |
| 22 | |
| 23 | <template> |
| 24 | <div class="grid justify-center text-center pt-15% gap-5"> |
| 25 | <div> |
| 26 | <h1 class="text-9xl font-light"> |
| 27 | 404 |
| 28 | </h1> |
| 29 | <p class="text-2xl"> |
| 30 | Page <code class="op-60">{{ currentRoute.path }}</code> not found |
| 31 | </p> |
| 32 | </div> |
| 33 | <div class="mt-3 flex flex-col gap-2 max-w-xs mx-auto w-full"> |
| 34 | <RouterLink v-if="guessedSlide !== 1" to="/" class="page-link"> |
| 35 | Go Home |
| 36 | </RouterLink> |
| 37 | <RouterLink v-if="guessedSlide" :to="`/${guessedSlide}`" class="page-link"> |
| 38 | Go to Slide {{ guessedSlide }} |
| 39 | </RouterLink> |
| 40 | </div> |
| 41 | </div> |
| 42 | </template> |
| 43 | |
| 44 | <style scoped lang="postcss"> |
| 45 | .page-link { |
| 46 | @apply py-2 px-4 bg-gray/10 hover:bg-gray/20 rounded; |
| 47 | } |
| 48 | </style> |
| 49 |