diff --git a/composer.json b/composer.json index fd82fba50..23c15cc66 100644 --- a/composer.json +++ b/composer.json @@ -31,6 +31,7 @@ "intervention/image": "^3.10", "laravel-zero/phar-updater": "^1.4", "matthiasmullie/minify": "^1.3", + "performing/twig-components": "^0.6", "psr/log": "^3.0", "psr/simple-cache": "^3.0", "scrivo/highlight.php": "^9.18", diff --git a/composer.lock b/composer.lock index fa41588e1..a5a22dd30 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "dec6695647664ec080701d636030038f", + "content-hash": "34abb90541747371d11936d88e678053", "packages": [ { "name": "amphp/amp", @@ -2282,6 +2282,61 @@ }, "time": "2024-05-08T12:18:48+00:00" }, + { + "name": "performing/twig-components", + "version": "0.6.1", + "source": { + "type": "git", + "url": "https://github.com/giorgiopogliani/twig-components.git", + "reference": "66d0409032b354b37dbcca66f83bc30c16a9433a" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/giorgiopogliani/twig-components/zipball/66d0409032b354b37dbcca66f83bc30c16a9433a", + "reference": "66d0409032b354b37dbcca66f83bc30c16a9433a", + "shasum": "" + }, + "require": { + "php": "^7.4|^8.0", + "twig/twig": "^3.0" + }, + "require-dev": { + "friendsofphp/php-cs-fixer": "^3.0", + "pestphp/pest": "^1.0", + "phpunit/phpunit": "^9.3", + "symfony/var-dumper": "^5.2", + "vimeo/psalm": "^3.11" + }, + "type": "library", + "autoload": { + "psr-4": { + "Performing\\TwigComponents\\": "src" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Giorgio Pogliani", + "email": "giorgiopogliani94@gmail.com", + "homepage": "https://performingdigital.com", + "role": "Developer" + } + ], + "description": "Twig components extension", + "homepage": "https://github.com/giorgiopogliani/twig-components", + "keywords": [ + "digital", + "twig-components" + ], + "support": { + "issues": "https://github.com/giorgiopogliani/twig-components/issues", + "source": "https://github.com/giorgiopogliani/twig-components/tree/0.6.1" + }, + "time": "2024-10-01T12:57:59+00:00" + }, { "name": "phpdocumentor/reflection-common", "version": "2.2.0", @@ -9446,7 +9501,7 @@ ], "aliases": [], "minimum-stability": "dev", - "stability-flags": [], + "stability-flags": {}, "prefer-stable": true, "prefer-lowest": false, "platform": { @@ -9455,9 +9510,9 @@ "ext-gd": "*", "ext-mbstring": "*" }, - "platform-dev": [], + "platform-dev": {}, "platform-overrides": { "php": "8.1.27" }, - "plugin-api-version": "2.3.0" + "plugin-api-version": "2.6.0" } diff --git a/config/default.php b/config/default.php index a3584ebad..aa39f1527 100644 --- a/config/default.php +++ b/config/default.php @@ -198,6 +198,9 @@ 'extensions' => [ // list of Twig extensions class //'' => 'Cecil\Renderer\Extension\', ], + 'components' => [ // components + 'dir' => 'components', // components directory + ], ], 'themes' => [ 'dir' => 'themes', // where themes are stored diff --git a/docs/3-Templates.md b/docs/3-Templates.md index 6d9e772af..fbbd9a491 100644 --- a/docs/3-Templates.md +++ b/docs/3-Templates.md @@ -1,7 +1,7 @@ # Templates @@ -1226,6 +1226,29 @@ Supported values are: `short`, `medium`, `long`, and `full`. If you want to use the `format_date` filter **with other locales than "en"**, you should [install the intl PHP extension](https://php.net/intl.setup). ::: +## Components + +Cecil provides a components logic to help you build your templates. + +```twig +{# /components/button.twig #} + + +{# /index.twig #} +{% x:button with {class: 'text-white'} %} + Click me +{% endx %} + +{# Rendered #} + +``` + +See official _Twig components extension_ documentation: . + ## Built-in templates Cecil comes with a set of [built-in templates](https://github.com/Cecilapp/Cecil/tree/master/resources/layouts). diff --git a/src/Renderer/Twig.php b/src/Renderer/Twig.php index d06b28ae4..255a726d1 100644 --- a/src/Renderer/Twig.php +++ b/src/Renderer/Twig.php @@ -17,6 +17,7 @@ use Cecil\Exception\RuntimeException; use Cecil\Renderer\Extension\Core as CoreExtension; use Cecil\Util; +use Performing\TwigComponents\Configuration; use Symfony\Bridge\Twig\Extension\TranslationExtension; use Symfony\Component\Translation\Formatter\MessageFormatter; use Symfony\Component\Translation\IdentityTranslator; @@ -122,6 +123,11 @@ public function __construct(Builder $builder, $templatesPath) return false; }); + // components + Configuration::make($this->twig) + ->setTemplatesPath($this->builder->getConfig()->get('layouts.components.dir') ?? 'components') + ->useCustomTags() + ->setup(); // debug if ($this->builder->isDebug()) { // dump() @@ -136,7 +142,7 @@ public function __construct(Builder $builder, $templatesPath) try { $this->twig->addExtension(new $class($this->builder)); $this->builder->getLogger()->debug(\sprintf('Twig extension "%s" added', $name)); - } catch (\Exception | \Error $e) { + } catch (RuntimeException | \Error $e) { $this->builder->getLogger()->error(\sprintf('Unable to add Twig extension "%s": %s', $name, $e->getMessage())); } } diff --git a/tests/fixtures/website/layouts/components.html.twig b/tests/fixtures/website/layouts/components.html.twig new file mode 100644 index 000000000..f41e05624 --- /dev/null +++ b/tests/fixtures/website/layouts/components.html.twig @@ -0,0 +1,15 @@ +{% extends 'page.html.twig' %} + +{% block content %} +
+ {{ page.content}} + + {% x:button with {'class': 'example-1'} %} + Click me 1 + {% endx %} + + + Click me 2 + +
+{% endblock %} \ No newline at end of file diff --git a/tests/fixtures/website/layouts/components/button.twig b/tests/fixtures/website/layouts/components/button.twig new file mode 100644 index 000000000..bd56c47ee --- /dev/null +++ b/tests/fixtures/website/layouts/components/button.twig @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/tests/fixtures/website/pages/Others/Components.md b/tests/fixtures/website/pages/Others/Components.md new file mode 100644 index 000000000..3073a804b --- /dev/null +++ b/tests/fixtures/website/pages/Others/Components.md @@ -0,0 +1,4 @@ +--- +layout: components +--- +Components examples: