build: switch from yarn to npm to manage js dependencies and move js contents to root
yarn v1 is being deprecated and starts to have some issues Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
29
src/components/Categories/CategoryCard.story.vue
Normal file
29
src/components/Categories/CategoryCard.story.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<Story>
|
||||
<Variant title="Basic">
|
||||
<section class="flex flex-wrap gap-3 md:gap-5">
|
||||
<CategoryCard :category="category" />
|
||||
</section>
|
||||
</Variant>
|
||||
<Variant title="Details">
|
||||
<section class="flex flex-wrap gap-3 md:gap-5">
|
||||
<CategoryCard
|
||||
:category="{ ...category, key: 'OUTDOORS_ADVENTURE' }"
|
||||
:with-details="true"
|
||||
/>
|
||||
</section>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { CategoryStatsModel } from "@/types/stats.model";
|
||||
import { reactive } from "vue";
|
||||
import CategoryCard from "./CategoryCard.vue";
|
||||
|
||||
const category = reactive<CategoryStatsModel>({
|
||||
key: "PHOTOGRAPHY",
|
||||
number: 5,
|
||||
label: "Hello",
|
||||
});
|
||||
</script>
|
||||
83
src/components/Categories/CategoryCard.vue
Normal file
83
src/components/Categories/CategoryCard.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'SEARCH',
|
||||
query: {
|
||||
categoryOneOf: [category.key],
|
||||
contentType: 'EVENTS',
|
||||
radius: undefined,
|
||||
},
|
||||
}"
|
||||
class="max-w-xs rounded-lg overflow-hidden bg-center bg-no-repeat bg-cover shadow-lg relative group"
|
||||
>
|
||||
<picture
|
||||
v-if="categoriesWithPictures.includes(category.key)"
|
||||
class="brightness-50"
|
||||
>
|
||||
<source
|
||||
:srcset="`/img/categories/${category.key.toLowerCase()}.webp 2x, /img/categories/${category.key.toLowerCase()}.webp`"
|
||||
media="(min-width: 1000px)"
|
||||
/>
|
||||
<source
|
||||
:srcset="`/img/categories/${category.key.toLowerCase()}.webp 2x, /img/categories/${category.key.toLowerCase()}-small.webp`"
|
||||
media="(min-width: 300px)"
|
||||
/>
|
||||
<img
|
||||
class="w-full h-36 w-36 md:h-52 md:w-52 object-cover"
|
||||
:src="`/img/categories/${category.key.toLowerCase()}.webp`"
|
||||
:srcset="`/img/categories/${category.key.toLowerCase()}-small.webp `"
|
||||
width="384"
|
||||
height="384"
|
||||
alt=""
|
||||
:loading="imageLazy ? 'lazy' : undefined"
|
||||
/>
|
||||
</picture>
|
||||
<p
|
||||
v-else
|
||||
class="h-36 w-36 md:h-52 md:w-52 brightness-75"
|
||||
:class="randomGradient()"
|
||||
/>
|
||||
<div class="px-3 py-1 absolute left-0 bottom-0">
|
||||
<h2
|
||||
class="group-hover:text-slate-200 font-semibold text-white tracking-tight text-xl mb-3"
|
||||
>
|
||||
{{ category.label }}
|
||||
</h2>
|
||||
</div>
|
||||
<span
|
||||
v-if="withDetails"
|
||||
class="absolute z-10 inline-flex items-center px-3 py-1 text-xs font-semibold text-white bg-black rounded-full right-2 top-2"
|
||||
>
|
||||
{{
|
||||
t(
|
||||
"{count} events",
|
||||
{
|
||||
count: category.number.toString(),
|
||||
},
|
||||
category.number
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</router-link>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { categoriesWithPictures } from "./constants";
|
||||
import { randomGradient } from "../../utils/graphics";
|
||||
import { CategoryStatsModel } from "../../types/stats.model";
|
||||
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
category: CategoryStatsModel;
|
||||
withDetails?: boolean;
|
||||
imageLazy?: boolean;
|
||||
}>(),
|
||||
{
|
||||
withDetails: false,
|
||||
imageLazy: true,
|
||||
}
|
||||
);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
</script>
|
||||
195
src/components/Categories/constants.ts
Normal file
195
src/components/Categories/constants.ts
Normal file
@@ -0,0 +1,195 @@
|
||||
export type CategoryPictureLicencingElement = { name: string; url: string };
|
||||
export type CategoryPictureLicencing = {
|
||||
author: CategoryPictureLicencingElement;
|
||||
source: CategoryPictureLicencingElement;
|
||||
license?: CategoryPictureLicencingElement;
|
||||
};
|
||||
|
||||
export const categoriesPicturesLicences: Record<
|
||||
string,
|
||||
CategoryPictureLicencing
|
||||
> = {
|
||||
THEATRE: {
|
||||
author: {
|
||||
name: "David Joyce",
|
||||
url: "https://www.flickr.com/photos/deapeajay/",
|
||||
},
|
||||
source: {
|
||||
name: "Flickr",
|
||||
url: "https://www.flickr.com/photos/30815420@N00/2213310171",
|
||||
},
|
||||
license: {
|
||||
name: "CC BY-SA",
|
||||
url: "https://creativecommons.org/licenses/by-sa/2.0/",
|
||||
},
|
||||
},
|
||||
SPORTS: {
|
||||
author: {
|
||||
name: "Md Mahdi",
|
||||
url: "https://unsplash.com/@mahdi17",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/lQpFRPrepQ8",
|
||||
},
|
||||
},
|
||||
MUSIC: {
|
||||
author: {
|
||||
name: "Michael Starkie",
|
||||
url: "https://unsplash.com/@starkie_pics",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/YjtevpXFHQY",
|
||||
},
|
||||
},
|
||||
ARTS: {
|
||||
author: {
|
||||
name: "RhondaK Native Florida Folk Artist",
|
||||
url: "https://unsplash.com/@rhondak",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/_Yc7OtfFn-0",
|
||||
},
|
||||
},
|
||||
SPIRITUALITY_RELIGION_BELIEFS: {
|
||||
author: {
|
||||
name: "The Dancing Rain",
|
||||
url: "https://unsplash.com/@thedancingrain",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/_KPuV9qSSlU",
|
||||
},
|
||||
},
|
||||
MOVEMENTS_POLITICS: {
|
||||
author: {
|
||||
name: "Kyle Fiori",
|
||||
url: "https://unsplash.com/@navy99",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/moytQ7vzhAM",
|
||||
},
|
||||
},
|
||||
PARTY: {
|
||||
author: {
|
||||
name: "Amy Shamblen",
|
||||
url: "https://unsplash.com/@amyshamblen",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/pJ_DCj9KswI",
|
||||
},
|
||||
},
|
||||
BUSINESS: {
|
||||
author: {
|
||||
name: "Simone Hutsch",
|
||||
url: "https://unsplash.com/@heysupersimi",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/6-c8GV2MBmg",
|
||||
},
|
||||
},
|
||||
FILM_MEDIA: {
|
||||
author: {
|
||||
name: "Dan Senior",
|
||||
url: "https://unsplash.com/@dansenior",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/ENtn4fH8C3g",
|
||||
},
|
||||
},
|
||||
PHOTOGRAPHY: {
|
||||
author: {
|
||||
name: "Nathyn Masters",
|
||||
url: "https://unsplash.com/@nathynmasters",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/k3oSs0hWOPo",
|
||||
},
|
||||
},
|
||||
HEALTH: {
|
||||
author: {
|
||||
name: "Derek Finch",
|
||||
url: "https://unsplash.com/@drugwatcher",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/Gi8Q8IfpxdY",
|
||||
},
|
||||
},
|
||||
GAMES: {
|
||||
author: {
|
||||
name: "Randy Fath",
|
||||
url: "https://unsplash.com/@randyfath",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/_EoxKxrDL20",
|
||||
},
|
||||
},
|
||||
OUTDOORS_ADVENTURE: {
|
||||
author: {
|
||||
name: "Davide Sacchet",
|
||||
url: "https://unsplash.com/@davide_sak_",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/RYN-kov1lTY",
|
||||
},
|
||||
},
|
||||
FOOD_DRINK: {
|
||||
author: {
|
||||
name: "sina piryae",
|
||||
url: "https://unsplash.com/@sinapiryae",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/bBzjWthTqb8",
|
||||
},
|
||||
},
|
||||
CRAFTS: {
|
||||
author: {
|
||||
name: "rocknwool",
|
||||
url: "https://unsplash.com/@rocknwool",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/Jcb5O26G08A",
|
||||
},
|
||||
},
|
||||
LGBTQ: {
|
||||
author: {
|
||||
name: "analuisa gamboa",
|
||||
url: "https://unsplash.com/@anigmb",
|
||||
},
|
||||
source: {
|
||||
name: "Unsplash",
|
||||
url: "https://unsplash.com/photos/HsraPtCtRCM",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const categoriesWithPictures = [
|
||||
"SPORTS",
|
||||
"THEATRE",
|
||||
"MUSIC",
|
||||
"ARTS",
|
||||
"MOVEMENTS_POLITICS",
|
||||
"SPIRITUALITY_RELIGION_BELIEFS",
|
||||
"PARTY",
|
||||
"BUSINESS",
|
||||
"FILM_MEDIA",
|
||||
"PHOTOGRAPHY",
|
||||
"HEALTH",
|
||||
"GAMES",
|
||||
"OUTDOORS_ADVENTURE",
|
||||
"FOOD_DRINK",
|
||||
"CRAFTS",
|
||||
"LGBTQ",
|
||||
];
|
||||
Reference in New Issue
Block a user