Release v0.2.33.

Redesign the 404 page.

Redesign the error page.

Handle missing scopes.

Move the dialogs to a proper folder.

Move book components to a proper folder.

Redesign the dashboard settings page.

Remove logging in useMarkdown.

Fix wrong ref accessing in BookTabs.

Add book navigation.

Fix document title not changing in the book page.

Change the wrong typography.

Add hover animation on book carousel.

Add underline on hover author link.

Bump the version to release.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "toshokan",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "private": true,
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -48,7 +48,7 @@ import { useI18n } from 'vue-i18n'
 import { MutationTypes } from '@/store'
 
 import LoadingSpinIcon from '@/components/icons/LoadingSpinIcon.vue'
-import ReloadDialog from '@/components/ReloadDialog.vue'
+import ReloadDialog from '@/components/dialogs/ReloadDialog.vue'
 
 export default {
   components: {

src/components/DashboardFooter.vue

@@ -48,7 +48,7 @@ import { useI18n } from 'vue-i18n'
 
 import { CurrencyDollarIcon } from '@heroicons/vue/outline'
 
-import DonationDialog from '@/components/DonationDialog.vue'
+import DonationDialog from '@/components/dialogs/DonationDialog.vue'
 import GitHubIcon from '@/components/icons/GitHubIcon.vue'
 
 import useAppInfo from '@/composables/useAppInfo'

src/components/BookCarousel.vue → src/components/book/BookCarousel.vue

@@ -24,12 +24,12 @@
 
       <router-link
         v-if="buttonText && buttonLink"
-        class="button is-ghost -mr-3 hidden md:flex"
+        class="button is-ghost -mr-3 hidden md:flex group"
         :to="buttonLink"
       >
         {{ buttonText }}
         <span aria-hidden="true">
-          <ArrowSmRightIcon class="is-right" />
+          <ArrowSmRightIcon class="is-right motion-safe:transition-transform group-hover:translate-x-1" />
         </span>
       </router-link>
     </div>
@@ -61,7 +61,7 @@ import { useStore } from 'vuex'
 
 import { ArrowSmRightIcon } from '@heroicons/vue/solid'
 
-import BookCard from '@/components/BookCard.vue'
+import BookCard from '@/components/book/BookCard.vue'
 
 export default {
   name: 'LastAddedBooks',

src/components/BookCover.vue → src/components/book/BookCover.vue

@@ -27,17 +27,7 @@
           class="absolute bottom-0 hidden md:flex justify-center translate-y-1/2"
           aria-hidden="true"
         >
-          <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-600 rounded-md inline-flex divide-x divide-gray-200 dark:divide-gray-600">
-            <span class="py-1 px-1.5 flex items-center justify-center" v-if="country">
-              <img :src="country.flagUrl" class="w-6 h-6 p-px">
-            </span>
-            <span class="py-1 px-1.5" v-if="isRead">
-              <BookmarkIcon class="w-6 h-6 text-primary-600 dark:text-primary-500" />
-            </span>
-            <span class="py-1 px-1.5" v-if="isFavorite">
-              <StarIcon class="w-6 h-6 text-amber-500 dark:text-amber-300" />
-            </span>
-          </div>
+          <BookNavigator :book="book" :collection="collection" />
         </div>
       </transition>
 
@@ -110,7 +100,8 @@ import { useI18n } from 'vue-i18n'
 import { BookOpenIcon } from '@heroicons/vue/outline'
 import { BookmarkIcon, StarIcon, ZoomInIcon } from '@heroicons/vue/solid'
 
-import BookCoverDialog from '@/components/BookCoverDialog.vue'
+import BookCoverDialog from '@/components/dialogs/BookCoverDialog.vue'
+import BookNavigator from '@/components/book/BookNavigator.vue'
 
 import useImageLoader from '@/composables/useImageLoader'
 
@@ -123,11 +114,13 @@ export default {
     BookmarkIcon,
     StarIcon,
     ZoomInIcon,
-    BookCoverDialog
+    BookCoverDialog,
+    BookNavigator
   },
 
   props: {
     book: Object,
+    collection: Array,
     loading: Boolean
   },
 

src/components/GridBooks.vue → src/components/book/BookGrid.vue

@@ -130,8 +130,8 @@ import { useI18n } from 'vue-i18n'
 
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
 
-import BookCard from './BookCard.vue'
-import Paginator from './Paginator.vue'
+import BookCard from '@/components/book/BookCard.vue'
+import Paginator from '@/components/Paginator.vue'
 
 export default {
   name: 'GridBooks',

src/components/BookInformation.vue → src/components/book/BookInformation.vue

@@ -249,7 +249,7 @@ import {
 } from '@heroicons/vue/outline'
 
 import Avatar from '@/components/Avatar.vue'
-import BookBreadcrumb from '@/components/BookBreadcrumb.vue'
+import BookBreadcrumb from '@/components/book/BookBreadcrumb.vue'
 
 import { convertIsbn13ToIsbn10, getIsbnCountry } from '@/util/isbn'
 import getBookLinks from '@/services/links'
@@ -456,6 +456,11 @@ export default {
   @apply dark:ring-offset-gray-900;
 }
 
+.author:hover {
+  @apply underline underline-offset-1 decoration-2
+    decoration-primary-600 dark:decoration-primary-400;
+}
+
 .owner-badge {
   @apply flex items-center space-x-3 sm:w-64 rounded-md
     px-2.5 py-2 border border-gray-200 dark:border-gray-700;

src/components/book/BookNavigator.vue

@@ -0,0 +1,101 @@
+<template>
+  <nav class="">
+    <ul class="font-medium text-sm flex divide-x dark:divide-gray-700 dark:text-gray-300">
+      <li v-if="previous">
+        <router-link
+          :class="[
+            !next ? 'rounded-full pr-5' : 'rounded-l-full pr-2.5',
+            'bg-white dark:bg-gray-800 group shadow-md flex items-center py-1.5 pl-2.5 navigation-link previous has-ring-focus'
+          ]"
+          :to="{ name: 'BookDetails', params: { bookId: previous.id } }"
+        >
+          <span aria-hidden="true">
+            <ChevronLeftIcon class="w-5 h-5 mr-2" />
+          </span>
+          <span>{{ t('pagination.previous') }}</span>
+        </router-link>
+      </li>
+      <li v-if="next">
+        <router-link
+          :class="[
+            !previous ? 'rounded-full pl-5' : 'rounded-r-full pl-2.5',
+            'bg-white dark:bg-gray-800 group shadow-md flex items-center py-1.5 pr-2.5 navigation-link next has-ring-focus'
+          ]"
+          :to="{ name: 'BookDetails', params: { bookId: next.id } }"
+        >
+          <span>{{ t('pagination.next') }}</span>
+          <span aria-hidden="true">
+            <ChevronRightIcon class="w-5 h-5 ml-2" />
+          </span>
+        </router-link>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+import { computed, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
+
+export default {
+  components: { ChevronLeftIcon, ChevronRightIcon },
+
+  props: {
+    book: Object,
+    collection: Array
+  },
+
+  setup(props) {
+    const { book, collection } = toRefs(props)
+
+    const bookIdx = computed(() => {
+      return collection.value.findIndex(colItem => colItem.id === book.value.id)
+    })
+
+    const previous = computed(() => {
+      const previousIdx = bookIdx.value - 1
+
+      return previousIdx >= 0
+        ? collection.value[previousIdx]
+        : null
+    })
+
+    const next = computed(() => {
+      const nextIdx = bookIdx.value + 1
+
+      return nextIdx < collection.value.length
+        ? collection.value[nextIdx]
+        : null
+    })
+
+    const { t } = useI18n()
+
+    return { previous, next, t }
+  }
+}
+</script>
+
+<style lang="postcss" scoped>
+.navigation-link:hover {
+  @apply underline underline-offset-1 decoration-2 dark:text-gray-100
+    decoration-primary-600 dark:decoration-primary-400;
+}
+
+.navigation-link svg {
+  @apply motion-safe:transition-transform;
+}
+
+.navigation-link:hover svg {
+  @apply text-primary-600 dark:text-primary-300;
+}
+
+.navigation-link.previous:hover svg {
+  @apply -translate-x-0.5;
+}
+
+.navigation-link.next:hover svg {
+  @apply translate-x-0.5;
+}
+</style>

src/components/BookProviderSearch.vue → src/components/book/BookProviderSearch.vue

@@ -136,7 +136,7 @@ import { useI18n } from 'vue-i18n'
 import { SearchIcon } from '@heroicons/vue/solid'
 
 import Alert from '@/components/Alert.vue'
-import BookSelector from '@/components/BookSelector.vue'
+import BookSelector from '@/components/book/BookSelector.vue'
 
 import useBookInserter from '@/composables/useBookInserter'
 import useIsbnSearch from '@/composables/useIsbnSearch'

src/components/TableBooks.vue → src/components/book/BookTable.vue

@@ -163,7 +163,7 @@ import { useI18n } from 'vue-i18n'
 import { ArrowSmDownIcon, ArrowSmUpIcon } from '@heroicons/vue/outline'
 import { DotsHorizontalIcon } from '@heroicons/vue/solid'
 
-import Paginator from './Paginator.vue'
+import Paginator from '@/components/Paginator.vue'
 
 import { BookStatus as BaseBookStatus } from '@/model/Book'
 

src/components/BookTabs.vue → src/components/book/BookTabs.vue

@@ -155,7 +155,7 @@ import { useI18n } from 'vue-i18n'
 import { TrendingDownIcon, TrendingUpIcon } from '@heroicons/vue/solid'
 import { Tab, TabGroup, TabList, TabPanels, TabPanel } from '@headlessui/vue'
 
-import BookCard from '@/components/BookCard.vue'
+import BookCard from '@/components/book/BookCard.vue'
 
 import useMarkdown from '@/composables/useMarkdown'
 
@@ -199,7 +199,7 @@ export default {
     })
 
     const filteredCollection = computed(() => {
-      if (!showBookInfo.value || !collection.value || collection.length === 0) {
+      if (!showBookInfo.value || !collection.value || collection.value.length === 0) {
         return []
       }
 

src/components/BookCoverDialog.vue → src/components/dialogs/BookCoverDialog.vue

@@ -56,6 +56,7 @@
 </template>
 
 <script>
+import { inject, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import {
@@ -67,7 +68,6 @@ import {
 } from '@headlessui/vue'
 
 import { XIcon } from '@heroicons/vue/solid'
-import { inject, toRefs, watch } from 'vue-demi'
 
 export default {
   components: {

src/components/BookCreateDialog.vue → src/components/dialogs/BookCreateDialog.vue

@@ -298,9 +298,9 @@ import {
 } from '@heroicons/vue/outline'
 
 import Avatar from '@/components/Avatar.vue'
-import BookCoverSelector from '@/components/BookCoverSelector.vue'
-import BookForm from '@/components/BookForm.vue'
-import BookProviderSearch from '@/components/BookProviderSearch.vue'
+import BookCoverSelector from '@/components/book/BookCoverSelector.vue'
+import BookForm from '@/components/book/BookForm.vue'
+import BookProviderSearch from '@/components/book/BookProviderSearch.vue'
 import BulletSteps from '@/components/BulletSteps.vue'
 import DescriptionList from '@/components/DescriptionList.vue'
 import LoadingIndicator from '@/components/LoadingIndicator.vue'

src/components/BookEditDialog.vue → src/components/dialogs/BookEditDialog.vue

@@ -164,10 +164,10 @@ import {
 import { CheckIcon, XIcon } from '@heroicons/vue/solid'
 
 import Avatar from '@/components/Avatar.vue'
-import BookCoverSelector from '@/components/BookCoverSelector.vue'
-import BookForm from '@/components/BookForm.vue'
-import BookOrganization from '@/components/BookOrganization.vue'
-import BookReading from '@/components/BookReading.vue'
+import BookCoverSelector from '@/components/book/BookCoverSelector.vue'
+import BookForm from '@/components/book/BookForm.vue'
+import BookOrganization from '@/components/book/BookOrganization.vue'
+import BookReading from '@/components/book/BookReading.vue'
 
 import cloneDeep from 'lodash.clonedeep'
 

src/components/DisconnectModal.vue → src/components/dialogs/DisconnectDialog.vue

@@ -11,7 +11,7 @@
           leave-from="opacity-100"
           leave-to="opacity-0"
         >
-          <DialogOverlay class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-90 transition-opacity backdrop-blur-sm" />
+          <DialogOverlay class="dialog-overlay" />
         </TransitionChild>
 
         <!-- This element is to trick the browser into centering the modal contents. -->
@@ -25,7 +25,7 @@
           leave-from="opacity-100 translate-y-0 sm:scale-100"
           leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
-          <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+          <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full z-50 relative">
             <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
               <div class="sm:flex sm:items-start">
                 <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-gray-700 sm:mx-0 sm:h-10 sm:w-10" aria-hidden="true">

src/composables/useMarkdown.js

@@ -10,8 +10,6 @@ function youtube (md) {
     const token = tokens[idx]
     const aIndex = token.attrIndex('src')
 
-    console.log(token.content)
-
     if (youtubeRegex.test(token.attrs[aIndex][1])) {
       const id = token.attrs[aIndex][1].match(youtubeRegex)[5]