ref: kebab-case

TODO.md

@@ -12,7 +12,7 @@
 - [ ] seo, robots.txt
 - [x] update the README
 - [ ] create image provider
-- [ ] fetch recipe per id
+- [x] fetch recipe per id
 - [ ] add mood section
   - [ ] store recipes into my db (SQLite)
   - [ ] process them using AI

components/recipe/card.vue

@@ -12,17 +12,17 @@ defineProps<{
   <div class="card-body items-center text-center bg-base-200">
     <h2 class="card-title">{{ title }}</h2>
     <figure class="px-10 py-5">
-      <NuxtImg :src="pictureUrl" alt="Shoes" class="rounded-xl" />
+      <nuxt-img :src="pictureUrl" alt="Recipe picture" />
     </figure>
     <div class="card-actions space-between">
-      <NuxtLink class="badge badge-outline" :to="videoUrl">
-        <Icon name="cib:youtube" color="red" />
-      </NuxtLink>
+      <nuxt-link :to="videoUrl" target="_blank">
+        <icon name="cib:youtube" color="red" />
+      </nuxt-link>
       <div class="badge badge-secondary">
-        <Icon name="cil:apple" /> {{ category }}
+        <icon name="cil:apple" /> {{ category }}
       </div>
       <div class="badge badge-secondary">
-        <Icon name="cil:location-pin" /> {{ origin }}
+        <icon name="cil:location-pin" /> {{ origin }}
       </div>
     </div>
   </div>

components/recipe/view.vue

@@ -9,7 +9,7 @@ defineProps<{ recipe: Recipe }>();
     <div class="flex flex-col lg:flex-row lg:justify-start gap-6 py-4">
       <div class="w-full lg:w-[480px]">
         <div class="card bg-base-100 shadow-xl mx-auto lg:mx-0">
-          <RecipeCard
+          <recipe-card
             :title="recipe.title"
             :picture-url="recipe.pictureUrl"
             :video-url="recipe.videoUrl"
@@ -20,7 +20,7 @@ defineProps<{ recipe: Recipe }>();
       </div>
 
       <div class="w-full lg:w-[480px]">
-        <RecipeIngredients :ingredients="recipe.ingredients" />
+        <recipe-ingredients :ingredients="recipe.ingredients" />
       </div>
     </div>
 

pages/[id].vue

@@ -46,6 +46,6 @@ useSeoMeta({
     />
   </div>
   <section v-else>
-    <Recipe :recipe="recipe!" />
+    <recipe-view :recipe="recipe!" />
   </section>
 </template>