Blank is a simple, open-source, easily-branded blog application, built with the SvelteKit framework.
Aside from deployment configuration, the application is
customized via static configuration, locale, and theming files. These files
are expected to be served from the root of the internal BASE_URL path.
To customize application settings, add a config.json file to the /static
folder. The default configuration defines the
expected configuration object structure and default values. Values not defined
in the config.json file will fall back to the default configuration values.
A "personal favourites" list can be added to the home page by defining a list
of items in the config.likes array, specifying a theme graphic and a text
label for each item. A similar config.dislikes array can also be defined.
A locale can be set in locale.json, located in the /static folder. Values
found in the locale.json file will be used to populate application text. The
default locale defines all expected values.
Adding a custom theme.json file to the /static folder will populate the
application with the provided theme settings. The theme shown in the client is
determined by the theme local storage key. If no theme is set, the default
theme will be used.
{
"themes": {
"default": {},
"custom": {}
}
}The theme definitions can define colour palettes, scale values, backgrounds, typography, and other graphics. Fonts are defined per theme; palettes, scales, backgrounds, typography, and graphics are defined per section. Colour values, size values, and typography fonts are expected to be keys associated with the theme applicable palette, scale, or fonts, respectively. If SVG images are sourced in backgrounds or graphics, SVG element colour can be defined by mapping element class names to colour palette keys. An example theme definition can be found in the theme utility file, along with expected type definitions.
The built SvelteKit server-side application is configured to be deployed to a Node.js environment. Before building and running the application, all necessary development dependencies must be installed.
npm installOptional environment variables can be defined in a .env file at the root of
the project. A sample .env file is provided as .env.example.
By default, the application will not set a head favicon link. To add a
favicon, set the PUBLIC_FAVICON environment variable to the desired favicon
href link.
By default, all local resources are served from the root path (/). The base
path used by the client can be set using the PUBLIC_BASE_URL environment
variable. To provide a base path for the server data loading, set the private
BASE_URL environment variable. This can be useful for including static
resources or customization files after building the application which bundles
the /static folder.
Server side events are automatically logged and formatted using
Pino. Events are sent to the application's standard
output to capture logs in the console or environment log files. In development,
pino-pretty is used to format the log
output.
To enable Sentry error tracking and performance monitoring, add the necessary environment variables:
PUBLIC_SENTRY_DSN: The public DSN for your Sentry project,SENTRY_ORG: Your Sentry organization slug,SENTRY_PROJECT: Your Sentry project slug,SENTRY_AUTH_TOKEN: Your Sentry authentication token.
The application can be started locally using Vite's development server.
npm run devRun the build command to create an optimized production build, which can also be served locally using Vite.
npm run build
npm run previewUnit tests and end-to-end integration test are included. Application and configuration unit tests can be run using Vitest; Integration tests are ran via Playwright. Both are included in the package test script:
npm run testBefore running end-to-end tests, Playwright browser dependencies must be installed:
npx playwright install