Merge pull request #13 from JonasunderscoreJones/embed-meta-fix

Added analytics tracking

src/app.html

@@ -7,6 +7,18 @@
 	<meta charset="utf-8" />
 	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 	<meta name="viewport" content="width=device-width" />
+
+	<meta property="og:title" content="Jonas_Jones's Homepage">
+	<meta name="application-name" content="Jonas_Jones's Homepage">
+	<meta property="og:description" content="The Home of all creations by Jonas_Jones!">
+	<meta name="description" content="The Home of all creations by Jonas_Jones!">
+	<meta name="author" content="Jonas_Jones">
+	<meta property="og:image" content="/icon_800x800.png">
+	<meta property="og:url" content="./">
+	<meta name="url" content="./">
+	<meta property="og:type" content="website">
+	<meta name="theme-color" content="#008080">
+
 	%sveltekit.head%
 </head>
 

src/components/Footer.svelte

@@ -1,5 +1,5 @@
 <div class="footer">
-  <p>Website by Jonas_Jones 2021 - 2023</p>
+  <p>Website by Jonas_Jones 2021 - 2024</p>
 </div>
 
 <script>

src/components/NavBar.svelte

@@ -1,4 +1,21 @@
 <script>
+  import { onMount } from 'svelte';
+  import { afterNavigate } from '$app/navigation';
+  import { recordRequest } from './analytics';
+
+  // Function to handle navigation events
+  function handleNavigation() {
+    recordRequest();
+  }
+
+  // Call the analytics function on initial page load and after each navigation
+  onMount(() => {
+    handleNavigation();
+    afterNavigate(() => {
+      handleNavigation();
+    });
+  });
+
   let showMenu = false;
 
   function toggleMenu() {
@@ -10,7 +27,8 @@
   let navLinks = [
     { name: "Home", url: "/" },
     { name: "Projects", url: "/projects" },
-    { name: "Wiki", url: "https://wiki.jonasjones.dev" },
+    { name: "Docs", url: "https://docs.jonasjones.dev" },
+    { name: "Blog", url: "https://blog.jonasjones.dev" },
     // just removed this cause it bothered me
     //{ name: 'For The Based™', url: '/based'},
     //{ name: 'Status', url: '/status'},

src/components/analytics.js

@@ -0,0 +1,34 @@
+// Function to record the request with analytics
+  export async function recordRequest() {
+
+    const analyticsData = {
+      timestamp: Date.now(),
+      domain: window.location.hostname,
+      method: 'GET', // Assuming the request method is GET; adjust as necessary
+      path: window.location.pathname,
+    };
+
+    console.log('Recording request:', analyticsData);
+
+    const ANALYTICS_URL = 'https://analytics.jonasjones.dev/requests/record/ipunknown';
+    const ANALYTICS_API_KEY = import.meta.env.VITE_ANALYTICS_API_KEY;
+
+    try {
+      const response = await fetch(ANALYTICS_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': ANALYTICS_API_KEY,
+        },
+        body: JSON.stringify(analyticsData),
+      });
+
+      if (response.ok) {
+        console.log('Request recorded successfully');
+      } else {
+        console.error('Failed to record request:', response.status, await response.text());
+      }
+    } catch (error) {
+      console.error('Error recording request:', error);
+    }
+  }

src/routes/+page.svelte

@@ -10,7 +10,6 @@
   <title>Jonas_Jones</title>
   <Padding />
   <div class="image-wrapper">
-    <div class="card-front">
       <!-- svelte-ignore a11y-img-redundant-alt -->
     <img
       src="/icon_800x800_transparent.webp"
@@ -18,11 +17,6 @@
       class="picture"
     />
   </div>
-    <div class="card-back">
-      <!-- svelte-ignore a11y-img-redundant-alt -->
-      <img src="/root_logo.webp" alt="My Picture" class="picture" />
-    </div>
-  </div>
   <div class="line">
     <hr />
   </div>
@@ -31,7 +25,7 @@
   </div>
   <div class="social-media">
     <div class="row">
-      <a href="https://github.com/J-onasJones"><i class="fab fa-github" /></a>
+      <a href="https://github.com/JonasunderscoreJones"><i class="fab fa-github" /></a>
       <a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg"
         ><i class="fab fa-youtube" /></a
       >

src/routes/about/+page.svelte

@@ -3,6 +3,8 @@
     import NavBar from "../../components/NavBar.svelte";
     import ParallaxBg from "../../components/ParallaxBg.svelte";
     import Padding from "../../components/padding.svelte";
+
+    let audioSrc = "https://cdn.jonasjones.dev/mp3/Jonas_Jones-bigger-banger.mp3";
 </script>
 
 <ParallaxBg>
@@ -60,6 +62,10 @@
             Also, I like K-Pop.<br />
             I uSe ArCh BtW.
         </p>
+        <audio controls>
+            <source src={audioSrc} type="audio/mpeg" />
+            Your browser does not support the audio element.
+          </audio>
         <h1>Useful Links</h1>
         <a href="https://builds.jonasjones.dev">Old Builds</a><br />
         <a href="https://wiki.jonasjones.dev">Wiki</a><br />

src/routes/projects/+page.svelte

@@ -71,7 +71,7 @@
       "https://cdn.jonasjones.dev/api/projects/projects.json"
     );
     const data = await res.json();
-    projects = data;
+    projects = data.slice(1); // remove first element as it is the last_update timestamp of the file
     searchResults = projects.filter((project) => {
       return project.visible === true;
     });