Skip to content

Latest commit

 

History

History
47 lines (41 loc) · 2.81 KB

README.md

File metadata and controls

47 lines (41 loc) · 2.81 KB
Raw

Jankboard 2 Splash Screen

This directory contains the source code for the splash screen used by the Tauri app. It's a standalone Svelte + Vite project, with its own separate dependencies. In most cases, you won't ever have to touch the code in this directory unless you want to modify the loading screen. However, if you do decide to modify the files in this directory, keep in mind that they will not be reflected in the app until you compile and replace the splashscreen.html file in /client/public. Read more below to figure out how to do that.

How it works

Tauri allows you to add a splash screen to display before your app loads by adding a file to the output directory called splashscreen.html. This is done in Jankboard 2 by adding the splashscreen.html file to the public directory, as recommended by Tauri's docs. However, since it's just one HTML file, we can't typically use a framework like Svelte, which outputs a CSS and JS bundle. While we can definitely write a simple splash screen in a raw HTML file, we miss out on nice Svelte features like easy to write animations. The Vite project in this directory solves that by using vite-plugin-singlefile to inline all CSS and JS outputted by Svelte's compiler into the HTML, resulting in a nice single index.html output in ./dist, which can then be renamed as splashscreen.html and moved into the main Jankboard 2 project to be used as the loading splash screen. The best part about this is that since Svelte is meant to be compiled into such a small bundle size, there are virtually zero downsides to doing this versus writing the splash screen in raw HTML. We can easily write a nice looking splash screen using the same techniques as our existing codebase without having to deal with raw HTML and CSS. If you don't need to modify the splash screen, you don't need to touch this project! splashscreen.html is already included in the main project and you don't have to build it yourself here. If you do want to modify this splash screen, continue to the instructions below.

Installation and development instructions

Again, you don't need to do this if you don't want to modify the splash screen!

  1. Install dependencies via pnpm install.
  2. Run pnpm dev to start the development server.
  3. After you're done making your changes, run pnpm build. This will output a single index.html file to ./dist, which contains all of the JS and CSS inlined.
  4. Rename this outputted index.html to splashscreen.html, and then move it into /client/public, replacing the existing splashscreen.html. Note: the background image will not load in development since it's designed to load /splash-screen.jpg from the main app. Update the splash-screen.jpg image in client/public to change it.