Skip to content

Commit f26e848

Browse files
DeflaktorDeflaktor
committed
Attempt at making dates have correct timezone
1 parent 1139280 commit f26e848

File tree

6 files changed

+118
-87
lines changed

6 files changed

+118
-87
lines changed

‎public/dateutils.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
const UNIT_DAY = 24 * 60 * 60 * 1000;
2+
const UNIT_WEEK = 7 * UNIT_DAY;
3+
const UNIT_MONTH = 30 * UNIT_DAY;
4+
5+
/**
6+
* Calculates the difference between the target date and today in the specified unit.
7+
*
8+
* @param {Date} targetDate - The date to compare with today.
9+
* @param {number} unit - The unit to use for the difference calculation (e.g., milliseconds per day).
10+
* @returns {number} The difference in the specified unit.
11+
*/
12+
function ago(targetDate, unit) {
13+
const today = new Date();
14+
today.setHours(0, 0, 0, 0);
15+
targetDate.setHours(0, 0, 0, 0);
16+
const differenceMs = today.getTime() - targetDate.getTime();
17+
const differenceDays = Math.floor(differenceMs / unit);
18+
return differenceDays;
19+
}
20+
21+
/**
22+
* Calculates the number of days between the target date and today.
23+
*
24+
* @param {Date} targetDate - The date to compare with today.
25+
* @returns {number} The number of days between the target date and today.
26+
*/
27+
function daysAgo(targetDate) {
28+
return ago(targetDate, UNIT_DAY);
29+
}
30+
31+
/**
32+
* Calculates the number of weeks between the target date and today.
33+
*
34+
* @param {Date} targetDate - The date to compare with today.
35+
* @returns {number} The number of weeks between the target date and today.
36+
*/
37+
function weeksAgo(targetDate) {
38+
return ago(targetDate, UNIT_WEEK);
39+
}
40+
41+
/**
42+
* Calculates the number of months between the target date and today.
43+
*
44+
* @param {Date} targetDate - The date to compare with today.
45+
* @returns {number} The number of months between the target date and today.
46+
*/
47+
function monthsAgo(targetDate) {
48+
return ago(targetDate, UNIT_MONTH);
49+
}
50+
51+
/**
52+
* Converts the target date into a human-readable string representing the time difference from today.
53+
*
54+
* @param {Date} targetDate - The date to convert.
55+
* @returns {string} A human-readable string representing the time difference from today.
56+
*/
57+
function humanReadableDate(targetDate) {
58+
if (daysAgo(targetDate)<1) {
59+
return `today`;
60+
} if (daysAgo(targetDate)<2) {
61+
return `yesterday`;
62+
} else if (daysAgo(targetDate)<30) {
63+
return `${daysAgo(targetDate)} days ago`;
64+
} else if (weeksAgo(targetDate)<10) {
65+
return `${weeksAgo(targetDate)} weeks ago`;
66+
} else if (monthsAgo(targetDate)<10) {
67+
return `${monthsAgo(targetDate)} months ago`;
68+
} else {
69+
return targetDate.toISOString().split('T')[0];
70+
}
71+
}
72+
73+
/**
74+
* Converts a Date object to an ISO 8601 formatted date string (YYYY-MM-DD).
75+
*
76+
* @param {Date} date - The date to be converted.
77+
* @returns {string} The ISO 8601 formatted date string.
78+
*/
79+
function isoDate(date) {
80+
return date.toISOString().split('T')[0];
81+
}

‎src/components/board/boardImage.astro‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
33
import type { MapDescriptorExtended } from '~/lib/getboards';
4-
import { daysAgo, humanReadableDate, isoDate } from '~/lib/utils';
54
interface Props {
65
board: MapDescriptorExtended;
76
link: boolean;
@@ -162,20 +161,27 @@ const { board, link, imageHeight } = Astro.props;
162161
</span>
163162
)}
164163
<img class="card-img-top mapCard-image-background" style={`height: ${imageHeight}`} src={`/images/backgrounds/${board.background}.webp`} loading="lazy" />
165-
{ daysAgo(new Date(board.uploadDate)) < 30 && (
164+
{ Date.now() - board.uploadDate < 30 * 24 * 60 * 60 * 1000 && (
166165
<div class="top-right-absolute">
167-
<div class="badge bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title={`Uploaded: ${(isoDate(new Date(board.uploadDate)))}`}>New</div>
166+
<div class="badge bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-date={board.uploadDate} data-titletemplate={"Uploaded: [date]"}>New</div>
168167
</div>
169168
)}
170169
<div class="bottom-left-absolute">
171-
<div class="badge bg-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title={(isoDate(new Date(board.lastUpdated)))}>Updated: {humanReadableDate(new Date(board.lastUpdated))}</div>
170+
<div class="badge bg-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-date={board.lastUpdated} data-titletemplate={"[date]"}>
171+
Updated: <script define:vars={{ lastUpdated: board.lastUpdated }}>document.write(humanReadableDate(new Date(+lastUpdated)));</script>
172+
</div>
172173
</div>
173174
<div class="bottom-right-absolute">
174175
{board.authors?.map((author) => (
175176
<div class="badge bg-primary">{author.url ? (<a class="text-reset" href={ author.url }>{ author.name }</a>) : author.name}</div>
176177
))}
177178
</div>
178179
<script>
180+
document.querySelectorAll('[data-titletemplate]').forEach((element) => {
181+
const el = element as HTMLElement;
182+
el.dataset.bsTitle = el.dataset.titletemplate?.replace("[date]", isoDate(new Date(+el.dataset.date!)));
183+
})
184+
179185
import { Tooltip } from "bootstrap";
180186
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
181187
const _tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new Tooltip(tooltipTriggerEl))

‎src/components/board/boardProperties.astro‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
22
import type { MapDescriptorExtended } from '~/lib/getboards';
3-
import { isoDate } from '~/lib/utils';
43
interface Props {
54
board: MapDescriptorExtended;
65
}
@@ -52,13 +51,19 @@ const { board } = Astro.props;
5251
<li class="list-group-item d-flex justify-content-between align-items-start">
5352
<div class="ms-2 me-auto">
5453
<div class="fw-bold small">Last Updated</div>
55-
{isoDate(new Date(board.lastUpdated))}
54+
<script is:inline define:vars={{ lastUpdated: board.lastUpdated }}>document.write(humanReadableDate(new Date(+lastUpdated)));</script>
55+
<span class="text-secondary small px-2">
56+
<script is:inline define:vars={{ lastUpdated: board.lastUpdated }}>document.write(isoDate(new Date(+lastUpdated)));</script>
57+
</span>
5658
</div>
5759
</li>
5860
<li class="list-group-item d-flex justify-content-between align-items-start">
5961
<div class="ms-2 me-auto">
6062
<div class="fw-bold small">Uploaded</div>
61-
{isoDate(new Date(board.uploadDate))}
63+
<script is:inline define:vars={{ uploadDate: board.uploadDate }}>document.write(humanReadableDate(new Date(+uploadDate)));</script>
64+
<span class="text-secondary small px-2">
65+
<script is:inline define:vars={{ uploadDate: board.uploadDate }}>document.write(isoDate(new Date(+uploadDate)));</script>
66+
</span>
6267
</div>
6368
</li>
64-
</ul>
69+
</ul>

‎src/layouts/layout.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import Navbar from '~/components/navbar.astro';
1717
<meta name="theme-color" content="black" />
1818
<meta name="color-scheme" content="light dark" />
1919
<meta name="generator" content={Astro.generator} />
20+
<script is:inline src="/dateutils.js"/>
2021
<link rel="icon" href="/favicon.ico" />
2122
<title>Fortune Street Modding - {title}</title>
2223
</head>

‎src/lib/getboards.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import DOMPurify from 'isomorphic-dompurify';
66
import ventureCards from "~/data/venturecards.yml";
77
import backgrounds, { type Background } from "~/data/backgrounds.yml";
88
import { execSync } from 'child_process';
9-
import { getRandomDate } from './utils';
109

1110
export type MapDescriptorExtended = Omit<MapDescriptor1, 'music' | 'changelog' | 'frbFile1' | 'frbFile2' | 'frbFile3' | 'frbFile4' | 'frbFiles' | 'ventureCards'> & {
1211
nameEn: string;
@@ -174,3 +173,20 @@ function getBoards(): MapDescriptorExtended[] {
174173
}
175174
return boards;
176175
};
176+
177+
function getRandomDate() {
178+
// Get today's date
179+
const today = new Date();
180+
181+
// Calculate 1 year ago from today
182+
const oneYearAgo = new Date();
183+
oneYearAgo.setFullYear(today.getFullYear() - 1);
184+
185+
// Get a random number of milliseconds between oneYearAgo and today
186+
const randomMilliseconds = Math.floor(Math.random() * (today.getTime() - oneYearAgo.getTime())) + oneYearAgo.getTime();
187+
188+
// Create a new Date object using the random milliseconds
189+
const randomDate = new Date(randomMilliseconds);
190+
191+
return randomDate;
192+
}

‎src/lib/utils.ts‎

Lines changed: 0 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export function getPathnameWithoutExtension(url: URL) {
66
return path.join(parsedPath.dir, parsedPath.name);
77
}
88

9-
109
export async function run(command: string): Promise<string> {
1110
return new Promise((resolve, reject) => {
1211
exec(command, (error, stdout, stderr) => {
@@ -20,80 +19,3 @@ export async function run(command: string): Promise<string> {
2019
});
2120
});
2221
}
23-
24-
25-
export function getRandomDate() {
26-
// Get today's date
27-
const today = new Date();
28-
29-
// Calculate 1 year ago from today
30-
const oneYearAgo = new Date();
31-
oneYearAgo.setFullYear(today.getFullYear() - 1);
32-
33-
// Get a random number of milliseconds between oneYearAgo and today
34-
const randomMilliseconds = Math.floor(Math.random() * (today.getTime() - oneYearAgo.getTime())) + oneYearAgo.getTime();
35-
36-
// Create a new Date object using the random milliseconds
37-
const randomDate = new Date(randomMilliseconds);
38-
39-
return randomDate;
40-
}
41-
42-
export function daysAgo(targetDate: Date): number {
43-
// Get today's date
44-
const today = new Date();
45-
46-
// Calculate the difference in milliseconds
47-
const differenceMs = today.getTime() - targetDate.getTime();
48-
49-
// Convert milliseconds to days
50-
const differenceDays = Math.floor(differenceMs / (1000 * 60 * 60 * 24));
51-
52-
return differenceDays;
53-
}
54-
55-
export function weeksAgo(targetDate: Date): number {
56-
// Get today's date
57-
const today = new Date();
58-
59-
// Calculate the difference in milliseconds
60-
const differenceMs = today.getTime() - targetDate.getTime();
61-
62-
// Convert milliseconds to weeks
63-
const differenceDays = Math.floor(differenceMs / (1000 * 60 * 60 * 24 * 7));
64-
65-
return differenceDays;
66-
}
67-
68-
export function monthsAgo(targetDate: Date): number {
69-
// Get today's date
70-
const today = new Date();
71-
72-
// Calculate the difference in milliseconds
73-
const differenceMs = today.getTime() - targetDate.getTime();
74-
75-
// Convert milliseconds to months
76-
const differenceDays = Math.floor(differenceMs / (1000 * 60 * 60 * 24 * 30));
77-
78-
return differenceDays;
79-
}
80-
81-
export function humanReadableDate(targetDate: Date): string {
82-
if (daysAgo(targetDate)<1) {
83-
return `today`;
84-
} if (daysAgo(targetDate)<2) {
85-
return `yesterday`;
86-
} else if (daysAgo(targetDate)<30) {
87-
return `${daysAgo(targetDate)} days ago`;
88-
} else if (weeksAgo(targetDate)<10) {
89-
return `${weeksAgo(targetDate)} weeks ago`;
90-
} else if (monthsAgo(targetDate)<10) {
91-
return `${monthsAgo(targetDate)} months ago`;
92-
} else {
93-
return targetDate.toISOString().split('T')[0];
94-
}
95-
}
96-
97-
export function isoDate(date: Date): string {
98-
return date.toISOString().split('T')[0];
99-
}

0 commit comments

Comments
 (0)