Directory structure

All Paperstack projects have the same structure.

The pages directory

The pages directory is the source directory for all pages. It contains .stencil and .mds files that each represent a single page. These files are compiled into .html files.

You can nest pages inside subdirectories. The name of each subdirectory is added to the URL of the page.

The output directory

The output directory contains your generated website. It contains all .html files generated from pages and is used when deploying your website.

It’s automatically generated by running the dev server or by building your website.

All files in output are deleted if you change a file when you have npm run dev running or when you run npm run build . 

You can edit the files when debugging, but permanent changes should be made to the source file.

The components directory

The components directory contains all your re-usable HTML elements.

Each component is a .stencil file and the file name determines the name of the component when using it.

components/Button.stencil is available as Button:

<Button>
	Click me
</Button>

All components are available everywhere without needing to be imported.

You can move components into subdirectories, but this won’t have any effect on how the component is used. The purpose of nesting components in subdirectories is solely for organisation.

All component names must be unique across your project, since components are automatically imported. You can’t have a components/dark/Button.stencil component and a components/light/Button.stencil component in the same project.

The assets directory

The assets directory contains static resources like fonts, icons, images and other files like a sitemap.

All files are copied into output when building the site.

assets can contain subdirectories. All subdirectories will be preserved when building the site.