wip: recode store (#1087)

* style: prettier eslint * wip: homepage start * remove corrupted images * fix: replace corrupted images * WHAT THE FUCK * IMAGES WORK * Revert "IMAGES WORK" This reverts commit 2eb35b9. * Update .gitattributes * PLEASE * fix: Could not find one or more icon(s) * wip: wip!!! * chore: update deps * chore: add color * fix: better header positioning * feat: homepage main * Squashed commit of the following: commit a465cfe Author: veryCrunchy <verycrunchydev@gmail.com> Date: Mon Jan 8 19:37:47 2024 +0100 feat(index/presence-preview): dynamic time commit f7ec495 Author: veryCrunchy <verycrunchydev@gmail.com> Date: Mon Jan 8 19:20:51 2024 +0100 chore: update cSpell words commit 53902c8 Author: veryCrunchy <verycrunchydev@gmail.com> Date: Mon Jan 8 17:44:41 2024 +0100 chore: prettier config * feat: store pagination * wip: storecard style * feat(store): search and filter * fix(store): default to first page * wip: slightly better styling * chore: lockfile
PreMiD · Feb 19, 2024 · 618a871 · 618a871
1 parent 357f9a4
commit 618a871
Show file tree

Hide file tree

Showing 14 changed files with 989 additions and 79 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,9 +1,5 @@
 require("@rushstack/eslint-patch/modern-module-resolution");
 
 module.exports = {
-  extends: [
-    "@recodive/eslint-config/vue.cjs",
-    "plugin:prettier/recommended",
-    "@unocss",
-  ],
+  extends: ["@recodive/eslint-config/vue.cjs", "@unocss"],
 };
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+    "cSpell.words": [
+        "extralight",
+        "fontawesome",
+        "fortawesome",
+        "nuxtjs",
+        "recodive",
+        "rushstack",
+        "tinycolor",
+        "wordmark"
+    ]
+}
diff --git a/app.vue b/app.vue
@@ -1,4 +1,5 @@
 <template>
+  <NuxtLoadingIndicator color="#7289da" :height="4"  />
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>

diff --git a/components/StoreCard.vue b/components/StoreCard.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import tinycolor from "tinycolor2";
+
+import type { PresencesQuery } from "#gql";
+
+const { presence } = defineProps<{
+    presence: PresencesQuery["presences"][number];
+  }>(),
+  hovered = ref(false),
+  color = {
+    main: presence.metadata.color,
+    shadow: tinycolor(presence.metadata.color).darken(30).toHexString(),
+    shadowTint: tinycolor(presence.metadata.color).darken(65).toHexString(),
+    text:
+      tinycolor(presence.metadata.color).getLuminance() > 0.95
+        ? "#232323"
+        : "#fdfdfd",
+    tint: tinycolor(presence.metadata.color).darken(45).toHexString(),
+  };
+</script>
+
+<template>
+  <div
+    :style="`--shadow: ${color.shadow}; --shadowTint: ${color.shadowTint}; --text: ${color.text};`"
+    class="relative shadow-md select-none bg-card-primary w-20 rounded-lg card-dimensions"
+    :aria-label="presence.metadata.service"
+    @mouseover="hovered = true"
+    @mouseleave="hovered = false"
+  >
+    <div
+      :class="{
+        'opacity-60 delay-0': hovered,
+        'delay-200 transition-ease-out': !hovered,
+      }"
+      style="background-color: var(--shadowTint)"
+      class="absolute card-dimensions rounded-lg border-primary border-1.5 transition-all border-solid object-cover opacity-0 z-10"
+    ></div>
+    <div
+      :class="{ 'opacity100 w-70 delay-200': hovered }"
+      class="absolute h-full z-200 transition-all transition-ease right-0 flex gap-2 w-0 justify-center items-center rounded-md opacity-0"
+    >
+      <button
+        class="bg-primary rounded-full text-white w-40 h-10 border-none gap-2 flex items-center justify-center"
+      >
+        <FAIcon class="h5 w5" icon="fa-solid fa-plus" />
+        <p class="">add presence</p>
+      </button>
+      <button
+        class="bg-red rounded-full text-white w-10 h-10 border-none gap-2 flex items-center justify-center"
+      >
+        <FAIcon class="h5 w5" icon="fa-solid fa-heart" />
+      </button>
+    </div>
+    <NuxtImg
+      placeholder
+      preload
+      fit="cover"
+      draggable="false"
+      class="absolute card-dimensions rounded-lg object-cover opacity-20"
+      :src="presence.metadata.thumbnail"
+      :alt="presence.metadata.service"
+    />
+
+    <div
+      class="rounded-lg flex h-full"
+      :style="`background: linear-gradient(135deg, ${color.main} 0%, ${color.tint} 100%); `"
+    >
+      <NuxtImg
+        draggable="false"
+        placeholder
+        preload
+        class="h-16 z-20 card-shadow rounded-md my-a w-16 mx-7"
+        :src="presence.metadata.logo"
+        :alt="presence.metadata.service"
+      />
+      <div class="relative my-a text-color mr-4 text-3 font-50 w-6/9">
+        <h1
+          class="card-shadow font-bold text-xl text-ellipsis text-nowrap overflow-hidden"
+        >
+          {{ presence.metadata.service }}
+        </h1>
+        <Transition name="card-animation" mode="out-in">
+          <div :key="presence.metadata.service + '_desc'">
+            <p class="card-shadow line-clamp-2 line-height-3.5">
+              {{ presence.metadata.description.en }}
+            </p>
+          </div>
+          <!-- <div v-if="!hovered" :key="presence.metadata.service + '_desc'">
+            <p class="card-shadow line-clamp-2 line-height-3.5">
+              {{ presence.metadata.description.en }}
+            </p>
+          </div>
+          <div v-else-if="hovered" :key="presence.metadata.service + '_test'">
+            <button
+              class="h-10 w-45 mt-2 bg-primary card-shadow border-none rounded-3xl"
+            >
+              Add Presence
+            </button>
+          </div> -->
+        </Transition>
+      </div>
+      <p class="text-color absolute right-0 shadow-tint mt-3 mr-2">
+        {{ presence.users }} <FAIcon class="h-4 w-4" icon="fa-solid fa-bolt" />
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card-dimensions {
+  width: 23rem;
+  height: 9rem;
+}
+@media (min-width: 1400px) {
+  .card-dimensions {
+    width: 25rem;
+    height: 10rem;
+  }
+}
+.card-shadow {
+  filter: drop-shadow(0 0 0.3rem var(--shadow));
+}
+.shadow-tint {
+  filter: drop-shadow(0 0 0.3rem var(--shadowTint));
+}
+
+.text-color {
+  color: var(--text);
+}
+
+.card-animation-enter-active {
+  transition: all 200ms cubic-bezier(0.26, 0.08, 0, 0.97);
+}
+
+.card-animation-leave-active {
+  transition: all 0ms ease;
+}
+
+.card-animation-enter,
+.card-animation-leave-to {
+  transform: translateY(25%) scaleY(0.85);
+  opacity: 0 !important;
+}
+</style>
diff --git a/locales/en.ts b/locales/en.ts
@@ -17,4 +17,17 @@ export default defineI18nLocale(() => ({
       translators: "Translators",
     },
   },
+  store: {
+    categories: {
+      all: "All",
+      anime: "Anime",
+      games: "Games",
+      music: "Music",
+      other: "Other",
+      socials: "Socials",
+      videos: "Videos & Streams",
+    },
+    filter: { search: "Search" },
+    header: { categories: "Categories", search: "Search Presence" },
+  },
 }));
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -16,10 +16,9 @@ export default defineNuxtConfig({
   features: {
     inlineStyles: false,
   },
-
   googleFonts: {
     families: {
-      Inter: [400, 600, 700, 800, 900],
+      Inter: [400, 500, 600, 700, 800, 900],
       Nunito: [400, 600, 700, 800, 900],
     },
   },
@@ -32,12 +31,17 @@ export default defineNuxtConfig({
       file: locale,
     })),
   },
+  image: {
+    domains: ["cdn.rcd.gg"],
+  },
   modules: [
     "@nuxtjs/i18n",
     "@nuxtjs/google-fonts",
     "nuxt-graphql-client",
     "@nuxtjs/eslint-module",
     "@unocss/nuxt",
+    "@vueuse/nuxt",
+    "@nuxt/image",
   ],
   runtimeConfig: {
     public: {

diff --git a/package.json b/package.json
@@ -15,15 +15,16 @@
 		"@fortawesome/free-solid-svg-icons": "^6.5.1",
 		"@fortawesome/vue-fontawesome": "^3.0.5",
 		"@nuxt/devtools": "npm:@nuxt/devtools-edge@latest",
+		"@nuxt/image": "^1.3.0",
 		"@recodive/eslint-config": "^1.4.0",
 		"@rushstack/eslint-patch": "^1.6.1",
 		"@types/lodash": "^4.14.202",
 		"@types/tinycolor2": "^1.4.6",
 		"@unocss/eslint-config": "^0.58.3",
 		"@unocss/reset": "^0.58.3",
+		"@unocss/transformer-directives": "^0.58.3",
+		"@vueuse/nuxt": "^10.7.2",
 		"eslint": "^8.56.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-prettier": "^5.1.2",
 		"lodash": "^4.17.21",
 		"nuxt": "^3.9.1",
 		"prettier": "^3.1.1",
@@ -39,4 +40,4 @@
 		"nuxt-graphql-client": "^0.2.31",
 		"sass": "^1.69.7"
 	}
-}
+}
diff --git a/pages/index.vue b/pages/index.vue
@@ -152,13 +152,13 @@ onBeforeUnmount(() => {
         </div>
         <div class="bg-primary w-full h-37 brightness-95 rounded-b-2 top-1/2">
           <div class="pt-4 pl-4">
-            <h1 class="uppercase font-extrabold text-3">
+            <h1 class="uppercase text-3 font-extrabold">
               {{ presence.type }}
             </h1>
             <div class="flex flex-wrap h-fit mt-4">
               <span class="max-h-22">
                 <img
-                  class="rounded-md h-22 w-22 object-cover"
+                  class="rounded-md object-cover h-22 w-22"
                   :src="presence.largeImage"
                 />