Writing an app with SvelteKit Part 2

Autor:

Dominik Röschke

In the last blog post we set up a web application using SvelteKit and fetched some data as a zipball from the Github repository content API.

Now the data should be displayed to the user in an easy to understand and navigate way. It’s currently stored in 6 stores:

  • Textures (for base64 encoded image data)
  • Patchouli (containing all categories and their corresponding entries)
  • Recipes (containing all crafting recipes added by the mod)
  • CurrentLanguage (the language being displayed to the user, defaults to english)
  • Languages (containing all Ars Nouveau language files)
  • MinecraftLanguage (containing the minecraft language file for the currently selected language)

A navigation to display all possible entries is the first thing we’re going to implement and since we don’t want to handle styling and responsive design ourselves we’ll use Skeleton, a UI-framework for Svelte, by following the installation instructions on the Skeleton page.

After that’s done, we can implement our navigation by creating the Navigation.svelte component in src/lib/components/navigation.

The finished navigation

Screenshot of the finished app navigation menu

Handling internationalization

Usually internationalization (i18n) should be handled by a well tested library like svelte-i18n, svelte-intl-precompile or react-intl for react apps. Since our usecase of multiple dynamic language files is difficult to handle with them, especially with a precompiled solution like svelte-intl-precompile, we’re going to do it by hand with the Label.svelte component, located in src/lib/components.

This also highlights the power of Sveltes Store API!

Displaying the Navigation

Skeleton doesn’t just provide helpful css class components like the list-nav class we’ve used in the Navigation.svelte component, it also provides an AppShell that gives an application a basic layout. To use it, the div containing your %sveltekit.body% needs to be removed from src/app.html

Since the AppShell provides it’s own scroll handling with beautiful scrollbars, body overflow needs to be disabled on html and body by adding the following in src/app.postcss
That done, a +layout.svelte can be created at the root of your routes directory src/routes:

Displaying the content

Now that navigation and the overall App layout are handled, the actual content still needs to be displayed! Since the pages for a category and an entry are pretty similar, this is only going to focus on the category page since they are a bit simpler.

First, the directory structure for the path needs to be created: src/routes/category/[category]. A small reminder from the blog post overview of SvelteKit, a folder name in [] brackets is a path parameter. That means that an actual call to this page would look like this /category/getting_started.

To make the category name available to the page component, a +page.ts file needs to be created in the [category] folder:

This should make the category available in the page data and allows the creation of this +page.svelte component:

Adding a search function

Since there are a lot of entries in the documentation and the Navigation gets pretty long, it would be great to offer a search functionality. To implement this, fast-fuzzy is used. Fast-fuzzy is an amazing piece of engineering using a modification of the levenshtein distance to implement lightning quick javascript searches.

It’s perfect for this usecase since it can be initialized on the client side once the documentation stores are loaded and the Searcher it exports for searching the same candidates multiple times can just be wrapped in a Svelte Store to be available everywhere.

Now that the Searcher is set up, it needs to be displayed in a Search Component:

Take a look at the final result on https://arsnouveau.wiki or view the sourcecode on github, or continue reading in part 3 to learn how to deploy the app.