easier example

templates/shortcodes/row.html

@@ -0,0 +1,111 @@
+<!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+{% set columns = body | safe | markdown | split(pat="|||") %}
+{% set row_class =  "relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 md:flex md:flex-row md:py-4 lg:py-8"%}
+
+<!-- aligns columns depending on col number-->
+{% if 2 < columns | length %}
+    {% set row_class = row_class ~ " lg:items-start" %}
+{% else %} 
+    {% set row_class = row_class ~ " lg:items-center" %}
+{% endif %}
+
+{% set col_class = "flex-1 mb-20 lg:mb-0 " %}
+
+{% if style %}
+
+    {% if "center" in style %}
+        {% set row_class = row_class ~ " text-center items-center mx-auto justify-center " %}
+        {% set col_class = col_class ~ " flex-1 " %}
+    {% endif %}
+
+    <!-- makes row full screen width, strips margins -->
+    {% if "lean" in style %}
+        {% if "lean-left" in style %}
+            {% set col_class = col_class ~ "flex-1 lg:m-0 " %}
+            {% set row_class = row_class ~ " lg:mr-20 " %}
+        {% elif "lean-right" in style %}
+            {% set col_class = col_class ~ "flex-1 lg:m-0 " %}
+            {% set row_class = row_class ~ " lg:ml-20 " %}
+        {% else %}
+            {% set col_class = col_class ~ "flex-1 lg:m-0 " %}
+        {% endif %}    
+    {% else %}
+        {% set row_class = row_class ~ " mx-8 " %}
+        {% set col_class = col_class ~ " lg:mx-8 " %}
+    {% endif %}
+
+     <!-- makes row semi-full screen width, strips margins -->
+     {% if "between" in style %}
+     {% set row_class = row_class ~ " lg:max-w-6xl " %}
+ {% elif "moderate" in style %}
+     {% set row_class = row_class ~ " lg:m-20 " %}
+ {% endif %}
+
+        <!-- makes row full screen width, strips margins -->
+    {% if "narrow" in style %}
+        {% set row_class = row_class ~ " lg:max-w-3xl " %}
+    {% elif "tight" in style %}
+        {% set row_class = row_class ~ " lg:max-w-sm " %}
+    {% elif "moderate" in style %}
+        {% set row_class = row_class ~ " lg:m-20 " %}
+    {% endif %}
+
+    {% if "invert-color" in style %}
+        {% set row_class = row_class ~ " text-white " %}
+    {% endif %}
+
+    {% else %}
+        {% set row_class = row_class ~ " mx-12 " %}
+{% endif %}
+
+{% set anchor_link = ""%}
+{% if anchor %}
+    {% set anchor_link = anchor %}
+{% endif %}
+
+
+<!-- makes row full screen width and adds background img -->
+{% set styles = ""  %}
+{% if bgPath %}
+    {% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover"  %}
+{% endif %}
+{% if bgColor %}
+    {% set styles = "background-color: " ~ bgColor ~ "; background-size: cover"  %}
+{% endif %}
+
+<div id="{{anchor_link}}" class="w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 justify-center flex" style="{{styles}}">
+    <div class="{{row_class}}"> 
+        {% for column in columns%} 
+
+            <!-- Hides empty columns if displayed vertically in small screen -->
+            {% if column | as_str | length < 10 %} 
+                <div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
+                    {{ column | safe }}
+                </div>
+            {% else %}
+                <div class="{{col_class}}">
+                    <!-- handles mermaid markdown content display -->
+                    {% if "{% mermaid() %}" in column %}
+                        {% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
+                        {% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%}
+                        <div class="mermaid">
+                            {{mermaid_content | safe }}
+                        </div> 
+                    {% else %}
+                        {{ column | safe }}
+                    {% endif %}
+                </div>
+            {% endif %}
+        {% endfor %}
+    </div>
+</div>