LogBook

I took a break from my main projects — GADM-api and book reviews — and spent a day improving this blog.

The number of posts has been growing quickly with daily updates. I used to query all posts at once on my landing page. However, now that the number of posts exceeds 100, it’s time to introduce pagination.

I implemented infinite scroll on the “threads” page and for post and logbook lists on the main page. The implementation leverages IntersectionObserver, which makes it straightforward.

// VisibilityLoader.svelte
<script lang="ts">
	import { onMount } from 'svelte';

	export let hasLoadedAll: boolean;
	export let onLoadMore: () => void;

	let node: HTMLDivElement;
	let observer: IntersectionObserver | undefined;

	onMount(() => {
		observer = new IntersectionObserver((entries) => {
			entries.forEach((entry) => {
				if (entry.isIntersecting && !hasLoadedAll) {
					onLoadMore();
				}
			});
		});
	});

	$: node && observer?.observe(node);
</script>

<div bind:this={node} />

Now I can place this component as the last item in any list and easily fetch more items when needed.

Additionally, I added a few style improvements, including a cool “highlight” effect that I’ll use to emphasize important parts of the text.