This project follows the basic SvelteKit structure, with some added conventions to make customization a post-management easier.
The components are organized following the Atomic Design principles, albeit somewhat simplified. Components are in the
src/lib/components folder, and are organized in the following way:
Atoms are the most basic components, which can be seen as building blocks for other components. They’re small and self-contained, and do only one thing. Examples of atoms are buttons, inputs, and tags.
Molecules are groups of atoms that work together to form a more complex component. Examples of molecules are cards, groups of links, or an alert callout.
Organisms, in this project, are code blocks that represent a section of a page, such as the header, footer and hero section. They can be used directly in a page as a sort of building block, so the page’s code can be as simple as this:
<Header /> <Hero /> <About /> <Footer />
This project uses Histoire to be able to see and develop components in isolation. To open it, run
npm run story:dev. This way you can customize and build new components with placeholder content and without worrying about where to put them in a page.
Pages obey the default SvelteKit structure, but can be summarized as follows:
- There are two different file types: the pages (
+page.svelte) and the layouts (
+layout.svelte). Layouts are a way to reuse the same structure between different pages without having to duplicate code;
- There are two different page layouts in this site: the “Waves” layout, which all pages inside the
(waves)folder use, and the “Blog Article” layout, which all pages inside the
To know how blog posts work and how to create new ones, check out How Blog Posts Work.