Merge #50: fix v2 issues

cbe642e fix v2 issues (Graeme Byrne) Pull request description: * change from using `window` in `TableOfContents` to using `IntersectionObserver` * [fielename prop in <CodeBlock> component should be optional #49](#49) * [Normal links don't have any special style #48](#48) * [Ask the designer how to implement a link inside a key feature card #42](#42) * [Blog post tags style is not the same as the design #38](#38) * [Ask the designer how to implement html lists #37](#37) * [Font size for table of contents is not as the design #31](#31) * [Ask the designer how to implement share links in blog posts #29](#29) * [Related Post section does not look like the standard blog post list #27](#27) * [Top menu padding is not the same as the design #26](#26) * [Key features list width should be 100% #6](#6) ACKs for top commit: josecelano: ACK cbe642e Tree-SHA512: 1b6df7281d9b9f0f88555874aec76fc20d2a73b098ef9112952b47fc916981c26ec63ee1197c21c1c75fd9db6c1ea1da453a91142838d11a77656c3845dbbefa
torrust · Sep 27, 2024 · 06efe08 · 06efe08
2 parents 2d3c797 + cbe642e
commit 06efe08
Show file tree

Hide file tree

Showing 12 changed files with 211 additions and 121 deletions.
diff --git a/src/lib/components/atoms/Cards.svelte b/src/lib/components/atoms/Cards.svelte
@@ -57,7 +57,6 @@
 		flex-direction: column;
 		align-items: flex-end;
 		height: 312px;
-		margin: 1.5rem;
 		position: relative;
 		border-radius: 1.5rem;
 		overflow: hidden;
@@ -71,17 +70,6 @@
 		}
 	}
 
-	.image {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-size: cover;
-		background-position: center;
-		background-repeat: no-repeat;
-	}
-
 	.body {
 		display: flex;
 		flex-direction: column;

diff --git a/src/lib/components/atoms/Slider.svelte b/src/lib/components/atoms/Slider.svelte
@@ -1,17 +1,30 @@
 <script lang="ts">
-	export let titleArr: string[];
+	interface TitleObj {
+		title: string;
+		link: string;
+	}
+
+	export let titleArr: TitleObj[] = [];
 </script>
 
 <div class="slider-container">
-	{#each titleArr as title}
-		<div>
-			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-			<p>{@html title}</p>
+	{#each titleArr as item}
+		<div class={item.link ? 'has-link' : ''}>
+			<!-- Render title and wrap with a link if available -->
+			{#if item.link}
+				<a href={item.link} target="_blank" rel="noopener noreferrer">
+					<p>{item.title}</p>
+				</a>
+			{:else}
+				<p>{item.title}</p>
+			{/if}
 		</div>
 	{/each}
 </div>
 
 <style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
 	.slider-container {
 		display: flex;
 		overflow-x: auto;
@@ -24,6 +37,10 @@
 		position: relative;
 		left: 0;
 
+		@media (min-width: 2080px) {
+			justify-content: center;
+		}
+
 		div {
 			flex: 0 0 auto;
 			width: 280px;
@@ -35,9 +52,16 @@
 			border-radius: 1.5rem;
 			background-color: rgba(255, 49, 0, 0.8);
 			box-sizing: border-box;
+			border: 1px solid transparent;
+
+			a {
+				color: rgba(245, 245, 245, 0.96);
+				margin-top: auto;
+			}
 		}
 
-		div:hover {
+		div.has-link:hover {
+			border: 1px solid rgba(245, 245, 245, 0.92);
 			cursor: pointer;
 		}
 

diff --git a/src/lib/components/atoms/TableOfContents.svelte b/src/lib/components/atoms/TableOfContents.svelte
@@ -1,4 +1,3 @@
-<!-- TableOfContents.svelte -->
 <script lang="ts">
 	import { onMount } from 'svelte';
 
@@ -10,30 +9,31 @@
 	export let sections: Section[] = [];
 	export let activeSection = '';
 
-	const handleScroll = () => {
-		const scrollPosition = window.scrollY + 0; // Adjust based on offset
+	onMount(() => {
+		if (sections.length > 0) {
+			activeSection = sections[0].id;
+		}
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						activeSection = entry.target.id;
+					}
+				});
+			},
+			{ threshold: 0.5 }
+		);
 
 		sections.forEach((section) => {
 			const sectionElement = document.getElementById(section.id);
 			if (sectionElement) {
-				const offsetTop = sectionElement.offsetTop;
-				const offsetHeight = sectionElement.offsetHeight;
-
-				if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
-					activeSection = section.id;
-				}
+				observer.observe(sectionElement);
 			}
 		});
-	};
 
-	onMount(() => {
-		if (sections.length > 0) {
-			activeSection = sections[0].id;
-		}
-
-		window.addEventListener('scroll', handleScroll);
 		return () => {
-			window.removeEventListener('scroll', handleScroll);
+			observer.disconnect();
 		};
 	});
 </script>
@@ -53,20 +53,29 @@
 
 	.sticky-nav {
 		background: rgba(26, 26, 26, 1);
-		width: 350px; /* Set width for the nav */
-		padding-inline: 0; /* Padding around nav */
-		position: sticky; /* Keep it sticky within the viewport */
-		top: 40px; /* Adjust this to control when it becomes sticky */
-		z-index: 900; /* Ensure it stays on top */
+		width: 350px;
+		padding-inline: 0;
+		position: sticky;
+		top: 40px;
+		z-index: 900;
 	}
 
 	.sticky-nav ul {
-		list-style: none; /* Remove default list styling */
-		padding: 0; /* Remove padding */
-		margin: 0; /* Remove margin */
+		list-style: none;
+		padding: 0;
+		margin: 0;
 	}
 
 	.active {
-		font-weight: bold; /* Highlight the active section */
+		font-weight: bold;
+	}
+
+	a {
+		color: rgba(245, 245, 245, 0.96);
+		font-size: 0.875rem;
+
+		&:hover {
+			color: rgba(255, 49, 0, 0.96);
+		}
 	}
 </style>
diff --git a/src/lib/components/atoms/Tag.svelte b/src/lib/components/atoms/Tag.svelte
@@ -53,8 +53,9 @@
 	}
 
 	a {
-		text-decoration-thickness: 1px;
-		color: white;
+		color: rgba(245, 245, 245, 0.64);
+		text-transform: uppercase;
+		font-size: 12px;
 		&:hover {
 			color: rgba(255, 49, 0, 1);
 		}

diff --git a/src/lib/components/molecules/CodeBlock.svelte b/src/lib/components/molecules/CodeBlock.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
-	export let filename: string;
+	export let filename: string | undefined = undefined;
 	export let lang: string;
 	export let fullBleed: boolean | undefined = undefined;
 	let codeBlockElement: HTMLDivElement;

diff --git a/src/lib/components/organisms/Header.svelte b/src/lib/components/organisms/Header.svelte
@@ -84,8 +84,7 @@
 			flex-direction: row;
 			align-items: center;
 			justify-content: end;
-			gap: 1rem;
-			margin-top: 2.2vh;
+			gap: 16px;
 			margin-bottom: 1vh;
 			list-style: none;
 			font-size: 1.1rem;

diff --git a/src/lib/components/organisms/RelatedPosts.svelte b/src/lib/components/organisms/RelatedPosts.svelte
@@ -1,41 +1,39 @@
 <script lang="ts">
+	import BlogPostCard from '$lib/components/molecules/BlogPostCard.svelte';
 	import type { BlogPost } from '$lib/utils/types';
-	import RelatedPostCard from '$lib/components/molecules/RelatedPostCard.svelte';
-	import ContentSection from '$lib/components/organisms/ContentSection.svelte';
 
 	export let posts: BlogPost[];
 </script>
 
-<ContentSection id="related-posts" title="Related Posts">
-	<div class="simple-grid">
+<div class="container">
+	<div class="grid">
 		{#each posts as post}
-			<RelatedPostCard
+			<BlogPostCard
 				slug={post.slug}
 				title={post.title}
-				excerpt={post.excerpt}
-				tags={post.tags}
-				readingTime={post.readingTime}
 				date={post.date}
+				contributor={post.contributor}
 			/>
 		{/each}
 	</div>
-</ContentSection>
+</div>
 
 <style lang="scss">
 	@import '$lib/scss/breakpoints.scss';
 
-	.simple-grid {
+	.container {
+		color: rgba(245, 245, 245, 0.8);
+		background: rgba(26, 26, 26, 1);
+	}
+
+	.grid {
 		width: 100%;
 		display: grid;
-		grid-template-columns: 1fr 1fr 1fr;
+		grid-template-columns: 1fr 1fr;
 		grid-gap: 20px;
 
-		@media (max-width: 1070px) {
-			grid-template-columns: 1fr 1fr;
-		}
-
-		@include for-tablet-portrait-down {
-			grid-template-columns: 1fr;
+		@include for-desktop-up {
+			grid-template-columns: 1fr 1fr 1fr;
 		}
 	}
 </style>
diff --git a/src/lib/components/singletons/PrevNextPost.svelte b/src/lib/components/singletons/PrevNextPost.svelte
@@ -61,7 +61,6 @@
 		display: flex;
 		justify-content: space-between;
 		font-size: 16px;
-		margin-inline: 1.5rem;
 		border: 1px solid rgba(245, 245, 245, 0.08);
 	}
 

diff --git a/src/lib/components/singletons/ShareButton.svelte b/src/lib/components/singletons/ShareButton.svelte
@@ -42,38 +42,17 @@
 </script>
 
 <div class="dropdown-container">
-	<button on:click={toggleDropdown} class="dropdown-button" class:active={showDropdown}>
+	<button on:click={toggleDropdown} class="dropdown-button {showDropdown ? 'active' : ''}">
 		<svg
-			class="share-icon"
+			xmlns="http://www.w3.org/2000/svg"
+			class="hover-icon {showDropdown ? 'active' : ''}"
 			width="16"
 			height="16"
-			viewBox="0 0 16 16"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			{...$$props}
 		>
 			<path
-				d="M2.66666 8V13.3333C2.66666 13.687 2.80714 14.0261 3.05719 14.2761C3.30724 14.5262 3.64638 14.6667 4 14.6667H12C12.3536 14.6667 12.6928 14.5262 12.9428 14.2761C13.1929 14.0261 13.3333 13.687 13.3333 13.3333V8"
-				stroke="#F5F5F5"
-				stroke-opacity="0.08"
-				stroke-width="1.5"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			/>
-			<path
-				d="M10.6667 3.99998L8 1.33331L5.33334 3.99998"
-				stroke="#F5F5F5"
-				stroke-opacity="0.08"
-				stroke-width="1.5"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			/>
-			<path
-				d="M8 1.33331V9.99998"
-				stroke="#F5F5F5"
-				stroke-opacity="0.08"
-				stroke-width="1.5"
-				stroke-linecap="round"
-				stroke-linejoin="round"
+				d="M11 16V7.85l-2.6 2.6L7 9l5-5l5 5l-1.4 1.45l-2.6-2.6V16zm-5 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
 			/>
 		</svg>
 		Share
@@ -91,9 +70,9 @@
 </div>
 
 <style lang="scss">
-	.dropdown-container {
-		position: relative;
-		display: inline-block;
+	.hover-icon path {
+		fill: rgba(245, 245, 245, 0.48); /* Default color */
+		transition: fill 0.3s ease;
 	}
 
 	.dropdown-button {
@@ -106,17 +85,29 @@
 		border: 1px solid rgba(245, 245, 245, 0.48);
 		cursor: pointer;
 		border-radius: 1.5rem;
-		font-size: 1rem;
+		font-size: 14px;
+		transition:
+			color 0.3s ease,
+			border 0.3s ease;
+		position: relative;
 	}
 
-	.dropdown-button.active {
-		border: 1px solid rgba(245, 245, 245, 0.8);
-		color: rgba(245, 245, 245, 0.8);
+	/* Active state for button and SVG icon */
+	.dropdown-button.active,
+	.hover-icon.active path {
+		color: rgba(245, 245, 245, 0.8); /* Red color for the text */
+		fill: rgba(245, 245, 245, 0.8); /* Red color for the SVG */
+		border-color: rgba(245, 245, 245, 0.8); /* Red border */
+	}
+
+	.dropdown-container {
+		position: relative; /* Ensure the dropdown is positioned relative to the container */
+		display: inline-block;
 	}
 
 	.dropdown-menu {
 		position: absolute;
-		top: calc(100% + 0.5rem);
+		top: calc(100% + 0.5rem); /* Position the dropdown below the button */
 		right: 0;
 		width: 350px;
 		background-color: rgba(36, 36, 36, 1);
@@ -126,6 +117,12 @@
 		display: flex;
 		flex-direction: column;
 		padding: 1rem;
+		z-index: 100; /* Ensure the dropdown stays above other elements */
+		opacity: 1;
+		visibility: visible;
+		transition:
+			opacity 0.3s ease,
+			visibility 0.3s ease;
 	}
 
 	.dropdown-menu a {
@@ -137,4 +134,10 @@
 	.dropdown-menu a:hover {
 		color: rgba(255, 49, 0, 1);
 	}
+
+	/* When the dropdown is hidden */
+	.dropdown-menu.hidden {
+		opacity: 0;
+		visibility: hidden;
+	}
 </style>