DOCSEARCHbyAlgolia
Submit Docs

Paperstack Documentation

website·Indexed 31 days ago

https://paperstack.ink/

Documentation for Paperstack, a static site generator used to build static HTML websites. It features Stencil pages, Markdown support, reusable components, and a built-in data type called Records for key/value storage. The docs cover installation (requiring Node 20.1 or higher), directory structure, layouts, expressions, and directives like @if and @each.

Tokens
6.6K
Snippets
49
Records
69
Agent score
61%

What's inside Paperstack

  1. Overview of Paperstack static site generator

    v0
    Paperstack is a static site generator used to build static HTML websites. It processes .stencil (templating) and .mds (markdown) files and compiles them into standard .html files.

  2. Understand Stencil Records data type

    v0
    Records are a built-in key/value store data type in Stencil. Keys are strings, and values can be any built-in data type, including other nested records. Records can be iterated over using the @each directive.

  3. Inspect global site and page records

    v0
    Every page in Paperstack has access to global records containing information about the site, the specific page, and the current scope. These records can be used to display information in templates or inspected using the dump method to determine available data.

  4. Create reusable HTML elements with Paperstack Static Components

    Paperstack allows the creation of reusable HTML components. These small components can be composed together to build larger elements, sections, and page layouts.

  5. Determine when to use Stencil pages

    v0
    Stencil pages should be used for pages that require a unique layout (such as a home page) or for collection pages. They are ideal when the content is not rigidly structured like a standard article page, even if they share a base layout with other pages.

  6. Configure Tailwind CSS locally with JIT engine

    v0

    To use the Tailwind CLI and JIT engine locally in Paperstack, follow these steps:

    1. Install the Tailwind CLI tool.
    2. Create a style.css file in the assets directory with the standard Tailwind directives.
    3. Configure tailwind.config.js to watch the output directory for HTML content.
    4. Add build and watch scripts to package.json to compile CSS from assets/style.css to output/style.css.
    5. Run npm run styles:watch alongside npm run dev during development, and npm run styles:build during the production build.
    // tailwind.config.js
module.exports = {
	content: [
		"./output/**/*.html",
	],
}
    /* assets/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
    {
	"scripts": {
		"build": "./node_modules/.bin/paper build",
		"dev": "./node_modules/.bin/paper dev",
		"styles:watch": "npx tailwindcss -i ./assets/style.css -o ./output/style.css --watch",
		"styles:build": "npx tailwindcss -i ./assets/style.css -o ./output/style.css"
	}
}

  7. Create and use reusable components

    v0

    The components directory stores reusable HTML elements as .stencil files. The filename of the component determines its tag name. Components are automatically imported and available globally throughout the project without explicit import statements.

    Constraints:

    • Component names must be unique across the entire project. For example, you cannot have both components/dark/Button.stencil and components/light/Button.stencil.
    • Subdirectories within components are for organization only and do not affect the component's name or usage.
    <!-- If components/Button.stencil exists, use it as: -->
<Button>
	Click me
</Button>

  8. Use Stencil components for reusable HTML elements

    v0
    Stencil is a templating language used by Paperstack that extends HTML capabilities. Its primary feature is the ability to define custom HTML components. This allows developers to extract frequently reused elements—such as menus, layouts, sections, forms, and meta tags—into single components that can be reused across multiple pages instead of duplicating markup.

  9. Use components within Stencil pages

    v0
    Stencil pages have access to all defined components. This allows for the use of common UI elements (e.g., <Headline1>, <Paragraph>, <List>) or complex reusable sections (e.g., <TextWithImage>) to maintain design consistency.
    <Base>
	<Headline1>Features</Headline1>

	<TextWithImage title="Rich data" image="/images/rich-data.png">
		<Paragraph>...</Paragraph>
	</TextWithImage>
</Base>

  10. Install Paperstack prerequisites

    v0
    Paperstack requires Node.js version 20.1 or higher. It is recommended to use NVM (Node Version Manager) to install or manage the required Node version.

  11. Build and deploy Paperstack as a static site

    v0
    Paperstack websites are generated as a collection of .html files and assets, meaning they can be hosted on any platform that supports static file hosting. To generate the production files, you must have Node.js version 20.1 installed. Running the build command generates an output directory containing all the necessary files for deployment.
    npm run build

  12. Use components and HTML in Markdown pages

    v0
    Markdown pages support the use of regular HTML elements and custom Stencil components. This allows you to embed complex reusable elements like forms, charts, or captioned images directly within the markdown content.
    ---
layout: Base
---

# The Civil War in France

This is a description of the conflict.

<ImageWithCaption 
	image="/images/the-civil-war-in-france.png" 
	caption="'The Civil War in France' was published in 1871."
/>