[feature] ApiClient + Posts Query

.env.example

@@ -0,0 +1,16 @@
+# --- The environment where the api is running under.
+#     example: production, local, staging, etc.
+VITE_API_ENV=
+
+# --- The oullin.io/api URL.
+#     https://github.com/oullin/api
+VITE_API_URL=
+
+# --- The given application registered account name
+VITE_ACCOUNT_NAME=
+
+# --- The given application public key
+VITE_PUBLIC_KEY=
+
+# --- The given application API's utilises public cryptography to validate the origin of the requesters.
+VITE_PUBLIC_SIGNATURE=

eslint.config.js

@@ -72,7 +72,7 @@ export default [
 	},
 
 	{
-		files: ['src/partials/EducationPartial.vue', 'src/partials/RecommendationPartial.vue'],
+		files: ['src/partials/EducationPartial.vue', 'src/partials/RecommendationPartial.vue', 'src/pages/PostPage.vue'],
 		rules: {
 			'vue/no-v-html': 'off',
 		},

index.html

@@ -7,10 +7,8 @@
 		<title>Gustavo Ocanto</title>
 
 		<script defer>
-			if (localStorage.getItem('dark-mode') === 'false' || !('dark-mode' in localStorage)) {
-				document.querySelector('html').classList.remove('dark');
-			} else {
-				document.querySelector('html').classList.add('dark');
+			if (localStorage.getItem('dark-mode') === 'true') {
+				document.documentElement.classList.add('dark');
 			}
 		</script>
 	</head>

package.json

@@ -12,6 +12,7 @@
 	},
 	"dependencies": {
 		"dompurify": "^3.2.6",
+		"highlight.js": "^11.11.1",
 		"marked": "^16.0.0",
 		"pinia": "^3.0.2",
 		"vue": "^3.5.13",

src/App.vue

@@ -1,3 +1,14 @@
 <template>
 	<router-view />
 </template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useApiStore } from '@api/store.ts';
+
+const apiStore = useApiStore();
+
+onMounted(() => {
+	apiStore.boot();
+});
+</script>

src/dark-mode.ts

@@ -0,0 +1,20 @@
+import { ref, watchEffect } from 'vue';
+
+const isDark = ref<boolean>(localStorage.getItem('dark-mode') === 'true');
+
+export function useDarkMode() {
+	watchEffect(() => {
+		localStorage.setItem('dark-mode', String(isDark.value));
+
+		document.documentElement.classList.toggle('dark', isDark.value);
+	});
+
+	function toggleDarkMode(): void {
+		isDark.value = !isDark.value;
+	}
+
+	return {
+		isDark,
+		toggleDarkMode,
+	};
+}

src/pages/HomePage.vue

@@ -44,19 +44,28 @@ import TalksPartial from '@partials/TalksPartial.vue';
 import FooterPartial from '@partials/FooterPartial.vue';
 import HeaderPartial from '@partials/HeaderPartial.vue';
 import SideNavPartial from '@partials/SideNavPartial.vue';
+import WidgetSkillsPartial from '@partials/WidgetSkillsPartial.vue';
 import ArticlesListPartial from '@partials/ArticlesListPartial.vue';
 import WidgetSponsorPartial from '@partials/WidgetSponsorPartial.vue';
 import FeaturedProjectsPartial from '@partials/FeaturedProjectsPartial.vue';
-import WidgetSkillsPartial from '@partials/WidgetSkillsPartial.vue';
 
-import { useUserStore } from '@stores/users/user.ts';
 import { onMounted } from 'vue';
+import { useApiStore } from '@api/store.ts';
+import { debugError } from '@api/http-error.ts';
+
+const apiStore = useApiStore();
+
+onMounted(async () => {
+	console.log('Attempting to fetch user profile...');
 
-const userStore = useUserStore();
+	try {
+		const userProfileResponse = await apiStore.getProfile();
 
-onMounted(() => {
-	userStore.onBoot(() => {
-		console.log('[home]: app booted...');
-	});
+		if (userProfileResponse.data) {
+			console.log(`Welcome, ${userProfileResponse.data.name}!`);
+		}
+	} catch (error) {
+		debugError(error);
+	}
 });
 </script>