Writing an app with SvelteKit Part 2
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
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
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
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: