WIP: Implement table fragment using markdown

assets/styles/_table.scss

@@ -0,0 +1,4 @@
+table {
+  @extend .table;
+  @extend .table-bordered;
+}

assets/styles/index.scss

@@ -34,4 +34,5 @@ $dropdown-item-padding-x: 1rem;
 @import './modal';
 @import './search';
 @import './toc';
+@import './table';
 @import './syna';

exampleSite/content/fragments/table/code-minimal-table.md

@@ -0,0 +1,24 @@
++++
+fragment = "content"
+weight = 121
++++
+
+<details><summary>Code</summary>
+```+++
+fragment = "table"
+#disabled = false
+date = "2017-10-10"
+weight = 120
+background = "secondary"
+
+title = "Simple Table"
+subtitle= "Simple Markdown table"
+#title_align = "left" # Default is center, can be left, right or center
++++
+
+| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 |
+|----------|----------|------------|-----------|-------------|----------|
+| Row 1 | Value | Long Value | Value | {{< button url="#" color="success" >}}Long Button{{< /button >}} | {{< button color="danger" url="#" >}}Button{{< /button >}} |
+| Row 2 | Value | Value | Long Value | | {{< fontawesome icon="fas fa-download" url="#" >}} |
+```
+</details>

exampleSite/content/fragments/table/code-table.md

@@ -4,84 +4,23 @@ weight = 111
 +++
 
 <details><summary>Code</summary>
-```
-+++
+```+++
 fragment = "table"
 #disabled = false
 date = "2017-10-10"
 weight = 110
 background = "secondary"
 
-title = "Table Fragment"
-subtitle= "Tables are responsive by default"
+title = "Awesome Table"
+subtitle= "Customized table using shortcodes"
 #title_align = "left" # Default is center, can be left, right or center
-
-[header]
-  [[header.values]]
-    text = "Header 1"
-    # hide_on_mobile = true
-
-  [[header.values]]
-    text = "Header 2"
-
-  [[header.values]]
-    text = "Header 3"
-    hide_on_mobile = true
-
-  [[header.values]]
-    text = "Header 4"
-    hide_on_mobile = true
-
-  [[header.values]]
-    text = "Header 5"
-
-  [[header.values]]
-    text = "Header 6"
-
-[[rows]]
-  [[rows.values]]
-    header = "Row 1"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    text = "Long Value"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    button = "Long Button"
-    url = "#"
-    color = "success"
-
-  [[rows.values]]
-    button = "Button"
-    url = "#"
-    color = "danger"
-    align = "center"
-
-[[rows]]
-  [[rows.values]]
-    header = "Row 2"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    text = "Long Value"
-
-  [[rows.values]]
-    text = ""
-
-  [[rows.values]]
-    icon = "fas fa-download"
-    url = "#"
-    align = "center"
 +++
+
+{{< syna table >}}
+| Header 1 | Header 2 | {{< hide-on-mobile >}}Header 3{{< /hide-on-mobile >}} | {{< hide-on-mobile >}}Header 4{{< /hide-on-mobile >}} | Header 5 | Header 6 |
+|----------|----------|------------|-----------|-------------|----------|
+| {{< row-header >}}Row 1{{< /row-header >}} | Value | {{< hide-on-mobile >}}Long Value{{< /hide-on-mobile >}} | {{< hide-on-mobile >}}Value{{< /hide-on-mobile >}} | {{< button url="#" color="success" >}}Long Button{{< /button >}} | {{< align center >}}{{< button color="danger" url="#" >}}Button{{< /button >}}{{< /align >}} |
+| {{< row-header >}}Row 2{{< /row-header >}} | Value | {{< hide-on-mobile >}}Value{{< /hide-on-mobile >}} | {{< hide-on-mobile >}}Long Value{{< /hide-on-mobile >}} | | {{< align center >}}{{< fontawesome icon="fas fa-download" url="#" >}}{{< /align >}} |
+{{< /syna >}}
 ```
 </details>

exampleSite/content/fragments/table/minimal-table.md

@@ -0,0 +1,16 @@
++++
+fragment = "table"
+#disabled = false
+date = "2017-10-10"
+weight = 120
+background = "secondary"
+
+title = "Simple Table"
+subtitle= "Simple Markdown table"
+#title_align = "left" # Default is center, can be left, right or center
++++
+
+| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 |
+|----------|----------|------------|-----------|-------------|----------|
+| Row 1 | Value | Long Value | Value | {{< button url="#" color="success" >}}Long Button{{< /button >}} | {{< button color="danger" url="#" >}}Button{{< /button >}} |
+| Row 2 | Value | Value | Long Value | | {{< fontawesome icon="fas fa-download" url="#" >}} |

exampleSite/content/fragments/table/table.md

@@ -5,74 +5,14 @@ date = "2017-10-10"
 weight = 110
 background = "secondary"
 
-title = "Table Fragment"
-subtitle= "Tables are responsive by default"
+title = "Awesome Table"
+subtitle= "Customized table using shortcodes"
 #title_align = "left" # Default is center, can be left, right or center
-
-[header]
-  [[header.values]]
-    text = "Header 1"
-    # hide_on_mobile = true
-
-  [[header.values]]
-    text = "Header 2"
-
-  [[header.values]]
-    text = "Header 3"
-    hide_on_mobile = true
-
-  [[header.values]]
-    text = "Header 4"
-    hide_on_mobile = true
-
-  [[header.values]]
-    text = "Header 5"
-
-  [[header.values]]
-    text = "Header 6"
-
-[[rows]]
-  [[rows.values]]
-    header = "Row 1"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    text = "Long Value"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    button = "Long Button"
-    url = "#"
-    color = "success"
-
-  [[rows.values]]
-    button = "Button"
-    url = "#"
-    color = "danger"
-    align = "center"
-
-[[rows]]
-  [[rows.values]]
-    header = "Row 2"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    text = "Value"
-
-  [[rows.values]]
-    text = "Long Value"
-
-  [[rows.values]]
-    text = ""
-
-  [[rows.values]]
-    icon = "fas fa-download"
-    url = "#"
-    align = "center"
 +++
+
+{{< syna table >}}
+| Header 1 | Header 2 | {{< hide-on-mobile >}}Header 3{{< /hide-on-mobile >}} | {{< hide-on-mobile >}}Header 4{{< /hide-on-mobile >}} | Header 5 | Header 6 |
+|----------|----------|------------|-----------|-------------|----------|
+| {{< row-header >}}Row 1{{< /row-header >}} | Value | {{< hide-on-mobile >}}Long Value{{< /hide-on-mobile >}} | {{< hide-on-mobile >}}Value{{< /hide-on-mobile >}} | {{< button url="#" color="success" >}}Long Button{{< /button >}} | {{< align center >}}{{< button color="danger" url="#" >}}Button{{< /button >}}{{< /align >}} |
+| {{< row-header >}}Row 2{{< /row-header >}} | Value | {{< hide-on-mobile >}}Value{{< /hide-on-mobile >}} | {{< hide-on-mobile >}}Long Value{{< /hide-on-mobile >}} | | {{< align center >}}{{< fontawesome icon="fas fa-download" url="#" >}}{{< /align >}} |
+{{< /syna >}}

exampleSite/resources/_gen/assets/scss/styles/index.scss_a4e369375f17bb89f2019364cbe7a830.json

@@ -1 +1 @@
-{"Target":"style.min.8cd921f566ef5c2d49bea3979d1ae73c77f6e9d9720b0a89f0c6ec27152a2b59.css","MediaType":"text/css","Data":{"Integrity":"sha256-jNkh9WbvXC1JvqOXnRrnPHf26dlyCwqJ8MbsJxUqK1k="}}
+{"Target":"style.min.e83b36e895faa51784c651662bd2e9e0d2113974e5db61a818607d9e25e4e2f2.css","MediaType":"text/css","Data":{"Integrity":"sha256-6Ds26JX6pReExlFmK9Lp4NIROXTl22GoGGB9niXk4vI="}}

layouts/partials/fragments/table.html

@@ -5,13 +5,11 @@
   {{- partial "helpers/section-header.html" (dict "self" $self "bg" $bg "params" .Params) }}
   <div class="row align-items-center text-center justify-content-end">
     <div class="col-12 order-lg-1 text-center">
-      {{- if .Params.rows }}
-        <div class="row justify-content-center">
-          <div class="col table-responsive">
-            {{ partial "helpers/table.html" (dict "header" .Params.header "rows" .Params.rows "page_scratch" .page_scratch "self" $self) }}
-          </div>
+      <div class="row justify-content-center">
+        <div class="col table-responsive">
+          {{ $self.Content }}
         </div>
-      {{- end }}
+      </div>
     </div>
   </div>
 {{- partial "helpers/container.html" (dict "end" true "in_slot" .in_slot) -}}

layouts/shortcodes/align.html

@@ -0,0 +1,2 @@
+{{- $align := .Get 0 -}}
+{{- printf "<div class=\"%s\">%s</div>" (cond (in (slice "left" "center" "right") $align) (printf " text-%s" $align) "") .Inner | safeHTML -}}

layouts/shortcodes/button.html

@@ -0,0 +1,4 @@
+{{- $color := (.Get "color") | default "primary" -}}
+{{- $url := .Get "url" -}}
+
+{{- printf "<a class=\"btn btn-%s %s\" href=\"%s\">%s</a>" $color (cond (hasPrefix $url "#") "anchor" "") ($url | relLangURL) .Inner | safeHTML -}}

layouts/shortcodes/fontawesome.html

@@ -0,0 +1 @@
+{{- printf "<a href=\"%s\"><i class=\"%s fa-2x\"></i></a>" (.Get "url") (.Get "icon") | safeHTML -}}

layouts/shortcodes/hide-on-mobile.html

@@ -0,0 +1 @@
+{{- printf "<div class=\"hide-on-mobile\">%s</div>" .Inner | safeHTML -}}

layouts/shortcodes/row-header.html

@@ -0,0 +1 @@
+{{- printf "<th>%s</th>" .Inner | safeHTML -}}

layouts/shortcodes/syna.html

@@ -0,0 +1,8 @@
+{{ if eq (.Get 0) "table" }}
+  {{ $content := .Inner | markdownify }}
+  {{ $content := replace $content "<table>" "<table class='table table-bordered'>" }}
+  {{ $content := replace $content "</table>" "</table></div>" }}
+  {{ $content := replaceRE "<(th|td)><th>(.*)</th></(th|td)>" "<th>$2</th>" $content }}
+  {{ $content := replaceRE "<(th|td)><div class=['\"]hide-on-mobile['\"]>(.*)</div></(th|td)>" "<$1 class='hide-on-mobile'>$2</$3>" $content }}
+  {{ $content | safeHTML }}
+{{ end }}