Merge #125: contributor articles not appearing on contributor page

d4458bd fix check error (Graeme Byrne)
270b368 fix lint error (Graeme Byrne)
59b8ec9 contributor articles not appearing on contributor page (Graeme Byrne)

Pull request description:

  * `routes/contributor/+layout.server.ts` wasn't accessing data from `routes/api` which had been set up to facilitate the change from `routes/(blog)` to `routes/blog`. This was causing the contributor's articles not to be shown on their page as detailed [here](#123). I made this data accesible to `routes/contributor` by adding the code below to `routes/contributor/+layout.server.ts`

  ```
  export const load = async ({ fetch }) => {
  const response = await fetch(`/api`);
  const posts = await response.json();

  return {
  posts
  };
  };
  ```
  * Replaced deprecated [Shijiki](https://github.com/antfu/shikiji) and [shiki-es](https://github.com/pi0/shiki-es) with [Shiki](https://github.com/shikijs/shiki) as mentioned [here](#76).

ACKs for top commit:
  josecelano:
    ACK d4458bd

Tree-SHA512: 5d2a6b089827349489e3cb944a49ee6258d12c834e2af3e007e36150ba97f8ab82b49ee19fd7756cc1dae9a52104247c0630470ee85c1ceacb29affd242bd963

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']);