A-Proud/Twiew Bundle

Provide simple and powerfull templates based on twig. The AProud\TwiewBundle is designed to render an HTML page by settings, defined in a PHP array or YAML file. It allows you to configure your page with various settings, such as CSS, JavaScript, headers, main content, footers, and more. You can also add custom parameters and use them in your templates.

Installation

To install the twiew-bundle, add the following line to your composer.json file:

"a-proud/twiew-bundle": "dev-main"

Then, run the following command to install the bundle:

composer install

Configuration

First of all we have show to twig where twiew templates located. Add the path to twiew to your config/packages/twig.yaml

twig:
    paths:
        "%kernel.project_dir%/vendor/a-proud/twiew-bundle/templates": twiew

The AProud/Twiew bundle requires the following mandatory parameters:

• default
• css
• js_top
• header
• main
• footer
• js_bottom

You can also add any custom parameters and use them in your templates.

Usage

The A-Proud/Twiew bundle creates an HTML page structured into three main sections: header, main, and footer. You can add multiple blocks to each section. Each block must have a layout that defines how many columns it has and how they are arranged within the block.

Each block is divided into components, and each component requires a template (tpl) and the number of the free space in the block where it needs to be placed.

Here's an example PHP code that shows how to use the A-Proud/Twiew bundle:

//src/Controller/MainController.php
	namespace App\Controller;

	use Symfony\Component\HttpFoundation\Response;
	use Symfony\Component\HttpFoundation\Request;
	use Symfony\Component\Routing\Annotation\Route;
	use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
	use AProud\TwiewBundle\Twiew;

	class MainController extends AbstractController
	{
		
		function __construct(Twiew $twiew)
		{
			$this->view = $twiew;
			$this->view->tplSchema('', [
				'app_main_index' => [ //app_main_index key is generated by routing for this page 
					'js_top' => [
						'jquery' => [
							'weight' => 5, //scripts with smaller weight will be positioned higher on the page
							'src' => './assets/jquery/dist/jquery.min.js'
						],
						'bootstrap_bundle' => [ //you can set the key for comfortable navigation
							'weight': 10,
							'src': './assets/bootstrap/dist/js/bootstrap.bundle.min.js'
						],
					],
					'js_bottom' => [
						//also works without keys
						['weight' => 5, 'src' => './assets/js/custom_script.js'],
						['weight' => 10, 'src' => './assets/js/another_custom_script.js'],
					],
					'sections' => [
						'main' => [
							[
								'layout' => '@twiew/layouts/two_columns_center.html.twig',
								'components' => [
									[
										'tpl' => 'app_main/components/heading.html.twig',
										'block' => '1',
									],
									[
										'tpl' => 'app_main/components/slider.html.twig',
										'block' => '2',
									],
								]
							],
							[
								'layout' => '@twiew/layouts/one_column_center.html.twig',
								'components' => [
									[
										'tpl' => 'app_main/components/image_gallery.html.twig',
										'block' => '1',
									],
								]
							],
						]
					],
				],
				'app_main_login' => [
					'sections' => [
						'main' => [
							[
								'layout' => '@twiew/layouts/one_column_center.html.twig',
								'class' => 'vh-100 login-col', //pass the twig variables to layout
								'components' => [
									[
										'tpl' => 'app_main/components/login_form.html.twig',
										'block' => '1',
										'my_component_variable' => 'some value',
									],
								]
							],
						],
					],
				],
			]);
		}
		
		/**
		 *  App index page
		 *  @Route("/")
		 *  @return Response
		 */
		public function index(): Response
		{
			return $this->view->render(); //only one string to render the whole page with setted structure
		}
		
		/**
		 *  Login page
		 *  @Route("/login")
		 *  @return Response
		 */
		public function login(): Response
		{
			//you can get the values in your controller
			$mainSectionClass = $this->view->tplSchema('app_main_login.sections.main.class');
			
			//and replace them if needed
			$this->view->tplSchema('app_main_login.sections.main.class', $mainSectionClass.' bg-gray');
			return $this->view->render();
		}

	}

Great! You have defined the view structure in one place and you can override this structure in controller. But it looks a little bit bulky. Also it's not a good idea to store the View things in Controller. So let's move this schema in some another place and leave the controller to do its own thing.

Store tpl schema in YAML

<?php
//src/Controller/MainController.php

namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use AProud\TwiewBundle\Twiew;

class MainController extends AbstractController
{

    function __construct(Twiew $twiew)
    {
	    $this->view = $twiew;
	    $this->view->tplSchemaFromYaml('app_main_index', 'config/app_main.yaml');
    }


    #[Route('/', name: 'main_index')]
    public function index(): Response
    {
        return $this->view->render();
    }

     #[Route('/login', name: 'main_login')]
    public function login(): Response
    {
	    return $this->view->render();
    }

}

Store tpl schema in YAML

# config/app_main.yaml

default.htmllang: 'en'
default.title: 'URL shortener'
default.favicon_href: './assets/favicon.png'
default.cssframework: 'bootstrap5'
default.sections.head.layout: 'main/components/head.html.twig'
app_main_index.sections:
    main:
        -
            layout: '@twiew/layouts/one_column_center.html.twig'
            custom_html_top: ''
            custom_html_bottom: ''
            components:
                loginform:
                    slot: '1'
                    tpl: 'main/components/test.html.twig'

License

The A-Proud/Twiew bundle is released under the MIT license.