share types and fix linter errors

TODO.md

@@ -3,7 +3,7 @@
 - [x] use bun package manager
 - [x] use nuxt framework
 - [x] rewrite the random page, the current landing page
-- [ ] rewrite the recipe page
+- [x] rewrite the recipe page
 - [ ] deploy
 - [ ] nuxt image
 - [x] prettier and eslint

components/recipe/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-const props = defineProps<{
-  recipe: Recipe;
-}>();
+import type { Recipe } from "~/types/recipe";
+
+defineProps<{ recipe: Recipe }>();
 </script>
 
 <template>

components/recipe/ingredients.vue

@@ -9,13 +9,13 @@ defineProps<{
     <table class="table table-s table-pin-rows table-pin-cols">
       <thead>
         <tr>
-          <th></th>
+          <th />
           <td>Ingredient</td>
           <td>Quantity</td>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(ingredient, i) in ingredients">
+        <tr v-for="(ingredient, i) in ingredients" :key="i">
           <th>{{ i + 1 }}</th>
           <td>{{ ingredient.name }}</td>
           <td>{{ ingredient.quantity }}</td>

composables/useRecipe.ts

@@ -1,14 +1,7 @@
-type Recipe = {
-  title: string;
-  pictureUrl: string;
-  videoUrl: string;
-  category: string;
-  origin: string;
-  ingredients: { name: string; quantitiy: number };
-  instructions: string;
-};
+import type { Recipe } from "~/types/recipe";
 
 type Keyword = "random" | "filter" | "lookup" | "search";
+
 export default async function (keyword: Keyword, param?: string) {
   const { data, pending, error } = await useAsyncData(
     keyword,
@@ -40,16 +33,14 @@ export default async function (keyword: Keyword, param?: string) {
 
   const tmp = computed(() => data.value?.meals?.[0]);
 
-  let names = [];
-  let quantities = [];
-  let i = 0;
+  const names: string[] = [];
+  const quantities: number[] = [];
   for (const [k, v] of Object.entries(tmp.value)) {
     if (k.startsWith("strIngredient") && !!v) {
       names.push(v);
     } else if (k.startsWith("strMeasure") && !!v) {
       quantities.push(v);
     }
-    i++;
   }
 
   const recipe = reactive<Recipe>({

nuxt.config.ts

@@ -11,7 +11,7 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     // The private keys which are only available server-side
-    apiUrl: process.env.API_URL,
+    apiUrl: "",
     // Keys within public are also exposed client-side
     public: {},
   },

package.json

@@ -26,6 +26,7 @@
     "daisyui": "^4.10.2",
     "postcss": "^8.4.38",
     "prettier": "3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "tailwindcss": "^3.4.3"
   }
 }

types/recipe.ts

@@ -0,0 +1,9 @@
+export type Recipe = {
+  title: string;
+  pictureUrl: string;
+  videoUrl: string;
+  category: string;
+  origin: string;
+  ingredients: { name: string; quantity: number }[];
+  instructions: string;
+};