wip: website

PreMiD · Jul 14, 2024 · cd7ba5c · cd7ba5c
1 parent cc3bb95
commit cd7ba5c
Show file tree

Hide file tree

Showing 27 changed files with 8,748 additions and 6,644 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,3 @@
+.nuxt
+.output
+node_modules
diff --git a/.github/workflows/CD.yml b/.github/workflows/CD.yml
@@ -7,6 +7,7 @@ on:
     workflows: [CI]
     branches:
       - main
+      - recode
     types:
       - completed
 jobs:
@@ -17,20 +18,20 @@ jobs:
       packages: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - run: echo IMAGE_REPOSITORY=$(echo ${{ github.repository }} | tr '[:upper:]' '[:lower:]') >> $GITHUB_ENV
       - name: Build and push
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v6
         with:
           build-args: |
             "GH_NPM_TOKEN=${{ secrets.GITHUB_TOKEN }}"
           push: true
           tags: |
-            ghcr.io/${{ env.IMAGE_REPOSITORY }}:latest
-            ghcr.io/${{ env.IMAGE_REPOSITORY }}:${{ github.sha }}-${{ github.run_number }}
+            ${{ github.ref_name == 'main' && 'ghcr.io/${{ env.IMAGE_REPOSITORY }}:latest' || '' }}
+            ${{ github.ref_name == 'main' && 'ghcr.io/${{ env.IMAGE_REPOSITORY }}:${{ github.sha }}-${{ github.run_number }}' || 'ghcr.io/${{ env.IMAGE_REPOSITORY }}:beta-${{ github.sha }}-${{ github.run_number }}' }}
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
@@ -9,18 +9,24 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          package_json_file: package.json
+          run_install: |
+            - args: [--frozen-lockfile]
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
+          cache: pnpm
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: latest
+      - name: Lint
+        run: pnpm lint
 
-      - name: Install dependencies
-        run: pnpm i --frozen-lockfile
+      - name: Lint
+        run: pnpm nuxt typecheck
 
       - name: Build
         run: pnpm build
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,21 @@
+FROM node:20-alpine as builder
+RUN corepack enable
+
+WORKDIR /app
+
+COPY pnpm-lock.yaml /app
+
+COPY . /app
+RUN pnpm install --frozen-lockfile
+
+RUN pnpx nuxt build
+
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY --from=builder /app/.output .
+
+ENV PORT=80
+
+CMD ["node", "server/index.mjs"]
diff --git a/app.vue b/app.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
+import { useExtensionStore } from "./stores/useExtension";
+
 useHead({
 	htmlAttrs: {
 		lang: "en",
 	},
+	bodyAttrs: {
+		id: "app",
+	},
 	link: [
 		{
 			rel: "icon",
@@ -27,6 +32,13 @@ useSeoMeta({
 	applicationName: "PreMiD",
 	twitterImage: "https://cdn.rcd.gg/PreMiD.png",
 });
+
+/* useScriptGoogleAdsense({
+	client: "ca-pub-1575460061917202",
+}); */
+
+const extension = useExtensionStore();
+extension.setupGlobalEvents();
 </script>
 
 <template>

diff --git a/components/BrowserCard.vue b/components/BrowserCard.vue
@@ -59,15 +59,15 @@ onBeforeUnmount(() => {
 <template>
 	<ClientOnly>
 		<VTooltip :disabled="!isWIP">
-			<div class="select-none flex gap-2 items-center cursor-pointer relative font-bold bg-gray transition-colors px5 border-rounded w-50 h-20" :class="[highlight && !isWIP ? 'bg-primary hover:bg-primary-highlight c-black' : '', isWIP ? 'bg-op-60 cursor-not-allowed' : 'hover:bg-primary']" @click="!isWIP && emit('click')">
+			<div class="flex items-center cursor-pointer font-bold transition-colors select-none gap-2 relative bg-gray px5 border-rounded w-50 h-20" :class="[highlight && !isWIP ? 'bg-primary hover:bg-primary-highlight c-black' : '', isWIP ? 'bg-op-60 cursor-not-allowed' : 'hover:bg-primary']" @click="!isWIP && emit('click')">
 				<FAIcon
 					class="mr-2 h-auto w-7"
 					:icon="currentIcon"
 				/>
 				<span>
 					{{ browser }}
 				</span>
-				<span v-if="isWIP" class="absolute text-white rounded-full py-1 top--2 right--2 bg-red-500 px-2 text-ellipsis max-w-25 max-h-7 overflow-hidden whitespace-nowrap">
+				<span v-if="isWIP" class="rounded-full absolute py-1 top--2 right--2 bg-red-500 px-2 text-ellipsis max-w-25 max-h-7 overflow-hidden whitespace-nowrap">
 					{{ $t("component.browserCard.wip") }}
 				</span>
 			</div>

diff --git a/components/ContributorCard.vue b/components/ContributorCard.vue
@@ -43,7 +43,7 @@ const cardGradientColor = computed(() => {
 		@mouseleave="hovered = false"
 	>
 		<div class="grid gap-1">
-			<h1 class="font-size-4.5 font-800 text-ellipsis overflow-hidden whitespace-nowrap">
+			<h1 class="text-ellipsis overflow-hidden whitespace-nowrap font-size-4.5 font-800">
 				{{ user?.user?.name }}
 			</h1>
 			<p class="font-bold color-white:70 font-size-3.5">

diff --git a/components/DonationModal.vue b/components/DonationModal.vue
@@ -40,7 +40,7 @@ defineExpose({
 <template>
 	<Transition name="fade">
 		<div v-if="visible" class="flex items-center justify-center fixed inset-0 bg-black bg-opacity-50 z-9999">
-			<div class="relative bg-gray w-full rounded-lg bg-gray-800 p-6 max-w-md shadow-lg">
+			<div class="relative bg-gray shadow-lg w-full rounded-lg bg-gray-800 p-6 max-w-md">
 				<button class="absolute cursor-pointer transition-colors bg-transparent border-none top-4 right-4 text-text hover:text-red" @click="visible = false">
 					<FAIcon icon="fa-solid fa-times" class="h-5 w-5" />
 				</button>
@@ -53,7 +53,7 @@ defineExpose({
 					</p>
 					<div class="flex items-center justify-center mb-6">
 						<div class="grid grid-cols-2">
-							<a href="https://www.patreon.com/Timeraa" target="_blank" class="flex items-center justify-center font-bold text-white rounded-full h12.5 bg-orange-500 py-2 px-4 m-2 hover:bg-orange-600 transition duration-300 inline-block">
+							<a href="https://www.patreon.com/Timeraa" target="_blank" class="flex items-center justify-center font-bold rounded-full text-white h12.5 bg-orange-500 py-2 px-4 m-2 hover:bg-orange-600 transition duration-300 inline-block">
 								<FAIcon icon="fa-brands fa-patreon" class="mr-2 h5" /> {{ $t("component.donationModal.patreon", { name: "Patreon" }) }}
 							</a>
 							<a href="https://github.com/sponsors/PreMiD" target="_blank" class="h12.5 bg-black font-bold text-white rounded-full py-2 px-4 m-2 transition duration-300 inline-block flex items-center justify-center cursor-pointer hover:bg-op-80">
@@ -64,7 +64,7 @@ defineExpose({
 					<p v-if="!showButton" class="text-gray-400">
 						{{ $t("component.donationModal.holdTight") }}
 					</p>
-					<button v-if="showButton" class="cursor-pointer text-white rounded-full py-2 transition duration-300 font-size-4 bg-primary hover:bg-primary-highlight outline-none b-solid b-transparent font-semibold px-6" @click="continueButton">
+					<button v-if="showButton" class="cursor-pointer text-white rounded-full py-2 transition duration-300 font-size-4 px-6 bg-primary hover:bg-primary-highlight font-semibold outline-none b-solid b-transparent" @click="continueButton">
 						{{ $t("component.donationModal.continue") }}
 					</button>
 				</div>

diff --git a/components/Footer.vue b/components/Footer.vue
@@ -15,6 +15,15 @@ const partners = [
 	},
 ];
 
+interface LinkSection {
+	title: string;
+	links: {
+		href: string | any;
+		icon?: string;
+		label: string;
+	}[];
+}
+
 const linkSections = computed(() => [
 	{
 		title: t("footer.followUs"),
@@ -87,7 +96,7 @@ const linkSections = computed(() => [
 			},
 		],
 	},
-]);
+] as LinkSection[] satisfies LinkSection[]);
 </script>
 
 <template>
@@ -132,7 +141,7 @@ const linkSections = computed(() => [
 				<a href="https://recodive.com" target="_blank">Recodive</a>
 			</span>
 			<br>
-			<div class="text-xs mt2 color-light-9">
+			<div class="mt2 text-xs color-light-9">
 				{{ t('footer.copyright', { year: "2018", currentYear: new Date().getFullYear(), company: 'Recodive oHG.' }) }}
 			</div>
 		</div>

diff --git a/components/Header.vue b/components/Header.vue
@@ -34,7 +34,7 @@ useHead({
 		<!-- <PageBanner /> -->
 		<div
 			id="header"
-			class="flex items-center w-full select-none top-0 lg-md:relative lt-md:sticky z-1000 flex-justify-between p-3 bg-bg-primary"
+			class="flex items-center select-none w-full top-0 lg-md:relative lt-md:sticky z-1000 flex-justify-between p-3 bg-bg-primary"
 		>
 			<NuxtLink
 				:to="localePath('/')"
@@ -54,7 +54,7 @@ useHead({
 						active-class="active"
 						:aria-label="`Link to ${link.name}`"
 					>
-						<span class="items-center inline-flex gap-2">
+						<span class="items-center gap-2 inline-flex">
 							<span
 								class="inline-flex iconOutline bg-link-icon-bg border-rd-100 p-2"
 							>
@@ -75,7 +75,7 @@ useHead({
 			<!-- Mobile Nav -->
 			<div class="md:hidden">
 				<button
-					class="md:hidden cursor-pointer bg-transparent b-none p0 c-primary h7"
+					class="md:hidden cursor-pointer b-none bg-transparent p0 c-primary h7"
 					aria-label="Toggle navigation menu"
 					@click="navOpen = !navOpen"
 				>

diff --git a/components/StoreCard.vue b/components/StoreCard.vue
@@ -3,10 +3,14 @@ import tinycolor from "tinycolor2";
 import { ref } from "vue";
 
 import type { PresencesQuery } from "#gql";
+import { useExtensionStore } from "~/stores/useExtension";
 
 const { presence } = defineProps<{
 	presence: PresencesQuery["presences"][number];
 }>();
+
+const extension = useExtensionStore();
+
 const hovered = ref(false);
 const color = {
 	main: presence.metadata.color,
@@ -24,6 +28,8 @@ const localePath = useLocalePath();
 function goToPresence() {
 	router.push(localePath(`/store/${presence.metadata.service}`));
 }
+
+const hasPresence = computed(() => extension.presences.includes(presence.metadata.service));
 </script>
 
 <template>
@@ -36,6 +42,7 @@ function goToPresence() {
 		<div class="absolute w-full top-0 left-0 h-full z-1" @click="goToPresence" />
 
 		<NuxtImg
+			format="webp"
 			placeholder
 			:draggable="false"
 			class="absolute top-50% left-50% translate--50% opacity-20 bgBounce" :class="[hovered ? 'rotate--10 scale-130' : 'scale-105']"
@@ -49,6 +56,7 @@ function goToPresence() {
 			:style="`background: linear-gradient(135deg, ${color.main} 0%, ${color.tint} 100%); `"
 		>
 			<NuxtImg
+				format="webp"
 				draggable="false"
 				placeholder
 				class="w-16 h-16 z-20 card-shadow rounded-md my-a mx-7"
@@ -69,18 +77,26 @@ function goToPresence() {
 				</h1>
 				<Transition name="card-animation" mode="out-in">
 					<div :key="`${presence.metadata.service}_desc`">
-						<p v-if="!hovered" class="card-shadow h-10 font-normal line-clamp-3 line-height-3.5">
+						<p v-if="!hovered || !extension.hasExtension" class="card-shadow h-10 font-normal line-clamp-3 line-height-3.5">
 							{{ presence.metadata.description.en }}
 						</p>
-						<div v-else-if="hovered" class="flex gap-2">
+						<div v-else-if="hovered && extension.hasExtension" class="flex gap-2">
 							<button
-								class="gap-2 flex items-center justify-center h-10 cursor-pointer font-bold bg-primary hover:bg-primary-highlight rounded-full transition-colors text-white border-none w-40"
+								v-if="!hasPresence"
+								class="gap-2 flex items-center justify-center h-10 cursor-pointer font-bold rounded-full transition-colors bg-primary hover:bg-primary-highlight text-white border-none min-w-25 w-min"
+								@click="extension.addPresence(presence.metadata.service)"
 							>
 								<FAIcon class="h5 w5" icon="fa-solid fa-plus" />
 								<p>
 									{{ $t("component.storeCard.addPresence") }}
 								</p>
 							</button>
+							<button v-else class="gap-2 flex items-center justify-center h-10 cursor-pointer font-bold rounded-full transition-colors text-white border-none min-w-25 w-min bg-red hover:bg-red-3" @click="extension.removePresence(presence.metadata.service)">
+								<FAIcon class="h5 w5" icon="fa-solid fa-times" />
+								<p>
+									{{ $t("component.storeCard.removePresence") }}
+								</p>
+							</button>
 							<!-- <button
 								class="rounded-full text-white h-10 border-none gap-2 flex items-center justify-center w-10 cursor-pointer transition-colors bg-red hover:bg-red-3"
 							>

diff --git a/components/store/SearchBar.vue b/components/store/SearchBar.vue
@@ -5,7 +5,7 @@ const route = useRoute();
 
 const searchTerm = defineModel<string>();
 const selectedCategory = defineModel<string>("category");
-const sortOrder = defineModel<string>("sortBy");
+const sortOrder = defineModel<string>("sortOrder");
 
 //* Nuxt apparently does not like using route query in defaults
 searchTerm.value = route.query.search?.toString() || "";
@@ -26,7 +26,6 @@ const isDropdownOpen = ref(false);
 const options = [
 	{ text: t("component.searchBar.sort.mostUsed"), icon: "fa-solid fa-sort-amount-down" },
 	{ text: t("component.searchBar.sort.alphabetical"), icon: "fa-solid fa-sort-alpha-down" },
-	{ text: t("component.searchBar.sort.likedFirst"), icon: "fa-solid fa-heart" },
 ];
 
 const sortByDropdown = ref<HTMLDivElement>();

diff --git a/composables/useExtension.ts b/composables/useExtension.ts
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,6 +1,7 @@
 import antfu from "@antfu/eslint-config";
 
 export default antfu({
+	ignores: [".pnpm-store"],
 	formatters: true,
 	unocss: true,
 	vue: true,

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -4,16 +4,12 @@ useHead({
 		class: "font-inter",
 	},
 });
-
-useScriptGoogleAdsense({
-	client: "pub-1575460061917202",
-});
 </script>
 
 <template>
 	<Header />
 	<div class="flex justify-center min-h-screen">
-		<ScriptGoogleAdsense
+		<!-- <ScriptGoogleAdsense
 			data-ad-client="ca-pub-1575460061917202"
 			data-ad-slot="9125593977"
 			data-ad-format="auto"
@@ -22,11 +18,11 @@ useScriptGoogleAdsense({
 			<template #error>
 				{{ $t("layout.ads.error") }}
 			</template>
-		</ScriptGoogleAdsense>
-		<div class="mt-5 max-w-screen-lg mx5">
+		</ScriptGoogleAdsense> -->
+		<div class="max-w-screen-lg mx5 mt-5">
 			<slot />
 		</div>
-		<ScriptGoogleAdsense
+	<!-- 	<ScriptGoogleAdsense
 			data-ad-client="ca-pub-1575460061917202"
 			data-ad-slot="5154559370"
 			data-ad-format="auto"
@@ -35,7 +31,7 @@ useScriptGoogleAdsense({
 			<template #error>
 				{{ $t("layout.ads.error") }}
 			</template>
-		</ScriptGoogleAdsense>
+		</ScriptGoogleAdsense> -->
 	</div>
 	<Footer />
 </template>