Merge torrust/torrust-website#115: add new date.ts module and argumen…

…t to getStars function

d127462 Update date.ts (Graeme Byrne)
d5ad4a5 add new date.ts module and argument to getStars function (grmbyrn)

Pull request description:

  ## Enhancements to Date Formatting and `getStars` Function

  ### Changes Made:

  1. **Date Formatting Module:**
     - Moved the `formatDate` function into a separate module located at `lib/utils/date.ts`.
     - Implemented in `lib/components/molecules/BlogPostCard.svelte`, `routes/(blog-article)/+layout.svelte` and `routes/rss.xml/+server.ts`
     - The motivation is to centralise the date and time formatting logic and provide a single source of truth for date formatting across all components.
     - By using this helper function, we can easily update the date format in one place, affecting all components simultaneously.
     - This approach facilitates testing of date formatting independently of specific components.

     ```typescript
     // src/lib/utils/date.ts
     import dateFormat from 'dateformat';

     export function formatDate(date: string): string {
       return dateFormat(date, 'UTC:dd/mm/yyyy');
     }

     export function formatTime(date: string): string {
  return dateFormat(date, 'UTC:HH:MM:ss');
     }

  2. `getStars` Function Modification:

     - Added an argument to the `getStars` function in the `ProjectCard` component (`lib/components/molecules/ProjectCard.svelte`).
     - The argument (`repoName`) replaces the previous usage of a global variable.
     - This change promotes better code organisation and maintainability by explicitly defining function inputs.
     - The modification improves the function's reusability and makes it more self-contained.

ACKs for top commit:
  josecelano:
    ACK d127462

Tree-SHA512: 32883a9a97720a5375ad521b52e0e4cdf2bb79f310134d9435bf9ee9f3aab10287366cadcd3f6161dc5b6d4aa5e3a95dd7ce3c2ed1bde6de6706fd2b7fb478c0

src/lib/components/molecules/BlogPostCard.svelte

@@ -2,7 +2,7 @@
 	import Card from '$lib/components/atoms/Card.svelte';
 	import Tag from '$lib/components/atoms/Tag.svelte';
 	import Image from '$lib/components/atoms/Image.svelte';
-	import dateformat from 'dateformat';
+	import { formatDate } from '$lib/utils/date';
 
 	export let title: string;
 	export let coverImage: string | undefined = undefined;
@@ -13,6 +13,8 @@
 	export let date: string;
 
 	export let showImage = true;
+
+	const formattedDate = formatDate(date);
 </script>
 
 <Card
@@ -30,7 +32,7 @@
 			{title}
 		</p>
 		{#if date}
-			<div class="date">Published on {dateformat(date, 'UTC:dd/mm/yyyy')}</div>
+			<div class="date">Published on {formattedDate}</div>
 		{/if}
 		{#if readingTime}
 			<div class="note">{readingTime}</div>

src/lib/components/molecules/ProjectCard.svelte

@@ -15,7 +15,7 @@
 	export let showImage = true;
 	export let stars: number | null = null;
 
-	async function getStars() {
+	async function getStars(repoName: string) {
 		if (repoName) {
 			try {
 				const response = await fetch(`https://api.github.com/repos/${repoName}`);
@@ -29,7 +29,11 @@
 		}
 	}
 
-	onMount(getStars);
+	onMount(() => {
+		if (repoName) {
+			getStars(repoName);
+		}
+	});
 </script>
 
 <Card additionalClass="project-card {!showImage || !coverImage ? 'no-image' : ''}">

src/lib/utils/date.ts

@@ -0,0 +1,9 @@
+import dateFormat from 'dateformat';
+
+export function formatDate(date: string): string {
+	return dateFormat(date, 'UTC:dd/mm/yyyy');
+}
+
+export function formatTime(time: string): string {
+	return dateFormat(time, 'UTC:HH:MM:ss');
+}

src/routes/(blog-article)/+layout.svelte

@@ -2,7 +2,7 @@
 	import Header from '$lib/components/organisms/Header.svelte';
 	import Footer from '$lib/components/organisms/Footer.svelte';
 	import Tag from '$lib/components/atoms/Tag.svelte';
-	import dateformat from 'dateformat';
+	import { formatDate } from '$lib/utils/date';
 
 	import { keywords, siteBaseUrl, title } from '$lib/data/meta';
 	import type { BlogPost } from '$lib/utils/types';
@@ -52,9 +52,9 @@
 			<div class="header">
 				{#if post}
 					<h1>{post.title}</h1>
-					<div class="note">Published on {dateformat(post.date, 'UTC:dd mmmm yyyy')}</div>
+					<div class="note">Published on {formatDate(post.date)}</div>
 					{#if post.updated}
-						<div class="note">Updated on {dateformat(post.updated, 'UTC:dd mmmm yyyy')}</div>
+						<div class="note">Updated on {formatDate(post.updated)}</div>
 					{/if}
 					{#if post.readingTime}
 						<div class="note">{post.readingTime}</div>

src/routes/rss.xml/+server.ts

@@ -1,6 +1,6 @@
 import { description, siteBaseUrl, title } from '$lib/data/meta';
 import type { BlogPost } from '$lib/utils/types';
-import dateformat from 'dateformat';
+import { formatDate, formatTime } from '$lib/utils/date';
 import { filterPosts, importPosts } from '$lib/data/blog-posts/utils';
 
 export const prerender = true;
@@ -48,7 +48,7 @@ const xml = (posts: BlogPost[]) => `
           <title>${post.title}</title>
           <description>${post.excerpt}</description>
           <link>${siteBaseUrl}/${post.slug}</link>
-          <pubDate>${dateformat(post.date, 'ddd, dd mmm yyyy HH:MM:ss o')}</pubDate>
+          <pubDate>${formatDate(post.date)} ${formatTime(post.date)}</pubDate>
           ${post.tags ? post.tags.map((tag) => `<category>${tag}</category>`).join('') : ''}
           <content:encoded><![CDATA[
             <div style="margin: 50px 0; font-style: italic;">