Added luxon & funding
This commit is contained in:
Maurice
parent
7ca31b9b2c
commit
85d946a6ab
@ -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",
|
||||
|
||||
17
pnpm-lock.yaml
generated
17
pnpm-lock.yaml
generated
@ -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
|
||||
|
||||
@ -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) {
|
||||
// Calculate the difference in milliseconds
|
||||
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
|
||||
};
|
||||
function calcDifference() {
|
||||
return date.diffNow().shiftTo('years', 'weeks', 'days', 'hours', 'minutes', '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">
|
||||
{/if}
|
||||
<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>
|
||||
|
||||
@ -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 msPerDay = 60000 * 60 * 24;
|
||||
const diff = Math.abs(date.getTime() - Date.now());
|
||||
|
||||
let daysLeft = Math.floor(diff / msPerDay);
|
||||
const date = DateTime.fromISO('2025-05-15T12:00:00');
|
||||
const daysLeft = Math.floor(date.diffNow().as('days'));
|
||||
</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>
|
||||
Loading…
Reference in New Issue
Block a user