wip: recode

.github/workflows/CD.yml

@@ -4,7 +4,7 @@ concurrency:
   cancel-in-progress: true
 on:
   workflow_run:
-    workflows: ["CI"]
+    workflows: [CI]
     branches:
       - main
     types:

.prettierrc.cjs

@@ -1,5 +1,5 @@
 module.exports = {
-    extends: [
-      "@recodive/config/.prettierrc.js",
-    ],
-  };
+	extends: [
+		"@recodive/config/.prettierrc.js",
+	],
+};

.vscode/settings.json

@@ -1,12 +1,59 @@
 {
-    "cSpell.words": [
-        "extralight",
-        "fontawesome",
-        "fortawesome",
-        "nuxtjs",
-        "recodive",
-        "rushstack",
-        "tinycolor",
-        "wordmark"
-    ]
-}
+	"cSpell.words": [
+		"extralight",
+		"fontawesome",
+		"fortawesome",
+		"nuxtjs",
+		"recodive",
+		"rushstack",
+		"tinycolor",
+		"wordmark"
+	],
+	// Disable the default formatter, use eslint instead
+	"prettier.enable": false,
+	"editor.formatOnSave": false,
+
+	// Auto fix
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "explicit",
+		"source.organizeImports": "never"
+	},
+
+	// Silent the stylistic rules in you IDE, but still auto fix them
+	"eslint.rules.customizations": [
+		{ "rule": "style/*", "severity": "off" },
+		{ "rule": "format/*", "severity": "off" },
+		{ "rule": "*-indent", "severity": "off" },
+		{ "rule": "*-spacing", "severity": "off" },
+		{ "rule": "*-spaces", "severity": "off" },
+		{ "rule": "*-order", "severity": "off" },
+		{ "rule": "*-dangle", "severity": "off" },
+		{ "rule": "*-newline", "severity": "off" },
+		{ "rule": "*quotes", "severity": "off" },
+		{ "rule": "*semi", "severity": "off" }
+	],
+
+	// Enable eslint for all supported languages
+	"eslint.validate": [
+		"javascript",
+		"javascriptreact",
+		"typescript",
+		"typescriptreact",
+		"vue",
+		"html",
+		"markdown",
+		"json",
+		"jsonc",
+		"yaml",
+		"toml",
+		"xml",
+		"gql",
+		"graphql",
+		"astro",
+		"css",
+		"less",
+		"scss",
+		"pcss",
+		"postcss"
+	]
+}

app.vue

@@ -1,4 +1,33 @@
+<script setup lang="ts">
+useHead({
+	htmlAttrs: {
+		lang: "en",
+	},
+	link: [
+		{
+			rel: "icon",
+			type: "image/png",
+			href: "/assets/images/icon.png",
+		},
+	],
+});
+
+useSeoMeta({
+	title: "PreMiD",
+	ogTitle: "PreMiD",
+	description: "PreMiD is a simple, configurable utility that allows you to show what you're doing on the web in your Discord now playing status.",
+	ogDescription: "PreMiD is a simple, configurable utility that allows you to show what you're doing on the web in your Discord now playing status.",
+	ogImage: "https://cdn.rcd.gg/PreMiD.png",
+	twitterCard: "summary_large_image",
+	ogUrl: "https://premid.app",
+	twitterTitle: "PreMiD",
+	twitterDescription: "PreMiD is a simple, configurable utility that allows you to show what you're doing on the web in your Discord now playing status.",
+	twitterImage: "https://cdn.rcd.gg/PreMiD.png",
+});
+</script>
+
 <template>
+	<NuxtRouteAnnouncer />
 	<NuxtLoadingIndicator
 		color="#7289da"
 		:height="4"
@@ -7,3 +36,18 @@
 		<NuxtPage />
 	</NuxtLayout>
 </template>
+
+<style lang="scss">
+.page-enter-active,
+.page-leave-active {
+	transition:
+		opacity 0.3s ease-in-out,
+		transform 0.3s ease-in-out;
+}
+
+.page-enter-from,
+.page-leave-to {
+	opacity: 0;
+	transform: translateY(10px);
+}
+</style>

components/BrowserCard.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+const { browser } = defineProps<{
+	browser: string;
+	highlight?: boolean;
+}>();
+
+const emit = defineEmits(["click"]);
+
+const isWIP = ref(false);
+
+function getIcon(browser: string) {
+	switch (browser) {
+		case "Safari":
+			isWIP.value = true;
+			return "fa-brands fa-safari";
+		case "Edge":
+			return "fa-brands fa-edge";
+		case "Firefox":
+			return "fa-brands fa-firefox";
+		case "Opera":
+			return "fa-brands fa-opera";
+		case "Brave":
+			return "fa-brands fa-brave";
+		case "Chrome":
+			return "fa-brands fa-chrome";
+		default:
+			return ["fa-brands fa-chrome", "fa-brands fa-brave", "fa-brands fa-opera", "fa-brands fa-edge"];
+	}
+}
+
+let iconUpdateInterval: number | undefined;
+const iconIndex = ref<number>(0);
+
+const currentIcon = computed(() => {
+	if (!Array.isArray(getIcon(browser)))
+		return getIcon(browser);
+
+	return getIcon(browser)[iconIndex.value];
+});
+
+onMounted(() => {
+	if (typeof getIcon(browser) === "string")
+		return;
+
+	iconIndex.value = 0;
+	iconUpdateInterval = window.setInterval(() => {
+		iconIndex.value = (iconIndex.value + 1) % getIcon(browser).length;
+		if (iconIndex.value >= getIcon(browser).length) {
+			iconIndex.value = 0;
+		}
+	}, 1000);
+});
+
+onBeforeUnmount(() => {
+	clearInterval(iconUpdateInterval);
+});
+</script>
+
+<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 ? 'bg-primary hover:bg-primary-highlight c-black' : '', isWIP ? 'bg-op-60 cursor-not-allowed' : 'hover:bg-primary']" @click="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">
+					WIP
+				</span>
+			</div>
+			<template #popper>
+				{{ $t("page.downloads.browser.support.safari") }}
+			</template>
+		</VTooltip>
+	</ClientOnly>
+</template>

components/ContributorCard.vue

@@ -1,65 +1,67 @@
 <script lang="ts" setup>
 import tinycolor from "tinycolor2";
+import type { ContributorsQuery } from "#gql";
 
 type ContributorType = NonNullable<ContributorsQuery["credits"]>[number];
 
 const { user } = defineProps<{ user: ContributorType }>();
 
-// eslint-disable-next-line one-var
 const hovered = ref(false);
 
 // eslint-disable-next-line one-var
 const cardGradientColor = computed(() => {
-    return {
-      primary: tinycolor(user?.user?.roleColor ?? "")
-        .setAlpha(1)
-        .darken(5)
-        .toRgbString(),
-      secondary: tinycolor(user?.user?.roleColor ?? "")
-        .analogous()[2]
-        .setAlpha(0.5)
-        .saturate(20)
-        .toRgbString(),
-    };
-  }),
-  cardShadowColor = computed(() =>
-    hovered.value
-      ? tinycolor(cardGradientColor.value.primary)
-          .setAlpha(0.3)
-          .saturate(20)
-          .toRgbString()
-      : "transparent",
-  ),
-  computedBackground = computed(() => {
-    return `background: linear-gradient(-35deg, ${cardGradientColor.value.secondary} 20%, ${cardGradientColor.value.primary} 130%); box-shadow: 0 2px 52px 0 ${cardShadowColor.value}`;
-  });
+		return {
+			primary: tinycolor(user?.user?.roleColor ?? "")
+				.setAlpha(1)
+				.darken(5)
+				.toRgbString(),
+			secondary: tinycolor(user?.user?.roleColor ?? "")
+				.analogous()[2]
+				.setAlpha(0.5)
+				.saturate(20)
+				.toRgbString(),
+		};
+	}),
+	cardShadowColor = computed(() =>
+		hovered.value
+			? tinycolor(cardGradientColor.value.primary)
+				.setAlpha(0.3)
+				.saturate(20)
+				.toRgbString()
+			: "transparent",
+	),
+	computedBackground = computed(() => {
+		return `background: linear-gradient(-35deg, ${cardGradientColor.value.secondary} 20%, ${cardGradientColor.value.primary} 130%); box-shadow: 0 2px 52px 0 ${cardShadowColor.value}`;
+	});
 </script>
 
 <template>
-  <div
-    class="flex items-center select-none h-17 w-60 rd-2 py-1 justify-between px-3 transition-all hover:translate-y--1.5 duration-200"
-    :style="computedBackground"
-    @mouseover="hovered = true"
-    @mouseleave="hovered = false"
-  >
-    <div class="grid gap-1">
-      <h1 class="font-size-4.5 font-800">
-        {{ user?.user?.name }}
-      </h1>
-      <p class="color-white:70 font-bold font-size-3.5">
-        {{ user?.user?.role }}
-      </p>
-    </div>
-    <div class="relative">
-      <img
-        v-if="user?.user?.avatar"
-        :src="user?.user?.avatar"
-        class="h-auto w-10 rd-100"
-        draggable="false"
-      />
-      <span
-        class="rd-100 bg-green block absolute right-0 h-2.5 w-2.5 bottom-0 border-1 border-solid border-black"
-      />
-    </div>
-  </div>
+	<div
+		class="flex items-center select-none py-1 duration-200 h-17 w-60 rd-2 justify-between px-3 transition-all hover:translate-y--1.5"
+		:style="computedBackground"
+		@mouseover="hovered = true"
+		@mouseleave="hovered = false"
+	>
+		<div class="grid gap-1">
+			<h1 class="font-size-4.5 font-800 text-ellipsis overflow-hidden whitespace-nowrap">
+				{{ user?.user?.name }}
+			</h1>
+			<p class="font-bold color-white:70 font-size-3.5">
+				{{ user?.user?.role }}
+			</p>
+		</div>
+		<div class="relative ml2">
+			<NuxtImg
+				v-if="user?.user?.avatar"
+				:src="`${user?.user?.avatar}?size=40`"
+				class="h-auto min-w-10 w-10 rd-100"
+				draggable="false"
+				:alt="`${user?.user?.name}'s avatar`"
+			>
+				<span
+					class="rd-100 absolute block right-0 border-solid bg-green h-2.5 w-2.5 bottom-0 border-1 border-black"
+				/>
+			</nuxtimg>
+		</div>
+	</div>
 </template>

components/ContributorSection.vue

@@ -2,22 +2,22 @@
 import type { ContributorsQuery } from "#gql";
 
 const { string, contributors } = defineProps<{
-  string: string;
-  contributors: NonNullable<ContributorsQuery["credits"]>;
+	string: string;
+	contributors: NonNullable<ContributorsQuery["credits"]>;
 }>();
 </script>
 
 <template>
-  <div class="justify-center my-10">
-    <h1 class="color-primary font-discord font-size-10 mb-2">
-      {{ $t(string) }}
-    </h1>
-    <div class="inline-flex flex-wrap gap-3">
-      <ContributorCard
-        v-for="(item, i) in contributors"
-        :key="i"
-        :user="item"
-      />
-    </div>
-  </div>
+	<div class="justify-center my-10">
+		<h1 class="font-extrabold color-primary font-size-10 mb-5">
+			{{ $t(string) }}
+		</h1>
+		<div class="inline-flex flex-wrap gap-3">
+			<ContributorCard
+				v-for="(item, i) in contributors"
+				:key="i"
+				:user="item"
+			/>
+		</div>
+	</div>
 </template>