# pagery
[![JSR badge]][JSR link]
*Opinionated static site generator*
[JSR badge]: https://jsr.io/badges/@tycrek/pagery
[JSR link]: https://jsr.io/@tycrek/pagery
## What is pagery?
pagery is my personal static site generator, primarily to be used with [Cloudflare Pages](https://pages.cloudflare.com/). Be aware: it is an extremely opinionated tool, using my really niche stack. I wrote this for myself but maybe someone else can see the benefits in the simplicity of my stack. Plus it's got some cool features.
**v8.0.0 now uses Deno 2.0!**
### The stack
| Tool | Use |
| :--: | :-: |
| [Pug](https://pugjs.org/) | HTML templating |
| [Tailwind CSS](https://tailwindcss.com/) | Page styling |
| [PostCSS](https://postcss.org/) | CSS processing |
| JSON | Structured data |
### Features
- Super-simple templating
- Compatible with Cloudflare Pages (or any other [JAMstack](https://www.cloudflare.com/en-ca/learning/performance/what-is-jamstack/) host)
- Iteratively generate pages from JSON
- Includes these PostCSS plugins:
- [autoprefixer](https://github.com/postcss/autoprefixer#readme)
- [cssnano](https://cssnano.github.io/cssnano/)
- [postcss-font-magician](https://github.com/csstools/postcss-font-magician#readme)
- [postcss-reporter](https://github.com/postcss/postcss-reporter#readme)
## Installation
Since version 8.0.0, pagery runs on [Deno 2.0](https://deno.com/blog/v2.0) rather than Node.js. Make sure you have Deno [installed](https://docs.deno.com/runtime/getting_started/installation/) before using pagery.
You can run pagery in your current directory without explicitly installing it:
```bash
deno run -A jsr:@tycrek/pagery
```
Or, you can install globally:
```bash
deno install -gAf jsr:@tycrek/pagery
```
## Usage
### Step 1: Setup Tailwind
Create two new files, `tailwind.config.ts` and `tailwind.css` in the root of your project. See [Tailwind CSS docs: Configuration](https://tailwindcss.com/docs/configuration#using-esm-or-type-script) for `tailwind.config.ts`.
Add the following to `tailwind.css`:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
It is highly recommended to use [Tailwind `@layer`](https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer) directives to organize your CSS and avoid [specificity issues](https://www.w3schools.com/css/css_specificity.asp).
#### Multiple Tailwind configurations
As of Tailwind v3.2, you are able to use [multiple config files in one project](https://tailwindcss.com/blog/tailwindcss-v3-2#multiple-config-files-in-one-project-using-config). Reference Tailwinds documentation for more information.
### Step 2: Setup Pug
Create a `views` directory in the root of your project. This is where all of your Pug files will go. At least one `.pug` file is required for compilation to work.
#### Loading the CSS
You can use CSS by either referencing the static CSS files generated by Pagery, or if you opt to disable that, the inline `css` variable as follows within a Pug file:
```pug
style
!= css
```
This will include the compiled CSS in the `