Merge #14: fix npm run dev error and separate blog and home routes

e62359d fix npm run dev error and separate blog and home routes (Graeme Byrne)

Pull request description:

  * Fix `npm run dev error` as described [here](#5) by removing images and replacing them with CSS gradients as outlined in the designer's Figma design.
  * Separate `(home)` and `blog` into separate routes to make clear where each goes. Also change individual blog posts routes' name from `(blog)` to `(article)` to avoid confusion with `blog` route.

ACKs for top commit:
  josecelano:
    ACK e62359d

Tree-SHA512: 27cd0243a85084eacbcb865fab0656a422fd0e4de7397931a40021ec70a0a4cbf10b5d42b919948c689ccf00f7a0ebf7eb20d1c6b87f4064aec8dc3564aca4a6

Author: josecelano

.github/workflows/stale.yml

@@ -7,21 +7,20 @@ name: Mark stale issues and pull requests
 
 on:
   schedule:
-  - cron: '38 5 * * *'
+    - cron: '38 5 * * *'
 
 jobs:
   stale:
-
     runs-on: ubuntu-latest
     permissions:
       issues: write
       pull-requests: write
 
     steps:
-    - uses: actions/stale@v5
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        stale-issue-message: 'Stale issue message'
-        stale-pr-message: 'Stale pull request message'
-        stale-issue-label: 'no-issue-activity'
-        stale-pr-label: 'no-pr-activity'
+      - uses: actions/stale@v5
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          stale-issue-message: 'Stale issue message'
+          stale-pr-message: 'Stale pull request message'
+          stale-issue-label: 'no-issue-activity'
+          stale-pr-label: 'no-pr-activity'

src/lib/components/atoms/Cards.svelte

@@ -4,11 +4,28 @@
 	export let additionalClass: string | undefined = undefined;
 
 	export let href: string | undefined = undefined;
-	export let backgroundImage: string | undefined = undefined;
 	const isExternalLink = !!href && HttpRegex.test(href);
 	export let target: '_self' | '_blank' = isExternalLink ? '_blank' : '_self';
 	export let rel = isExternalLink ? 'noopener noreferrer' : undefined;
 
+	function getRandomColor() {
+		const letters = '0123456789ABCDEF';
+		let color = '#';
+		for (let i = 0; i < 6; i++) {
+			color += letters[Math.floor(Math.random() * 16)];
+		}
+		return color;
+	}
+
+	function getRandomGradient() {
+		const color1 = getRandomColor();
+		const color2 = getRandomColor();
+		const randomDegree = Math.floor(Math.random() * 360);
+		return `linear-gradient(${randomDegree}deg, ${color1}, ${color2})`;
+	}
+
+	$: randomGradientBackground = getRandomGradient();
+
 	$: tag = href ? 'a' : 'article';
 	$: linkProps = {
 		href,
@@ -23,12 +40,8 @@
 	{...linkProps}
 	data-sveltekit-preload-data
 	{...$$restProps}
+	style="background: {randomGradientBackground};"
 >
-	{#if $$slots.image || backgroundImage}
-		<div class="image" style="background-image: url({backgroundImage});">
-			<slot name="image" />
-		</div>
-	{/if}
 	<div class="body">
 		<div class="content">
 			<slot name="content" />

src/lib/components/molecules/BlogPostCard.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Cards from '$lib/components/atoms/Cards.svelte';
-	import Image from '$lib/components/atoms/Image.svelte';
 	import { formatDate } from '$lib/utils/date';
 
 	export let title: string;
@@ -15,15 +14,10 @@
 </script>
 
 <Cards
-	href="/{slug}"
+	href={`/${slug}`}
 	target="_self"
 	additionalClass="blog-post-card {!showImage || !coverImage ? 'no-image' : ''}"
 >
-	<div class="image" slot="image">
-		{#if coverImage}
-			<Image src={coverImage} alt="Cover image of this blog post" />
-		{/if}
-	</div>
 	<div class="content" slot="content">
 		<h3 class="title">
 			{title}

src/lib/components/singletons/RecentPosts.svelte

@@ -11,10 +11,8 @@
 			<BlogPostCard
 				slug={post.slug}
 				title={post.title}
-				showImage={true}
 				date={post.date}
 				contributor={post.contributor}
-				coverImage={post.coverImage}
 			/>
 		{/each}
 	</div>

src/routes/(blog)/+layout.server.ts src/routes/(article)/+layout.server.ts

@@ -6,7 +6,7 @@
 
 <Header />
 <div>
-	<slot></slot>
+	<slot />
 </div>
 <Footer />
 

src/routes/(blog)/+layout.svelte src/routes/(article)/+layout.svelte

@@ -13,7 +13,8 @@ const config = {
 	kit: {
 		adapter: adapter(),
 		prerender: {
-			handleHttpError: 'warn'
+			handleHttpError: 'warn',
+			entries: ['*']
 		}
 	},
 	preprocess: [