Merge torrust/torrust-website#111: Add contributors routes, add publi…

…sh date to card, and add GitHub stars

dc22dcf Add contributors routes, add publish date to card, add GitHub stars (grmbyrn)

Pull request description:

  ## Changes Made:

  This pull request introduces several enhancements to our project, focusing on improving the user experience, maintaining code consistency, and providing additional functionality.

  1. Linking to Contributor Pages:
  * Added a link on the `How to Contribute` section of the home page, directing users to a contributor's route.
  * Each contributor's image and name now serve as links, redirecting to individual contributor pages with detailed information.

  2. Enhancing Blog Post Links:
  * Implemented links to each blog post's author, directing users to the respective contributor page.
  * Avoided code repetition and styling inconsistencies by importing the `ContributorCard` component from molecules in components.
  * Added contributor and contributorSlug to the `BlogPost` type in TypeScript to prevent errors as well as to the Front Matter of appropriate Markdown files.

  3. Publication Date in Blog Post Cards:
  * Displayed the publication date beneath each post title in both the `Recent Posts` and `Related Posts` sections.
  * Adopted the "DD/MM/YYYY" format for date representation.
  * Improved user experience by providing context about the blog post's publication date, assuring users that the blog is active.

  4. GitHub Stars in AboutTorrust:
  * Dynamically fetched the number of stars for each Torrust Tracker and Torrust Index repository using the GitHub API.
  * Integrated star counts into the AboutTorrust SvelteKit component to inform users about repository popularity.
  * Added a visually enhancing star icon from the `icons` folder to represent the star count.

  5. RepoURL and RepoName in AboutTorrust:
  * Split repo into repoURL and repoName for better access to the GitHub API and improved user navigation.
  * Ensured that links direct users appropriately to the respective repository.

  These changes collectively enhance the project's functionality, user experience, and maintainability. Please review and merge accordingly. Thank you!

ACKs for top commit:
  josecelano:
    ACK dc22dcf

Tree-SHA512: 2d376f11ac3a991a3de8e46ee5db4691a654048edaab11e8c346058b11a0ea748492789e434a29899adffedd884c35b125c1f23626cf60513f6310c80cbc1feb

src/lib/components/molecules/BlogPostCard.svelte

@@ -2,13 +2,15 @@
 	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';
 
 	export let title: string;
 	export let coverImage: string | undefined = undefined;
 	export let excerpt: string;
 	export let slug: string;
 	export let tags: string[] | undefined;
 	export let readingTime: string | undefined = undefined;
+	export let date: string;
 
 	export let showImage = true;
 </script>
@@ -27,6 +29,9 @@
 		<p class="title">
 			{title}
 		</p>
+		{#if date}
+			<div class="date">Published on {dateformat(date, 'UTC:dd/mm/yyyy')}</div>
+		{/if}
 		{#if readingTime}
 			<div class="note">{readingTime}</div>
 		{/if}
@@ -72,11 +77,16 @@
 		flex-wrap: wrap;
 	}
 
+	.date,
 	.note {
 		font-size: 0.8rem;
 		color: rgba(var(--color--text-rgb), 0.8);
 	}
 
+	.date {
+		padding-top: 0.25rem;
+	}
+
 	.text {
 		margin-top: 5px;
 		font-size: 0.9rem;

src/lib/components/molecules/ContributorCard.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import Email from '$lib/icons/socials/email.svelte';
+	import Github from '$lib/icons/socials/github.svelte';
+	import Linkedin from '$lib/icons/socials/linkedin.svelte';
+
+	export let name: string;
+	export let position: string | undefined = undefined;
+	export let img: string;
+	export let contributeDate: string;
+	export let paras: { para: string }[];
+	export let links: { email: string; github: string; linkedIn: string }[];
+</script>
+
+<div class="contributor-biography">
+	{#if img}
+		<img src={img} class="cover-image" alt="Contributor" />
+	{:else}
+		<img src="/images/contributors/unknown-person-icon.png" class="cover-image" alt="Contributor" />
+	{/if}
+	<h1 class="contributor-title">{name}</h1>
+	<h2 class="contributor-position">{position}</h2>
+	<h5 class="contributor-contribute-date">Contributor since: <span>{contributeDate}</span></h5>
+	<div class="socials links">
+		{#each links as link}
+			{#if link.email}
+				<a href={link.email}><Email /></a>
+			{/if}
+		{/each}
+		{#each links as link}
+			{#if link.github}
+				<a href={link.github}><Github /></a>
+			{/if}
+		{/each}
+		{#each links as link}
+			{#if link.linkedIn}
+				<a href={link.linkedIn}><Linkedin /></a>
+			{/if}
+		{/each}
+	</div>
+	<div>
+		{#each paras as para}
+			<p>{@html para.para}</p>
+		{/each}
+	</div>
+	<a href="/contributors">Return to Contributors</a>
+</div>
+
+<style lang="scss">
+	.contributor-biography {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		max-width: 600px;
+		margin: 0 auto;
+		margin-top: 2rem;
+		line-height: 1.5;
+		padding: 2rem;
+	}
+
+	.cover-image {
+		width: min(var(--main-column-width), 100%);
+		margin: 0 auto;
+		max-height: 400px;
+		box-shadow: var(--image-shadow);
+		border-radius: 6px;
+		box-shadow:
+			0 4px 8px 0 rgba(0, 0, 0, 0.2),
+			0 6px 20px 0 rgba(0, 0, 0, 0.19);
+	}
+
+	.contributor-title {
+		font-size: 2.5rem;
+		margin: 0.5rem 0;
+	}
+
+	.contributor-position {
+		font-size: 1.5rem;
+		font-weight: 500;
+	}
+
+	.contributor-contribute-date {
+		background-color: #fff;
+		padding: 0.7rem 1.2rem;
+		border-radius: 0.8rem;
+		color: #000;
+		margin-top: 0.5rem;
+		box-shadow:
+			0 2px 6px 0 rgba(0, 0, 0, 0.2),
+			0 4px 12px 0 rgba(0, 0, 0, 0.19);
+		margin-top: 1rem;
+	}
+
+	.socials {
+		display: flex;
+		gap: 1rem;
+		margin-top: 1.5rem;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 30px;
+
+		a {
+			text-decoration: none;
+			width: 2rem;
+
+			&:hover {
+				color: var(--color--primary);
+				filter: drop-shadow(0px 0px 3px var(--color--primary));
+			}
+		}
+	}
+
+	p {
+		font-size: 1rem;
+		text-align: justify;
+		margin: 1rem 0;
+	}
+</style>

src/lib/components/molecules/ProjectCard.svelte

@@ -3,13 +3,33 @@
 	import Tag from '$lib/components/atoms/Tag.svelte';
 	import Image from '$lib/components/atoms/Image.svelte';
 	import GitHubIcon from '$lib/icons/socials/github.svelte';
+	import Star from '$lib/icons/star.svelte';
+	import { onMount } from 'svelte';
 
 	export let title: string;
 	export let coverImage: string | undefined = undefined;
 	export let tags: string[] | undefined = undefined;
-	export let repo: string | undefined = undefined;
+	export let repoURL: string | undefined = undefined;
+	export let repoName: string | undefined = undefined;
 
 	export let showImage = true;
+	export let stars: number | null = null;
+
+	async function getStars() {
+		if (repoName) {
+			try {
+				const response = await fetch(`https://api.github.com/repos/${repoName}`);
+				const data = await response.json();
+				if (data.stargazers_count) {
+					stars = data.stargazers_count;
+				}
+			} catch (error) {
+				console.error('Error fetching GitHub stars:', error);
+			}
+		}
+	}
+
+	onMount(getStars);
 </script>
 
 <Card additionalClass="project-card {!showImage || !coverImage ? 'no-image' : ''}">
@@ -22,12 +42,15 @@
 		<p class="title">
 			{title}
 		</p>
-		{#if repo}
-			<a class="note" href={repo} target="_blank" rel="noopener noreferrer">
+		{#if repoURL}
+			<a class="note" href={repoURL} target="_blank" rel="noopener noreferrer">
 				<GitHubIcon />
-				{repo.replace('https://github.com/', '')}
+				{repoURL.replace('https://github.com/', '')}
 			</a>
 		{/if}
+		<p class="note">
+			<Star /> GitHub Stars: {stars !== null ? stars : ''}
+		</p>
 		<div class="text">
 			<slot name="content" />
 		</div>
@@ -72,8 +95,8 @@
 	.note {
 		font-size: 0.9rem;
 		color: rgba(var(--color--text-rgb), 0.8);
-		margin-bottom: 10px;
-		margin-top: 5px;
+		margin-bottom: 2px;
+		margin-top: 2px;
 
 		&:not(:hover) {
 			text-decoration-color: transparent;

src/lib/components/organisms/AboutTorrust.svelte

@@ -23,7 +23,11 @@
 
 <ContentSection id="project-structure" title="Project Structure">
 	<div class="grid">
-		<ProjectCard title="Torrust Tracker" repo="https://github.com/torrust/torrust-tracker">
+		<ProjectCard
+			title="Torrust Tracker"
+			repoURL="https://github.com/torrust/torrust-tracker"
+			repoName="torrust/torrust-tracker"
+		>
 			<div class="project-content" slot="content">
 				<p>
 					Torrust Tracker is a lightweight but incredibly high-performance and feature-rich
@@ -47,7 +51,11 @@
 			</div>
 		</ProjectCard>
 
-		<ProjectCard title="Torrust Index" repo="https://github.com/torrust/torrust-index">
+		<ProjectCard
+			title="Torrust Index"
+			repoURL="https://github.com/torrust/torrust-index"
+			repoName="torrust/torrust-index"
+		>
 			<div class="project-content" slot="content">
 				<p>
 					The Torrust Index is a feature-rich torrent indexing website and API for the Torrust

src/lib/components/organisms/ContentSection.svelte

@@ -17,7 +17,7 @@
 				{/if}
 				{#if description}
 					<p>
-						{description}
+						{@html description}
 					</p>
 				{/if}
 			</div>

src/lib/components/organisms/HowToContribute.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import ContentSection from '$lib/components/organisms/ContentSection.svelte';
 	import ContributionCard from '../molecules/ContributionCard.svelte';
+
+	let contributingDescription = `
+		We welcome contributions from the <a href="/contributors">community</a>!
+		There are many ways in which you can contribute.
+	`;
 </script>
 
-<ContentSection
-	id="contributing"
-	title="How to Contribute"
-	description="We welcome contributions from the community! There are many ways in which you can contribute."
->
+<ContentSection id="contributing" title="How to Contribute" description={contributingDescription}>
 	<div class="wrapper">
 		<div class="grid">
 			<ContributionCard

src/lib/components/organisms/RecentPosts.svelte

@@ -25,6 +25,7 @@
 				tags={post.tags}
 				readingTime={post.readingTime}
 				showImage={false}
+				date={post.date}
 			/>
 		{/each}
 	</div>

src/lib/components/organisms/RelatedPosts.svelte

@@ -16,6 +16,7 @@
 				tags={post.tags}
 				readingTime={post.readingTime}
 				showImage={false}
+				date={post.date}
 			/>
 		{/each}
 	</div>

src/lib/utils/types.ts

@@ -35,4 +35,6 @@ export type BlogPost = {
 	readingTime: string;
 	relatedPosts: BlogPost[];
 	coverImage: string | undefined;
+	contributorSlug: string;
+	contributor: string;
 };

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

@@ -1,7 +1,3 @@
----
-date: 2023-07-11T12:28:44.499Z
-updated: 2023-07-11T12:28:45.984Z
----
 <script lang="ts">
 	import Header from '$lib/components/organisms/Header.svelte';
 	import Footer from '$lib/components/organisms/Footer.svelte';
@@ -63,6 +59,11 @@ updated: 2023-07-11T12:28:45.984Z
 					{#if post.readingTime}
 						<div class="note">{post.readingTime}</div>
 					{/if}
+					{#if post.contributor}
+						<div>
+							<span>By: </span><a href="/{post.contributorSlug}">{post.contributor}</a>
+						</div>
+					{/if}
 					{#if post.tags?.length}
 						<div class="tags">
 							{#each post.tags as tag}