From a7ed17240c72fca0561a121429d288cb1fb57a92 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Thu, 22 Feb 2024 22:35:27 +0100
Subject: [PATCH] Implement back bookmarks

---
 src/middleware/redirect.global.ts |  2 +-
 src/pages/bookmarks.vue           | 70 +++++++++++++++----------------
 src/pages/talents.vue             |  2 +-
 types.ts                          |  4 +-
 4 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/src/middleware/redirect.global.ts b/src/middleware/redirect.global.ts
index f6c0a5e..5a70fb1 100644
--- a/src/middleware/redirect.global.ts
+++ b/src/middleware/redirect.global.ts
@@ -1,6 +1,6 @@
 /* eslint-disable node/prefer-global/process */
 export default defineNuxtRouteMiddleware((to) => {
-  if (to.path === '/bookmarks' || to.path === '/writing' && process.env.NODE_ENV !== 'development') {
+  if (to.path === '/writing' && process.env.NODE_ENV !== 'development') {
     return navigateTo('/', {
       redirectCode: 301,
     })
diff --git a/src/pages/bookmarks.vue b/src/pages/bookmarks.vue
index f5c4da8..be518f9 100644
--- a/src/pages/bookmarks.vue
+++ b/src/pages/bookmarks.vue
@@ -99,49 +99,47 @@ function getColor() {
         </template>
       </UPopover>
     </div>
-    <div v-if="bookmarks && getCategories" class="mt-8 md:mt-16">
-      <div v-if="bookmarks.length > 0 && !pending" class="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
+    <div v-if="bookmarks && getCategories" class="mt-8">
+      <div v-if="bookmarks.length > 0 && !pending" class="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 md:grid-cols-3">
         <div
           v-for="bookmark in bookmarks"
           :key="bookmark.name.toLowerCase().trim()"
-          class="group relative flex flex-col justify-between"
+          class="group relative flex justify-between items-center"
         >
-          <div class="flex">
+          <div class="flex flex-col gap-y-1">
             <div class="flex gap-6 items-center">
-              <div>
-                <h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
-                  <div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
-                  <NuxtLink
-                    :href="bookmark.website"
-                    external
-                    target="_blank"
-                  >
-                    <span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
-                    <div class="flex gap-2 items-center">
-                      <h1 class="relative z-10">
-                        {{ bookmark.name }}
-                      </h1>
-                      <UTooltip v-if="bookmark.favorite" text="You can set the filter to only show favorites.">
-                        <UIcon name="i-ic-round-star" class="z-20 text-amber-500 text-xl font-bold hover:rotate-[143deg] duration-300" />
-                      </UTooltip>
-                    </div>
-                  </NuxtLink>
-                </h2>
-              </div>
+              <h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
+                <div class="absolute -inset-y-2 md:-inset-y-4 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
+                <NuxtLink
+                  :href="bookmark.website"
+                  external
+                  target="_blank"
+                >
+                  <span class="absolute -inset-y-2 md:-inset-y-4 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
+                  <div class="flex gap-2 items-center">
+                    <h1 class="relative z-10">
+                      {{ bookmark.name }}
+                    </h1>
+                    <UTooltip v-if="bookmark.favorite" text="You can set the filter to only show favorites.">
+                      <UIcon name="i-ic-round-star" class="z-20 text-amber-500 text-xl font-bold hover:rotate-[143deg] duration-300" />
+                    </UTooltip>
+                  </div>
+                </NuxtLink>
+              </h2>
+            </div>
+            <div class="flex gap-2 z-10">
+              <UBadge
+                v-for="category in bookmark.categories"
+                :key="category.category.slug"
+                color="primary"
+                variant="soft"
+                size="xs"
+              >
+                {{ category.category.name }}
+              </UBadge>
             </div>
           </div>
-          <div class="flex gap-2 z-10">
-            <UBadge
-              v-for="category in bookmark.categories"
-              :key="category.category.slug"
-              color="primary"
-              variant="soft"
-              size="xs"
-            >
-              {{ category.category.name }}
-            </UBadge>
-          </div>
-          <p class="relative z-10 mt-4 flex text-sm font-medium items-center" :class="getColor()">
+          <p class="relative z-10 flex text-sm font-medium items-center" :class="getColor()">
             <UIcon name="i-ph-link-bold" />
             <span class="ml-2">{{ bookmark.website.replace('https://', '') }}</span>
           </p>
diff --git a/src/pages/talents.vue b/src/pages/talents.vue
index 71c2b61..0f91824 100644
--- a/src/pages/talents.vue
+++ b/src/pages/talents.vue
@@ -190,7 +190,7 @@ async function suggest() {
       </UPopover>
     </div>
     <UDivider class="my-2" />
-    <div v-if="talents && getCategories" class="mt-8 md:mt-16">
+    <div v-if="talents && getCategories" class="mt-8">
       <div v-if="talents.length > 0 && !pending" class="grid grid-cols-1 gap-y-4 md:gap-x-12 md:gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
         <div
           v-for="talent in talents"
diff --git a/types.ts b/types.ts
index 48b2da2..85ea590 100644
--- a/types.ts
+++ b/types.ts
@@ -104,11 +104,11 @@ export const otherTab = [
       to: '/guestbook',
       icon: 'i-material-symbols-book-2-outline',
     },
-    /* {
+    {
       label: 'Bookmarks',
       to: '/bookmarks',
       icon: 'i-material-symbols-bookmark-add-outline-rounded',
-    }, */
+    },
   ],
 ]