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.
Source file | Path |
---|---|
Pages/index.stencil |
/ |
Pages/about.stencil |
/about |
Pages/articles/index.stencil |
/articles |
Pages/articles/planning.stencil |
/articles/planning |
Pages/articles/january/resolutions.stencil |
/articles/january/resolutions |
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 havenpm run dev
running or when you runnpm 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 acomponents/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.
Source file | Path |
---|---|
assets/sitemap.txt |
/sitemap.txt |
assets/images/hero.png |
/images/hero.png |