Merge #85: fix github issues

ebca183 fix github issues (Graeme Byrne) Pull request description: * In order to prevent long URLs in links and list items from overflowing the page, add : ``` word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; white-space: normal; ``` * Remove `word-break: break-all;` from links and list items which don't require it. * [Highlight ToC #81](#81) * [Build error: TypeError: Cannot read properties of undefined (reading 'relatedPosts') #80](#80) * [Ask the designer how to implement a link inside a key feature card #42](#42) * [Enable second level of indentation in TableOfContents section #58](#58) * [v1 error page in v2 #71](#71) * [Fake links in homepage #84](#84) ACKs for top commit: josecelano: ACK ebca183 Tree-SHA512: 6536a66c42e4876ab6b5aebf7f68405441420eee2b87ff1887ffcbd2a09ac7ed1e588e563075476a2b51f4abe4b046e4947959e0c9f408de99b9057d5aa14f74
torrust · Oct 4, 2024 · 93a3e12 · 93a3e12
2 parents fd1e62c + ebca183
commit 93a3e12
Show file tree

Hide file tree

Showing 14 changed files with 105 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;