contributor articles not appearing on contributor page

package.json

@@ -22,6 +22,8 @@
 		"@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",
@@ -60,8 +62,7 @@
 		"feather-icons": "^4.29.2",
 		"flexsearch": "^0.7.43",
 		"postcss": "^8.4.49",
-		"shiki": "^1.6.1",
-		"shiki-es": "^0.14.0",
+		"shiki": "^1.23.1",
 		"svelte-toc": "^0.5.9",
 		"tocbot": "^4.29.0",
 		"vscode-oniguruma": "^2.0.1",

src/lib/components/organisms/RelatedPosts.story.svelte

@@ -11,6 +11,7 @@
 				title: 'Getting Started with Svelte',
 				date: '2024-04-28',
 				contributor: 'John Doe',
+				contributorSlug: 'john-doe',
 				coverImage: '/images/svelte-cover.jpg',
 				tags: ['Technology', 'Programming'],
 				readingTime: '5 minutes',

src/lib/components/singletons/TorrustTrackerPost.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import CodeBlock from '$lib/components/molecules/CodeBlock.svelte';
-	import Toc from '../atoms/Toc.svelte';
-	import PagesWrapper from '../atoms/PagesWrapper.svelte';
+	import Toc from '$lib/components/atoms/Toc.svelte';
+	import PagesWrapper from '$lib/components/atoms/PagesWrapper.svelte';
 </script>
 
 <PagesWrapper heading="">

src/lib/utils/types.ts

@@ -47,6 +47,7 @@ export type BlogPost = {
 		slug: string;
 		title: string;
 		contributor: string;
+		contributorSlug: string;
 		coverImage: string;
 		tags?: string[];
 		readingTime: string;

src/routes/(pages)/about/+page.svelte

@@ -354,7 +354,7 @@
 		padding-top: 2rem;
 	}
 
-	#toc-builder-preview > h2 {
+	h2 {
 		font-size: 1.8rem;
 		font-weight: bold;
 	}

src/routes/api/+server.js

@@ -8,13 +8,12 @@ export const GET = async () => {
 		const dateA = new Date(a.meta.date);
 		const dateB = new Date(b.meta.date);
 
-		// Check if the dates are valid before sorting
 		if (isNaN(dateA.getTime()) || isNaN(dateB.getTime())) {
 			console.error('Invalid date found:', a.meta.date, b.meta.date);
-			return 0; // Keep original order if dates are invalid
+			return 0;
 		}
 
-		return dateB.getTime() - dateA.getTime(); // Sort in descending order
+		return dateB.getTime() - dateA.getTime();
 	});
 
 	if (!sortedPosts.length) {

src/routes/contributor/+layout.server.ts

@@ -1,7 +1,8 @@
-import { filteredPosts } from '$lib/data/blog-posts';
+export const load = async ({ fetch }) => {
+	const response = await fetch(`/api`);
+	const posts = await response.json();
 
-export async function load() {
 	return {
-		posts: filteredPosts
+		posts
 	};
-}
+};

src/routes/contributor/+layout.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
 
 	import Button from '$lib/components/atoms/Button.svelte';
-	import RelatedPostCard from '$lib/components/molecules/RelatedPostCard.svelte';
 	import ContentSection from '$lib/components/organisms/ContentSection.svelte';
 	import type { BlogPost } from '$lib/utils/types';
+	import BlogPreview from '$lib/components/molecules/BlogPreview.svelte';
 
 	export let data: {
 		posts: BlogPost[];
@@ -17,10 +18,10 @@
 	let numberOfPosts: number | undefined;
 
 	onMount(() => {
-		currentUrl = window.location.href;
+		currentUrl = $page.url.pathname;
 		splitUrl = currentUrl.split('/').pop();
 
-		numberOfPosts = posts.filter((post) => post.contributorSlug === splitUrl).length;
+		numberOfPosts = posts.filter((post) => post.meta.contributorSlug === splitUrl).length;
 	});
 </script>
 
@@ -31,16 +32,9 @@
 		<ContentSection title="All Blog Posts">
 			<div class="grid">
 				{#each posts as post}
-					{#if post.contributorSlug === splitUrl}
-						<RelatedPostCard
-							title={post.title}
-							excerpt={post.excerpt}
-							readingTime={post.readingTime}
-							slug={post.slug}
-							tags={post.tags}
-							date={post.date}
-						/>
-					{/if}
+					<a href={post.path}>
+						<BlogPreview post_data={post.meta} />
+					</a>
 				{/each}
 			</div>
 		</ContentSection>
@@ -61,45 +55,31 @@
 
 <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);
 	}
 
 	.grid {
-		width: 100%;
+		padding-top: 3rem;
 		display: grid;
-		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-		grid-gap: 20px;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 24px;
+		max-width: 1200px;
+		margin: 0 auto;
 
-		@include for-tablet-portrait-down {
+		@include for-phone-only {
 			grid-template-columns: 1fr;
 		}
 
 		@include for-tablet-landscape-up {
-			// Select every 6 elements, starting from position 1
-			// And make it take up 6 columns
-			> :global(:nth-child(6n + 1)) {
-				grid-column: span 6;
-			}
-			// Select every 6 elements, starting from position 2
-			// And make it take up 3 columns
-			> :global(:nth-child(6n + 2)) {
-				grid-column: span 3;
-			}
-			// Select every 6 elements, starting from position 3
-			// And make it take up 3 columns
-			> :global(:nth-child(6n + 3)) {
-				grid-column: span 3;
-			}
-			// Select every 6 elements, starting from position 4, 5 and 6
-			// And make it take up 2 columns
-			> :global(:nth-child(6n + 4)),
-			:global(:nth-child(6n + 5)),
-			:global(:nth-child(6n + 6)) {
-				grid-column: span 2;
-			}
+			grid-template-columns: 1fr 1fr;
+		}
+
+		@include for-desktop-up {
+			grid-template-columns: 1fr 1fr 1fr;
 		}
 	}
 

src/routes/contributors/+layout.svelte

@@ -1 +1,18 @@
-<slot />
+<div class="contributors">
+	<h1>Contributors</h1>
+	<slot />
+</div>
+
+<style lang="scss">
+	.contributors {
+		background: rgba(26, 26, 26, 1);
+		padding-block: 2rem;
+	}
+
+	h1 {
+		font-size: 2.5rem;
+		padding-block: 3rem;
+		text-align: center;
+		color: rgba(245, 245, 245, 0.96);
+	}
+</style>

src/routes/contributors/+page.svelte

@@ -100,6 +100,14 @@
 		filter: brightness(0.9);
 	}
 
+	a {
+		color: rgba(245, 245, 245, 0.96);
+	}
+
+	a:hover {
+		color: rgba(255, 49, 0, 0.96);
+	}
+
 	@media (min-width: 768px) {
 		.contributors {
 			flex-direction: row;

tailwind.config.ts

@@ -1,9 +1,14 @@
 import type { Config } from 'tailwindcss';
 import plugin from 'tailwindcss/plugin';
 import typography from '@tailwindcss/typography';
+import { skeleton } from '@skeletonlabs/tw-plugin';
+import { join } from 'path';
 
 export default {
-	content: ['./src/**/*.{html,js,svelte,ts}'],
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
+	],
 
 	theme: {
 		container: {
@@ -71,6 +76,7 @@ export default {
 	},
 
 	plugins: [
+		skeleton,
 		typography,
 		plugin(function ({ addVariant, matchUtilities, theme }) {
 			addVariant('hocus', ['&:hover', '&:focus']);