About

Melan is a reusable Svelte blog template with syntax highlighting and shadcn-svelte components.

What's inside

Posts in Markdown

Drop a +page.md into the blog folder and it shows up on the index, with a table of contents, shareable heading links and links to the posts either side.
Built on shadcn-svelte

Accessible components, Tailwind CSS and light and dark mode, with Playfair Display headings and Source Serif 4 text.
Config, not code

The title, pages, navbar icon, accent colour, footer, blog folder, image folders and code highlighting all live in melan.config.ts.

Making it yours

Most of the site is set from one config file, so you can make it your own without touching any components. Open it, change a value and save: the page updates straight away. The file is TypeScript, so your editor lists the options as you type and explains each one on hover. Optional parts can be deleted to switch them off, and pnpm check catches typos and links to pages that don't exist.

Name and description

The site name is used in browser tabs and share cards. The description is the homepage’s search and share summary. site.title, site.description in melan.config.ts

title: 'My Blog',
description: 'Notes on things I build.',

Pages and the navbar

The order of the list is the navbar order. Set nav: false to keep a page but leave it out of the navbar, or enabled: false to switch it off entirely. site.routes in melan.config.ts

routes: [
	{ href: '/', label: 'Home', nav: false },
	{ href: '/about', label: 'About' },
	{ href: '/blog', label: 'Blog' }
],

Navbar icon

Show the icon, the icon and title, or just the title, with an optional override for the homepage. Single-colour icons follow light and dark mode. site.brand in melan.config.ts

brand: {
	display: 'icon', // or 'icon-title', 'title'
	icon: 'icon.svg', // a file in static/
	home: { display: 'icon-title' }
},

Accent colour

One colour for post titles, link underlines, quote borders and the contents bar. Any CSS colour works; leave out dark to use the same colour in both modes. site.accent in melan.config.ts

accent: {
	light: '#2563eb',
	dark: '#60a5fa'
},

Footer

A line of text, links and the “Powered by Melan” credit. {year} and {title} are filled in for you. site.footer in melan.config.ts

footer: {
	text: '© {year} {title}',
	links: [{ label: 'GitHub', href: 'https://github.com/you' }],
	poweredBy: true
},

The blog

Date format, the blog’s URL, where images are looked up, and which languages code is highlighted in. blog in melan.config.ts

locale: 'en-AU',
path: '/blog',
assets: { covers: '/img/covers', images: '/img' },

Fonts and theme colours

Not part of the config: fonts, colours and the corner radius are CSS variables. To restyle the site, uncomment the custom theme block and set your own light and dark colours. CSS variables in src/routes/layout.css

:root {
	--background: oklch(0.98 0.01 85);
	--foreground: oklch(0.22 0.02 260);
}

.dark {
	--background: oklch(0.18 0.02 260);
	--foreground: oklch(0.94 0.01 85);
}

Every option is explained in the configuration guide, and fonts, colours and components in customising the look. This page itself is an ordinary Svelte component at src/routes/about/+page.svelte: replace it with your own text, or copy the folder to start another page.

Read the blog

What's inside

Posts in Markdown

Built on shadcn-svelte

Config, not code