wip: nuxt 3

.eslintrc.cjs

@@ -0,0 +1,5 @@
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+	extends: ["@unocss", "@recodive/eslint-config/vue.cjs"]
+};

.gitignore

@@ -1,10 +1,24 @@
-.env
-node_modules
-static/assets
-dist
-.vscode/settings.json
-src/langs
+# Nuxt dev/build outputs
+.output
+.data
 .nuxt
-package-lock.json
-languageUpdater.js
-.DS_Store
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.npmrc

@@ -1,2 +1 @@
-shamefully-hoist=true
-strict-peer-dependencies=false
+shamefully-hoist=true

README.md

@@ -1,38 +1,75 @@
-<div align="center">
-<img src="https://cdn.rcd.gg/PreMiD.png" style="border-radius: 1.3em;" width="512px" draggable="false" >
+# Nuxt 3 Minimal Starter
 
-# PreMiD Website
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
-</div>
+## Setup
 
-This repository contains source code of **PreMiD**'s website that allows you to install presences from our presence store.
-If you want to get more information or help us by **[contributing](#development)** in this project, we would like to see you in our **Discord** server:
+Make sure to install the dependencies:
 
-  <a target="_blank" href="https://discord.premid.app/" title="Join our Discord!">
-<img draggable="false" src="https://discordapp.com/api/guilds/493130730549805057/widget.png?style=banner2" height="76px" draggable="false" alt="Join our Discord!">
-</a>
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
 
-## Additional information
+# yarn
+yarn install
 
-Our server automatically builds the latest website versions from **[master](https://beta.premid.app/)** and **[stable](https://premid.app/)** branches.
-The `master` branch includes all changes that was not tested yet and may have perfomance issues.
+# bun
+bun install
+```
 
-## Building
+## Development Server
+
+Start the development server on `http://localhost:3000`:
 
 ```bash
-# install dependencies
-yarn
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
 
-# build website in /dist
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
 yarn build
+
+# bun
+bun run build
 ```
 
-## Development
+Locally preview production build:
 
 ```bash
-# install dependencies
-yarn
+# npm
+npm run preview
 
-# host local server
-yarn dev
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
 ```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,5 @@
+<template>
+	<NuxtLayout>
+		<NuxtPage />
+	</NuxtLayout>
+</template>

components/ContributorCard.vue

@@ -0,0 +1,63 @@
+<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}`;
+		});
+</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>
+</template>

components/ContributorSection.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+	import type { ContributorsQuery } from "#gql";
+
+	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>
+</template>

components/Header.vue

@@ -0,0 +1,45 @@
+<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")
+			}
+		]);
+</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>
+</template>

graphql.config.ts

@@ -0,0 +1,7 @@
+import type { IGraphQLConfig } from "graphql-config";
+
+const config: IGraphQLConfig = {
+	schema: "https://api.premid.app/v3"
+};
+
+export default config;

layouts/default.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup></script>
+
+<template>
+	<div class="font-nunito">
+		<Header />
+		<slot />
+	</div>
+</template>
+
+<style scoped></style>