Project Structure

This project follows the basic SvelteKit structure, with some added conventions to make customization a post-management easier.

#Components

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

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

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

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 />

#Component Gallery

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

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 (blog-article) folder use;

#Blog Posts

To know how blog posts work and how to create new ones, check out How Blog Posts Work.