Merge pull request #12 from DaniloMurer/develop

Develop

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/Dockerfile

@@ -1,18 +1,18 @@
-FROM node:22.3.0-slim as base
+FROM node:22.3.0-slim AS base
 EXPOSE 3000
 ENV NODE_ENV=production
 WORKDIR /src
 #RUN npm install yarn
 
-FROM base as build
+FROM base AS build
 EXPOSE 3000
 COPY . .
 RUN npm install --production=false
 RUN npm run build
 
-FROM base as run
+FROM base AS run
 ENV PORT=$PORT
 
 COPY --from=build /src/.output /src/.output
 
-CMD [ "node", ".output/server/index.mjs" ]
+CMD [ "node", ".output/server/index.mjs" ]

client/app.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import {useThemeStore} from '~/store/theme';
+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: ''
@@ -19,6 +20,7 @@ const login = function() {
 		body: JSON.stringify(requestBody)
 	}).then((data: any) => {
 		localStorage.setItem('token', data.token)
+		useAuthStore().token = data.token;
 		const loginModal = document.getElementById('loginModal');
 		if (loginModal) {
 			loginModal.close();
@@ -29,15 +31,21 @@ 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(() => {
+	useAuthStore().token = localStorage.getItem('token');
 	window.addEventListener('keydown', (e) => {
-		if (e.ctrlKey && e.altKey && e.key === 'l') {
-			document.getElementById('loginModal').showModal();
+		if (e.ctrlKey && e.altKey && e.shiftKey && e.key === 'L') {
+			const token = localStorage.getItem('token');
+			if (token) {
+				navigateTo('/admin');
+			} else {
+				document.getElementById('loginModal').showModal();
+			}
 		}
 	});
 	isWhite.value = localStorage.getItem("isWhite") === 'true';
@@ -50,14 +58,15 @@ onMounted(() => {
 	<div class="p-3 flex flex-col h-lvh gap-16">
 		<div class="navbar bg-base-300 rounded-2xl shadow-2xl">
 			<div class="flex-1">
-				<a class="btn btn-ghost text-xl" href="/">churrer.xyz</a>
-				<a class="btn btn-ghost text-xl" href="/about">about this site</a>
+				<NuxtLink class="btn btn-ghost text-xl" to="/">churrer.xyz</NuxtLink>
+				<NuxtLink class="btn btn-ghost text-xl" to="/about">about this site</NuxtLink>
 			</div>
 			<div class="flex-none p-5">
-				<label class="flex cursor-pointer gap-2">
-					<span class="label-text">Dark</span>
-					<input type="checkbox" value="winter" v-bind:checked="isWhite" v-on:click="toggleTheme" class="toggle theme-controller"/>
-					<span class="label-text">Light</span>
+				<label class="swap swap-rotate">
+					<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>
 			</div>
 		</div>
@@ -72,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/common/types.ts

@@ -0,0 +1,47 @@
+export interface Experience {
+	id: number;
+	position: string;
+	company: string;
+	timeFrame: string;
+	responsibilities: string;
+}
+
+export interface Technology {
+	id: number,
+	name: string;
+	logoClass: string;
+	experience: string;
+	description: string;
+}
+
+export class ExperienceDto implements Experience {
+	id: number;
+	position: string;
+	company: string;
+	timeFrame: string;
+	responsibilities: string;
+
+	constructor(position: string, company: string, timeFrame: string, responsibilities: string) {
+		this.id = 0;
+		this.position = position;
+		this.company = company;
+		this.timeFrame = timeFrame;
+		this.responsibilities = responsibilities;
+	}
+}
+
+export class TechnologyDto implements Technology {
+	id: number;
+	name: string;
+	logoClass: string;
+	experience: string;
+	description: string;
+
+	constructor(name: string, logoClass: string, experience: string, description: string) {
+		this.id = 0;
+		this.name = name;
+		this.logoClass = logoClass;
+		this.experience = experience;
+		this.description = description;
+	}
+}

client/components/Experiences.vue

@@ -1,19 +1,15 @@
 <script setup lang="ts">
-interface Experience {
-	position: string;
-	company: string;
-	timeFrame: string;
-	responsibilities: string;
-}
 const experiences = ref<Experience[]>([]);
-
+let apiHost: string = '';
 onMounted(() => {
-	$fetch('/api/experiences', {
+	apiHost = window.location.hostname === 'localhost' ? 'http://localhost:8080' : 'https://api.churrer.xyz';
+
+	$fetch<Experience[]>(`${apiHost}/api/experience`, {
 		method: 'GET',
 		headers: {
 			'Accept': 'application/json',
 		}
-	}).then((data: any) => {
+	}).then((data: Experience[]) => {
 		experiences.value = data;
 		console.log(experiences)
 	}).catch((err) => {
@@ -27,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

@@ -5,7 +5,6 @@
 <template>
 	<div class="hero bg-base-300 lg:w-max rounded-2xl shadow-2xl">
 		<div class="hero-content flex-col lg:flex-row p-10">
-			<!--    <span class="iconify logos&#45;&#45;kubernetes iconify-color text-9xl"/>-->
 			<div class="avatar placeholder">
 				<div class="bg-secondary text-neutral-content w-36 rounded-full">
 					<span class="text-3xl">Churrer</span>
@@ -17,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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps(['data', 'tableTitle'])
+</script>
+<template>
+	<h1 class="font-bold">{{ tableTitle }}</h1>
+	<div>
+		<table class="table table-zebra">
+			<thead>
+				<tr>
+					<slot name="table-header" />
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="item in data">
+					<slot name="table-row" :item="item" />
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>

client/components/Technologies.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
-interface Technology {
-	name: string;
-	logoClass: string;
-	experience: string;
-	description: string;
-}
 const technologies = ref<Technology[]>([]);
+let apiHost: string = '';
+
+onMounted(() => {
+	apiHost = window.location.hostname === 'localhost' ? 'http://localhost:8080' : 'https://api.churrer.xyz';
+	$fetch<Technology[]>(`${apiHost}/api/technology`, {
+		method: 'GET',
+		headers: {
+			'Accept': 'application/json',
+		}
+	}).then((data: Technology[]) => {
+		technologies.value = data;
+	});
+});
+
 
-$fetch('/api/technologies', {
-	method: 'GET',
-	headers: {
-		'Accept': 'application/json',
-	}
-}).then((data: any) => {
-	technologies.value = data;
-})
 </script>
 
 <template>
-	<div class="stats stats-vertical lg:stats-horizontal bg-base-300 p-2">
+	<div class="stats stats-vertical xl: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 @@ $fetch('/api/technologies', {
 	<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

@@ -0,0 +1,8 @@
+import { useAuthStore } from '~/store/auth';
+
+export default defineNuxtRouteMiddleware((to, from) => {
+	const token = useAuthStore().token;
+	if (!token) {
+		return navigateTo('/')
+	}
+});

client/nuxt.config.ts

@@ -3,5 +3,8 @@ export default defineNuxtConfig({
 	compatibilityDate: '2024-04-03',
 	devtools: {enabled: true},
 	modules: ["@nuxtjs/tailwindcss", "nuxt-aos", "@pinia/nuxt"],
-	telemetry: false
+	telemetry: false,
+	imports: {
+		dirs: ['common'],
+	}
 })