Merge torrust/torrust-website#249: add blog posts to v2

bef5c1d add blog posts to v2 (Graeme Byrne)

Pull request description:

  `(blog-article)` route moved into v2 and styled to fit design for v2 of website.

ACKs for top commit:
  josecelano:
    ACK bef5c1d

Tree-SHA512: a4c581453c77f9364ccb563af5d907a16c247dc9147a24448b132cc72a926c62bc538d72736c3c830de48aaa77047f744e423217f307a00b8a1245a37be3cf5e

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

@@ -41,6 +41,8 @@
 </svelte:element>
 
 <style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
 	.body {
 		display: flex;
 		align-items: flex-end;

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

@@ -15,7 +15,7 @@
 </script>
 
 <Cards
-	href="/{slug}"
+	href="/v2/{slug}"
 	target="_self"
 	additionalClass="blog-post-card {!showImage || !coverImage ? 'no-image' : ''}"
 >

src/lib/v2/components/singletons/RecentPosts.svelte

@@ -18,9 +18,6 @@
 			/>
 		{/each}
 	</div>
-	<div class="link-container">
-		<a href="/blog">All articles</a>
-	</div>
 </div>
 
 <style lang="scss">
@@ -34,16 +31,6 @@
 			padding-top: 4rem;
 			text-align: center;
 		}
-
-		.link-container {
-			text-align: center;
-			padding-top: 3rem;
-		}
-
-		a {
-			color: white;
-			text-decoration: none;
-		}
 	}
 
 	.grid {
@@ -59,7 +46,7 @@
 		}
 
 		@include for-tablet-landscape-up {
-			grid-template-columns: 1fr 1fr 1fr;
+			grid-template-columns: 1fr 1fr;
 		}
 	}
 </style>

src/lib/v2/components/singletons/SearchBar.svelte

@@ -91,7 +91,7 @@
 				<ul>
 					{#each results as result}
 						<li>
-							<a href="/{result.slug}" on:click={clearSearch}>
+							<a href="/v2/{result.slug}" on:click={clearSearch}>
 								<div>
 									<div>
 										<!-- eslint-disable-next-line svelte/no-at-html-tags -->

src/routes/v2/(blog-article)/+layout.server.ts

@@ -0,0 +1,12 @@
+import { filteredPosts } from '$lib/data/blog-posts';
+
+export async function load({ url }: { url: { pathname: string } }) {
+	const { pathname } = url;
+	const slug = pathname.replace('/v2/', '');
+	const post = filteredPosts.find((post) => post.slug === slug);
+
+	return {
+		post,
+		allPosts: filteredPosts
+	};
+}

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

@@ -0,0 +1,208 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Tag from '$lib/components/atoms/Tag.svelte';
+	import { formatDate } from '$lib/utils/date';
+	import ShareButton from '$lib/components/singletons/ShareButton.svelte';
+
+	import { keywords, siteBaseUrl, title } from '$lib/data/meta';
+	import type { BlogPost } from '$lib/utils/types';
+	import RelatedPosts from '$lib/components/organisms/RelatedPosts.svelte';
+	import Image from '$lib/components/atoms/Image.svelte';
+	import PrevNextPost from '$lib/components/singletons/PrevNextPost.svelte';
+	import { allPosts } from '$lib/data/blog-posts';
+	import Header from '$lib/v2/components/organisms/Header.svelte';
+	import Footer from '$lib/v2/components/organisms/Footer.svelte';
+
+	export let data: { post: BlogPost; allPosts: BlogPost[] };
+	let post: BlogPost;
+
+	$: ({ post } = data);
+
+	onMount(() => {
+		console.log('Current post:', post);
+		console.log('All posts:', allPosts[0]);
+	});
+
+	let metaKeywords = keywords;
+
+	$: {
+		if (post?.tags?.length) {
+			metaKeywords = post.tags.concat(metaKeywords);
+		}
+		if (post?.keywords?.length) {
+			metaKeywords = post.keywords.concat(metaKeywords);
+		}
+	}
+</script>
+
+<svelte:head>
+	{#if post}
+		<meta name="keywords" content={metaKeywords.join(', ')} />
+
+		<meta name="description" content={post.excerpt} />
+		<meta property="og:description" content={post.excerpt} />
+		<meta name="twitter:description" content={post.excerpt} />
+		<link rel="canonical" href="{siteBaseUrl}/{post.slug}" />
+
+		<title>{post.title} - {title}</title>
+		<meta property="og:title" content="{post.title} - {title}" />
+		<meta name="twitter:title" content="{post.title} - {title}" />
+
+		{#if post.coverImage}
+			<meta property="og:image" content="{siteBaseUrl}{post.coverImage}" />
+			<meta name="twitter:image" content="{siteBaseUrl}{post.coverImage}" />
+		{/if}
+	{/if}
+</svelte:head>
+
+<Header />
+<div class="container">
+	<main>
+		<article id="article-content">
+			<div class="header">
+				{#if post}
+					<h1>{post.title}</h1>
+					<div class="note">Published on {formatDate(post.date)}</div>
+					{#if post.updated}
+						<div class="note">Updated on {formatDate(post.updated)}</div>
+					{/if}
+					{#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}
+					<ShareButton slug={post.slug} title={post.title} />
+					{#if post.tags?.length}
+						<div class="tags">
+							{#each post.tags as tag}
+								<Tag {tag}>
+									{tag}
+								</Tag>
+							{/each}
+						</div>
+					{/if}
+				{/if}
+			</div>
+			{#if post && post.coverImage}
+				<div class="cover-image">
+					<Image src={post.coverImage} alt={post.title} />
+				</div>
+			{/if}
+			<div class="content">
+				<slot />
+			</div>
+		</article>
+
+		<PrevNextPost currentPost={post} {allPosts} />
+
+		{#if post.relatedPosts && post.relatedPosts.length > 0}
+			<div class="container">
+				<RelatedPosts posts={post.relatedPosts} />
+			</div>
+		{/if}
+	</main>
+</div>
+<Footer />
+
+<style lang="scss">
+	@import '$lib/scss/_mixins.scss';
+	@import '$lib/scss/breakpoints.scss';
+
+	.container {
+		background: rgba(26, 26, 26, 1);
+		color: rgba(245, 245, 245, 0.96);
+	}
+
+	#article-content {
+		--main-column-width: 65ch;
+		position: relative;
+		padding-top: 40px;
+		padding-bottom: 80px;
+		padding-right: 15px;
+		padding-left: 15px;
+
+		.cover-image {
+			padding-top: 1.5rem;
+		}
+
+		@include for-iphone-se {
+			padding-left: 0;
+			padding-right: 0;
+		}
+
+		@include for-tablet-portrait-up {
+			padding-right: 20px;
+			padding-left: 20px;
+		}
+
+		@include for-tablet-landscape-up {
+			--main-column-width: 170ch;
+			padding-right: 30px;
+			padding-left: 30px;
+		}
+
+		display: flex;
+		flex-direction: column;
+		gap: 30px;
+
+		.header {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			text-align: center;
+			gap: 10px;
+			width: min(var(--main-column-width), 100%);
+			margin: 0 auto;
+
+			.note {
+				font-size: 90%;
+				color: rgba(var(--color--text-rgb), 0.8);
+			}
+		}
+
+		.cover-image {
+			width: min(var(--main-column-width), 100%);
+			margin: 0 auto;
+			max-height: 400px;
+			box-shadow: var(--image-shadow);
+			border-radius: 6px;
+		}
+
+		:global(.cover-image img) {
+			max-height: 400px;
+			object-fit: cover;
+		}
+
+		.content {
+			display: grid;
+			grid-template-columns:
+				1fr
+				min(var(--main-column-width), 100%)
+				1fr;
+
+			:global(> *) {
+				grid-column: 2;
+			}
+
+			:global(> .full-bleed) {
+				grid-column: 1 / 4;
+				width: 100%;
+				max-width: 1600px;
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+
+		.tags {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 5px;
+			flex-wrap: wrap;
+		}
+	}
+</style>