Configuration
Config Files
This project uses /src/lib/config/ as the config file directory, but most configurations do not need to be modified in general.
site.ts | Site Info
ts
export const site: SiteConfig = {
protocol: import.meta.env.URARA_SITE_PROTOCOL ?? import.meta.env.DEV ? 'http://' : 'https://', // site protocol (usually no change is required)
domain: import.meta.env.URARA_SITE_DOMAIN ?? 'urara-demo.netlify.app', // site domain
title: 'Urara', // title
subtitle: 'Sweet & Powerful SvelteKit Blog Template', // subtitle
lang: 'en', // language
descr: 'Powered by SvelteKit/Urara', // description
author: {
name: 'John Doe', // author name
avatar: '/assets/maskable@512.png', // author image
status: '🌸', // author status
bio: 'lorem ipsum dolor sit amet, consectetur adipiscing elit.' // author bio
},
themeColor: '#3D4451' // theme color (currently only used in Manifest)
}
icon.ts | Icons
Some icons are provided by default to be compatible with web app manifests and modern browsers, and can be replaced by yourself.
/urara/favicon.png - Website icon, 32x32
/urara/assets/any@180.png - Website icon, 180x180
/urara/assets/any@192.png - Website/Manifest icon, 192x192
/urara/assets/any@512.png - Manifest icon, 512x512
/urara/assets/manifest@192.png - Manifest mask icon, 192x192
/urara/assets/manifest@512.png - Manifest mask icon, 512x512
You can also replace the number of icons and their paths by modifying /src/lib/config/icon.ts.
general.ts | Theme
ts
export const theme: ThemeConfig = [
{
name: 'light', // Theme varable name
text: '🌕 Light' // Theme display name, can be modified
},
{
name: 'dark',
text: '🌑 Dark'
},
]
This project uses the daisyUI theme, see the availble daisyUI themes.
general.ts | Header
ts
export const header: HeaderConfig = {
nav: [
{
text: 'Get Started', // Button name
link: '/hello-world' // Link to page, or other sites
},
{
text: 'Elements',
link: '/hello-world/elements'
}
]
}
Dropdown menu can added to the header following the format below.
ts
{
text: 'Hello World',
children: [
{
text: 'Get Started',
link: '/hello-world'
},
{
text: 'Elements',
link: '/hello-world/elements'
},
{
text: 'ToC Disabled',
link: '/hello-world/toc-disabled'
}
]
}
general.ts | Footer
Same as the Header, except the dropdown menu.
ts
export const footer: FooterConfig = {
nav: [
{
text: 'Feed', // Hypelink name
link: '/atom.xml' // Link to page, or other sites
},
{
text: 'Sitemap',
link: '/sitemap.xml'
}
]
}
general.ts | Date Format
ts
export const date: DateConfig = {
locales: 'en', // Language, refer to IETF language tag
options: {
year: '2-digit', // Year: numeric / 2-digit
weekday: 'long', // Week: narrow / short / long
month: 'short', // Month: numeric / 2-digit / narrow / short / long
day: 'numeric' // day: numeric / 2-digit
}
}
For more additonal, see Intl.DateTimeFormat - JavaScript | MDN.