Merge pull request #5 from qossmic/iframe

Add resizable iframe

README.md

@@ -38,6 +38,34 @@ twig_doc:
   # or for localized: prefix: /{_locale}/twig/doc/
 ```
 
+### Template
+
+To use your design in the documentation, you have to override the component template.
+
+Create a template in your project: templates/bundles/TwigDocBundle/component.html.twig
+
+```twig
+{% extends '@!TwigDoc/component.html.twig' %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ asset('css/your-styles.css') }}">
+{% endblock %}
+```
+
+#### Customizing the documentation
+
+If you want to customize the documentation, you can override the template.
+
+Create a template in your project: templates/bundles/TwigDocBundle/documentation.html.twig
+
+```twig
+{% extends '@!TwigDoc/documentation.html.twig' %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ asset('css/your-styles.css') }}">
+{% endblock %}
+```
+
 ### Configuration
 
 Create a config file: configs/packages/twig_doc.yaml

config/documentation.php

@@ -10,29 +10,30 @@
 use Qossmic\TwigDocBundle\Twig\TwigDocExtension;
 
 return static function (ContainerConfigurator $container) {
-    $container->services()
-        ->set('twig_doc.controller.documentation', TwigDocController::class)
-            ->public()
-            ->args([
-                service('twig'),
-                service('twig_doc.service.component')
-            ])
+    $container->services()  ->set('twig_doc.controller.documentation', TwigDocController::class)
+        ->public()
+        ->autoconfigure()
+        ->autowire()
+        ->arg('$profiler', service('profiler')->nullOnInvalid())
         ->set('twig_doc.service.category', CategoryService::class)
+        ->alias(CategoryService::class, 'twig_doc.service.category')
 
         ->set('twig_doc.service.component_factory', ComponentItemFactory::class)
-            ->public()
-            ->args([service('validator'), service('twig_doc.service.category')])
+        ->public()
+        ->autoconfigure()
+        ->autowire()
+        ->alias(ComponentItemFactory::class, 'twig_doc.service.component_factory')
 
         ->set('twig_doc.service.component', ComponentService::class)
-            ->public()
-            ->args([service('twig_doc.service.component_factory'), service('twig_doc.service.category')])
+        ->public()
+        ->autoconfigure()
+        ->autowire()
+        ->alias(ComponentService::class, 'twig_doc.service.component')
 
         ->set('twig_doc.twig.extension', TwigDocExtension::class)
-            ->args([
-                service('ux.twig_component.component_renderer')->nullOnInvalid(),
-                service('twig_doc.service.component'),
-                service('twig_doc.service.category'),
-                service('twig')]
-            )
-            ->tag('twig.extension');
+        ->autoconfigure()
+        ->autowire()
+        ->tag('twig.extension')
+        ->alias(TwigDocExtension::class, 'twig_doc.twig.extension')
+        ;
 };

config/routing/documentation.xml

@@ -10,5 +10,8 @@
     <route id="_documentation_invalid_components" path="/invalid">
         <default key="_controller">twig_doc.controller.documentation::invalidComponents</default>
     </route>
+    <route id="_documentation_component_view" path="/component-view">
+        <default key="_controller">twig_doc.controller.documentation::componentView</default>
+    </route>
 
 </routes>

src/Controller/TwigDocController.php

@@ -5,6 +5,8 @@
 
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
+use Symfony\Component\HttpKernel\Profiler\Profiler;
 use Twig\Environment;
 use Qossmic\TwigDocBundle\Component\ComponentItem;
 use Qossmic\TwigDocBundle\Service\ComponentService;
@@ -13,7 +15,8 @@ class TwigDocController
 {
     public function __construct(
         private readonly Environment $twig,
-        private readonly ComponentService $componentService
+        private readonly ComponentService $componentService,
+        private readonly ?Profiler $profiler = null
     )
     {
     }
@@ -28,7 +31,7 @@ public function index(Request $request): Response
         }
 
         return new Response(
-            $this->twig->render('@TwigDoc/pages/index.html.twig', [
+            $this->twig->render('@TwigDoc/documentation.html.twig', [
                 'components' => $components,
                 'filterQuery' => $filterQuery,
                 'filterType' => $filterType ?? null,
@@ -42,4 +45,25 @@ public function invalidComponents(): Response
             $this->twig->render('@TwigDoc/pages/invalid_components.html.twig')
         );
     }
+
+    public function componentView(Request $request): Response
+    {
+        $name = $request->query->get('name');
+        $component = $this->componentService->getComponent($name);
+        if (!$component) {
+            throw new NotFoundHttpException(sprintf('Component %s is unknown', $name));
+        }
+        $breakpoint = $request->query->get('breakpoint');
+        // disable profiler to get rid of toolbar in dev
+        if($this->profiler) {
+        $this->profiler->disable();
+        }
+        return new Response(
+            $this->twig->render('@TwigDoc/component.html.twig', [
+                'component' => $component,
+                'componentData' => $request->query->all('data'),
+                'quantity' => $request->query->get('quantity')
+            ])
+        );
+    }
 }

src/Service/ComponentService.php

@@ -131,4 +131,9 @@ public function getInvalidComponents(): array
     {
         return $this->invalidComponents;
     }
+
+    public function getComponent(string $name): ?ComponentItem
+    {
+        return array_values($this->filterComponents($name, 'name'))[0] ?? null;
+    }
 }

templates/base.html.twig → templates/component.html.twig

@@ -1,16 +1,16 @@
 <html lang="en">
 {% block head %}
     {% block stylesheets %}
-        <style>
-            {{ include('@TwigDoc/style/style.css.twig') }}
-        </style>
     {% endblock %}
     <title>{% block title %}Twig Component Documentation{% endblock %}</title>
     {% block javascripts %}
     {% endblock %}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 {% endblock %}
 </html>
 
 <body>
-    {% block body '' %}
+    {% for i in 1..quantity %}
+        {{ renderComponent(component, componentData ?? [])|raw }}
+    {% endfor %}
 </body>

templates/component/_item.html.twig

@@ -45,24 +45,30 @@
             </div>
         </div>
         <div class="twig-doc-component-examples">
-            <h4>Variations</h4>
-            {% for variation in component.variations %}
-                <div class="twig-doc-variation">
-                    <div class="twig-doc-component-variation">
-                        {{ renderComponent(component, variation ?? [])|raw }}
-                    </div>
-                    <div class="twig-doc-variation-description">
-                        <ul>
-                            {% for key, value in variation %}
-                                <li>
-                                    <b>{{ key }}:</b>
-                                    {% include '@TwigDoc/component/_parameter.html.twig' with {parameter: value} %}
-                                </li>
-                            {% endfor %}
-                        </ul>
+            <h4>Previews</h4>
+            <div class="twig-doc-variation">
+                {% for name, variation in component.variations %}
+                    <h5{% if loop.first %} class="active"{% endif %} data-variation="{{ name }}">{{ name }}</h5>
+                {% endfor %}
+                {% for name, variation in component.variations %}
+                    <div class="twig-doc-variation-body{% if loop.first %} active{% endif %}" data-variation="{{ name }}">
+
+                        <div class="twig-doc-viewport-container">
+                            {% include '@TwigDoc/component/_viewport.html.twig' with {component: component, componentData: variation ?? [], width: '1280px'} %}
+                        </div>
+                        <div class="twig-doc-variation-description">
+                            <ul>
+                                {% for key, value in variation %}
+                                    <li>
+                                        <b>{{ key }}:</b>
+                                        {% include '@TwigDoc/component/_parameter.html.twig' with {parameter: value} %}
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        </div>
                     </div>
-                </div>
-            {% endfor %}
+                {% endfor %}
+            </div>
         </div>
     </div>
 </div>

templates/component/_viewport.html.twig

@@ -0,0 +1,6 @@
+<div class="twig-doc-viewport" style="width: {{ width }}px">
+    <iframe class="twig-doc-iframe"
+            src="{{ path('_documentation_component_view', {name: component.name, data: componentData, quantity: 1}) }}"
+    >
+    </iframe>
+</div>

templates/pages/index.html.twig → templates/documentation.html.twig

@@ -1,5 +1,35 @@
-{% extends '@TwigDoc/base.html.twig' %}
+<html lang="en">
+{% block head %}
+{% block stylesheets %}
+    <style>
+        {{ include('@TwigDoc/style/style.css.twig') }}
+    </style>
+{% endblock %}
+    <title>{% block title %}Twig Component Documentation{% endblock %}</title>
+{% block javascripts %}
+    <script type="application/javascript">
+        window.addEventListener('load', () => {
+        document.querySelectorAll('.twig-doc-variation h5').forEach(
+            function (element) {
+                element.addEventListener('click', function () {
+                    console.log(element);
+                    let variation = element.getAttribute('data-variation');
+                    element.parentNode.querySelectorAll('.twig-doc-variation-body, h5').forEach(
+                        function (e) {
+                            e.classList.remove('active');
+                        });
+                    element.classList.add('active');
+                    element.parentNode.querySelector(`.twig-doc-variation-body[data-variation="${variation}"]`).classList.add('active');
+                })
+            }
+        )
+        });
+    </script>
+{% endblock %}
+{% endblock %}
+</html>
 
+<body>
 {% block body %}
     <div id="twig-doc-container">
 
@@ -16,9 +46,9 @@
         </div>
         <!-- find better solution -->
         <script>
-            function widthResizer(){
+            function widthResizer() {
                 var width = window.innerWidth
-                if(document.getElementById("screenwidth")) {
+                if (document.getElementById("screenwidth")) {
                     document.getElementById("screenwidth").innerHTML = "Width: " + width + "px"
                 }
                 console.log(width)
@@ -64,10 +94,11 @@
             {% for items in components %}
                 <div>
                     {% for item in items %}
-                        {% include '@TwigDoc/component/_item.html.twig' with { component: item }%}
+                        {% include '@TwigDoc/component/_item.html.twig' with { component: item } %}
                     {% endfor %}
                 </div>
             {% endfor %}
         </div>
     </div>
 {% endblock %}
+</body>

templates/pages/invalid_components.html.twig

@@ -1,4 +1,4 @@
-{% extends'@TwigDoc/base.html.twig' %}
+{% extends'@TwigDoc/documentation.html.twig' %}
 
 {% block body %}
     <h1>Invalid Components</h1>

templates/style/style.css.twig

@@ -12,6 +12,7 @@
     gap: 5px;
     background-color: white;
     padding-top: 5px;
+    z-index:100;
 }
 
 #twig-doc-container #screenwidth {
@@ -33,6 +34,7 @@
     background: white;
     text-align: center;
     border-bottom: 1px darkgray solid;
+    z-index: 100;
 }
 
 #twig-doc-container .navigation ul {
@@ -114,3 +116,57 @@
 #twig-doc-container .twig-doc-variation .twig-doc-variation-description {
     padding-left: 20px;
 }
+
+.twig-doc-body {
+    padding: 15px;
+}
+
+.twig-doc-variation h5 {
+    margin: 0;
+    padding: 10px 20px;
+    display: inline-block;
+}
+
+.twig-doc-variation h5:hover, .twig-doc-variation h5.active {
+    background-color: #000000;
+    color: #ffffff;
+    cursor: pointer;
+}
+
+.twig-doc-variation-body {
+    display: none;
+}
+
+.twig-doc-variation-body.active {
+    display: block;
+}
+
+.twig-doc-viewport-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    border: none;
+    padding: 10px;
+    position: relative;
+    overflow-x: scroll;
+}
+.twig-doc-viewport {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-width: 240px;
+    margin: 0 auto;
+    white-space: nowrap;
+    text-align: center;
+    position: relative;
+    resize: horizontal;
+    overflow-x: auto;
+    outline: 1px solid #000000;
+}
+
+.twig-doc-iframe {
+    width: 100%;
+    flex-grow: 1;
+    border: 0;
+}