feat: homepage (#1083)

* 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 * chore: prettier config * chore: update cSpell words * feat(index/presence-preview): dynamic time * Delete .vscode directory * rename remaining to left
PreMiD · Jan 8, 2024 · 357f9a4 · 357f9a4
1 parent 215db0b
commit 357f9a4
Show file tree

Hide file tree

Showing 25 changed files with 1,384 additions and 1,133 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,5 +1,9 @@
 require("@rushstack/eslint-patch/modern-module-resolution");
 
 module.exports = {
-	extends: ["@unocss", "@recodive/eslint-config/vue.cjs"]
+  extends: [
+    "@recodive/eslint-config/vue.cjs",
+    "plugin:prettier/recommended",
+    "@unocss",
+  ],
 };
diff --git a/.gitattributes b/.gitattributes
@@ -1 +1,13 @@
-* text eol=lf
+* text eol=lf
+
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.ico binary
+*.mp4 binary
+*.mp3 binary
+*.gz binary
+*.zip binary
+*.ttf binary
+*.woff binary
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+    extends: [
+      "@recodive/config/.prettierrc.js",
+    ],
+  };
diff --git a/app.vue b/app.vue
@@ -1,5 +1,5 @@
 <template>
-	<NuxtLayout>
-		<NuxtPage />
-	</NuxtLayout>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
diff --git a/components/ContributorCard.vue b/components/ContributorCard.vue
@@ -1,63 +1,63 @@
 <script lang="ts" setup>
-	import tinycolor from "tinycolor2";
+import tinycolor from "tinycolor2";
 
-	import { type ContributorsQuery } from "#gql";
+import { type ContributorsQuery } from "#gql";
 
-	type ContributorType = NonNullable<ContributorsQuery["credits"]>[number];
+type ContributorType = NonNullable<ContributorsQuery["credits"]>[number];
 
-	const { user } = defineProps<{ user: ContributorType }>();
+const { user } = defineProps<{ user: ContributorType }>();
 
-	// eslint-disable-next-line one-var
-	const hovered = ref(false);
+// 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}`;
-		});
+// 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}`;
+  });
 </script>
 
 <template>
-	<div
-		class="h-15 w-60 flex items-center rd-2 py-1 justify-between px-3 select-none 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-800 font-size-4.5">{{ user?.user?.name }}</h1>
-			<p class="color-white:85">{{ 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="bg-green block rd-100 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 h-15 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:85">{{ 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>
 </template>
diff --git a/components/ContributorSection.vue b/components/ContributorSection.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-	import type { ContributorsQuery } from "#gql";
+import type { ContributorsQuery } from "#gql";
 
-	const { string, contributors } = defineProps<{
-		string: string;
-		contributors: NonNullable<ContributorsQuery["credits"]>;
-	}>();
+const { string, contributors } = defineProps<{
+  string: string;
+  contributors: NonNullable<ContributorsQuery["credits"]>;
+}>();
 </script>
 
 <template>
-	<div class="justify-center my-5">
-		<h1 class="color-primary font-discord font-size-8 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-5">
+    <h1 class="color-primary font-discord font-size-8 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>
 </template>
diff --git a/components/Header.vue b/components/Header.vue
@@ -1,45 +1,47 @@
 <script lang="ts" setup>
-	const { t } = useI18n(),
-		links = computed(() => [
-			{
-				href: "/store",
-				icon: "fa-solid fa-cart-arrow-down",
-				name: t("header.links.store")
-			},
-			{
-				href: "/downloads",
-				icon: "fa-solid fa-download",
-				name: t("header.links.downloads")
-			},
-			{
-				href: "/contributors",
-				icon: "fa-solid fa-handshake-angle",
-				name: t("header.links.contributors")
-			}
-		]);
+const { t } = useI18n(),
+  links = computed(() => [
+    {
+      href: "/store",
+      icon: "fa-solid fa-cart-arrow-down",
+      name: t("header.links.store"),
+    },
+    {
+      href: "/downloads",
+      icon: "fa-solid fa-download",
+      name: t("header.links.downloads"),
+    },
+    {
+      href: "/contributors",
+      icon: "fa-solid fa-handshake-angle",
+      name: t("header.links.contributors"),
+    },
+  ]);
 </script>
 
 <template>
-	<div class="m3 flex flex-justify-between items-center select-none">
-		<div class="font-discord color-primary font-size-8">PreMiD</div>
-		<div>
-			<NuxtLink
-				v-for="link in links"
-				:key="link.href"
-				:href="link.href"
-				class="link color-link-inactive font-size-4.5 decoration-none mx2 font-900 hover-color-primary"
-			>
-				<span class="items-center gap-2 inline-flex">
-					<span
-						class="iconOutline inline-flex bg-link-icon-bg border-rd-100 p-2"
-					>
-						<FAIcon class="h-4 w-4" :icon="link.icon" />
-					</span>
-					<span class="uppercase">
-						{{ link.name }}
-					</span>
-				</span>
-			</NuxtLink>
-		</div>
-	</div>
+  <div
+    class="flex items-center absolute select-none flex-justify-between top-0 w-full p-3"
+  >
+    <a href="/" class="color-primary font-discord font-size-8">PreMiD</a>
+    <div class="lt-lg:hidden">
+      <NuxtLink
+        v-for="link in links"
+        :key="link.href"
+        :href="link.href"
+        class="font-size-4.5 link color-link-inactive decoration-none mx2 font-900 hover-color-primary"
+      >
+        <span class="items-center inline-flex gap-2">
+          <span
+            class="inline-flex iconOutline bg-link-icon-bg border-rd-100 p-2"
+          >
+            <FAIcon class="h-4 w-4" :icon="link.icon" />
+          </span>
+          <span class="uppercase">
+            {{ link.name }}
+          </span>
+        </span>
+      </NuxtLink>
+    </div>
+  </div>
 </template>
diff --git a/graphql.config.ts b/graphql.config.ts
@@ -1,7 +1,7 @@
 import type { IGraphQLConfig } from "graphql-config";
 
 const config: IGraphQLConfig = {
-	schema: "https://api.premid.app/v3"
+  schema: "https://api.premid.app/v3",
 };
 
 export default config;
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup></script>
 
 <template>
-	<div class="font-nunito">
-		<Header />
-		<slot />
-	</div>
+  <div class="font-inter">
+    <Header />
+    <slot />
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/locales/en.ts b/locales/en.ts
@@ -1,19 +1,20 @@
 import { defineI18nLocale } from "#i18n";
 
 export default defineI18nLocale(() => ({
-	header: {
-		links: {
-			contributors: "Contributors",
-			downloads: "Downloads",
-			store: "Store"
-		}
-	},
-	page: {
-		contributors: {
-			presenceDevelopers: "Presence Developers",
-			staff: "Staff",
-			supporters: "Supporters",
-			translators: "Translators"
-		}
-	}
+  header: {
+    links: {
+      contributors: "Contributors",
+      downloads: "Downloads",
+      features: "Features",
+      store: "Store",
+    },
+  },
+  page: {
+    contributors: {
+      presenceDevelopers: "Presence Developers",
+      staff: "Staff",
+      supporters: "Supporters",
+      translators: "Translators",
+    },
+  },
 }));
diff --git a/modules/registerComponent.ts b/modules/registerComponent.ts
@@ -1,11 +1,11 @@
 import { addComponent, defineNuxtModule } from "@nuxt/kit";
 
 export default defineNuxtModule({
-	setup() {
-		addComponent({
-			export: "FontAwesomeIcon",
-			filePath: "@fortawesome/vue-fontawesome",
-			name: "FAIcon"
-		});
-	}
+  setup() {
+    addComponent({
+      export: "FontAwesomeIcon",
+      filePath: "@fortawesome/vue-fontawesome",
+      name: "FAIcon",
+    });
+  },
 });