From 7b0560c47801eb1fb9f0aaf623cc9c1b2db97296 Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Fri, 24 Oct 2025 11:52:07 +0200
Subject: [PATCH] indent style & script tags in vue

---
 app/app.vue                        |  18 ++--
 app/components/Explanation.vue     |  52 +++++------
 app/components/ModrinthLink.vue    |   8 +-
 app/components/SideBar.vue         |  14 +--
 app/components/chart/BarChart.vue  | 104 +++++++++++-----------
 app/components/chart/LineChart.vue | 104 +++++++++++-----------
 app/components/chart/Table.vue     |  16 ++--
 app/components/filter/Item.vue     |  48 +++++-----
 app/components/home/StatItem.vue   |  50 ++++++-----
 app/layouts/default.vue            | 108 +++++++++++------------
 app/pages/charts.vue               | 137 +++++++++++++++--------------
 app/pages/index.vue                |  30 +++----
 biome.json                         |   3 +-
 13 files changed, 350 insertions(+), 342 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index e9433f4..71e78dc 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-useHead({
-	htmlAttrs: {
-		lang: "en",
-	},
-});
+	useHead({
+		htmlAttrs: {
+			lang: "en",
+		},
+	});
 
-useSeoMeta({
-	description: "The site for stats all about Modrinth.com",
-	ogDescription: "The site for stats all about Modrinth.com",
-});
+	useSeoMeta({
+		description: "The site for stats all about Modrinth.com",
+		ogDescription: "The site for stats all about Modrinth.com",
+	});
 </script>
 
 <template>
diff --git a/app/components/Explanation.vue b/app/components/Explanation.vue
index 194f0bc..9ea3201 100644
--- a/app/components/Explanation.vue
+++ b/app/components/Explanation.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{ explanation: string | undefined }>();
+	defineProps<{ explanation: string | undefined }>();
 </script>
 
 <template>
@@ -10,42 +10,42 @@ defineProps<{ explanation: string | undefined }>();
 </template>
 
 <style scoped>
-@reference "~/assets/css/main.css";
+	@reference "~/assets/css/main.css";
 
-#tooltip {
-	position: absolute;
+	#tooltip {
+		position: absolute;
 
-	top: 0;
-	right: 10px;
+		top: 0;
+		right: 10px;
 
-	#explanation {
-		position: absolute;
-		right: 0;
-		scale: 1;
+		#explanation {
+			position: absolute;
+			right: 0;
+			scale: 1;
 
-		@apply bg-zinc-800 transition-all;
-		translate: 0 0;
+			@apply bg-zinc-800 transition-all;
+			translate: 0 0;
 
-		padding: 10px;
-		border-radius: 10px;
+			padding: 10px;
+			border-radius: 10px;
 
-		width: 400px;
-		max-width: 90vw;
-	}
+			width: 400px;
+			max-width: 90vw;
+		}
 
-	&:not(:hover) {
-		#explanation {
-			scale: 0;
-			translate: 50% -50%;
+		&:not(:hover) {
+			#explanation {
+				scale: 0;
+				translate: 50% -50%;
+			}
 		}
 	}
-}
 </style>
 
 <style>
-#explanation {
-	h4 {
-		font-weight: bold;
+	#explanation {
+		h4 {
+			font-weight: bold;
+		}
 	}
-}
 </style>
diff --git a/app/components/ModrinthLink.vue b/app/components/ModrinthLink.vue
index bc083bc..2e3dc8b 100644
--- a/app/components/ModrinthLink.vue
+++ b/app/components/ModrinthLink.vue
@@ -11,9 +11,9 @@
 </template>
 
 <style scoped>
-@reference "~/assets/css/main.css";
+	@reference "~/assets/css/main.css";
 
-.router-link-exact-active {
-	@apply !to-cyan-500;
-}
+	.router-link-exact-active {
+		@apply !to-cyan-500;
+	}
 </style>
diff --git a/app/components/SideBar.vue b/app/components/SideBar.vue
index 79970ff..cb4ed84 100644
--- a/app/components/SideBar.vue
+++ b/app/components/SideBar.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-const sidebarVisible = defineModel<boolean>("open");
+	const sidebarVisible = defineModel<boolean>("open");
 
-onMounted(() => {
-	const isMediumScreen = useMediaQuery("(min-width: 768px)");
+	onMounted(() => {
+		const isMediumScreen = useMediaQuery("(min-width: 768px)");
 
-	if (isMediumScreen.value) {
-		sidebarVisible.value = true;
-	}
-});
+		if (isMediumScreen.value) {
+			sidebarVisible.value = true;
+		}
+	});
 </script>
 
 <template>
diff --git a/app/components/chart/BarChart.vue b/app/components/chart/BarChart.vue
index 64c6c47..dd24fda 100644
--- a/app/components/chart/BarChart.vue
+++ b/app/components/chart/BarChart.vue
@@ -1,61 +1,61 @@
 <script setup lang="ts">
-import { Bar } from "vue-chartjs";
+	import { Bar } from "vue-chartjs";
 
-const props = defineProps<{
-	data: StatExport | undefined;
-}>();
+	const props = defineProps<{
+		data: StatExport | undefined;
+	}>();
 
-const chartData = computed(() => {
-	if (!props.data) {
-		return {
-			labels: [],
-			datasets: [],
-		};
-	}
-
-	return {
-		labels: props.data.labels,
-		datasets: props.data.data.map((value) => {
+	const chartData = computed(() => {
+		if (!props.data) {
 			return {
-				...value,
-				borderRadius: 3,
+				labels: [],
+				datasets: [],
 			};
-		}),
-	};
-});
+		}
 
-const chartOptions = ref({
-	responsive: true,
-	maintainAspectRatio: false,
-	scales: {
-		x: {
-			stacked: true,
-			grid: {
-				color: "#1b1a1e",
-			},
-			ticks: {
-				color: "#8a8a8c",
-			},
-		},
-		y: {
-			stacked: true,
-			grid: {
-				color: "#1b1a1e",
+		return {
+			labels: props.data.labels,
+			datasets: props.data.data.map((value) => {
+				return {
+					...value,
+					borderRadius: 3,
+				};
+			}),
+		};
+	});
+
+	const chartOptions = ref({
+		responsive: true,
+		maintainAspectRatio: false,
+		scales: {
+			x: {
+				stacked: true,
+				grid: {
+					color: "#1b1a1e",
+				},
+				ticks: {
+					color: "#8a8a8c",
+				},
 			},
+			y: {
+				stacked: true,
+				grid: {
+					color: "#1b1a1e",
+				},
 
-			ticks: {
-				color: "#8a8a8c",
+				ticks: {
+					color: "#8a8a8c",
+				},
 			},
 		},
-	},
-	plugins: {
-		legend: {
-			labels: {
-				color: "#8a8a8c",
+		plugins: {
+			legend: {
+				labels: {
+					color: "#8a8a8c",
+				},
 			},
 		},
-	},
-});
+	});
 </script>
 
 <template>
@@ -64,12 +64,12 @@ const chartOptions = ref({
 	</div>
 </template>
 <style scoped>
-#container {
-	flex: 1;
+	#container {
+		flex: 1;
 
-	canvas {
-		position: absolute;
-		margin: 10px;
+		canvas {
+			position: absolute;
+			margin: 10px;
+		}
 	}
-}
 </style>
diff --git a/app/components/chart/LineChart.vue b/app/components/chart/LineChart.vue
index 3fa91da..b7b0b76 100644
--- a/app/components/chart/LineChart.vue
+++ b/app/components/chart/LineChart.vue
@@ -1,60 +1,60 @@
 <script setup lang="ts">
-import { Line } from "vue-chartjs";
+	import { Line } from "vue-chartjs";
 
-const props = defineProps<{
-	data: StatExport | undefined;
-}>();
+	const props = defineProps<{
+		data: StatExport | undefined;
+	}>();
 
-const chartData = computed(() => {
-	if (!props.data) {
-		return {
-			labels: [],
-			datasets: [],
-		};
-	}
-
-	return {
-		labels: props.data.labels,
-		datasets: props.data.data.map((value) => {
+	const chartData = computed(() => {
+		if (!props.data) {
 			return {
-				...value,
-				borderRadius: 3,
-				borderColor: value.backgroundColor,
-				tension: 0.1,
+				labels: [],
+				datasets: [],
 			};
-		}),
-	};
-});
+		}
 
-const chartOptions = ref({
-	responsive: true,
-	maintainAspectRatio: false,
-	scales: {
-		x: {
-			grid: {
-				color: "#1b1a1e",
-			},
-			ticks: {
-				color: "#8a8a8c",
-			},
-		},
-		y: {
-			grid: {
-				color: "#1b1a1e",
+		return {
+			labels: props.data.labels,
+			datasets: props.data.data.map((value) => {
+				return {
+					...value,
+					borderRadius: 3,
+					borderColor: value.backgroundColor,
+					tension: 0.1,
+				};
+			}),
+		};
+	});
+
+	const chartOptions = ref({
+		responsive: true,
+		maintainAspectRatio: false,
+		scales: {
+			x: {
+				grid: {
+					color: "#1b1a1e",
+				},
+				ticks: {
+					color: "#8a8a8c",
+				},
 			},
-			ticks: {
-				color: "#8a8a8c",
+			y: {
+				grid: {
+					color: "#1b1a1e",
+				},
+				ticks: {
+					color: "#8a8a8c",
+				},
 			},
 		},
-	},
-	plugins: {
-		legend: {
-			labels: {
-				color: "#8a8a8c",
+		plugins: {
+			legend: {
+				labels: {
+					color: "#8a8a8c",
+				},
 			},
 		},
-	},
-});
+	});
 </script>
 
 <template>
@@ -63,12 +63,12 @@ const chartOptions = ref({
 	</div>
 </template>
 <style scoped>
-#container {
-	flex: 1;
+	#container {
+		flex: 1;
 
-	canvas {
-		position: absolute;
-		margin: 10px;
+		canvas {
+			position: absolute;
+			margin: 10px;
+		}
 	}
-}
 </style>
diff --git a/app/components/chart/Table.vue b/app/components/chart/Table.vue
index d048713..1487569 100644
--- a/app/components/chart/Table.vue
+++ b/app/components/chart/Table.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-const props = defineProps<{
-	data: StatExport | undefined;
-	explanation: string | undefined;
-}>();
+	const props = defineProps<{
+		data: StatExport | undefined;
+		explanation: string | undefined;
+	}>();
 
-const groups = computed(() => {
-	if (!props.data) return [];
-	return props.data.data.map((item) => item.label);
-});
+	const groups = computed(() => {
+		if (!props.data) return [];
+		return props.data.data.map((item) => item.label);
+	});
 </script>
 
 <template>
diff --git a/app/components/filter/Item.vue b/app/components/filter/Item.vue
index ab7ce6f..8f28d83 100644
--- a/app/components/filter/Item.vue
+++ b/app/components/filter/Item.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-const model = defineModel();
+	const model = defineModel();
 
-const { canClear = false, options } = defineProps<{
-	shouldDisplay: boolean;
-	title: string;
-	explanation: string;
-	options: string[];
-	canClear?: boolean;
-}>();
+	const { canClear = false, options } = defineProps<{
+		shouldDisplay: boolean;
+		title: string;
+		explanation: string;
+		options: string[];
+		canClear?: boolean;
+	}>();
 
-const open = ref(false);
+	const open = ref(false);
 
-function onSelect(option: string) {
-	if (canClear && model.value === option) {
-		model.value = undefined;
-	} else {
-		model.value = option;
+	function onSelect(option: string) {
+		if (canClear && model.value === option) {
+			model.value = undefined;
+		} else {
+			model.value = option;
+		}
 	}
-}
 </script>
 
 <template>
@@ -70,14 +70,14 @@ function onSelect(option: string) {
 </template>
 
 <style scoped>
-.v-enter-active,
-.v-leave-active {
-	transition: 0.4s ease;
-}
+	.v-enter-active,
+	.v-leave-active {
+		transition: 0.4s ease;
+	}
 
-.v-enter-from,
-.v-leave-to {
-	transform: translateX(-120%);
-	opacity: 0;
-}
+	.v-enter-from,
+	.v-leave-to {
+		transform: translateX(-120%);
+		opacity: 0;
+	}
 </style>
diff --git a/app/components/home/StatItem.vue b/app/components/home/StatItem.vue
index 0755ac5..b3e49f3 100644
--- a/app/components/home/StatItem.vue
+++ b/app/components/home/StatItem.vue
@@ -1,36 +1,38 @@
 <script setup lang="ts">
-const props = defineProps<{
-	icon: string;
-	name: string;
-	data: number | undefined;
-}>();
+	const props = defineProps<{
+		icon: string;
+		name: string;
+		data: number | undefined;
+	}>();
 
-const displayValue = ref(0);
+	const displayValue = ref(0);
 
-const startCountUp = () => {
-	const duration = 3000 + Math.random() * 2000;
-	const startTime = performance.now();
+	const startCountUp = () => {
+		const duration = 3000 + Math.random() * 2000;
+		const startTime = performance.now();
 
-	function easeOutCubic(x: number): number {
-		return 1 - (1 - x) ** 7;
-	}
+		function easeOutCubic(x: number): number {
+			return 1 - (1 - x) ** 7;
+		}
 
-	function animate(currentTime: number) {
-		const elapsedTime = currentTime - startTime;
-		const progress = Math.min(elapsedTime / duration, 1);
-		displayValue.value = Math.floor(easeOutCubic(progress) * (props.data ?? 0));
+		function animate(currentTime: number) {
+			const elapsedTime = currentTime - startTime;
+			const progress = Math.min(elapsedTime / duration, 1);
+			displayValue.value = Math.floor(
+				easeOutCubic(progress) * (props.data ?? 0),
+			);
 
-		if (progress < 1) {
-			requestAnimationFrame(animate);
+			if (progress < 1) {
+				requestAnimationFrame(animate);
+			}
 		}
-	}
 
-	requestAnimationFrame(animate);
-};
+		requestAnimationFrame(animate);
+	};
 
-onMounted(() => {
-	startCountUp();
-});
+	onMounted(() => {
+		startCountUp();
+	});
 </script>
 
 <template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 9f0e951..ac37392 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -48,82 +48,82 @@
 </template>
 
 <style scoped>
-@media only screen and (max-width: 700px) {
-	#nav {
-		.compact {
-			display: flex !important;
-			gap: 20px;
-		}
+	@media only screen and (max-width: 700px) {
+		#nav {
+			.compact {
+				display: flex !important;
+				gap: 20px;
+			}
 
-		.big {
-			display: none !important;
-		}
+			.big {
+				display: none !important;
+			}
 
-		gap: 20px !important;
-		flex-direction: column;
-		#icons {
-			gap: 10px !important;
-			display: flex;
-			align-items: center;
+			gap: 20px !important;
+			flex-direction: column;
+			#icons {
+				gap: 10px !important;
+				display: flex;
+				align-items: center;
+			}
 		}
 	}
-}
 
-#page {
-	min-height: 100vh;
+	#page {
+		min-height: 100vh;
 
-	flex: 1;
+		flex: 1;
 
-	display: flex;
-	flex-direction: column;
+		display: flex;
+		flex-direction: column;
 
-	#nav {
-		.compact {
-			display: none;
-		}
+		#nav {
+			.compact {
+				display: none;
+			}
 
-		z-index: 10;
+			z-index: 10;
 
-		padding: 10px;
-		margin: 10px;
+			padding: 10px;
+			margin: 10px;
 
-		display: flex;
+			display: flex;
 
-		justify-content: space-between;
-		align-items: center;
+			justify-content: space-between;
+			align-items: center;
 
-		gap: 50px;
+			gap: 50px;
 
-		#header {
-			font-weight: bold;
-			font-size: xx-large;
-		}
+			#header {
+				font-weight: bold;
+				font-size: xx-large;
+			}
 
-		#icons {
-			display: flex;
-			gap: 25px;
+			#icons {
+				display: flex;
+				gap: 25px;
 
-			#github {
-				display: block;
-				transition: 0.1s scale ease-in-out;
+				#github {
+					display: block;
+					transition: 0.1s scale ease-in-out;
 
-				&:hover {
-					scale: 1.05;
+					&:hover {
+						scale: 1.05;
+					}
 				}
 			}
-		}
 
-		button {
-			color: black;
+			button {
+				color: black;
+			}
 		}
-	}
 
-	#main {
-		flex: 1;
-		position: relative;
+		#main {
+			flex: 1;
+			position: relative;
 
-		display: flex;
-		flex-direction: column;
+			display: flex;
+			flex-direction: column;
+		}
 	}
-}
 </style>
diff --git a/app/pages/charts.vue b/app/pages/charts.vue
index 3e0bf58..e902812 100644
--- a/app/pages/charts.vue
+++ b/app/pages/charts.vue
@@ -1,82 +1,87 @@
 <script setup lang="ts">
-const title = ref("Modrinth Statistics");
+	const title = ref("Modrinth Statistics");
 
-useHead({
-	title: title,
-});
+	useHead({
+		title: title,
+	});
 
-useTracking();
+	useTracking();
 
-const projectType = useFilterItem("project_type", "mod");
-const stat = useFilterItem("stat", "count");
+	const projectType = useFilterItem("project_type", "mod");
+	const stat = useFilterItem("stat", "count");
 
-watch(
-	[projectType, stat],
-	() => {
-		title.value = `Modrinth Statistics - ${firstLetterUpperCase(projectType.value)} ${firstLetterUpperCase(stat.value)}`;
-	},
-	{ immediate: true },
-);
+	watch(
+		[projectType, stat],
+		() => {
+			title.value = `Modrinth Statistics - ${firstLetterUpperCase(projectType.value)} ${firstLetterUpperCase(stat.value)}`;
+		},
+		{ immediate: true },
+	);
 
-const versionGroup = useFilterItem("version_group", "major");
+	const versionGroup = useFilterItem("version_group", "major");
 
-const time = useFilterItem("time", "current");
+	const time = useFilterItem("time", "current");
 
-const aggregate = useFilterItem("aggregate", "yes");
-const aggregateBool = computed(() => aggregate.value === "yes");
+	const aggregate = useFilterItem("aggregate", "yes");
+	const aggregateBool = computed(() => aggregate.value === "yes");
 
-const exclusive = useFilterItem("exclusive", "yes");
-const exclusiveBool = computed(() => exclusive.value === "yes");
+	const exclusive = useFilterItem("exclusive", "yes");
+	const exclusiveBool = computed(() => exclusive.value === "yes");
 
-const versionFrom = useFilterItem("version_from", undefined);
-const versionTo = useFilterItem("version_to", undefined);
-const { to, from } = await useVersionRange(
-	versionGroup,
-	versionTo,
-	versionFrom,
-);
+	const versionFrom = useFilterItem("version_from", undefined);
+	const versionTo = useFilterItem("version_to", undefined);
+	const { to, from } = await useVersionRange(
+		versionGroup,
+		versionTo,
+		versionFrom,
+	);
 
-const gameVersions = await useGameVersions(versionGroup);
-const defaultVersion = computed(() => gameVersions.value[0] as string);
-const version = useFilterItem("version", defaultVersion);
+	const gameVersions = await useGameVersions(versionGroup);
+	const defaultVersion = computed(() => gameVersions.value[0] as string);
+	const version = useFilterItem("version", defaultVersion);
+
+	const { isGlobalStats, isProjectStats, isRevenueStats } =
+		useTypeCategory(projectType);
+
+	const isGroupData = computed(() => {
+		return (
+			time.value === "current" && !isGlobalStats.value && !isRevenueStats.value
+		);
+	});
+
+	const max_days = computed(() => {
+		if (isGroupData.value) return undefined;
+
+		return time.value === "all" ? undefined : 30;
+	});
+
+	const { data, isFetching } = useStatData(
+		isGlobalStats,
+		isRevenueStats,
+		time,
+		{
+			mode: versionGroup,
+			exclusive: exclusiveBool,
+			type: projectType,
+			stat: stat,
+			versionTo: versionTo,
+			versionFrom: versionFrom,
+			version: version,
+			days: max_days,
+			aggregate: aggregateBool,
+		},
+	);
 
-const { isGlobalStats, isProjectStats, isRevenueStats } =
-	useTypeCategory(projectType);
+	const lazyIsGroupData = ref(isGroupData.value);
+	watch(isFetching, () => {
+		if (!isFetching.value) lazyIsGroupData.value = isGroupData.value;
+	});
 
-const isGroupData = computed(() => {
-	return (
-		time.value === "current" && !isGlobalStats.value && !isRevenueStats.value
-	);
-});
-
-const max_days = computed(() => {
-	if (isGroupData.value) return undefined;
-
-	return time.value === "all" ? undefined : 30;
-});
-
-const { data, isFetching } = useStatData(isGlobalStats, isRevenueStats, time, {
-	mode: versionGroup,
-	exclusive: exclusiveBool,
-	type: projectType,
-	stat: stat,
-	versionTo: versionTo,
-	versionFrom: versionFrom,
-	version: version,
-	days: max_days,
-	aggregate: aggregateBool,
-});
-
-const lazyIsGroupData = ref(isGroupData.value);
-watch(isFetching, () => {
-	if (!isFetching.value) lazyIsGroupData.value = isGroupData.value;
-});
-
-const explanation = computed(() => {
-	return useExplanations(projectType.value, stat.value);
-});
-
-const sideBarOpen = ref(false);
+	const explanation = computed(() => {
+		return useExplanations(projectType.value, stat.value);
+	});
+
+	const sideBarOpen = ref(false);
 </script>
 
 <template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index aa873a7..b1e8d48 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-useHead({
-	title: "Modrinth Statistics",
-});
+	useHead({
+		title: "Modrinth Statistics",
+	});
 
-useTracking();
+	useTracking();
 
-const { data } = useFetch("/api/stats/global");
+	const { data } = useFetch("/api/stats/global");
 </script>
 
 <template>
@@ -58,14 +58,14 @@ const { data } = useFetch("/api/stats/global");
 </template>
 
 <style scoped>
-.dotted-background {
-	background-image:
-		radial-gradient(#18181b 1px, transparent 1px),
-		radial-gradient(#18181b 2px, transparent 2px),
-		linear-gradient(to bottom, #18181b, #030712);
-	background-size:
-		10px 10px,
-		30px 30px,
-		cover;
-}
+	.dotted-background {
+		background-image:
+			radial-gradient(#18181b 1px, transparent 1px),
+			radial-gradient(#18181b 2px, transparent 2px),
+			linear-gradient(to bottom, #18181b, #030712);
+		background-size:
+			10px 10px,
+			30px 30px,
+			cover;
+	}
 </style>
diff --git a/biome.json b/biome.json
index c803a34..ace286b 100644
--- a/biome.json
+++ b/biome.json
@@ -40,7 +40,8 @@
 	"html": {
 		"experimentalFullSupportEnabled": true,
 		"formatter": {
-			"enabled": true
+			"enabled": true,
+			"indentScriptAndStyle": true
 		}
 	}
 }
-- 
2.51.2