Added luxon & funding

package.json

@@ -18,6 +18,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@tailwindcss/typography": "^0.5.12",
 		"@types/eslint": "^8.56.0",
+		"@types/luxon": "^3.4.2",
 		"@typescript-eslint/eslint-plugin": "^7.0.0",
 		"@typescript-eslint/parser": "^7.0.0",
 		"autoprefixer": "^10.4.19",
@@ -25,6 +26,7 @@
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0-next.4",
+		"luxon": "^3.4.4",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       '@types/eslint':
         specifier: ^8.56.0
         version: 8.56.10
+      '@types/luxon':
+        specifier: ^3.4.2
+        version: 3.4.2
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.0.0
         version: 7.7.1(@typescript-eslint/parser@7.7.1(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
@@ -47,6 +50,9 @@ importers:
       eslint-plugin-svelte:
         specifier: ^2.36.0-next.4
         version: 2.38.0(eslint@8.57.0)(svelte@5.0.0-next.115)
+      luxon:
+        specifier: ^3.4.4
+        version: 3.4.4
       postcss:
         specifier: ^8.4.38
         version: 8.4.38
@@ -464,6 +470,9 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/luxon@3.4.2':
+    resolution: {integrity: sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==}
+
   '@types/pug@2.0.10':
     resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
 
@@ -1058,6 +1067,10 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  luxon@3.4.4:
+    resolution: {integrity: sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==}
+    engines: {node: '>=12'}
+
   magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
 
@@ -1910,6 +1923,8 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/luxon@3.4.2': {}
+
   '@types/pug@2.0.10': {}
 
   '@types/resolve@1.20.2': {}
@@ -2548,6 +2563,8 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  luxon@3.4.4: {}
+
   magic-string@0.30.10:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15

src/lib/components/Counter.svelte

@@ -1,50 +1,24 @@
 <script lang="ts">
-	let { date }: {date: Date} = $props();
+	import { type DateTime } from 'luxon';
+	let { date }: {date: DateTime} = $props();
+	let timeDifference = $state(calcDifference());
 
-	function getTimeDifference(date1: Date, date2: Date) {
+	function calcDifference() {
-		// Calculate the difference in milliseconds
+		return date.diffNow().shiftTo('years', 'weeks', 'days', 'hours', 'minutes', 'seconds');
-		const diff = Math.abs(date2.getTime() - date1.getTime());
-
-		// Time constants
-		const msPerSecond = 1000;
-		const msPerMinute = msPerSecond * 60;
-		const msPerHour = msPerMinute * 60;
-		const msPerDay = msPerHour * 24;
-		const msPerWeek = msPerDay * 7;
-        const msPerYear = msPerDay * 365;
-
-		// Calculate each component
-        const years = Math.floor(diff / msPerYear);
-		const weeks = Math.floor((diff % msPerYear) / msPerWeek);
-		const days = Math.floor((diff % msPerWeek) / msPerDay);
-		const hours = Math.floor((diff % msPerDay) / msPerHour);
-		const minutes = Math.floor((diff % msPerHour) / msPerMinute);
-		const seconds = Math.floor((diff % msPerMinute) / msPerSecond);
-
-		return {
-            years: years,
-			weeks: weeks,
-			days: days,
-			hours: hours,
-			minutes: minutes,
-			seconds: seconds
-		};
 	}
 
-    let timeDifference = $state(getTimeDifference(new Date(), date));
-
     setInterval(() => {
-        timeDifference = getTimeDifference(new Date(), date);
+        timeDifference = calcDifference();
     }, 1000);
 </script>
 
-<div class="flex justify-center gap-2 flex-wrap font-['GreatVibes']">
+<div class="flex justify-center gap-2 flex-wrap">
     {#if timeDifference.years > 0}
         <div class="flex flex-col p-5 bg-secondary rounded-box text-secondary-content text-center">
 		    <span class="countdown font-mono text-5xl">
 			    <span style="--value:{timeDifference.years};"></span>
 		    </span>
-		    <span class="text-xl">{timeDifference.years <= 1 ? 'jaar' : 'jaren'}</span>
+		    <span class="text-xl">{timeDifference.years == 1 ? 'jaar' : 'jaren'}</span>
 	    </div>
     {/if}
 	{#if timeDifference.weeks > 0}
@@ -52,7 +26,7 @@
 		    <span class="countdown font-mono text-5xl">
 			    <span style="--value:{timeDifference.weeks};"></span>
 		    </span>
-		    <span class="text-xl">{timeDifference.weeks <= 1 ? 'week' : 'weken'}</span>
+		    <span class="text-xl">{timeDifference.weeks == 1 ? 'week' : 'weken'}</span>
 	    </div>
     {/if}
 	{#if timeDifference.days > 0}
@@ -60,24 +34,24 @@
 		<span class="countdown font-mono text-5xl">
 			<span style="--value:{timeDifference.days};"></span>
 		</span>
-        <span class="text-xl">{timeDifference.days <= 1 ? 'dag' : 'dagen'}</span>
+        <span class="text-xl">{timeDifference.days == 1 ? 'dag' : 'dagen'}</span>
 	</div>
 	{/if}
-	<div class="flex flex-col p-5 bg-primary rounded-box text-primary-content text-center">
+	<div class="flex flex-col p-5 bg-secondary rounded-box text-secondary-content text-center">
 		<span class="countdown font-mono text-5xl">
 			<span style="--value:{timeDifference.hours};"></span>
 		</span>
         <span class="text-xl">{timeDifference.hours <= 1 ? 'uur' : 'uren'}</span>
 	</div>
-	<div class="flex flex-col p-5 bg-neutral rounded-box text-neutral-content text-center">
+	<div class="flex flex-col p-5 bg-primary rounded-box text-primary-content text-center">
 		<span class="countdown font-mono text-5xl">
 			<span style="--value:{timeDifference.minutes};"></span>
 		</span>
         <span class="text-xl">{timeDifference.minutes <= 1 ? 'minuut' : 'minuten'}</span>
 	</div>
-	<div class="flex flex-col p-5 bg-secondary rounded-box text-secondary-content text-center">
+	<div class="flex flex-col p-5 bg-neutral rounded-box text-neutral-content text-center">
 		<span class="countdown font-mono text-5xl">
-			<span style="--value:{timeDifference.seconds};"></span>
+			<span style="--value:{Math.floor(timeDifference.seconds)};"></span>
 		</span>
 		<span class="text-xl">seconde</span>
 	</div>

src/routes/+page.svelte

@@ -1,23 +1,25 @@
 <script>
 	import Counter from "$lib/components/Counter.svelte";
+    import { DateTime } from 'luxon';
 
-    const date = new Date('2025-05-15T12:00:00');
+    const date = DateTime.fromISO('2025-05-15T12:00:00');
-    const msPerDay = 60000 * 60 * 24;
+    const daysLeft = Math.floor(date.diffNow().as('days'));
-    const diff = Math.abs(date.getTime() - Date.now());
-
-    let daysLeft = Math.floor(diff / msPerDay);
 </script>
 <main class="m-5">
     <article class="prose mx-auto pt-5">
         <div class="text-center font-['GreatVibes']">
             <h1 class="md:text-7xl text-5xl font-thin mb-0 pb-0">Maurice & Petra</h1>
-            <h2 class="mt-0 pt-0 md:text-5xl text-3xl font-thin text-primary">trouwen {date.toLocaleDateString()}</h2>
+            <h2 class="mt-0 pt-0 md:text-5xl text-3xl font-thin text-primary">trouwen {date.toLocaleString(DateTime.DATE_SHORT)}</h2>
 
             <Counter {date} />
 
             <p class="text-2xl">Dus nog <span class="text-primary">{daysLeft}</span> nachtjes slapen</p>
         </div>
+        <div class="flex justify-center">
+            <a role="button" target="_blank" href="https://bunq.me/MausEnPeet" class="btn no-underline btn-outline">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
+                Support ons
+            </a>
+        </div>
     </article>
-
-    
 </main>