Koenraijer.io

Features

• Search through content easily:
  • A search bar searches through title, subtitle and tags.
  • Further narrow your search by filtering per category.
• A "load more" button prevents loading everything at once.
• Post headings have links (uses Rehype Slug / Rehype Autolinkheadings)
• Autogenerated table of contents (inspired by https://github.com/mattjennings/sveltekit-blog-template/blob/main/src/lib/components/ToC.svelte)
• Footnotes using Remark Footnotes 2.0 (as suggested here: https://github.com/pngwn/MDsveX/discussions/223)
• Selection color changes with theme.
• Custom fonts are served locally using font-display: swap for faster first contentful paint.
• Custom MDSvex components make your posts pretty and easy to write.
  • Paragraph component that adds a "drop cap".
  • Link component
  • Image component
    • Full-bleed images by passing "fullbleed" with Image component
    • Lazy loading using an Intersection Observer, inspired by (https://github.com/alexstaroselsky/svelte-lazy-image)
• SEO has been dealt with using a Svelte store and the svelte:head component.
• Images have been optimized using Svelte Image (https://github.com/matyunya/svelte-image).
• Lighthouse all 100!
• Uses Giscus/Github Discussions as comments.
• Privacy-proof, free analytics using GoatCounter.
• Spotify API integration to show realtime Now Playing and top 20 tracks.

To do list:

• Use vite for image optimization (see https://github.com/matyunya/svelte-image)
• Properly add placeholders for lazy loaded images.
• Make link in endpoint post not external.
• Fix ToC not closing on mobile.