chore: formatting

README.md

@@ -14,6 +14,7 @@ yarn install
 # start nuxt frontend
 yarn client:startdev
 ```
+
 if you don't feel like running the yarn command to start the frontend:
 
 don't worry, I got you covered. simply run the Intellij [StartClient](.run/StartClient.run.xml) run config.

client/app.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import {useThemeStore} from '~/store/theme';
-import {useAuthStore} from "~/store/auth";
+import { useThemeStore } from '~/store/theme';
+import { useAuthStore } from "~/store/auth";
 
 const username = ref('');
 const password = ref('');
 const isWhite = ref(false);
-const login = function() {
-	const requestBody  = {
+const login = function () {
+	const requestBody = {
 		username: username.value,
 		password: password.value,
 		token: ''
@@ -31,9 +31,9 @@ const login = function() {
 	})
 }
 
-const toggleTheme = function() {
+const toggleTheme = function () {
 	localStorage.setItem("isWhite", String(!isWhite.value));
-	useThemeStore().$patch({isWhite: !isWhite.value});
+	useThemeStore().$patch({ isWhite: !isWhite.value });
 }
 
 onMounted(() => {
@@ -63,7 +63,8 @@ onMounted(() => {
 			</div>
 			<div class="flex-none p-5">
 				<label class="swap swap-rotate">
-					<input type="checkbox" value="winter" v-bind:checked="isWhite" v-on:click="toggleTheme" class="theme-controller"/>
+					<input type="checkbox" value="winter" v-bind:checked="isWhite" v-on:click="toggleTheme"
+						class="theme-controller" />
 					<span class="iconify carbon--moon text-2xl swap-off"></span>
 					<span class="iconify carbon--sun text-2xl swap-on"></span>
 				</label>
@@ -80,20 +81,20 @@ onMounted(() => {
 						<div class="label">
 							<span class="label-text">Username</span>
 						</div>
-						<input class="input input-primary w-11/12" v-model="username"/>
+						<input class="input input-primary w-11/12" v-model="username" />
 					</div>
 					<div>
 						<div class="label">
 							<span class="label-text">Password</span>
 						</div>
-						<input type="password" class="input input-primary w-11/12" v-model="password"/>
+						<input type="password" class="input input-primary w-11/12" v-model="password" />
 					</div>
 				</div>
 				<button class="btn btn-secondary w-24 float-right mt-16 mr-10" v-on:click="login()">Login</button>
 			</div>
 		</dialog>
-		<NuxtRouteAnnouncer/>
-		<NuxtPage/>
+		<NuxtRouteAnnouncer />
+		<NuxtPage />
 	</div>
 </template>
 <style>

client/components/Experiences.vue

@@ -23,21 +23,17 @@ onMounted(() => {
 		<li v-for="(experience, index) in experiences">
 			<div class="mb-10" :class="index % 2 == 0 ? 'timeline-start' : 'timeline-end'">
 				<WorkCard :class="index % 2 == 0 ? 'lg:mr-10' : 'lg:ml-10'"
-						  :data-aos="index % 2 == 0 ? 'fade-right' : 'fade-left'"
-						  data-aos-duration="1000"
-						  :title="experience.position"
-						  :company="experience.company" :timeframe="experience.timeFrame"
-						  :text="experience.responsibilities"/>
+					:data-aos="index % 2 == 0 ? 'fade-right' : 'fade-left'" data-aos-duration="1000"
+					:title="experience.position" :company="experience.company" :timeframe="experience.timeFrame"
+					:text="experience.responsibilities" />
 			</div>
 			<div class="timeline-middle">
 				<span class="iconify carbon--time text-xl"></span>
 			</div>
 			<!--	fixme: https://github.com/DaniloMurer/churrer.xyz/issues/8		-->
-			<hr v-if="index % 2 == 0"/>
+			<hr v-if="index % 2 == 0" />
 		</li>
 	</ul>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

client/components/Hero.vue

@@ -16,19 +16,17 @@
 					The developer you were looking for all along!
 				</p>
 				<p class="py-6 flex gap-3 content-center">
-					<span class="iconify carbon--email text-2xl text-accent"/><a class="link-accent"
-																				 href="mailto:danilojakob@protonmail.com">danilojakob@protonmail.com</a>
+					<span class="iconify carbon--email text-2xl text-accent" /><a class="link-accent"
+						href="mailto:danilojakob@protonmail.com">danilojakob@protonmail.com</a>
 				</p>
 				<p class="py-6 flex gap-3 content-center">
-					<span class="iconify logos--github-icon text-accent w-6 h-6"/><a class="link-accent"
-																					 href="https://github.com/DaniloMurer">See
-					my work</a>
+					<span class="iconify logos--github-icon text-accent w-6 h-6" /><a class="link-accent"
+						href="https://github.com/DaniloMurer">See
+						my work</a>
 				</p>
 			</div>
 		</div>
 	</div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

client/components/Table.vue

@@ -7,12 +7,12 @@ defineProps(['data', 'tableTitle'])
 		<table class="table table-zebra">
 			<thead>
 				<tr>
-					<slot name="table-header"/>
+					<slot name="table-header" />
 				</tr>
 			</thead>
 			<tbody>
 				<tr v-for="item in data">
-					<slot name="table-row" :item="item"/>
+					<slot name="table-row" :item="item" />
 				</tr>
 			</tbody>
 		</table>

client/components/Technologies.vue

@@ -21,7 +21,7 @@ onMounted(() => {
 	<div class="stats stats-vertical lg:stats-horizontal bg-base-300 p-2">
 		<div class="stat" v-for="technology in technologies">
 			<div class="stat-figure">
-				<span class="iconify iconify-color text-8xl" :class="technology.logoClass"/>
+				<span class="iconify iconify-color text-8xl" :class="technology.logoClass" />
 			</div>
 			<div class="stat-title text-primary text-2xl">{{ technology.name }}</div>
 			<div class="stat-value text-accent">{{ technology.experience }}</div>
@@ -31,6 +31,4 @@ onMounted(() => {
 	<p class="mt-4">Of course there is more, but you can ask me about that personally!</p>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

client/components/WorkCard.vue

@@ -12,6 +12,4 @@ const props = defineProps(['title', 'text', 'timeframe', 'company'])
 	</div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

client/middleware/auth.ts

@@ -1,4 +1,4 @@
-import {useAuthStore} from "~/store/auth";
+import { useAuthStore } from '~/store/auth';
 
 export default defineNuxtRouteMiddleware((to, from) => {
 	const token = useAuthStore().token;

client/pages/about.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import {useThemeStore} from '~/store/theme';
+import { useThemeStore } from '~/store/theme';
 
 const isWhite = ref(false);
 
 onMounted(() => {
-	isWhite.value = localStorage.getItem("isWhite") === 'true';
+	isWhite.value = localStorage.getItem('isWhite') === 'true';
 	useThemeStore().$subscribe((mutation, state) => {
 		isWhite.value = state.isWhite;
 	});
@@ -17,24 +17,31 @@ onMounted(() => {
 		<div class="card">
 			<div class="card-body text-center">
 				<p class="card-text max-w-6xl">
-					churrer.xyz is my portfolio website. I'm something like a full stack engineer, but I'm also a 'kubernaut'. Meaning I like the DevOps and automation side of things as well.
+					churrer.xyz is my portfolio website. I'm something like a full stack engineer, but I'm also a
+					'kubernaut'. Meaning I like the DevOps and automation side of things as well.
 				</p>
 				<p class="card-text max-w-6xl">
-					everything is powered by a managed kubernetes cluster on digital ocean. which is also being monitored by prometheus and grafana.
+					everything is powered by a managed kubernetes cluster on digital ocean. which is also being
+					monitored by prometheus and grafana.
 				</p>
 				<p class="card-text max-w-6xl">
-					I also got CI/CD going, with github actions I'm building the needed docker images and pushing them to my container registry. With Argo CD I'm deploying the containers to the cluster.
+					I also got CI/CD going, with github actions I'm building the needed docker images and pushing them
+					to my container registry. With Argo CD I'm deploying the containers to the cluster.
 				</p>
 				<p class="card-text max-w-6xl">
-					the frontend of this website is built with nuxt, tailwindcss and daisyui. the backend is made with Go...it's like the best thing I stumbled upon.
+					the frontend of this website is built with nuxt, tailwindcss and daisyui. the backend is made with
+					Go...it's like the best thing I stumbled upon.
 				</p>
 				<p class="card-text max-w-6xl">
-					I'm also a big fan of the open source community. Which is also why I decided to open-source the code for this site. so you don't have to take my word for what i used as technologies : )
+					I'm also a big fan of the open source community. Which is also why I decided to open-source the code
+					for this site. so you don't have to take my word for what i used as technologies : )
 				</p>
 			</div>
 		</div>
-		<img v-if="!isWhite" class="size-2/4" src="/assets/churrer_xyz.svg" alt="churrer.xyz diagram that shows the different components of the website"/>
-		<img v-if="isWhite" class="size-2/4" src="/assets/churrer_xyz_white.svg" alt="churrer.xyz diagram that shows the different components of the website"/>
+		<img v-if="!isWhite" class="size-2/4" src="/assets/churrer_xyz.svg"
+			alt="churrer.xyz diagram that shows the different components of the website" />
+		<img v-if="isWhite" class="size-2/4" src="/assets/churrer_xyz_white.svg"
+			alt="churrer.xyz diagram that shows the different components of the website" />
 		<span class="mt-5">very nice diagram of this website</span>
 	</div>
 </template>

client/pages/admin.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
-import {definePageMeta, type Technology, type Experience} from "#imports";
-import { ExperienceDto, TechnologyDto } from "~/common/types";
+import { definePageMeta, type Technology, type Experience } from '#imports';
+import { ExperienceDto, TechnologyDto } from '~/common/types';
 
 definePageMeta({
 	middleware: ['auth'],
@@ -17,7 +17,7 @@ let apiHost: string = '';
 
 onMounted(() => {
 	apiHost = window.location.hostname === 'localhost' ? 'http://localhost:8080' : 'https://api.churrer.xyz';
-	authenticationToken = localStorage.getItem("token");
+	authenticationToken = localStorage.getItem('token');
 	$fetch<Technology[]>(`${apiHost}/api/technology`, {
 		method: 'GET',
 		headers: {
@@ -36,7 +36,7 @@ onMounted(() => {
 	});
 });
 
-const saveExperience = function() {
+const saveExperience = function () {
 	$fetch(`${apiHost}/api/experience`, {
 		method: 'POST',
 		headers: {
@@ -48,7 +48,7 @@ const saveExperience = function() {
 	});
 }
 
-const saveTechnology = function() {
+const saveTechnology = function () {
 	$fetch(`${apiHost}/api/technology`, {
 		method: 'POST',
 		headers: {
@@ -60,7 +60,7 @@ const saveTechnology = function() {
 	})
 }
 
-const deleteTechnology = function(id: number) {
+const deleteTechnology = function (id: number) {
 	$fetch(`${apiHost}/api/technology/${id}`, {
 		method: 'DELETE',
 		headers: {
@@ -69,7 +69,7 @@ const deleteTechnology = function(id: number) {
 	});
 }
 
-const deleteExperience = function(id: number) {
+const deleteExperience = function (id: number) {
 	$fetch(`${apiHost}/api/experience/${id}`, {
 		method: 'DELETE',
 		headers: {
@@ -89,7 +89,7 @@ const deleteExperience = function(id: number) {
 			<th>Logo</th>
 		</template>
 
-		<template #table-row="{item}">
+		<template #table-row="{ item }">
 			<td>{{ item.name }}</td>
 			<td>{{ item.experience }}</td>
 			<td>{{ item.description }}</td>
@@ -105,7 +105,7 @@ const deleteExperience = function(id: number) {
 			<th>Responsibilities</th>
 		</template>
 
-		<template #table-row="{item}">
+		<template #table-row="{ item }">
 			<td>{{ item.company }}</td>
 			<td>{{ item.position }}</td>
 			<td>{{ item.timeFrame }}</td>
@@ -119,60 +119,60 @@ const deleteExperience = function(id: number) {
 			<div class="label">
 				<span class="label-text">Company</span>
 			</div>
-			<input type="text" class="input input-primary" v-model="experience.company"/>
+			<input type="text" class="input input-primary" v-model="experience.company" />
 		</div>
 
 		<div>
 			<div class="label">
 				<span class="label-text">Position</span>
 			</div>
-			<input type="text" class="input input-primary" v-model="experience.position"/>
+			<input type="text" class="input input-primary" v-model="experience.position" />
 		</div>
 
 		<div>
 			<div class="label">
 				<span class="label-text">TimeFrame</span>
 			</div>
-			<input type="text" class="input input-primary" v-model="experience.timeFrame"/>
+			<input type="text" class="input input-primary" v-model="experience.timeFrame" />
 		</div>
 
 		<div>
 			<div class="label">
 				<span class="label-text">Responsibilities</span>
 			</div>
-			<input type="text" class="input input-primary" v-model="experience.responsibilities"/>
+			<input type="text" class="input input-primary" v-model="experience.responsibilities" />
 		</div>
 		<button class="btn btn-secondary" v-on:click="saveExperience">Save</button>
 	</div>
-	<hr/>
+	<hr />
 	<div class="flex flex-col items-center gap-10">
 		<h2 class="font-bold text-4xl">Technology</h2>
 		<div>
 			<div class="label">
 				<span class="label-text">Name</span>
 			</div>
-			<input type="text" class="input input-primary" v-model="technology.name"/>
+			<input type="text" class="input input-primary" v-model="technology.name" />
 		</div>
 
 		<div>
 			<div class="label">
 				<span class="label-text">Experience</span>
 			</div>
-			<input type="text" class="input input-primary" v-model="technology.experience"/>
+			<input type="text" class="input input-primary" v-model="technology.experience" />
 		</div>
 
 		<div>
 			<div class="label">
 				<span class="label-text">Description</span>
 			</div>
-			<input type="text" class="input input-primary" v-model="technology.description"/>
+			<input type="text" class="input input-primary" v-model="technology.description" />
 		</div>
 
 		<div>
 			<div class="label">
 				<span class="label-text">Tailwind Logo</span>
 			</div>
-			<input type="text" class="input input-primary" v-model="technology.logoClass"/>
+			<input type="text" class="input input-primary" v-model="technology.logoClass" />
 		</div>
 		<button class="btn btn-secondary" v-on:click="saveTechnology">Save</button>
 	</div>

client/pages/index.vue

@@ -55,11 +55,11 @@ const sendMetricsData = function () {
 </script>
 <template>
 	<div class="flex flex-col items-center gap-16">
-		<Hero/>
+		<Hero />
 		<div class="divider">Technologies</div>
-		<Technologies/>
+		<Technologies />
 		<div class="divider">Experience</div>
-		<Experiences/>
+		<Experiences />
 	</div>
 	<div role="alert" class="alert fixed bottom-0 left-0 w-2/6 h-56 m-5" v-if="showTelemetryAlert">
 		<span class="iconify carbon--information text-2xl"></span>

client/store/auth.ts

@@ -1,4 +1,4 @@
-import {defineStore} from 'pinia';
+import { defineStore } from 'pinia';
 
 export const useAuthStore = defineStore('auth', {
 	state: () => ({

client/store/theme.ts

@@ -1,4 +1,4 @@
-import {defineStore} from 'pinia';
+import { defineStore } from 'pinia';
 
 export const useThemeStore = defineStore('theme', {
 	state: () => ({