xcc.es
Built with Svelte + Sapper + MDSvex + svelte-mui#
Githubs: Sapper template • mdsvex • svelte-mui
Install#
npx degit "sveltejs/sapper-template#rollup" svexiest
cd svexiest
npm i -D mdsvex svelte-mui
npm install
npm run dev
update these package.json scripts
"dev": "sapper dev --ext '.svx .svexy .svelte'",
"export": "sapper export --ext '.svx .svexy .svelte'",
"start": "sapper dev --ext '.svx .svexy .svelte'",
+ import { mdsvex } from 'mdsvex';
// add these anywhere you see svelte({ … })
svelte({
+ extensions: ['.svelte', '.svexy', '.svx'],
+ preprocess: mdsvex({ }),
})
Customize#
Customize mdsvex({ ... })as needed (mdsvex readme)
You can do preprocess: mdsvex({ ... }) separately inside each client & server or definea preprocess once up-front that you can re-use.
const preprocess = [
// you can use multiple preprocessors
mdsvex({
extension: '.svx',
}),
]
export default {
client: { //...
plugins: [ //...
svelte({ //...
preprocess,
}),
]
},
server: { //...
plugins: [ //...
svelte({ //...
preprocess,
}),
]
},
Deploy#
Netlify#
netlify.toml uses npm run export to export a static Sapper site.
My project on Netlify automatically deploys from the github master branch when it changes.
Vscode customizations#
(Or vscodium)
Svelte for VS Code • Svelte 3 Snippets
Settings
"files.associations": {"*.svx": "markdown",},
"emmet.excludeLanguages": [],
"emmet.includeLanguages": {"markdown": "html"},