Layouts

Svelte

All the templating is done in the "disappearing" JS component framework called Svelte. Svelte offers a simplified syntax and creates a welcoming developer experience for folks coming directly from an HTML/CSS background. It also offers some performance benefits over similar frameworks since it doesn't require a virtual DOM and its runtime is rather small. 

layouts/global/html.svelte

The layouts/global/html.svelte file is important and changing its name will break your app. You could also potentially break your routing if you're not careful with <svelte:component this={layout} {...content.fields} {allContent} />. Once you're aware of those two things, this file shouldn't be too scary and is meant for you to customize. 

layouts/content/

Files that live in this folder correspond directly to the types defined in your content source. For example if you have blog type (content/blog/post-whatever.json) you would create a corresponding template at layouts/content/blog.svelte. One template should be used per type and it will feed many content files to create individual nodes (endpoints). 

The rest of the structure is really up to you. We try to create logical default folders, such as layouts/components/ for reusable widgets and layouts/scripts/ for helper functions, but feel free to completely change these and make the structure your own.