Add cookie for like and use valibot

src/content/writing/test-2.md

@@ -1,5 +1,5 @@
 ---
-slug: 'test'
+slug: 'test-2'
 title: 'Test'
 description: 'Description de test'
 publishedAt: '06 February 2021'

src/content/writing/test.md

@@ -1,5 +1,5 @@
 ---
-slug: 'test-123-123'
+slug: 'test'
 title: 'Test de titre plus long'
 description: "Description de test, car c'est mieux que l'ancien"
 publishedAt: '7 May 2021'

src/pages/writing/[slug].vue

@@ -30,6 +30,19 @@ const { copy, copied } = useClipboard({
   source: `https://arthurdanjou.fr/writing/${route.params.slug}`,
   copiedDuring: 4000,
 })
+
+const likeCookie = useCookie<boolean>(`post:like:${postContent.value.slug}`, {
+  maxAge: 604_800,
+})
+
+const isLiked = computed(() => {
+  return likeCookie.value === true
+})
+
+async function handleLike() {
+  await like()
+  likeCookie.value = true
+}
 </script>
 
 <template>
@@ -86,13 +99,22 @@ const { copy, copied } = useClipboard({
                 <p class="text-subtitle">
                   Thanks for reading this post! If you liked it, please consider sharing it with your friends. <strong>Don't forget to leave a like!</strong>
                 </p>
+                {{ likeCookie }}
                 <div class="flex gap-4 flex-wrap">
                   <UButton
+                    v-if="isLiked"
+                    :label="`${likes} ${likes > 1 ? 'likes' : 'like'}`"
+                    icon="i-ph-heart-bold"
+                    size="lg"
+                    variant="solid"
+                  />
+                  <UButton
+                    v-else
                     :label="`${likes} ${likes > 1 ? 'likes' : 'like'}`"
                     icon="i-ph-heart-bold"
                     size="lg"
                     variant="soft"
-                    @click.prevent="like()"
+                    @click.prevent="handleLike()"
                   />
                   <UButton
                     label="Go to top"

src/server/trpc/routers/post.ts

@@ -1,8 +1,8 @@
-import { z } from 'zod'
+import { object, string } from 'valibot'
 import { publicProcedure, router } from '~/server/trpc/trpc'
 
-const PostSchema = z.object({
-  slug: z.string(),
+const PostSchema = object({
+  slug: string(),
 })
 
 export default router({

src/server/trpc/routers/talents.ts

@@ -1,11 +1,11 @@
-import { z } from 'zod'
+import { boolean, literal, object, string, union } from 'valibot'
 import { publicProcedure, router } from '~/server/trpc/trpc'
 
 export default router({
   getTalents: publicProcedure
-    .input(z.object({
-      favorite: z.boolean(),
-      category: z.union([z.string(), z.literal('all')]),
+    .input(object({
+      favorite: boolean(),
+      category: union([string(), literal('all')]),
     }))
     .query(async ({ ctx, input }) => {
       if (input.favorite) {