Major refactor of compiler pass and configuration tree

CHANGELOG.md

@@ -7,7 +7,18 @@ To get the diff between two versions, go to https://github.com/LIN3S/PatternLibr
 
 * 0.2.0
     * [BC break] Renderers. Changed configuration yml structure to adapt to new renderer (#12).
+
       To upgrade check renderers documentation.
+
+    * [BC break] Configuration yml changed. Moved title and description into theme, simplified adding custom styles and
+      allowed adding custom js and css files.
+
+      Check new configuration reference to upgrade. 
+
+    * [BC break] partials/stylesheets.html.twig and partials/javascripts.html.twig extension to add custom stylesheets
+      or scripts removed.
+
+      Use `theme.javascripts` and `theme.stylesheets` configuration values instead.
 
 * 0.1.0
     * Initial release

src/LIN3S/PatternLibraryBuilder/Config/ThemeConfig.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace LIN3S\PatternLibraryBuilder\Config;
+
+final class ThemeConfig
+{
+    private $title;
+    private $description;
+    private $stylesheets;
+    private $javascripts;
+    private $customStyles;
+
+    public function __construct(
+        string $title, 
+        string $description, 
+        array $stylesheets = [],
+        array $javascripts = [],
+        array $customStyles = []
+    ) {
+        $this->title = $title;
+        $this->description = $description;
+        $this->stylesheets = $stylesheets;
+        $this->javascripts = $javascripts;
+        $this->customStyles = $customStyles;
+    }
+
+    public function title()
+    {
+        return $this->title;
+    }
+
+    public function description()
+    {
+        return $this->description;
+    }
+
+    public function stylesheets()
+    {
+        return $this->stylesheets;
+    }
+
+    public function javascripts()
+    {
+        return $this->javascripts;
+    }
+
+    public function customStyles()
+    {
+        return $this->customStyles;
+    }
+}

src/LIN3S/PatternLibraryBuilder/Controller/IndexController.php

@@ -14,6 +14,7 @@
 namespace LIN3S\PatternLibraryBuilder\Controller;
 
 use LIN3S\PatternLibraryBuilder\Config\ConfigLoader;
+use LIN3S\PatternLibraryBuilder\Config\ThemeConfig;
 use LIN3S\PatternLibraryBuilder\Renderer\RendererRegistry;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -23,18 +24,21 @@
  * @author Gorka Laucirica <gorka.lauzirika@gmail.com>
  * @author Beñat Espiña <benatespina@gmail.com>
  */
-class IndexController
+final class IndexController
 {
     private $loader;
+    private $themeConfig;
     private $rendererRegistry;
     private $twig;
 
     public function __construct(
         ConfigLoader $loader,
+        ThemeConfig $themeConfig,
         RendererRegistry $rendererRegistry,
         \Twig_Environment $twig
     ) {
         $this->loader = $loader;
+        $this->themeConfig = $themeConfig;
         $this->rendererRegistry = $rendererRegistry;
         $this->twig = $twig;
     }
@@ -58,6 +62,11 @@ public function __invoke(Request $request, string $slug = '') : Response
         }
 
         return new Response($this->twig->render('@Lin3sPatternLibraryBuilder/pattern_library.html.twig', [
+            'title' => $this->themeConfig->title(),
+            'description' => $this->themeConfig->description(),
+            'stylesheets' => $this->themeConfig->stylesheets(),
+            'javascripts' => $this->themeConfig->javascripts(),
+            'custom_styles' => $this->themeConfig->customStyles(),
             'menu' => $config->allInHierarchy(),
             'breadcrumbs' => $this->generateBreadcrumbs($slug),
             'content' => $content,

src/LIN3S/PatternLibraryBuilder/Renderer/Twig.php

@@ -2,17 +2,21 @@
 
 namespace LIN3S\PatternLibraryBuilder\Renderer;
 
+use LIN3S\PatternLibraryBuilder\Config\ThemeConfig;
 use Symfony\Component\HttpFoundation\RequestStack;
 
 final class Twig implements Renderer
 {
     private $twig;
     private $request;
+    private $themeConfig;
 
-    public function __construct(\Twig_Environment $twig, RequestStack $requestStack)
+    public function __construct(\Twig_Environment $twig, RequestStack $requestStack, ThemeConfig $themeConfig)
     {
         $this->twig = $twig;
         $this->request = $requestStack->getMasterRequest();
+        $this->requestStack = $requestStack;
+        $this->themeConfig = $themeConfig;
     }
 
     public function render($item)
@@ -41,6 +45,9 @@ private function renderIFrame($media, $item, $paramsId)
             sprintf('@Lin3sPatternLibraryBuilder/pages/iframe/%s.html.twig', $media), [
                 'item'      => $item['config']['renderer']['options'],
                 'params_id' => $paramsId,
+                'stylesheets' => $this->themeConfig->stylesheets(),
+                'javascripts' => $this->themeConfig->javascripts(),
+                'custom_styles' => $this->themeConfig->customStyles(),
             ]
         );
     }

src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/_variables/_colors.scss

@@ -20,4 +20,4 @@ $color-emperor: #545454;
 $color-tundora: #444;
 $color-mine-shaft: #222;
 $color-black: #000;
-$color-primary: #09f;
+$color-primary: var(--pbl-color-primary);

src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/components/_accordion-item.scss

@@ -30,7 +30,7 @@ $accordion-item-font-size: $font-size-16;
 $accordion-item-font-size-nested: $font-size-14;
 $accordion-item-font-size-leaf: $font-size-15;
 $accordion-item-indicator-transition: $transition-transform;
-$accordion-item-indicator-background-color: $accordion-item-text-color;
+$accordion-item-indicator-background-color: $color-primary;
 $accordion-item-transition: $transition-background-color;
 
 @mixin accordion-item(

src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/components/_tabbed.scss

@@ -18,7 +18,7 @@ $tab-content-background-color: $color-aqua-haze;
 $tab-border-color: $color-alto;
 $tab-transition: $transition-background-color;
 $tab-indicator-transition: $transition-transform;
-$tab-indicator-background-color: $color-mine-shaft;
+$tab-indicator-background-color: $color-primary;
 
 .plb-tabbed {
   margin-top: 60px;

src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/index.scss

@@ -9,6 +9,7 @@
 // @author Gorka Laucirica <gorka.lauzirika@gmail.com>
 // @author Mikel Tuesta <mikeltuesta@gmail.com>
 
+
 @import './../node_modules/prismjs/themes/prism-okaidia.css';
 
 @import '_base/common';
@@ -33,3 +34,8 @@
 @import 'layouts/main';
 
 @import 'renderers/homepage';
+
+//Default CSS Vars, can be override using configuration
+:root {
+  --pbl-color-primary: $color-mine-shaft;
+}

src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/layouts/_article.scss

@@ -21,7 +21,7 @@ $article-title-font-family: $font-family-open-sans;
 $article-title-font-size: $font-size-36;
 $article-title-font-weight: $font-weight-bold;
 $article-title-line-height: $article-title-font-size;
-$article-title-text-color: $color-mine-shaft;
+$article-title-text-color: $color-primary;
 $article-description-font-family: $font-family-open-sans;
 $article-description-font-size: $font-size-16;
 $article-description-font-weight: $font-weight-regular;

src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/layouts/_aside.scss

@@ -14,7 +14,7 @@
 @import './../_variables/transitions';
 @import './../_variables/typography';
 
-$aside-header-background-color: $color-mercury;
+$aside-header-background-color: $color-primary;
 $aside-header-font-family: $font-family-open-sans;
 $aside-header-font-size: $font-size-16;
 $aside-header-font-weight: $font-weight-bold;

src/LIN3S/PatternLibraryBuilder/Resources/assets/scss/svg/_icon-plus.scss

@@ -10,7 +10,7 @@
 @import './../_variables/colors';
 @import './../_variables/transitions';
 
-$icon-plus-color: $color-mine-shaft;
+$icon-plus-color: $color-primary;
 $icon-plus-transition: $transition-transform;
 
 .plb-icon-plus {

src/LIN3S/PatternLibraryBuilder/Resources/templates/pages/iframe.html.twig

@@ -2,8 +2,16 @@
 <html>
     <head>
         <meta name="viewport" content="width={%- block viewport_meta_device_width -%}{%- endblock -%}, height={%- block viewport_meta_device_height -%}{%- endblock -%}, initial-scale=1, maximum-scale=1, user-scalable=no">
-        <link rel="stylesheet" href="{{ assets_path ~ '/patternlibrary.css' }}"/>
-        {% include '@Lin3sPatternLibraryBuilder/partials/stylesheets.html.twig' %}
+        {% block pattern_library_styles %}
+            <link rel="stylesheet" href="{{ assets_path ~ '/patternlibrary.css' }}"/>
+            {% include '@Lin3sPatternLibraryBuilder/partials/custom_styles.html.twig' with custom_styles %}
+        {% endblock %}
+
+        {% block app_styles %}
+            {% for stylesheet in stylesheets %}
+                <link rel="stylesheet" href="{{ stylesheet }}"/>
+            {% endfor %}
+        {% endblock %}
     </head>
     <style type="text/css">
         html {
@@ -29,7 +37,14 @@
     {% endfor %}
     {{ include(item.template, current_parameters) }}
     <div class="js-bengor-cookies"></div> {# Prevent bengor-cookies console errors #}
-    <script src="{{ assets_path ~ '/patternlibrary.js' }}"></script>
-    {% include '@Lin3sPatternLibraryBuilder/partials/javascripts.html.twig' %}
+    {% block pattern_library_scripts %}
+        <script src="{{ assets_path ~ '/patternlibrary.js' }}"></script>
+    {% endblock %}
+
+    {% block app_scripts %}
+        {% for javascript in javascripts %}
+            <script src="{{ javascript }}"></script>
+        {% endfor %}
+    {% endblock %}
 </body>
 </html>

src/LIN3S/PatternLibraryBuilder/Resources/templates/partials/custom_styles.html.twig

@@ -0,0 +1,5 @@
+<style>
+    :root {
+        --pbl-color-primary: {{ color_primary }};
+    }
+</style>

src/LIN3S/PatternLibraryBuilder/Resources/templates/pattern_library.html.twig

@@ -12,11 +12,17 @@
         <meta name="description" content="{{ description }}">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        {% block head_styles %}
+        {% block pattern_library_styles %}
             <link rel="stylesheet" href="{{ assets_path ~ '/patternlibrary.css' }}"/>
-            {% include '@Lin3sPatternLibraryBuilder/partials/stylesheets.html.twig' %}
+            {% include '@Lin3sPatternLibraryBuilder/partials/custom_styles.html.twig' with custom_styles %}
         {% endblock %}
-        <style>{{ theme_styles }}</style>
+
+        {% block app_styles %}
+            {% for stylesheet in stylesheets %}
+                <link rel="stylesheet" href="{{ stylesheet }}"/>
+            {% endfor %}
+        {% endblock %}
+
     </head>
 {% endblock %}
 
@@ -51,13 +57,15 @@
 
     {% block footer %}{% endblock %}
 
-    {% block body_end_before_js %}{% endblock %}
-
-{% block foot_script %}
-    <script src="{{ assets_path ~ '/patternlibrary.js' }}"></script>
-    {% include '@Lin3sPatternLibraryBuilder/partials/javascripts.html.twig' %}
-{% endblock %}
+    {% block pattern_library_scripts %}
+        <script src="{{ assets_path ~ '/patternlibrary.js' }}"></script>
+    {% endblock %}
 
+    {% block app_scripts %}
+        {% for javascript in javascripts %}
+            <script src="{{ javascript }}"></script>
+        {% endfor %}
+    {% endblock %}
 {% endblock %}
 </body>
 </html>