fix(Reuses page): add images to repo. Add tags. Add alert to push new…

… reuses. ref #1032

src/components/ReuseCard.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-card class="fill-height">
+    <v-img :src="reuse.background_image_url" height="200px" cover />
+    <v-card-title>{{ reuse.name }}</v-card-title>
+    <v-card-text>{{ reuse.description }}</v-card-text>
+    <div class="px-4 mb-2">
+      <v-chip v-for="tag in reuse.tags" :key="tag" class="mr-1" density="comfortable">
+        {{ tag }}
+      </v-chip>
+      <!-- <v-chip v-if="reuse.author" class="mr-1" density="comfortable" prepend-icon="mdi-account">{{ reuse.author }}</v-chip> -->
+      <v-chip v-if="reuse.date" density="comfortable" prepend-icon="mdi-clock-outline">
+        {{ reuse.date }}
+      </v-chip>
+    </div>
+    <v-card-actions>
+      <v-btn color="primary" append-icon="mdi-open-in-new" :href="reuse.url" target="_blank" :title="$t('Common.View')">
+        {{ $t('Common.View') }}
+      </v-btn>
+      <v-spacer />
+      <v-btn v-if="reuse.code_url" icon="mdi-xml" :href="reuse.code_url" target="_blank" :title="$t('Common.SourceCode')" />
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    reuse: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>

src/constants.js

@@ -25,6 +25,7 @@ export default {
   APP_DUMP_PROOFS_URL: `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/data/proofs.jsonl.gz`,
   APP_DUMP_LOCATIONS_URL: `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/data/locations.jsonl.gz`,
   APP_GITHUB_FRONTEND_URL: 'https://github.com/openfoodfacts/open-prices-frontend',
+  APP_GITHUB_REUSE_DISCUSSION_URL: 'https://github.com/openfoodfacts/open-prices/discussions/562',
   THEME_LIGHT_ICON: 'mdi-white-balance-sunny',
   THEME_DARK_ICON: 'mdi-moon-waning-crescent',
   // OFF

src/data/reuses.json

@@ -2,39 +2,43 @@
     {
         "name": "World map",
         "description": "A world map of all the contributions in Open Prices",
-        "background_image_url": "https://private-user-images.githubusercontent.com/7147385/385477163-f87e57a8-1e04-44c0-b48f-cf88c0d515ff.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzE0NDg5NTksIm5iZiI6MTczMTQ0ODY1OSwicGF0aCI6Ii83MTQ3Mzg1LzM4NTQ3NzE2My1mODdlNTdhOC0xZTA0LTQ0YzAtYjQ4Zi1jZjg4YzBkNTE1ZmYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MTExMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDExMTJUMjE1NzM5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzIwY2RlZGE0MmViZTYxZjczODU3ZjJmMjhiNzQzMTg0NGU5MmJjZjEyM2M0YTk0YjkxM2U2NmZmOTliM2U2ZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.3u-ijnNPVJvnyWt7S4_VFqaD79YHU3qv-zb1FgVhD9g",
+        "background_image_url": "https://raw.githubusercontent.com/openfoodfacts/open-prices-frontend/master/public/reuses/worldmap.png",
         "url": "https://dmayaux.shinyapps.io/open_prices",
         "code_url": null,
+        "tags": ["API"],
         "date": "2024",
         "author": "Damien",
         "display": true
     },
     {
         "name": "Le prix des carottes",
         "description": "Simple price index of fruits and vegetables (in french)",
-        "background_image_url": "https://private-user-images.githubusercontent.com/7147385/385477402-95734480-d862-4156-a8c7-cae83c747f77.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzE0NDg5NTksIm5iZiI6MTczMTQ0ODY1OSwicGF0aCI6Ii83MTQ3Mzg1LzM4NTQ3NzQwMi05NTczNDQ4MC1kODYyLTQxNTYtYThjNy1jYWU4M2M3NDdmNzcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MTExMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDExMTJUMjE1NzM5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODAzZTkzNzA5NTA3OWE0YjkwNDJkOGYzYjdkOGM2N2RlMTVkMTI3NmE4NGRmZGZkOGFkMDAzZTA5OGUzYjdjYyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.TeWMljQq479eJIuiO-dfOHsk074duCLoqZhKe74JcjY",
+        "background_image_url": "https://raw.githubusercontent.com/openfoodfacts/open-prices-frontend/master/public/reuses/leprixdescarottes.png",
         "url": "https://leprixdescarottes.fr",
         "code_url": "https://github.com/TTalex/leprixdescarottes",
+        "tags": ["API"],
         "date": "2024-10",
         "author": "Alex",
         "display": true
     },
     {
         "name": "Do you want your receipt?",
         "description": "Compare prices between 2 shops",
-        "background_image_url": "https://private-user-images.githubusercontent.com/7147385/385477580-643bf97c-818e-4138-9eb8-dfaf02470a81.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzE0NDg5NTksIm5iZiI6MTczMTQ0ODY1OSwicGF0aCI6Ii83MTQ3Mzg1LzM4NTQ3NzU4MC02NDNiZjk3Yy04MThlLTQxMzgtOWViOC1kZmFmMDI0NzBhODEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MTExMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDExMTJUMjE1NzM5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTA1NThlMTAyY2VhMGNiN2I4Y2IwYWRkYzAxMGU3OGJhNWYxZTUxOGMxODc2NWEzNTE2NGQ3YWZjOTYwZWZjZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.JqLNL35NN5ftnz1_LOW9UfjoQlasFVuasmNpVKoVjpk",
+        "background_image_url": "https://raw.githubusercontent.com/openfoodfacts/open-prices-frontend/master/public/reuses/doyouwantyourreceipt.png",
         "url": "https://www.doyouwantyourreceipt.info",
         "code_url": "https://github.com/qloridant/shop_prices_comparaison",
+        "tags": ["API"],
         "date": "2024-11",
         "author": "Quentin",
         "display": true
     },
     {
         "name": "Product price evolution",
         "description": null,
-        "background_image_url": "https://private-user-images.githubusercontent.com/7147385/385477891-82e982a3-7200-4f3d-8507-ccaef1d8babe.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzE0NDg5NTksIm5iZiI6MTczMTQ0ODY1OSwicGF0aCI6Ii83MTQ3Mzg1LzM4NTQ3Nzg5MS04MmU5ODJhMy03MjAwLTRmM2QtODUwNy1jY2FlZjFkOGJhYmUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MTExMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDExMTJUMjE1NzM5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YmE2MTRkOTBkNWQ4YzcyOTJkMWM5N2ZjMDgwOTliMWE2NDI4Y2QxNGVmYWViZThlNWQ2N2Q4ZGY4MDJkZTE5ZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.feRXYRmPJ9sHCKZQvIei4ECepESL12d-XarV69A0d58",
+        "background_image_url": "https://raw.githubusercontent.com/openfoodfacts/open-prices-frontend/master/public/reuses/productpriceevolution.png",
         "url": "https://project.med3d.eu/fooddata/price_plot.html?ean=5000159451666",
         "code_url": null,
+        "tags": ["API"],
         "date": "2024",
         "author": null,
         "display": true

src/i18n/locales/en.json

@@ -249,6 +249,7 @@
 		"SideMenu": "Side menu",
 		"Share": "Share",
 		"Source": "Source",
+		"SourceCode": "Source code",
 		"Stats": "Stats",
 		"TaglineOriginal": "An open crowdsourced database of food prices",
 		"TaglineAlt1": "The open crowdsourced database of prices",
@@ -454,6 +455,10 @@
 		"Save": "Save",
 		"Success": "Proof edited!"
 	},
+	"Reuses": {
+		"AlertNew": "Your reuse is missing? Let us know {url}!",
+		"Here": "here"
+	},
 	"Router": {
 		"About": {
 			"Title": "About"

src/views/Reuses.vue

@@ -1,26 +1,41 @@
 <template>
   <v-row>
     <v-col v-for="reuse in reusesList" :key="reuse.id" cols="12" sm="6" md="4" xl="3">
-      <v-card class="fill-height">
-        <v-img :src="reuse.background_image_url" height="200px" cover />
-        <v-card-title>{{ reuse.name }}</v-card-title>
-        <v-card-text>{{ reuse.description }}</v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" append-icon="mdi-open-in-new" :href="reuse.url" target="_blank" title="View">
-            View
-          </v-btn>
-          <v-spacer />
-          <v-btn v-if="reuse.code_url" icon="mdi-xml" :href="reuse.code_url" target="_blank" title="Source code" />
-        </v-card-actions>
-      </v-card>
+      <ReuseCard :reuse="reuse" />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col>
+      <v-alert
+        class="mb-2"
+        type="info"
+        variant="outlined"
+      >
+        <i18n-t keypath="Reuses.AlertNew" tag="span">
+          <template #url>
+            <a :href="APP_GITHUB_REUSE_DISCUSSION_URL" target="_blank">{{ $t('Reuses.Here') }}</a>
+          </template>
+        </i18n-t>
+      </v-alert>
     </v-col>
   </v-row>
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue'
 import Reuses from '../data/reuses.json'
+import constants from '../constants'
 
 export default {
+  components: {
+    ReuseCard: defineAsyncComponent(() => import('../components/ReuseCard.vue')),
+  },
+  data() {
+    return {
+      APP_GITHUB_REUSE_DISCUSSION_URL: constants.APP_GITHUB_REUSE_DISCUSSION_URL,
+    }
+  },
   computed: {
     reusesList() {
       return Reuses.filter(r => r.display)