This is a simple demo of the small tools that are included in this template. As well as some reminders for problems I've already solved.

Components

Create a new line only on small screens with the MobileNewline component.

Try resizing your browser window
| or switching to mobile in devtools.

Preload assets with the Preload component in the page's svelte file. Use it like this:

<script>
import Preload from "$util/Preload.svelte";
import downloadIcon from "$img/download.svg";
const assetsToPreload = {
	image: [
		downloadIcon
	]
};
</script>
<svelte:head>
	<Preload {assetsToPreload}></Preload>
</svelte:head>

The component generates preload link elements. The value is the src (which is found by importing the file), and the key is the as attribute.

Versioned Worker Plugin

This template is configured to use my own plugin: Versioned Worker, to make it easy to add offline support. If you want to use it, you'll need to tell it where your builds will go, so it can work out what's changed.

Defaults

Defined in routes/+layout.svelte

This button has a pointer cursor

All text also uses Sans-Serif

Misc

The build process is configured to minify the HTML
You can change the base URL by setting URL_PREFIX in svelte.config.js. It'll only be active in the build (not in the dev server) and it requires a rebuild to change. You can also do a build without it using the npm script "testBuild" or by using the VS Code task.

Look, this works! :0
Images can be included by importing their href like a JavaScript file. This is just a Vite thing.
Tools.js currently only has 2 functions, but I'll include new ones in the future as I need them:
- linkPage, which is explained here.
- formatTime takes a number of seconds and converts it into a HH:MM:SS format. The second argument lets you limit the number of digit pairs (e.g exclude hours by setting it to 2).
- I removed format.shorten since it's better to do it with the CSS properties overflow: hidden, text-overflow: ellipsis and white-space: nowrap. It looks like this:
  
  This is a bit long, and since I've limited the size of the element, some of this will get cut off.