Add cookie for like and use valibot

package.json

@@ -25,7 +25,7 @@
     "superjson": "1.13.1",
     "tailwindcss": "3.3.3",
     "trpc-nuxt": "0.10.7",
-    "zod": "3.22.1"
+    "valibot": "^0.12.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "0.39.8",

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) {

yarn.lock

@@ -9577,6 +9577,11 @@ uvu@^0.5.0:
     kleur "^4.0.3"
     sade "^1.7.3"
 
+valibot@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/valibot/-/valibot-0.12.0.tgz#3206191f4af551768bfddf041f40ad3b3d3037df"
+  integrity sha512-EGx/uDUpRa9wB9NkD7fsktc02rvXWlJzDTC/ihbE+NybhzAsMhns2OOdNv2R4BtdGnDvaCEGi/DbgR5RvgCS8A==
+
 validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz"