Merge torrust/torrust-website#244: changes made to v2 of torrust website

aed6e99 fix linting and format errors (Graeme Byrne)
b324aad fix link errors in npm run build (Graeme Byrne)
d8ddae2 changes made to v2 of torrust website (Graeme Byrne)

Pull request description:

  I followed the provided Figma design to make changes to the following pages in the `v2` of the Torrust website:

  * Home page
  * Index page
  * Tracker page
  * Self-host page
  * Community page
  * Blog page
  * About page

ACKs for top commit:
  josecelano:
    ACK aed6e99

Tree-SHA512: d67b9ca1fc8e16563c9eeb904a9a702d1c81e702ac58716a366c4fe34a1b138f53c18efc2916ad43a321956be0afa29e8903834c96f7413a0cb1774226baae82

package.json

@@ -21,7 +21,8 @@
 		"@histoire/plugin-svelte": "^0.17.17",
 		"@iconify/svelte": "^4.0.2",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.5.10",
+		"@sveltejs/kit": "^2.5.25",
+		"@types/swiper": "^5.4.3",
 		"@typescript-eslint/eslint-plugin": "^7.11.0",
 		"@typescript-eslint/parser": "^7.11.0",
 		"dateformat": "^5.0.3",
@@ -40,16 +41,17 @@
 		"rehype-slug": "^6.0.0",
 		"sass": "^1.77.3",
 		"striptags": "^3.2.0",
-		"svelte": "^4.2.17",
+		"svelte": "^4.2.19",
 		"svelte-check": "^3.8.0",
 		"svelte-sitemap": "^2.6.0",
-		"typescript": "^5.1.3",
+		"typescript": "^5.5.4",
 		"vite": "^5.2.12"
 	},
 	"type": "module",
 	"dependencies": {
 		"@fontsource-variable/roboto-mono": "^5.0.19",
 		"@fontsource-variable/roboto-slab": "^5.0.20",
+		"feather-icons": "^4.29.2",
 		"flexsearch": "^0.7.43",
 		"shiki": "^1.6.1",
 		"shiki-es": "^0.14.0",

src/lib/v2/components/atoms/Card.svelte

@@ -3,17 +3,38 @@
 </script>
 
 <div class="container">
+	<span>
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html title.icon}
+	</span>
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-	<p>{@html title}</p>
+	<h2>{@html title.title}</h2>
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	<p>{@html title.para}</p>
 </div>
 
 <style lang="scss">
 	.container {
 		margin-top: 1.5rem;
+		text-align: left;
+		border: 1px solid rgba(245, 245, 245, 0.08);
+		padding: 1.5rem;
+		border-radius: 1.5rem;
+
+		span {
+			width: 24px;
+			display: inline-block;
+		}
+
+		h2 {
+			font-size: 20px;
+			color: rgba(245, 245, 245, 0.96);
+		}
 
 		p {
-			padding: 70px 24px;
-			border: 1px solid rgba(212, 212, 212, 1);
+			color: rgba(245, 245, 245, 0.8);
+			font-size: 16px;
+			padding-top: 1rem;
 		}
 	}
 </style>

src/lib/v2/components/atoms/Cards.svelte

@@ -39,3 +39,14 @@
 		{/if}
 	</div>
 </svelte:element>
+
+<style lang="scss">
+	.body {
+		display: flex;
+		align-items: flex-end;
+		background-color: pink;
+		height: 312px;
+		padding: 1.5rem;
+		border-radius: 1.5rem;
+	}
+</style>

src/lib/v2/components/atoms/Slider.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	export let titleArr: string[];
+</script>
+
+<div class="slider-container">
+	{#each titleArr as title}
+		<div>
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			<p>{@html title}</p>
+		</div>
+	{/each}
+</div>
+
+<style lang="scss">
+	.slider-container {
+		display: flex;
+		overflow-x: auto;
+		margin-top: 3rem;
+		gap: 1rem;
+		scroll-behavior: smooth;
+		padding-bottom: 1rem;
+		padding-inline: 1.5rem;
+
+		div {
+			flex: 0 0 300px;
+			display: flex;
+			flex-direction: column;
+			text-align: left;
+			height: 280px;
+			width: 500px;
+			padding: 1.5rem;
+			border-radius: 1.5rem;
+			background-color: rgba(255, 49, 0, 0.8);
+		}
+
+		div:hover {
+			cursor: pointer;
+		}
+
+		p {
+			margin-top: auto;
+		}
+	}
+</style>

src/lib/v2/components/atoms/Table.svelte

@@ -22,16 +22,40 @@
 	.table-container {
 		overflow-x: auto;
 		margin-top: 3rem;
+		padding-inline: 1.5rem;
 	}
+
 	table {
 		border-collapse: collapse;
 		width: 100%;
 	}
+
 	th,
 	td {
 		border-bottom: 1px solid black;
 		padding: 8px;
 		text-align: left;
 		white-space: nowrap;
 	}
+
+	/* Scrollbar styles */
+	.table-container::-webkit-scrollbar {
+		height: 12px; /* Adjust the height of the scrollbar */
+	}
+
+	.table-container::-webkit-scrollbar-track {
+		background: #f1f1f1; /* Background of the scrollbar track */
+	}
+
+	.table-container::-webkit-scrollbar-thumb {
+		background-color: rgba(255, 49, 0, 1); /* The sliding part of the scrollbar */
+		border-radius: 10px; /* Rounded corners for the scrollbar */
+		border: 2px solid #f1f1f1; /* Optional: border around the scrollbar thumb */
+	}
+
+	/* Firefox scrollbar styling */
+	.table-container {
+		scrollbar-width: thin; /* For Firefox */
+		scrollbar-color: rgba(255, 49, 0, 1) #f1f1f1; /* Thumb color and track color */
+	}
 </style>

src/lib/v2/components/molecules/BlogPostCard.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
 	import Cards from '$lib/v2/components/atoms/Cards.svelte';
-	import Tag from '$lib/components/atoms/Tag.svelte';
 	import Image from '$lib/components/atoms/Image.svelte';
 	import { formatDate } from '$lib/utils/date';
 
 	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 contributor: string;
 
 	export let showImage = true;
 
@@ -28,28 +25,12 @@
 		{/if}
 	</div>
 	<div class="content" slot="content">
-		<p class="title">
+		<h3 class="title">
 			{title}
-		</p>
+		</h3>
 		{#if date}
-			<div class="date">Published on {formattedDate}</div>
-		{/if}
-		{#if readingTime}
-			<div class="note">{readingTime}</div>
-		{/if}
-		{#if excerpt}
-			<p class="text">
-				{excerpt}
-			</p>
-		{/if}
-	</div>
-	<div class="footer" slot="footer">
-		{#if tags?.length}
-			<div class="tags">
-				{#each tags.slice(0, 2) as tag}
-					<Tag {tag}><a href="/tags/{tag}">{tag}</a></Tag>
-				{/each}
-			</div>
+			<p class="date">{contributor ? contributor + ' - ' : ''}{formattedDate}</p>
 		{/if}
 	</div>
+	<div class="footer" slot="footer"></div>
 </Cards>

src/lib/v2/components/molecules/PostBody.svelte

@@ -1,9 +1,46 @@
-<div>
-	<slot />
+<script lang="ts">
+	import type { postContentItem } from '$lib/v2/constants/postContent';
+
+	export let body: postContentItem[];
+</script>
+
+<div class="article">
+	{#each body as item}
+		<h2 id={item.link}>{item.heading}</h2>
+		{#if item.body.length > 0}
+			{#each item.body as para}
+				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+				<p>{@html para}</p>
+			{/each}
+		{/if}
+		{#each item.subheadings as subheading}
+			<h3 id={subheading.link}>{subheading.heading}</h3>
+			{#if subheading.body.length > 0}
+				{#each subheading.body as body}
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+					{@html body}
+				{/each}
+			{/if}
+		{/each}
+	{/each}
 </div>
 
-<style>
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
 	div {
 		grid-area: 1 / 3 / 6 / 7;
+		padding-inline: 1.5rem;
+	}
+
+	.article {
+		h2,
+		h3 {
+			margin-top: 1rem;
+		}
+
+		p {
+			margin-top: 1rem;
+		}
 	}
 </style>

src/lib/v2/components/molecules/PostContainer.svelte

@@ -15,10 +15,12 @@
 		grid-template-rows: repeat(5, 1fr);
 		grid-column-gap: 10px;
 		grid-row-gap: 0px;
+		padding-top: 4rem;
 	}
 
 	.flex {
 		display: flex;
 		flex-direction: column;
+		padding-top: 4rem;
 	}
 </style>

src/lib/v2/components/molecules/PostTable.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { onMount, afterUpdate } from 'svelte';
+	import type { TableItem } from '$lib/v2/constants/constants';
 
 	let size: number;
 	let divStyle: string;
+	export let table: TableItem[];
 
 	const updateStyles = () => {
 		if (size >= 1440) {
@@ -12,6 +14,13 @@
 		}
 	};
 
+	const scrollToSection = (id: string) => {
+		const element = document.getElementById(id);
+		if (element) {
+			element.scrollIntoView({ behavior: 'smooth' });
+		}
+	};
+
 	onMount(updateStyles);
 
 	afterUpdate(updateStyles);
@@ -25,11 +34,36 @@
 
 <div class={size >= 1440 ? 'scroll-container' : ''} style={divStyle}>
 	<div>
-		<slot />
+		<ul>
+			{#each table as item}
+				<li>
+					<a
+						href={item.link}
+						on:click|preventDefault={() => scrollToSection(item.link.substring(0))}
+					>
+						{item.heading}
+					</a>
+				</li>
+				{#if item.subheadings.length > 0}
+					{#each item.subheadings as subheading}
+						<ul>
+							<li>
+								<a
+									href={subheading.link}
+									on:click|preventDefault={() => scrollToSection(item.link.substring(0))}
+								>
+									{subheading.heading}
+								</a>
+							</li>
+						</ul>
+					{/each}
+				{/if}
+			{/each}
+		</ul>
 	</div>
 </div>
 
-<style>
+<style lang="scss">
 	.scroll-container {
 		height: 100vh;
 		overflow-y: auto;
@@ -38,6 +72,10 @@
 	div {
 		grid-area: 1 / 1 / 6 / 3;
 		background-color: transparent;
-		padding: 10px;
+		padding-inline: 1.5rem;
+
+		a {
+			color: rgba(245, 245, 245, 0.96);
+		}
 	}
 </style>