From ebca18396c8e578f1693ae077a7bb48e6aebe3b4 Mon Sep 17 00:00:00 2001
From: Graeme Byrne <grmbrn89@gmail.com>
Date: Thu, 3 Oct 2024 19:56:50 +0200
Subject: [PATCH] fix github issues

---
 src/lib/components/atoms/Button.svelte        |  4 +--
 src/lib/components/atoms/Card.svelte          |  7 -----
 src/lib/components/atoms/Slider.svelte        | 30 ++++++++++---------
 .../components/atoms/TableOfContents.svelte   |  3 +-
 .../components/singletons/PrevNextPost.svelte |  4 +++
 .../singletons/TorrustIndexPost.svelte        | 13 ++++++--
 .../singletons/TorrustTrackerPost.svelte      | 13 ++++++--
 .../singletons/WhyContribute.svelte           |  2 +-
 src/lib/scss/_base.scss                       |  4 +++
 src/lib/scss/global.scss                      |  4 +++
 src/routes/(pages)/about/+page.svelte         | 25 ++++++++++++++--
 src/routes/(pages)/community/+page.svelte     | 23 ++++++++++++--
 src/routes/(pages)/torrent-index/+page.svelte |  2 +-
 src/routes/+error.svelte                      |  9 ++++--
 14 files changed, 105 insertions(+), 38 deletions(-)

diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index 9ad25e1..794aa6a 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -68,8 +68,8 @@
 
 		&.color {
 			&--primary {
-				--main-color: var(--color--primary-rgb);
-				--light-color: var(--color--primary-tint-rgb);
+				--main-color: 255, 49, 0;
+				--light-color: rgba(255, 100, 100, 0.5);
 				--contrast-color: var(--color--primary-contrast);
 			}
 			&--secondary {
diff --git a/src/lib/components/atoms/Card.svelte b/src/lib/components/atoms/Card.svelte
index 3f5f77d..3349617 100644
--- a/src/lib/components/atoms/Card.svelte
+++ b/src/lib/components/atoms/Card.svelte
@@ -20,13 +20,6 @@
 		border: 1px solid rgba(245, 245, 245, 0.08);
 		padding: 1.5rem;
 		border-radius: 1.5rem;
-		transition: box-shadow 0.3s ease;
-
-		&:hover {
-			background: rgba(0, 0, 0, 0.2);
-			box-shadow: 0 0 0 3px rgba(255, 49, 0, 1);
-			cursor: pointer;
-		}
 
 		span {
 			width: 24px;
diff --git a/src/lib/components/atoms/Slider.svelte b/src/lib/components/atoms/Slider.svelte
index 87f40b6..9f01a01 100644
--- a/src/lib/components/atoms/Slider.svelte
+++ b/src/lib/components/atoms/Slider.svelte
@@ -9,15 +9,17 @@
 
 <div class="slider-container">
 	{#each titleArr as item}
-		<div class={item.link ? 'has-link' : ''}>
-			{#if item.link}
-				<a href={item.link} target="_blank" rel="noopener noreferrer">
+		{#if item.link}
+			<a href={item.link} target="_blank" rel="noopener noreferrer">
+				<div class={item.link ? 'has-link' : ''}>
 					<p>{item.title}</p>
-				</a>
-			{:else}
+				</div>
+			</a>
+		{:else}
+			<div class={item.link ? 'has-link' : ''}>
 				<p>{item.title}</p>
-			{/if}
-		</div>
+			</div>
+		{/if}
 	{/each}
 </div>
 
@@ -26,12 +28,13 @@
 
 	.slider-container {
 		display: flex;
+		gap: 1rem;
 		overflow-x: auto;
 		width: 100vw;
-		margin: 3rem 0 0 0;
-		gap: 1rem;
-		scroll-behavior: smooth;
+		margin: 3rem 0rem 0 0rem;
+		padding-inline: 1.5rem;
 		padding-bottom: 1rem;
+		scroll-behavior: smooth;
 		box-sizing: border-box;
 		position: relative;
 		left: 0;
@@ -48,11 +51,10 @@
 			background-color: rgba(255, 49, 0, 0.8);
 			box-sizing: border-box;
 			border: 2px solid transparent;
+		}
 
-			a {
-				color: rgba(245, 245, 245, 0.96);
-				margin-top: auto;
-			}
+		a {
+			color: rgba(245, 245, 245, 0.96);
 		}
 
 		div.has-link:hover {
diff --git a/src/lib/components/atoms/TableOfContents.svelte b/src/lib/components/atoms/TableOfContents.svelte
index 0cc7e2e..42eaf45 100644
--- a/src/lib/components/atoms/TableOfContents.svelte
+++ b/src/lib/components/atoms/TableOfContents.svelte
@@ -23,7 +23,7 @@
 					}
 				});
 			},
-			{ threshold: 0.5 }
+			{ threshold: 0.9 }
 		);
 
 		sections.forEach((section) => {
@@ -90,6 +90,7 @@
 				color: rgba(245, 245, 245, 0.96);
 				font-size: 0.875rem;
 				text-decoration: none;
+				word-break: keep-all;
 
 				&:hover {
 					color: rgba(255, 49, 0, 0.96);
diff --git a/src/lib/components/singletons/PrevNextPost.svelte b/src/lib/components/singletons/PrevNextPost.svelte
index 20074e6..a747590 100644
--- a/src/lib/components/singletons/PrevNextPost.svelte
+++ b/src/lib/components/singletons/PrevNextPost.svelte
@@ -79,6 +79,10 @@
 		text-align: left;
 	}
 
+	a {
+		word-break: keep-all;
+	}
+
 	.arrow {
 		display: flex;
 		align-items: center;
diff --git a/src/lib/components/singletons/TorrustIndexPost.svelte b/src/lib/components/singletons/TorrustIndexPost.svelte
index fc83220..5a621b4 100644
--- a/src/lib/components/singletons/TorrustIndexPost.svelte
+++ b/src/lib/components/singletons/TorrustIndexPost.svelte
@@ -14,7 +14,14 @@
 			]
 		},
 		{ name: 'Roadmap', id: 'roadmap' },
-		{ name: 'License', id: 'license' }
+		{
+			name: 'License',
+			id: 'license',
+			subsections: [
+				{ name: 'Copyright', id: 'copyright' },
+				{ name: 'Legacy Exception', id: 'legacyException' }
+			]
+		}
 	];
 
 	let activeSection = '';
@@ -193,7 +200,7 @@ cd /tmp \
 
 		<p></p>
 
-		<h3>Copyright</h3>
+		<h3 id="copyright">Copyright</h3>
 
 		<p>
 			This program is free software: you can redistribute it and/or modify it under the terms of the <a
@@ -221,7 +228,7 @@ cd /tmp \
 
 		<p></p>
 
-		<h3>Legacy Exception</h3>
+		<h3 id="legacyException">Legacy Exception</h3>
 
 		<p>
 			For prosperity, versions of Torrust Tracker that are older than five years are automatically
diff --git a/src/lib/components/singletons/TorrustTrackerPost.svelte b/src/lib/components/singletons/TorrustTrackerPost.svelte
index 587a54c..effe5b7 100644
--- a/src/lib/components/singletons/TorrustTrackerPost.svelte
+++ b/src/lib/components/singletons/TorrustTrackerPost.svelte
@@ -9,7 +9,14 @@
 		{ name: 'Build from sources', id: 'buildSources' },
 		{ name: 'Run with docker', id: 'docker' },
 		{ name: 'Roadmap', id: 'roadmap' },
-		{ name: 'License', id: 'license' }
+		{
+			name: 'License',
+			id: 'license',
+			subsections: [
+				{ name: 'Copyright', id: 'copyright' },
+				{ name: 'Legacy Exception', id: 'legacyException' }
+			]
+		}
 	];
 
 	let activeSection = '';
@@ -205,7 +212,7 @@ cd /tmp \
 
 		<p></p>
 
-		<h3>Copyright</h3>
+		<h3 id="copyright">Copyright</h3>
 
 		<p>
 			This program is free software: you can redistribute it and/or modify it under the terms of the <a
@@ -233,7 +240,7 @@ cd /tmp \
 
 		<p></p>
 
-		<h3>Legacy Exception</h3>
+		<h3 id="legacyException">Legacy Exception</h3>
 
 		<p>
 			For prosperity, versions of Torrust Tracker that are older than five years are automatically
diff --git a/src/lib/components/singletons/WhyContribute.svelte b/src/lib/components/singletons/WhyContribute.svelte
index af2e714..dbc90d4 100644
--- a/src/lib/components/singletons/WhyContribute.svelte
+++ b/src/lib/components/singletons/WhyContribute.svelte
@@ -6,7 +6,7 @@
 
 <div class="container">
 	<div class="contribute-container">
-		<h2>Why to contribute?</h2>
+		<h2>Why should you contribute?</h2>
 		<p>
 			Our project is designed to push the boundaries of decentralized technology, providing a
 			robust, open-source BitTorrent tracker and index. By contributing, you’re helping build tools
diff --git a/src/lib/scss/_base.scss b/src/lib/scss/_base.scss
index 8b80de6..22468d9 100644
--- a/src/lib/scss/_base.scss
+++ b/src/lib/scss/_base.scss
@@ -11,6 +11,10 @@ ol {
 
 	li {
 		margin: 6px 0;
+		word-wrap: break-word;
+		word-break: break-all;
+		overflow-wrap: break-word;
+		white-space: normal;
 
 		&::marker {
 			color: var(--color--primary);
diff --git a/src/lib/scss/global.scss b/src/lib/scss/global.scss
index 04f01d3..670148c 100644
--- a/src/lib/scss/global.scss
+++ b/src/lib/scss/global.scss
@@ -34,6 +34,10 @@ body {
 
 a {
 	color: rgba(255, 49, 0, 0.96);
+	word-wrap: break-word;
+	word-break: break-all;
+	overflow-wrap: break-word;
+	white-space: normal;
 }
 
 html {
diff --git a/src/routes/(pages)/about/+page.svelte b/src/routes/(pages)/about/+page.svelte
index d2ff593..93dd2a3 100644
--- a/src/routes/(pages)/about/+page.svelte
+++ b/src/routes/(pages)/about/+page.svelte
@@ -4,8 +4,29 @@
 
 	// Array of section objects with display names and IDs
 	let sections = [
-		{ name: 'Why BitTorrent?', id: 'bitTorrent' },
-		{ name: 'Why Torrust', id: 'whyTorrust' },
+		{
+			name: 'Why BitTorrent?',
+			id: 'bitTorrent',
+			subsections: [
+				{ name: 'Why does the BitTorrent protocol still matter?', id: 'bitTorrentProtocol' },
+				{ name: 'Efficiency and scalability', id: 'efficiency' },
+				{ name: 'Current use cases', id: 'currentUses' },
+				{ name: 'Future use cases', id: 'futureUses' },
+				{ name: 'BT vs. IPFS', id: 'btIpfs' },
+				{ name: 'Conclusion', id: 'conclusion' }
+			]
+		},
+		{
+			name: 'Why Torrust',
+			id: 'whyTorrust',
+			subsections: [
+				{ name: 'Performance & Efficiency', id: 'performanceEfficiency' },
+				{ name: 'Security & Reliability', id: 'securityReliability' },
+				{ name: 'User Experience & Accessibility', id: 'userExperience' },
+				{ name: 'Future use cases', id: 'futureUses' },
+				{ name: 'Integration & Interoperability', id: 'integration' }
+			]
+		},
 		{ name: 'The Team', id: 'team' },
 		{ name: 'Contributors', id: 'contributors' },
 		{ name: 'Sponsors', id: 'sponsors' }
diff --git a/src/routes/(pages)/community/+page.svelte b/src/routes/(pages)/community/+page.svelte
index 4108644..2254bd9 100644
--- a/src/routes/(pages)/community/+page.svelte
+++ b/src/routes/(pages)/community/+page.svelte
@@ -3,9 +3,28 @@
 
 	// Array of section objects with display names and IDs
 	let sections = [
-		{ name: 'Why Contribute to our Project?', id: 'whyContribute' },
+		{
+			name: 'Why Contribute to our Project?',
+			id: 'whyContribute',
+			subsections: [
+				{ name: 'Embrace Rust: a language of choice', id: 'embraceRust' },
+				{ name: 'Prioritizing Code Quality', id: 'codeQuality' },
+				{ name: 'A welcoming community for newcomers', id: 'welcomingCommunity' },
+				{ name: 'Influence the Project’s Future', id: 'influenceDirection' },
+				{ name: 'Join us today', id: 'joinUs' }
+			]
+		},
 		{ name: 'How to contribute?', id: 'howContribute' },
-		{ name: 'Torrent Knowledge Base', id: 'knowledgeBase' },
+		{
+			name: 'Torrent Knowledge Base',
+			id: 'knowledgeBase',
+			subsections: [
+				{ name: 'What Are Torrents?', id: 'whatAreTorrents' },
+				{ name: 'What Is a Tracker?', id: 'whatIsTracker' },
+				{ name: 'What Is a Torrent Index?', id: 'whatIsTorrentIndex' },
+				{ name: 'List of projects using BitTorrent', id: 'listOfProjects' }
+			]
+		},
 		{ name: 'Resources', id: 'resources' }
 	];
 
diff --git a/src/routes/(pages)/torrent-index/+page.svelte b/src/routes/(pages)/torrent-index/+page.svelte
index acc5bcc..58b0104 100644
--- a/src/routes/(pages)/torrent-index/+page.svelte
+++ b/src/routes/(pages)/torrent-index/+page.svelte
@@ -125,7 +125,7 @@
 
 		.slider-content {
 			width: 100%;
-			max-width: 2070px;
+			max-width: 2100px;
 			display: flex;
 			justify-content: center;
 		}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 7a10d63..667fa5c 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -21,16 +21,21 @@
 
 <style lang="scss">
 	.error-page {
-		background: var(--color--page-background);
 		position: relative;
+		background: rgba(245, 245, 245, 0.08);
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 	.container {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		min-height: 60vh;
+		min-height: 80vh;
 		text-align: center;
+		max-width: 500px;
+		padding-inline: 1.5rem;
 
 		.svg-wrapper {
 			width: 300px;