Merge #129: add component to display contributors

8df5b46 change title of defaultContributorsList and remove token (Graeme Byrne)
9841a81 add default values for Contributors.svelte (Graeme Byrne)
158a94e cache requests to github api in store and remove token (Graeme Byrne)
dfe74b3 clean up +page.server.ts (Graeme Byrne)
ec727a9 fix lint error in +page.server.ts (Graeme Byrne)
65913e9 get list of repos from GitHub API (Graeme Byrne)
bc46c91 fix tailwind lint error (Graeme Byrne)
896104f add component to display contributors (Graeme Byrne)

Pull request description:

  * in `routes/(home)/+page.server.ts`, fetch contributors data from GitHub API to use in Torrust repos.
    * Create a `Contributor` type for data coming from GitHub API and store it in `'$lib/utils/types'` to be imported
    * Create an array of repo names and store it in `'$lib/constants/constants'` to be imported and reactively mapped over together with a baseURL
    * Create a Personal Access Token, store it in `.env` and store it in `const token = import.meta.env.VITE_GITHUB_TOKEN;` to order to increase GitHub API rate limits.
    * Fetch contributor data from multiple GitHub repository URLs concurrently using Promise.all. It sends authenticated GET requests (with a token in the headers) to each URL and parses the JSON response for all the requests.
    * Flatten the array of contributor arrays into a single array of all contributors.
    * Remove duplicate contributors from the all contributors array.
    * Pass array into `routes/(home)/+page.svelte`, which passes it into component `Contributors.svelte` in order to loop over and display each contributor on the home page.

  * On each of the `(pages)` routes there wasn't responsiveness to make Table of Contents appear above the text on smaller screens and to the left on wider screens, so I added that to each.

ACKs for top commit:
  josecelano:
    ACK 8df5b46

Tree-SHA512: 71189d32b15e63b460288da401808c830583d20b0f4e46e04feef3f6ef53cf3e54d95b6132970938944db61f6f3fadb991dfc5626cb014993af7dccff6633e8a

Author: josecelano

package-lock.json

@@ -22,8 +22,6 @@
 		"@iconify/svelte": "^4.0.2",
 		"@melt-ui/pp": "^0.3.2",
 		"@melt-ui/svelte": "^0.86.0",
-		"@skeletonlabs/skeleton": "^2.10.3",
-		"@skeletonlabs/tw-plugin": "^0.4.0",
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.5.25",
 		"@types/swiper": "^5.4.3",

package.json

@@ -0,0 +1,69 @@
+<script lang="ts">
+	export let contributors;
+	export let error;
+	import { defaultContributorsList } from '$lib/constants/constants';
+</script>
+
+<div class="container">
+	<h2>Contributors</h2>
+	<p>Here are the people responsible for creating and maintaining Torrust.</p>
+	<div class="flex">
+		{#if !error && contributors && contributors.length > 0}
+			{#each contributors as contributor}
+				<div>
+					<a href={contributor.html_url} target="_blank" title={contributor.login}>
+						<img src={contributor.avatar_url} alt="contributor" />
+					</a>
+				</div>
+			{/each}
+		{:else}
+			{#each defaultContributorsList as contributor}
+				<div>
+					<a
+						href="https://github.com/{contributor.html_url}"
+						target="_blank"
+						title={contributor.html_url}
+					>
+						<img src={contributor.avatar_url} alt="contributor" />
+					</a>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
+	.container {
+		margin: 0 auto;
+		max-width: 800px;
+	}
+
+	.flex {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 20px;
+		padding-top: 2rem;
+	}
+
+	h2 {
+		text-align: center;
+		color: rgba(245, 245, 245, 0.96);
+		padding-top: 4rem;
+		font-size: 1.8rem;
+		font-weight: bold;
+	}
+
+	p {
+		color: rgba(245, 245, 245, 0.96);
+		text-align: center;
+		padding-top: 2rem;
+	}
+
+	img {
+		width: 50px;
+		border-radius: 50%;
+	}
+</style>

src/lib/components/singletons/Contributors.svelte

@@ -228,18 +228,12 @@ cd /tmp \
 	@import '$lib/scss/breakpoints.scss';
 
 	.wrapper {
-		display: grid;
-		grid-template-columns: 300px 1fr;
-		gap: 4rem;
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
 		position: relative;
 	}
 
-	.wrapper :global(.toc) {
-		position: sticky;
-		top: 4rem;
-		height: min-content;
-	}
-
 	.content-preview {
 		flex: 1;
 		word-break: keep-all;
@@ -288,6 +282,17 @@ cd /tmp \
 	}
 
 	@include for-desktop-up {
+		.wrapper {
+			flex-direction: row;
+			gap: 4rem;
+		}
+
+		.wrapper :global(.toc) {
+			position: sticky;
+			top: 4rem;
+			height: min-content;
+		}
+
 		.content-preview {
 			overflow-y: scroll;
 			scrollbar-width: none;

src/lib/components/singletons/TorrustIndexPost.svelte

@@ -248,18 +248,12 @@ cd /tmp \
 <style lang="scss">
 	@import '$lib/scss/breakpoints.scss';
 	.wrapper {
-		display: grid;
-		grid-template-columns: 300px 1fr;
-		gap: 4rem;
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
 		position: relative;
 	}
 
-	.wrapper :global(.toc) {
-		position: sticky;
-		top: 4rem;
-		height: min-content;
-	}
-
 	.content-preview {
 		flex: 1;
 		word-break: keep-all;
@@ -307,6 +301,17 @@ cd /tmp \
 	}
 
 	@include for-desktop-up {
+		.wrapper {
+			flex-direction: row;
+			gap: 4rem;
+		}
+
+		.wrapper :global(.toc) {
+			position: sticky;
+			top: 4rem;
+			height: min-content;
+		}
+
 		.content-preview {
 			overflow-y: scroll;
 			scrollbar-width: none;