Added food trucks and some data

package.json

@@ -36,6 +36,7 @@
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/tsconfig": "^0.8.1",
+    "clsx": "^2.1.1",
     "eslint": "^9.39.2",
     "eslint-plugin-oxlint": "~1.33.0",
     "eslint-plugin-vue": "~10.6.2",
@@ -44,6 +45,7 @@
     "oxlint": "~1.33.0",
     "prettier": "3.7.4",
     "sass-embedded": "^1.97.0",
+    "tailwind-merge": "^3.4.0",
     "typescript": "~5.9.3",
     "vite": "npm:rolldown-vite@^7.2.11",
     "vite-plugin-vue-devtools": "^8.0.5",

pnpm-lock.yaml

@@ -57,6 +57,9 @@ importers:
       '@vue/tsconfig':
         specifier: ^0.8.1
         version: 0.8.1(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       eslint:
         specifier: ^9.39.2
         version: 9.39.2(jiti@2.6.1)
@@ -81,6 +84,9 @@ importers:
       sass-embedded:
         specifier: ^1.97.0
         version: 1.97.0
+      tailwind-merge:
+        specifier: ^3.4.0
+        version: 3.4.0
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -1025,6 +1031,10 @@ packages:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1883,6 +1893,9 @@ packages:
     resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  tailwind-merge@3.4.0:
+    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+
   tailwindcss@4.1.18:
     resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
 
@@ -2986,6 +2999,8 @@ snapshots:
       readdirp: 4.1.2
     optional: true
 
+  clsx@2.1.1: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -3713,6 +3728,8 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.2.9
 
+  tailwind-merge@3.4.0: {}
+
   tailwindcss@4.1.18: {}
 
   tapable@2.3.0: {}

public/map/icons/truck.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+    <path fill="#fff" transform="scale(0.6)" transform-origin="center" d="M254.07,106.79,208.53,53.73A16,16,0,0,0,196.26,48H32A16,16,0,0,0,16,64V176a16,16,0,0,0,16,16H49a32,32,0,0,0,62,0h50a32,32,0,0,0,62,0h17a16,16,0,0,0,16-16V112A8,8,0,0,0,254.07,106.79ZM32,104V64H88v40Zm48,96a16,16,0,1,1,16-16A16,16,0,0,1,80,200Zm80-96H104V64h56Zm32,96a16,16,0,1,1,16-16A16,16,0,0,1,192,200Zm-16-96V64h20.26l34.33,40Z"></path>
+</svg>

src/App.vue

@@ -33,7 +33,6 @@ const center = ref<PointTuple>([47.809376, -0.637207])
       <LTileLayer
         url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png"
         layer-type="base"
-        name="Stadia Maps Basemap"
       />
 
       <LMarkerClusterGroup :max-cluster-radius="18" :disable-clustering-at-zoom="14">

src/components/ReviewMarker.vue

@@ -3,6 +3,7 @@ import type { ReviewMarker } from '@/models/Markers';
 import { LMarker, LPopup, LIcon } from '@vue-leaflet/vue-leaflet'
 import type { PointTuple } from 'leaflet';
 import { computed, ref } from 'vue';
+import { cn } from '@/lib/cn';
 
 defineProps<{
   marker: ReviewMarker
@@ -25,12 +26,19 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
       </div>
     </LPopup>
 
-    <LIcon :icon-size :icon-anchor :class-name="marker.closed ? 'grayscale' : ''">
+    <LIcon
+      :icon-size
+      :icon-anchor
+      :class-name="cn(
+        { 'grayscale': marker.closed }
+      )"
+    >
       <img v-if="marker.type === 'bar'" src="/map/icons/bar.svg" />
       <img v-if="marker.type === 'bakery'" src="/map/icons/bakery.svg" />
       <img v-if="marker.type === 'tea-shop'" src="/map/icons/tea-shop.svg" />
       <img v-if="marker.type === 'coffee-shop'" src="/map/icons/coffee-shop.svg" />
       <img v-if="marker.type === 'ice-cream'" src="/map/icons/ice-cream.svg" />
+      <img v-if="marker.type === 'food-truck'" src="/map/icons/truck.svg" />
 
       <template v-else-if="marker.type === 'restaurant'">
         <img v-if="marker.food === 'asian'" src="/map/icons/asian.svg" />
@@ -47,23 +55,46 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
 
       <div
         class="absolute -top-2 -right-2 size-5 text-center grid place-items-center rounded-full text-[0.65rem] font-bold tracking-[-0.075em]"
-        :class="{
+        :class="cn(
-          'text-white bg-red-500': marker.reviews?.[0]!.grade! <= 1.5,
+          {
-          'text-black bg-amber-400': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
+            'text-white bg-red-500': marker.reviews?.[0]!.grade! <= 1.5,
-          'text-black bg-lime-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
+            'text-black bg-amber-400': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
-          'text-black bg-green-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.7,
+            'text-black bg-lime-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
-          'text-black bg-sky-400': marker.reviews?.[0]!.grade! >= 4.7
+            'text-black bg-green-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.5,
-        }">
+            'text-black bg-sky-400': marker.reviews?.[0]!.grade! >= 4.5,
+          },
+          marker.type === 'food-truck' && {
+            'bg-red-600': marker.reviews?.[0]!.grade! <= 1.5,
+            'bg-amber-500': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
+            'bg-lime-500': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
+            'bg-green-500': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.5,
+            'bg-sky-400': marker.reviews?.[0]!.grade! >= 4.5,
+          }
+        )"
+      >
         {{ marker.reviews?.[0]!.grade }}
       </div>
 
-      <div class="absolute -z-10 -inset-0.5 rounded-full" :class="{
+      <div
-        'bg-red-500': marker.reviews?.[0]!.grade! <= 1.5,
+        class="absolute -z-10 -inset-0.5 rounded-full"
-        'bg-amber-400': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
+        :class="cn(
-        'bg-lime-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
+          {
-        'bg-green-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.7,
+            'bg-red-500': marker.reviews?.[0]!.grade! <= 1.5,
-        'bg-sky-400': marker.reviews?.[0]!.grade! >= 4.7
+            'bg-amber-400': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
-      }" />
+            'bg-lime-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
+            'bg-green-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.5,
+            'bg-sky-400': marker.reviews?.[0]!.grade! >= 4.5,
+            'bg-slate-800': marker.type === 'food-truck'
+          },
+          marker.type === 'food-truck' && {
+            'border-2 border-red-700': marker.reviews?.[0]!.grade! <= 1.5,
+            'border-2 border-amber-600': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
+            'border-2 border-lime-600': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
+            'border-2 border-green-600': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.5,
+            'border-2 border-sky-500': marker.reviews?.[0]!.grade! >= 4.5,
+          }
+        )"
+        />
     </LIcon>
   </LMarker>
 </template>

src/lib/cn.ts

@@ -0,0 +1,4 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))

src/models/Markers.ts

@@ -1,7 +1,7 @@
 import type { PointTuple } from "leaflet"
 
-export type ReviewType = "restaurant" | "bar" | "bakery" | "tea-shop" | "coffee-shop" | "ice-cream"
+export type ReviewType = "restaurant" | "bar" | "bakery" | "tea-shop" | "coffee-shop" | "ice-cream" | "food-truck"
-export type FoodType = "mixed" | "asian" | "creole" | "vegetarian" | "italian" | "fast-food" | "street-food" | "burgers" | "seafood" | "creperie" | "eastern"
+export type FoodType = "mixed" | "asian" | "creole" | "vegetarian" | "italian" | "fast-food" | "street-food" | "burgers" | "seafood" | "creperie" | "eastern" | "south-american"
 
 export interface DefaultMarker {
   coords: PointTuple
@@ -13,6 +13,7 @@ export interface ReviewMarker extends DefaultMarker {
   food?: FoodType
   reviews?: Review[]
   closed?: boolean
+  url?: string
 }
 
 export interface Review {

src/stores/reviews.ts

@@ -486,6 +486,18 @@ const markers: ReviewMarker[] = [
         }
       ]
     },
+    {
+      title: "Saveurs Afghanes",
+      coords: [48.110418451272935, -1.6586173600574508],
+      type: "restaurant",
+      food: "eastern",
+      reviews: [
+        {
+          grade: 5.0,
+          text: "Choquant rapport qualité-prix, cuisine extrêmement bien épicée, saveurs impeccables. Un restaurant à ne rater sous aucun prétexte à Rennes."
+        }
+      ]
+    },
     {
       title: "Fox and Friends",
       coords: [48.11215429073604, -1.6830048833083207],
@@ -1231,7 +1243,8 @@ const markers: ReviewMarker[] = [
       food: "eastern",
       reviews: [
         {
-          grade: 4.4
+          grade: 4.5,
+          text: "Un des meilleurs restaurant de street-food à Rennes, la qualité de la viande de poulet est incroyable. Le personnel est également très gentil."
         }
       ]
     },
@@ -1401,6 +1414,20 @@ const markers: ReviewMarker[] = [
         }
       ]
     },
+    // Food trucks
+    {
+      title: "Saveurs d'Argentine",
+      coords: [48.11820894564772, -1.6038506613892152],
+      type: "food-truck",
+      food: "south-american",
+      url: "https://www.instagram.com/saveursdargentine/",
+      reviews: [
+        {
+          grade: 4.0,
+          text: "Les empanadas ont un excellent rapport qualité prix et c'est fait maison."
+        }
+      ]
+    }
   ]
 
   return { markers }