Example Page

Markdown Example

I still miss XHP! Every time I try a “modern” PHP template engine, I feel like I’m back in the Stone Age.

Features

• Full Markdown (Tempests x-markdown only use core Markdown)

• CSS: Pico + UnoCSS

• Front Matter support

• Makes use of Front Matter

• HTML like <a /> is displayed

• Pico as base CSS for semantic HTML without scores and scores of classes.

• ACSS UnoCSS for additional CSS

Tailwind-like class names

You can add CSS inside Markdown, just run pnpm unocss --watch and add {class="…"} to your MD (or Component).

The Headline above is styled with { class="bg-pico-primary-background text-pico-primary-inverse text-center" }, wich make use of the Pico custom properties.

This paragraf is styled using the class text-pico-primary

I like the short class names of the good old ACSS. May I go back to it.

.striped is a Pico class for striped Tables btw. The shortcut {.class} only works for known classes or static Pages. UnoCSS (and other utilities) don’t detect classes without class=. For static Pages I simply run UnoCSS over the generated HTML.

TODO:

1. Make more Components
2. Upgrade to Tempest v3
3. Improve Doc/example
4. see in-source TODO:s
5. much more…

The Readme

Some Components for Tempest using its Views and PicoCss + UnoCss

Example as GitHub Page

Why not tailwind?

I prefer semantic CSS (and HTML) + utility CSS for Modifiers (like the M in BEM). (+ Components with scoped CSS, if necessary).

My code is below /src, /app is the default Tempest (v2) example, just as static page + Header.

Take a look at my Example as GitHub Page and compare the sources.

Why don’t you make more use of the View features?

I like to have my IDE and static code analysis tools understand my code as much as possible. I don’t want to have to guess what variables are available in the template, or what methods I can call on $this.

Why you don’t use Slots and Dynamic components?

Dynamic components only take a string as attribute, so you can’t pass anything else.

Tempest v3 is out, but i can’t use it.

composer create-project tempest/app=2 <= note the =2 for PHP 8.4

Until the basic work is done, I have to stay on 8.4. The unmaintained code i want to replace is not PHP 8.5 compatible.

Update the CSS while developing

$ pnpm unocss --watch

deploy

composer gen deletes all public/*.html files, generates the static sites again and then the css.

If you generate the Pages on the same Environment you develop: Use ./tempest static:clean after deploying to remove the generated static files, so you don’t use old files.

Deploy to GitHub Pages

You can use my .github/workflows/deploy.yml if you want Tempest for your Github Pages.

PRs and suggestions are welcome!