Embracing Svelte for SoaPatrick

There's so much I've caught up on and built that I'm eager to share. Over the past year, I've delved deep into JavaScript, particularly the fantastic framework Svelte. I wanted to experiment with integrating a Svelte component into my build process. Since I've already been using Vite.js for my local development, it was straightforward to include a Svelte component, thanks to the official Svelte Plugin for Vite. The real challenge was deciding what the Svelte component should do.

I've also spent a considerable amount of time exploring API development. Therefore, I decided to create an API for my factory items within Kirby. This API would then be used by the Svelte component to fetch these items (and tags) and implement a filter and load more functions with some engaging animations.

And that's exactly what I accomplished. Go check it out here

Crafting the API

Building the API was straightforward with Kirby. A bit of PHP magic to extract and serve the required data as JSON, and voila, factory.json.php was born. This groundwork facilitated the dynamic aspects of the project, such as tagging and pagination.

<?php

$data = $pages->find('factory')->children()->listed()->flip();


$json = [];
$FactoryItemArray = [];

foreach($data as $factoryItem) {
  $tags = [];
  foreach ($factoryItem->tags()->split() as $tag) {
    $tags[] = $tag;
  }

  $FactoryItemArray[] = [
    'uuid'  => (string)$factoryItem->uuid(),
    'url'   => (string)$factoryItem->url(),
    'title' => (string)$factoryItem->title(),
    'cover'  => [
      'width' => $factoryItem->cover()->toFile()->width(),
      'height' => $factoryItem->cover()->toFile()->height(),
      'srcset' => $factoryItem->cover()->toFile()->srcset('cover-default-' .$factoryItem->cover()->toFile()->extension()),
    ],
    'tags' => $tags,
  ];
}

$json['data'] = $FactoryItemArray;

echo json_encode($json);

The Svelte Journey

Following this, I developed a Svelte component that fetches the data from factory.json and displays the items by looping over the factoryItems. It's a straightforward yet powerful implementation.

// Fetch factory items
async function fetchFactoryItems() {
  let apiUrl = "/factory.json";
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error("Error loading filtered factoryItems data");
    }
    const data = await response.json();
    factoryItems = data.data;

  } catch (error) {
    console.error("Error:", error);
    errorMessage =
      "An error occurred while loading factory items. Please try again later.";
  }
}

<div class="grid-factory">
  {#each factoryItems as item (item.uuid)}
    <article class="block">
      <a href={item.url} aria-label={item.title} class="img-link">
        <img
          srcset={item.cover.srcset}
          alt={item.title}
          width={item.cover.width}
          height={item.cover.height}
          class="rounded-md block aspect-square bg-blue-100"
          loading="lazy"
        />
      </a>
    </article>
  {/each}
</div>

This might just be the beginning. Who knows? Maybe I'll dive deeper into JavaScript and Svelte, or perhaps I'll even pivot the entire website to a SvelteKit setup, relying purely on Kirby's API for data fetching. Or maybe this is where the journey stops. Despite its seemingly straightforward nature, it was quite the undertaking. There's a lot more I'm juggling at the moment, but I'm keen to share more about some of them in another blog post, hopefully soon.