Add search functionality

src/app.html

@@ -10,6 +10,12 @@
 		href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Poppins:wght@100;300;500;700&display=swap"
 		rel="stylesheet" />
 
+	<link rel="icon" href="/img/rgb_logo_256.png" />
+	<meta name="apple-mobile-web-app-status-bar" content="#111111" />
+	<meta name="theme-color" content="#111111" />
+	<meta name="msapplication-TileColor" content="#111111" />
+	<link rel="mask-icon" href="/img/rgb_logo_256.png" color="#111111" />
+
 	%sveltekit.head%
 
 	<!-- Global site tag (gtag.js) - Google Analytics -->

src/lib/components/BlogCard.svelte

@@ -7,7 +7,7 @@
 	class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline"
 >
 	<div class="card-body">
-		<h2 class="group-hover:text-white card-title text-3xl">
+		<h2 class="group-hover:text-white card-title text-2xl lg:text-3xl">
 			{title}
 		</h2>
 		<p class="my-4">{text}</p>

src/lib/components/BlogGrid.svelte

@@ -0,0 +1,10 @@
+<script>
+	import BlogCard from '$lib/components/BlogCard.svelte';
+	export let posts;
+</script>
+
+<div class="grid gap-8 my-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+	{#each posts as { title, preview_text, slug, categories, img } (slug)}
+		<BlogCard {title} text={preview_text} link="/blog/{slug}" {img} tags={categories} />
+	{/each}
+</div>

src/lib/components/FeaturedAppCarousel.svelte

@@ -8,7 +8,7 @@
 	<FeaturedAppCard {...slides[0]} />
 {:else if slides.length > 1}
 	<Carousel let:item={slide} items={slides.map((s) => ({ id: s.link, ...s }))}>
-		<div class="border-2 border-gray-700">
+		<div class="border-2 border-gray-700 h-full grid">
 			<FeaturedAppCard {...slide} />
 		</div>
 	</Carousel>

src/lib/components/Pagination.svelte

@@ -0,0 +1,25 @@
+<script>
+	// TODO: handle many pages
+	// @link https://gist.github.com/kottenator/9d936eb3e4e3c3e02598?permalink_comment_id=4504389#gistcomment-4504389
+	export let totalPosts, currentPage;
+
+	const postsPerPage = 12;
+
+	const totalPageCount = Math.ceil(totalPosts / postsPerPage);
+</script>
+
+{#if totalPageCount > 1 && currentPage !== 1}
+	<a class="btn btn-outline" href="/blog/page/{currentPage - 1}" rel="prev">&lt;</a>
+{/if}
+
+{#each Array(totalPageCount) as _, i}
+	{#if currentPage !== i + 1}
+		<a class="btn btn-outline" href="/blog/page/{i + 1}">{i + 1}</a>
+	{:else}
+		<span class="btn btn-outline border-0">{i + 1}</span>
+	{/if}
+{/each}
+
+{#if totalPageCount > 1 && currentPage !== totalPageCount}
+	<a class="btn btn-outline" href="/blog/page/{currentPage + 1}" rel="next">&gt;</a>
+{/if}

src/lib/components/SEO.svelte

@@ -57,7 +57,6 @@
 			'browser extension notepad'
 		],
 		screenshot = 'img/website_seo_img.png',
-		icon = 'img/rgb_logo_256.png',
 		url,
 		articleData = null;
 
@@ -70,12 +69,6 @@
 <svelte:head>
 	<title>{title}</title>
 
-	<link rel="icon" href={HOST_URL + '/' + icon} />
-	<meta name="apple-mobile-web-app-status-bar" content="#111111" />
-	<meta name="theme-color" content="#111111" />
-	<meta name="msapplication-TileColor" content="#111111" />
-	<link rel="mask-icon" href={HOST_URL + '/' + icon} color="#111111" />
-
 	<meta name="title" content={title} />
 	<meta name="description" content={description} />
 	<meta name="keywords" content={keywords} />

src/lib/components/base/Carousel.svelte

@@ -16,48 +16,38 @@
 
 	export let autoScroll: boolean = true;
 	export let autoScrollDuration: number = 5000;
-	let autoScrollInterval;
+	let autoScrollInterval: ReturnType<typeof setInterval>;
 
 	let moving: boolean = false;
 	$: length = items.length;
 
-	function next() {
+	function step(amount: number) {
 		if (moving) return;
 		moving = true;
-		activeIndex = (activeIndex + 1 + length) % length;
+		activeIndex = (activeIndex + amount + length) % length;
 		setTimeout(() => (moving = false), duration);
 
 		if (autoScroll && autoScrollDuration) {
 			clearInterval(autoScrollInterval);
-			autoScrollInterval = setInterval(next, autoScrollDuration);
+			autoScrollInterval = setInterval(() => step(1), autoScrollDuration);
 		}
 	}
-	function prev() {
-		if (moving) return;
-		moving = true;
-		activeIndex = (activeIndex - 1 + length) % length;
-		setTimeout(() => (moving = false), duration);
 
-		if (autoScroll && autoScrollDuration) {
-			clearInterval(autoScrollInterval);
-			autoScrollInterval = setInterval(next, autoScrollDuration);
-		}
-	}
-	function goto(idx) {
+	function goto(idx: number) {
 		if (moving) return;
 		moving = true;
 		activeIndex = idx;
 		setTimeout(() => (moving = false), duration);
 
 		if (autoScroll && autoScrollDuration) {
 			clearInterval(autoScrollInterval);
-			autoScrollInterval = setInterval(next, autoScrollDuration);
+			autoScrollInterval = setInterval(() => step(1), autoScrollDuration);
 		}
 	}
 
 	$: if (autoScroll && autoScrollDuration) {
 		clearInterval(autoScrollInterval);
-		autoScrollInterval = setInterval(next, autoScrollDuration);
+		autoScrollInterval = setInterval(() => step(1), autoScrollDuration);
 	} else {
 		clearInterval(autoScrollInterval);
 	}
@@ -71,7 +61,7 @@
 		'primary'
 			? 'bg-primary hover:bg-green-700'
 			: 'bg-base-900 hover:bg-base-800'}"
-		on:click={prev}
+		on:click={() => step(-1)}
 	>
 		<Icon name="chevron_right" />
 	</button>
@@ -94,7 +84,7 @@
 		'primary'
 			? 'bg-primary hover:bg-green-700'
 			: 'bg-base-900 hover:bg-base-800'}"
-		on:click={next}
+		on:click={() => step(1)}
 	>
 		<Icon name="chevron_right" />
 	</button>

src/routes/(rgb)/Navbar.svelte → src/lib/components/layout/Navbar.svelte

@@ -52,7 +52,7 @@
 		<ul class="menu menu-horizontal p-0">
 			<li><a href="/" class:active={$page.url.pathname === '/'}>Home</a></li>
 			<li tabindex="0">
-				<a href="/projects" class:active={$page.url.pathname === '/projects'}>
+				<a href="/projects" class:active={$page.url.pathname.includes('/projects')}>
 					Projects
 					<Icon name="chevron_down" class="w-4 h-4" />
 				</a>
@@ -64,7 +64,7 @@
 				</ul>
 			</li>
 			<li tabindex="0">
-				<a href="/blog" class:active={$page.url.pathname === '/blog'}>
+				<a href="/blog" class:active={$page.url.pathname.includes('/blog')}>
 					Blog
 					<Icon name="chevron_down" class="w-4 h-4" />
 				</a>

src/lib/components/SmallFooter.svelte → src/lib/components/layout/SmallFooter.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Icon from './Icon.svelte';
+	import Icon from '$lib/components/Icon.svelte';
 	const year = new Date().getFullYear();
 </script>
 

src/routes/(rgb)/+layout.svelte

@@ -1,9 +1,9 @@
 <script>
 	import '$lib/app.css';
 
-	import Navbar from './Navbar.svelte';
-	import RGBHero from './RGBHero.svelte';
-	import Footer from './Footer.svelte';
+	import Navbar from '$lib/components/layout/Navbar.svelte';
+	import RGBHero from '$lib/components/layout/RGBHero.svelte';
+	import Footer from '$lib/components/layout/Footer.svelte';
 </script>
 
 <Navbar />

src/routes/(rgb)/+page.svelte

@@ -2,11 +2,11 @@
 	import { page } from '$app/stores';
 
 	import FeaturedAppCarousel from '$lib/components/FeaturedAppCarousel.svelte';
-	import BlogCard from '$lib/components/BlogCard.svelte';
 	import SEO from '$lib/components/SEO.svelte';
 	import Icon from '$lib/components/Icon.svelte';
 
 	import projects from '$lib/data/projects';
+	import BlogGrid from '$lib/components/BlogGrid.svelte';
 
 	export let data = {};
 
@@ -49,11 +49,8 @@
 <div class="prose-custom my-8">
 	<h2>Featured Articles</h2>
 </div>
-<div class="grid gap-8 my-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-	{#each featuredPosts as { title, preview_text, slug, categories, img } (slug)}
-		<BlogCard {title} text={preview_text} link="/blog/{slug}" {img} tags={categories} />
-	{/each}
-</div>
+
+<BlogGrid posts={featuredPosts} />
 
 <article class="my-8 lg:w-full grid gap-8 lg:grid-cols-3">
 	<p class="prose-custom lg:col-span-2">

src/routes/(rgb)/blog/+page.svelte

@@ -7,21 +7,34 @@
 
 	import { page } from '$app/stores';
 
-	import BlogCard from '$lib/components/BlogCard.svelte';
+	import BlogGrid from '$lib/components/BlogGrid.svelte';
 	import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+	import Icon from '$lib/components/Icon.svelte';
+	import Pagination from '$lib/components/Pagination.svelte';
 	import SEO from '$lib/components/SEO.svelte';
 
 	export let data = {};
 	$: posts = data.posts;
 
+	const postsPerPage = 12;
+
 	const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
 	$: category = $page.url.searchParams.get('category');
+	$: searchTerm = '';
 
 	// Show only non-hidden posts of the given category, then sort them by date
 	$: filteredPosts = posts
 		?.filter((post) => !post.hidden)
 		.filter((post) => category === null || post.categories.includes(category))
+		.filter(
+			(post) =>
+				searchTerm === '' ||
+				post.title
+					.replace(/ /g, '')
+					.toLowerCase()
+					.includes(searchTerm.replace(/ /g, '').toLowerCase())
+		)
 		.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 
 	$: pageTitle = category === null ? 'Blog' : `${capitalize(category)} Blog Posts`;
@@ -59,22 +72,41 @@
 
 <article class="prose-custom mx-auto">
 	<h1 class="text-center">{pageTitle}</h1>
+	{#if searchTerm !== '' && filteredPosts.length !== 0}
+		<h2 class="text-center">
+			{filteredPosts.length} results for <span class="underline">{searchTerm}</span>:
+		</h2>
+	{/if}
 </article>
 
 <img class="h-64 mx-auto" src="/img/pages/blog_post.svg" alt="" />
 
+<form
+	class="input-group"
+	action=""
+	on:submit|preventDefault={(evt) => (searchTerm = evt.target[0].value)}
+>
+	<input type="text" class="input input-bordered w-full" value={searchTerm} />
+	<button class="btn btn-square btn-primary">
+		<Icon name="search" />
+	</button>
+</form>
+
 {#if filteredPosts.length !== 0}
-	<div class="grid gap-8 my-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-		{#each filteredPosts as { title, preview_text, slug, categories, img } (slug)}
-			<BlogCard {title} text={preview_text} link="/blog/{slug}" {img} tags={categories} />
-		{/each}
-	</div>
+	<BlogGrid posts={filteredPosts.splice(0, postsPerPage)} />
+	{#if searchTerm === ''}
+		<Pagination totalPosts={posts.length} currentPage="1" />
+	{/if}
 {:else}
 	<article class="prose-custom mx-auto mt-8">
 		<p>
-			No posts found for that category. Try a different category or <a href="/blog">
-				View all blog posts
-			</a>
+			No posts found for that {category !== null && searchTerm === ''
+				? 'category'
+				: category === null && searchTerm !== ''
+					? 'search'
+					: 'category and search'}. Try a different category or search or
+			<a href="/blog" on:click={() => (searchTerm = '')}> View all blog posts </a>
 		</p>
+		<img class="w-full max-w-sm mx-auto" src="/img/pages/blank_canvas.svg" alt="" />
 	</article>
 {/if}

src/routes/(rgb)/blog/page/[page]/+page.js

@@ -0,0 +1,30 @@
+import { error } from '@sveltejs/kit';
+
+const postsPerPage = 12;
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ fetch, params }) {
+	// If non-numeric values, 404
+	if (!new RegExp(/^[0-9]+$/).test(params.page)) {
+		throw error(404, 'Not found');
+	}
+	// If page number is 0 or contains a leading 0, 404
+	if (params.page[0] === '0') {
+		throw error(404, 'Not found');
+	}
+
+	const pageNum = parseInt(params.page);
+
+	const res = await fetch('/blog/posts.json');
+	const posts = await res.json();
+
+	const totalPosts = posts.length;
+	const pagePosts = posts.splice(postsPerPage * (pageNum - 1), postsPerPage);
+
+	// Invalid page number, 404
+	if (pagePosts.length === 0) {
+		throw error(404, 'Not found');
+	}
+
+	return { posts: pagePosts, pageNum, totalPosts };
+}