add analytics for projects, add alt

src/lib/components/project.svelte

@@ -1,11 +1,13 @@
 <script>
+    import { goatCounter } from "$lib/goatcounter";
     export var image; // "https://picsum.photos/725/350?random=" + Math.floor(Math.random() * 5000);
     export var link = "";
     export var tags = [];
     export var grayscale = false;
     export var extradark = false;
-    export var width = 0;
-    export var height = 0;
+    export var width;
+    export var height;
+    export var name;
     function handle(e) {
         if(!link) {
             e.preventDefault();
@@ -14,10 +16,10 @@
     }
 </script>
 
-<a href={link || "#"} target="_blank" rel="noreferrer noopener" class="full" on:click={handle}>
+<a href={link || "#"} target="_blank" rel="noopener" data-goatcounter-click="project-{name}" class="full" on:click={handle} use:goatCounter>
     <div class="project">
         <div class="imgcon">
-            <img src={image} alt="Project" draggable={false} class:grayscale {width} {height}>
+            <img src={image} alt={name} draggable={false} class:grayscale {width} {height}>
             {#if $$slots.desc}
                 <div class="desc" class:extradark>
                     <div class="content">

src/lib/goatcounter.js

@@ -0,0 +1,29 @@
+/**
+ * @param {HTMLElement} elem
+ * @param {{ click?: string, title?: string, referrer?: string }} [opts]
+ */
+export function goatCounter(elem, opts) {
+    if(!('goatcounter' in window)) return;
+    if (elem.dataset.goatcounterBound && elem.dataset.goatcounterBound !== 'false')
+        return
+    const counter = function() {
+        // @ts-ignore
+        window.goatcounter.count({
+            event:    true,
+            // @ts-ignore
+            path:     (opts.click || elem.dataset.goatcounterClick || elem.name || elem.id || ''),
+            title:    (opts.title || elem.dataset.goatcounterTitle || elem.title || (elem.innerHTML || '').substring(0, 200) || ''),
+            referrer: (opts.referrer || elem.dataset.goatcounterReferrer || elem.dataset.goatcounterReferral || ''),
+        })
+    }
+    elem.addEventListener("click", counter, false);
+    elem.addEventListener("auxclick", counter, false);
+    elem.dataset.goatcounterBound = 'true'
+    return {
+        destroy() {
+            elem.removeEventListener("click", counter, false);
+            elem.removeEventListener("auxclick", counter, false);
+            elem.dataset.goatcounterBound = 'false'
+        }
+    }
+}

src/routes/index.svelte

@@ -48,7 +48,6 @@
     <meta property="og:profile:gender" content="male" />
 </svelte:head>
 
-<Navbar />
 <main class:dark={$darkmode}>
 	<Hero {appTypeHover}>
 		<h1>I'm a young developer making <u on:mouseenter={() => appTypeHover = "websites"} on:mouseleave={() => appTypeHover == "websites" && (appTypeHover = null)}>websites</u>,
@@ -79,6 +78,7 @@
 				grayscale={appTypeHover && appTypeHover === "bots"}
 				width={2050}
 				height={1080}
+                name="Heaventaker"
 			>
 				<b>Heaventaker</b> - Helltaker fan game
 				<svelte:fragment slot="desc">
@@ -97,6 +97,7 @@
 				extradark
 				width={1920}
 				height={940}
+                name="Animasher"
 			>
 				<b>Animasher</b> - Platform for creating and sharing animations
 				<svelte:fragment slot="desc">
@@ -118,6 +119,7 @@
 				grayscale={appTypeHover && appTypeHover !== "websites"}
 				width={803}
 				height={382}
+                name="Mangades reader"
 			>
 				<b>Mangades</b> - Mangadex downloader and viewer
 				<svelte:fragment slot="desc">
@@ -136,6 +138,7 @@
 				grayscale={appTypeHover && appTypeHover === "applications"}
 				width={1080}
 				height={720}
+                name="igni discord bot"
 			>
 				<b>igni</b> - The universal Discord bot
 				<svelte:fragment slot="desc">