refactor(macros): convert to templates

includes/_content.twig

@@ -1,8 +1,5 @@
 {# SPDX-License-Identifier: EUPL-1.2 #}
 
-{% from "includes/macros/markdown_by_paragraph.twig" import markdown_by_paragraph %}
-{% from "includes/macros/actions.twig" import actions %}
-{% from "includes/macros/video.twig" import video %}
 <!-- Content Section-->
 <section class="page-section content" id="content">
     <div class="container">
@@ -16,12 +13,12 @@
                 <div class="divider-custom-line"></div>
             </div>
             {% if meta.video %}
-                {{ video(meta.video, meta.image, "content") }}
+                {{ include("includes/blocks/_video.twig",{video:meta.video,image:meta.image,mode:"content"}) }}
             {% elseif meta.image %}
                 <img class="img-fluid rounded mb-5 d-block mx-auto" src="{{ meta.image|url }}" alt="{{ meta.image_alt }}" />
             {% endif %}
             {{ content }}
-            {{ actions(meta.actions, "single_page") }}
+            {{ include('includes/blocks/_actions.twig',{actions:meta.actions, mode:"single_page"}) }}
         </div>
     </div>
 </section>

includes/_footer.twig

@@ -1,7 +1,5 @@
 {# SPDX-License-Identifier: EUPL-1.2 #}
 
-{% from "includes/macros/markdown_by_paragraph.twig" import markdown_by_paragraph %}
-{% from "includes/macros/actions.twig" import actions %}
 {% if not (index.location.disabled and index.social.disabled and index.footer.disabled) %}
     <!-- Footer-->
 <footer role="contentinfo">

includes/_home_content.twig

@@ -1,8 +1,5 @@
 {# SPDX-License-Identifier: EUPL-1.2 #}
 
-{% from "includes/macros/markdown_by_paragraph.twig" import markdown_by_paragraph %}
-{% from "includes/macros/actions.twig" import actions %}
-{% from "includes/macros/video.twig" import video %}
 <section id="hero" class="layout-maxed bg-blue">
 	<div class="layout-hero bg-section bg-overlay bg-gradient sm:py-36 py-8" <?php bg('bg-hero')?>>
 		<div class="hero-content grid md:grid-cols-2 flex flex-wrap sm:my-36 my-8 sm:py-36 py-8">
@@ -84,11 +81,11 @@
     </div>
         <div class="layout-maxed py-36">
             {# {% if meta.video %}
-                {{ video(meta.video, meta.image, "content") }}
+              {{ include("includes/blocks/_video.twig",{video:meta.video,image:meta.image,mode:"content"}) }}
             {% elseif meta.image %}
                 <img class="img-fluid rounded mb-5 d-block mx-auto" src="{{ meta.image|url }}" alt="{{ meta.image_alt }}" />
             {% endif %} #}
             {{ content }}
-            {# {{ actions(meta.actions, "single_page") }} #}
+            {# {{ include('includes/blocks/_actions.twig',{actions:meta.actions, mode:"single_page"}) }} #}
         </div>
 </section>

includes/blocks/_actions.twig

@@ -0,0 +1,67 @@
+{# SPDX-License-Identifier: EUPL-1.2 #}
+
+
+{% if mode == "portfolio" and (not (include_close_button is defined) or (include_close_button is same as(true))) %}
+    {% set actions = (actions ? actions : [])|merge([{
+        "icon": "times", 
+        "content": "Close Window", 
+        "color": "primary", 
+        "outline": false, 
+        "close_button": true}]) %}
+{% endif %}
+
+{% if actions %}
+    <div class="text-center mt-4">
+        {% block actionscontent %}
+            {% for action in actions %}
+                {% if action.close_button %}
+                    <button data-bs-dismiss="modal"
+
+                        {% block attributes %}
+                            class="btn {{ 
+                                (mode == "social")
+                                ? 'btn-social mx-1'
+                                : 'mx-1 my-1' 
+                            }}
+                            {%- if mode != "social" and not action.close_button and action.size != "medium" 
+                                %} {% if action.size in ["small", "large", "xlarge"] -%}
+                                    {{- action.size|replace({"small": "btn-sm", "large": "btn-lg", "xlarge": "btn-xl"}) -}}
+                                {% else %}btn-xl
+                                {%- endif -%}
+                            {%- endif %} btn-{{ 
+                                (
+                                    action.outline is same as(true) or 
+                                    mode in ["about", "social"]
+                                ) ? 'outline-' }}{{
+                                (action.color in ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"])
+                                ? action.color
+                                : (
+                                    (mode in ["about", "social"])
+                                    ? 'light'
+                                    : 'primary'
+                                )
+                            }}{% if action.disabled %} disabled{% endif %}
+                            {%- if action.close_button %} d-block mx-auto mt-4{% endif %}"
+                            {% if action.link and not action.disabled %} href="{{ action.link|url }}" {% endif %}
+                        {% endblock attributes %}
+                        >
+
+                        {% block contentlink %}
+                            {% if action.icon %}
+                                <i class="{{ [(action.brands ? 'fab' : 'fas'), 'fa-fw', ('fa-' ~ action.icon), (mode != 'social' ? 'me-2')]|join(' ')}}"></i>
+                            {% endif %}
+                            {{ mode != "social" ? action.content }}
+                        {% endblock contentlink %}
+
+                    </button>
+                {% else %}
+                    <a {{ block('attributes') }}>
+                        {{ block('contentlink') }}
+                    </a>
+                {% endif %}
+            {% endfor %}
+        {% endblock actionscontent %}
+    </div>
+{% else %}
+    {{ block('actionscontent') }}
+{% endif %}

includes/blocks/_markdown_by_paragraph.twig

@@ -0,0 +1,19 @@
+{# SPDX-License-Identifier: EUPL-1.2 #}
+
+{% for paragraph in content|split("\n")|filter(e=>e is not empty) %} {# small mb-0 #}
+  {% if mode == "about" %}
+    <div class="col-lg-4{{ loop.first : " ms-auto" : "" }}{{ loop.last : " me-auto" : "" }}">
+      {% block paragapheblock %}
+        <p class="{{ (mode == "about") ? "lead" : (
+          (mode == "footer") ? "lead mb-0" : (
+            (mode == "copyright") ? "small mb-0" : ""
+          )
+        ) }}">
+          {{ paragraph|markdown(singleLine=true) }}
+        </p>
+      {% endblock paragapheblock %}
+    </div>
+  {% else %}
+    {{ block('paragapheblock') }}
+  {% endif %}
+{% endfor %}

includes/blocks/_video.twig

@@ -0,0 +1,26 @@
+{# SPDX-License-Identifier: EUPL-1.2 #}
+
+{% set known_video_types = {
+    "3gp":"video/3gpp",
+    "3g2":"video/3gpp2",
+    "avi":"video/x-msvideo",
+    "mpg":"video/mpeg",
+    "mpeg":"video/mpeg",
+    "mp4":"video/mp4",
+    "mov":"video/quicktime",
+    "ogv":"video/ogg",
+    "ts":"video/mp2t",
+    "qt":"video/quicktime",
+    "webm":"video/webm",
+    "wmv":"video/x-ms-wmv",
+} %}
+<video 
+  class="img-fluid rounded d-block mx-auto{% if mode == "content" %} mb-5{% endif %}" 
+  {% if image %} poster="{{ image|url }}" {% endif %} 
+  {% if mode == "portfolio" %} autoplay muted loop {% else %} controls {% endif %}>
+    {% for source in (video is iterable and (not (video[1] starts with "video/") or ("." in video[1])) ? video : [video]) %}
+        {% set mime = (source is iterable) ? source[1] : known_video_types[source|split(".")|last] %}
+        <source src="{{ source is iterable ? source[0]|url : source|url }}" {% if mime %} type="{{ mime }}" {% endif %}>
+    {% endfor %}
+    Your browser does not support this video!
+</video>

includes/macros/actions.twig

@@ -1,53 +0,0 @@
-{# SPDX-License-Identifier: EUPL-1.2 #}
-
-{% macro actions(actions, mode, include_close_button = true) %}
-    {% set has_actions = actions ? true : false %}
-    {{ has_actions ? '<div class="text-center mt-4">' }}
-        {% if mode == "portfolio" and include_close_button %}
-            {% set close_button = {"icon": "times", "content": "Close Window", "color": "primary", "outline": false, "close_button": true} %}
-            {% set actions = actions ? actions|merge([close_button]) : [close_button] %}
-        {% endif %}
-
-        {% for action in actions %}
-            {% set classes = ["btn"] %}
-            {% if mode == "social" %}
-                {% set classes = classes|merge(["btn-social","mx-1"]) %}
-            {% else %}
-                {% set classes = classes|merge(["mx-1", "my-1"]) %}
-            {% endif %}
-            {% set size = "btn-xl" %}
-            {% set color = mode in ["about", "social"] ? "light" : "primary" %}
-            {% set outline = mode in ["about", "social"] ? true : false %}
-
-            {% if action.size in ["small", "large", "xlarge"] %}
-                {% set size = action.size|replace({"small": "btn-sm", "large": "btn-lg", "xlarge": "btn-xl"}) %}
-            {% endif %}
-
-            {% if action.color in ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"] %}
-                {% set color = action.color %}
-            {% endif %}
-
-            {% if action.outline is defined and action.outline in [true, false] %}
-                {% set outline = action.outline %}
-            {% endif %}
-
-            {% if mode != "social" and not action.close_button and action.size != "medium" %}{% set classes = classes|merge([size]) %}{% endif %}
-
-            {% set classes = classes|merge([["btn-", (outline ? "outline-"), color ]|join]) %}
-
-            {% if action.disabled %}{% set classes = classes|merge(["disabled"]) %}{% endif %}
-
-            {% if action.close_button %}
-                {% set classes = classes|merge(["d-block", "mx-auto", "mt-4"]) %}
-            {% endif %}
-
-            {{ action.close_button ? '<button data-bs-dismiss="modal"' : "<a" }} class="{{ classes|join(" ") }}" {% if action.link and not action.disabled %} href="{{ action.link|url }}" {% endif %}>
-                {% if action.icon %}
-                    <i class="{{ [(action.brands ? 'fab' : 'fas'), 'fa-fw', ('fa-' ~ action.icon), (mode != 'social' ? 'me-2')]|join(' ')}}"></i>
-                {% endif %}
-                {{ mode != "social" ? action.content }}
-            {{ action.close_button ? "</button>" : "</a>" }}
-
-        {% endfor %}
-    {{ has_actions ? "</div>" }}
-{% endmacro %}

includes/macros/markdown_by_paragraph.twig

@@ -1,30 +0,0 @@
-{# SPDX-License-Identifier: EUPL-1.2 #}
-
-{% macro markdown_by_paragraph(content, mode) %}
-    {% set content_array = [] %}
-    {% for paragraph in content|split("\n") %}
-        {% if paragraph %}
-            {% set content_array = content_array|merge([paragraph]) %}
-        {% endif %}
-    {% endfor %}
-
-    {% for paragraph in content_array %} {# small mb-0 #}
-        {% set p_class = [] %}
-        {% if mode == "footer" or mode == "about" %}{% set p_class = p_class|merge(["lead"]) %}{% endif %}
-        {% if mode == "copyright" %}{% set p_class = p_class|merge(["small"]) %}{% endif %}
-        {% if mode == "footer" or mode == "copyright" %}{% set p_class = p_class|merge(["mb-0"]) %}{% endif %}
-
-        {% if mode == "about" %}
-            {% set div_class = ["col-lg-4"] %}
-            {% if loop.first %}
-                {% set div_class = div_class|merge(["ms-auto"]) %}
-            {% endif %}
-            {% if loop.last %}
-                {% set div_class = div_class|merge(["me-auto"]) %}
-            {% endif %}
-            <div class="{{ div_class|join(" ") }}">
-        {% endif %}
-        <p class="{{ p_class|join(" ") }}">{{ paragraph|markdown(singleLine=true) }}</p>
-        {{ mode == "about" ? "</div>" }}
-    {% endfor %}
-{% endmacro %}

includes/macros/video.twig

@@ -1,37 +0,0 @@
-{# SPDX-License-Identifier: EUPL-1.2 #}
-
-{% macro video(video, image, mode, loop_index=0) %}
-    {% set known_video_types = {
-        "3gp":"video/3gpp",
-        "3g2":"video/3gpp2",
-        "avi":"video/x-msvideo",
-        "mpg":"video/mpeg",
-        "mpeg":"video/mpeg",
-        "mp4":"video/mp4",
-        "mov":"video/quicktime",
-        "ogv":"video/ogg",
-        "ts":"video/mp2t",
-        "qt":"video/quicktime",
-        "webm":"video/webm",
-        "wmv":"video/x-ms-wmv",
-    } %}
-    <video class="img-fluid rounded d-block mx-auto{% if mode == "content" %} mb-5{% endif %}" {% if image %} poster="{{ image|url }}" {% endif %} {% if mode == "portfolio" %} autoplay muted loop {% else %} controls {% endif %}>
-        {% set sources = video is iterable and (not (video[1] starts with "video/") or ("." in video[1])) ? video : [video] %}
-        {% for source in sources %}
-            {% if source is iterable %}
-                {% set mime = source[1] %}
-            {% else %}
-                {% set mime = known_video_types[source|split(".")|last] %}
-            {% endif %}
-            <source src="{{ source is iterable ? source[0]|url : source|url }}" {% if mime %} type="{{ mime }}" {% endif %}>
-        {% endfor %}
-        Your browser does not support this video!
-    </video>
-    {% if mode == "portfolio_modal" %}
-        <script>
-            jQuery('#portfolioModal{{ loop_index }}').on('hidden.bs.modal', function (e) {
-                jQuery('#portfolioModal{{ loop_index }} video').trigger('pause');
-            });
-        </script>
-    {% endif %}
-{% endmacro %}