Zakscode is now using momentum

src/App.vue

@@ -24,5 +24,5 @@ import Profile from '@/components/profile.vue';
 	</div>
 
 	<!-- Spacer -->
-	<div class="d-none d-sm-block w-100" style="height: 40px"></div>
+	<div class="d-none d-lg-block w-100" style="height: 40px"></div>
 </template>

src/components/contact.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Icon from '@/components/icon.vue';
-import {environment} from '@/environments/environment';
+import {momentum} from '@/services/momentum.service';
 import {ref} from 'vue';
 
 const disable = ref(false);
@@ -31,23 +31,10 @@ function validateEmail(email: string) {
 }
 
 function send(name: string, email: string, subject: string, message: string) {
-	function formEncode(data: any): string {
-		return Object.entries(data).map(([key, value]) =>
-			encodeURIComponent(key) + '=' + encodeURIComponent(<any>value)
-		).join('&');
-	}
-
-	return fetch('https://postmail.invotes.com/send', {
-		method: 'post',
-		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
-		body: formEncode({
-			access_token: environment.postMailKey,
-			subject: `ZaksCode: ${subject}`,
-			text: `App: ZaksCode\nFrom: ${name} <${email}>\nSubject: ${subject}\n\nMessage:\n${message}`
-		})
-	}).then(async resp => {
-		if(!resp.ok) throw new Error(resp.statusText);
-		return await resp.text();
+	return momentum.email.send({
+		to: ['zaktimson@gmail.com', email],
+		subject: `ZaksCode: ${subject}`,
+		body: {template: 'email', data: {body: `From: ${name} &lt;${email}&gt;<br><br>${message}`}}
 	});
 }
 

src/components/projects.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import type {Project} from '@/models/project';
 
 defineProps({
-	projects: {type: Array as () => Project[], required: true}
+	projects: {type: Array as () => any[], required: true}
 });
 </script>
 

src/environments/environment.ts

@@ -1,3 +1,6 @@
+const devMode = location?.port == '5173';
+
 export const environment = {
-	postMailKey: (<any>window)?.env?.APP_POSTMAIL_KEY || (<any>import.meta).env.APP_POSTMAIL_ACCESS_TOKEN,
+	apiUrl: devMode ? 'http://localhost' : location.host,
+	devMode
 }

src/models/project.ts

@@ -1,25 +0,0 @@
-export interface Project {
-	icon?: string;
-	invertIcon?: boolean;
-	name: string;
-	description: string;
-	link: string;
-	source?: string;
-}
-
-export const services: Project[] = [
-	{name: 'Group Gallery', icon: 'https://group-gallery.zakscode.com/favicon.svg', link: 'https://group-gallery.zakscode.com', description: 'Capture, Share, and Enjoy Moments Together'},
-	{name: 'Phone Reminders (Coming Soon)', icon: 'https://phone-reminders.com/phone-reminders.png', link: 'https://phone-reminders.com', description: 'Automatically call & send SMS reminders to clients for events using Google Calendar'},
-	{name: 'Map Alliance', icon: 'https://maps.zakscode.com/assets/images/logo.png', link: 'https://maps.zakscode.com', description: 'An online GIS tool which enables users to view, edit & share various "marked-up" maps'},
-	{name: 'Formula Manager', icon: 'https://git.zakscode.com/avatars/7ec6bfd66b2bf9bad5c43c75a33f9cb3f6609b05c33a31f5d1e524a567cd09c1?size=280', link: 'https://screenprintingsuppliescanada.com/formulation-manager', description: 'A web & computer application used by FH&Sons to record chemical formulas & distribute them to clients'},
-];
-
-export const openSource: Project[] = [
-	{name: 'Momentum', icon: 'https://git.zakscode.com/repo-avatars/4c85dd05e237977cb23b52fe883b91a97b61276a49f5539d2c998609b0eddf92', invertIcon: true, link: 'https://git.zakscode.com/ztimson/momentum', source: 'https://git.zakscode.com/ztimson/momentum', description: 'Server Development Platform'},
-	{name: 'Transmute (Coming Soon)', icon: 'https://git.zakscode.com/repo-avatars/b497daaf22a214fe6d6cc35b8ec217cd22401b668dff93dcfcc7557bd8a46d96', link: 'https://git.zakscode.com/ztimson/transmute', source: 'https://git.zakscode.com/ztimson/transmute', description: 'Distributed video conversion tool with built in WebUI'},
-	{name: 'ZaksCode', icon: 'https://git.zakscode.com/repo-avatars/590279cb4b176c6a7924364c7b0ef78afa80696703abe5bef8d9ce7e12477f3d', link: 'https://zakscode.com', source: 'https://git.zakscode.com/ztimson/zakscode', description: 'Source code for this website, ZaksCode.com'},
-	{name: 'Legio 30', icon: 'https://git.zakscode.com/repo-avatars/f66e3d6f5ff4646b45e859f6bf00c0e0de0621d8a45a47481d53d67b67700f2a', invertIcon: true, link: 'https://legio-30.org', source: 'https://git.zakscode.com/ztimson/legio-30', description: 'Website for a non-profit Roman re-enactment group from Southern Ontario'},
-	{name: 'Pelican Landing (Coming Soon)', icon: 'https://git.zakscode.com/ztimson/pelican-landing/raw/branch/develop/src/assets/logo.png', link: 'https://pelican-landing.zakscode.com', source: 'https://git.zakscode.com/ztimson/pelican-landing', description: 'Business website for a hunting & fishing lodge on the Lage of Woods in Northern Ontario'},
-	{name: 'Var-Persist', icon: 'https://git.zakscode.com/repo-avatars/89f6c36caf75762ed9f7f98b69044b7db30da5230be7c5cea54f8a1158f1669a', link: 'https://www.npmjs.com/package/var-persist', source: 'https://git.zakscode.com/ztimson/var-persist', description: 'TypeScript library to sync variables with localStorage'},
-	{name: 'PyBar', icon: 'https://git.zakscode.com/repo-avatars/002f97340c2781ccfa5d09fde97403fd499c39a9ad5675dc0edf05a8396e9ac5', link: 'https://git.zakscode.com/ztimson/py-bar', source: 'https://git.zakscode.com/ztimson/py-bar', description: 'Python library to display ASCII progress bars using iterators'},
-];

src/services/momentum.service.ts

@@ -0,0 +1,31 @@
+import {environment} from '@/environments/environment';
+import {PathEvent} from '@ztimson/utils';
+import {ref, onUnmounted} from 'vue';
+import {Momentum} from '@ztimson/momentum';
+
+export function mRef<T>(event: string, get: (event?: PathEvent, ...args: any[]) => T | Promise<T>): any;
+export function mRef<T>(event: string, init: () => T | Promise<T>, get: (event: PathEvent, ...args: any[]) => T | Promise<T>): any;
+export function mRef<T>(event: string, fn1: (...args: any[]) => T | Promise<T>, fn2?: (event: PathEvent, ...args: any[]) => T | Promise<T>): any {
+	// Init
+	const resp = fn1(), promise = resp instanceof Promise;
+	const r = ref<T | null>(promise ? null : resp);
+	if(promise) resp.then(v => r.value = v);
+
+	// Get
+	const get = fn2 || fn1;
+	mWatch(event, async (event, ...args) => r.value = await get(<any>event, ...args));
+	return r;
+}
+
+export function mWatch(event: string, get: (event?: PathEvent, ...args: any[]) => any) {
+	const unsubscribe = momentum.on(event, get);
+	onUnmounted(() => unsubscribe());
+}
+
+export const momentum = new Momentum(environment.apiUrl, {
+	app: 'ZaksCode',
+	logLevel: 'ERROR',
+	persist: true,
+	socket: true
+});
+momentum.client.inject(true);

src/views/Home.vue

@@ -4,17 +4,23 @@ import Contact from '@/components/contact.vue';
 import Konsole from '@/components/konsole.vue';
 import Projects from '@/components/projects.vue';
 import Refrences from '@/components/refrences.vue';
-import {services, openSource} from '@/models/project';
+import {momentum} from '@/services/momentum.service';
 import {ref} from 'vue';
 
+// Get favorites
+const products = ref<any[]>([]);
+const openSource = ref<any[]>([]);
+momentum.data.read('Repos').then(resp =>
+	resp.forEach((r: any) => (r.product ? products : openSource).value.push(r)));
+
 // Get repository count
 let remainder = ref(0);
-fetch('https://git.zakscode.com/api/v1/repos/search', {
+fetch('https://git.zakscode.com/api/v1/repos/search?limit=1000', {
 	method: 'get',
 	headers: {"Content-Type": "application/json"}
-}).then(async (repos: any) => {
-	const data = (await repos.json())?.data;
-	remainder.value = data.length - openSource.length;
+}).then(async (resp: any) => {
+	const data = (await resp.json())?.data;
+	remainder.value = data.length - openSource.value.length;
 });
 </script>
 
@@ -58,7 +64,7 @@ fetch('https://git.zakscode.com/api/v1/repos/search', {
 			<hr class="mb-4">
 			<div class="mb-4">
 				<h4 class="mb-3 text-muted">Products & Services</h4>
-				<projects :projects="services"/>
+				<projects :projects="products"/>
 			</div>
 			<div>
 				<h4 class="mb-3 text-muted">Open Source</h4>