README.md:

Some Components for Tempest

Using its Views and PicoCss (+ UnoCss)

!!! WIP 🚧

NEW: Html View Tree Builder

All Components are based on my Html View Tree Builder. It allows me to build HTML programmatically (without template engines) and full IDE support.

<?php

use function Tempest\Support\Arr\map_iterable;

$ordert = true;
$items = [1 => 'Foo', 4 => 'Bar', 9 => 'Baz'];

$list = Html(
    element: $ordert ? 'ol' : 'ul',
    content: map_iterable(
		$items,
        static fn($item, $id) => Html('li', ["Item #{$id} {$item}"]),
    ),
	attributes: ['class' => 'list'],
);

echo $list->toHtml(); // in the *.view.php: only `{!! $this()->toHtml() !!}` is needed
?>
// formatted output:
<ol class="list">
    <li>Item #1 Foo</li>
    <li>Item #4 Bar</li>
    <li>Item #9 Baz</li>
</ol>

See GitHub Page

FAQ

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!

Tempest scaffold

composer create-project tempest/app