Refactor columns shortcode to use markdownify for consistent HTML output, Add new mdcolumns shortcode to convert markdown column content to HTML, Remove unnecessary comments and reformat code

themes/hugoplate/layouts/shortcodes/columns.html

@@ -1,28 +1,30 @@
 {{/*  TODO Add To Docs "top"  */}}
-<div class="md:flex {{ if isset .Params "center" }}items-center {{ end }}{{ with .Get "class" }} {{ . }} {{ else }}  mt-6 {{ end }}">
+<div class="md:flex {{ if isset .Params "center" }}items-center {{ end }}{{ with .Get "class" }} {{ . }} {{ else }} mt-6 {{ end }}">
 {{ range split (trim .Inner " \n") "..column.." }}
 {{ if ne . "" }} <!-- Check if the column content is not empty -->
-{{ printf "<div class=\"markdown-inner items-center flex-1 px-4 \">"| safeHTML }}
+<!-- Process each column's content through markdownify to ensure consistent HTML output -->
-{{ . | safeHTML }}
+{{ $columnContent := . | markdownify }}
-{{ printf "</div>" | safeHTML }}
+<div class="markdown-inner items-center flex-1 px-4">
+<!-- Use safeHTML to insert the processed content as HTML -->
+{{ $columnContent | safeHTML }}
+</div>
 {{ end }}
 {{ end }}
 </div>
 
 {{/*
-    Adds the ability to create columns in markdown content.  
+Adds the ability to create columns in markdown content.  
-    
+
-    Usage: 
+Usage: 
-    {{< columns class="some-class" >}}
+{{< columns class="some-class" >}}
-    Content
+Content
-    ..column..
+..column..
-    Content
+Content
-    {{< /columns >}}
+{{< /columns >}}
 
 
-    */}}
+*/}}
 
 
 
 
-    

themes/hugoplate/layouts/shortcodes/mdcolumns.html

@@ -0,0 +1,13 @@
+<!-- Columns Container Start -->
+<div class="md:flex {{ if isset .Params "center" }}items-center {{ end }}{{ with .Get "class" }} {{ . }} {{ else }} mt-6 {{ end }}">
+<!-- Split content into columns based on a unique delimiter, e.g., "..column.." -->
+{{ range split (trim .Inner " \n") "..column.." }}
+{{ if ne . "" }} <!-- Check if the column content is not empty -->
+<div class="markdown-inner items-center flex-1 px-4">
+<!-- Convert Markdown column content to HTML -->
+{{ . | markdownify }}
+</div>
+{{ end }}
+{{ end }}
+</div>
+<!-- Columns Container End -->

themes/hugoplate/layouts/shortcodes/section.html

@@ -1,24 +1,9 @@
+{{ with .Get "background-image" }}
+<img src="{{ . }}" class="w-full h-full object-cover hide-on-desktop" style="margin-top:0!important" />
+{{ end }}
 <section class="bg-cover items-center pt-32 pb-32 {{ with .Get "light-text" }}light-text {{ end }} {{ with .Get "classes" }} {{ . }} {{ end }}" style="{{ with .Get "fixed" }}background-attachment: fixed;{{ end }}{{ with .Get "background-image" }}background-image: url('{{ . }}');{{ else }} background-color:{{ .Get "background-color" | safeCSS }}{{ end }}">
 {{ with .Get "title" }}<h1 class="font-bold text-center text-white" style="font-family: 'MontserratVar' !important;font-weight: 700;text-shadow: 0px 0.5px 12px rgba(0, 0, 0, 0.9);">{{ . | markdownify }}</h1>{{ end }}
 <div class="container items-center py-20" style="{{ with .Get "background-color" }}background-color: {{ . | safeCSS }}{{ end }}" >    
 {{ .Inner }}
 </div>
 </section>   
-
-{{/*  
-
-    This shortcode is a wrapper for a section component. It has a default class of "text-gray-700 bg-white" but can be overridden by passing a class attribute.
-
-    Attributes: 
-    1. title
-    2. background-color
-    3. background-image
-    4. light-text
-    5. fixed
-    6. classes
-
-    Usage:
-    {{< section title="This is a section" background-color="#f5f5f5" background-image="https://source.unsplash.com/random/1920x1080" light-text="true" fixed="true" classes="text-center" >}}
-    This is the content of the section
-    {{< /section >}}
-*/}}