From 9b0c5eb2c4390a76189ee25812f055744f5d5cc8 Mon Sep 17 00:00:00 2001 From: Martin Lowe Date: Mon, 15 Mar 2021 13:36:49 -0400 Subject: [PATCH] Add custom list implementation along with notes for raw HTML lists Signed-off-by: Martin Lowe --- .../content/components/list_wrapper.md | 183 ++++++++++++++++++ layouts/shortcodes/html/li.html | 1 + layouts/shortcodes/html/list_wrapper.html | 14 ++ 3 files changed, 198 insertions(+) create mode 100644 exampleSite/content/components/list_wrapper.md create mode 100644 layouts/shortcodes/html/li.html create mode 100644 layouts/shortcodes/html/list_wrapper.html diff --git a/exampleSite/content/components/list_wrapper.md b/exampleSite/content/components/list_wrapper.md new file mode 100644 index 0000000..c500a6e --- /dev/null +++ b/exampleSite/content/components/list_wrapper.md @@ -0,0 +1,183 @@ +--- +title: "List wrapper" +date: 2019-06-23T15:50:36-04:00 +description: "" +categories: [] +keywords: [] +slug: "" +aliases: [] +toc: false +draft: false +show_featured_story: false +show_featured_footer: false +--- + +The list wrapper component allows for more complex HTML lists to be created while retaining the ability to input markdown content into list items. While the List wrapper is the recommended way of getting complex list outputs to keep markdown rendering more cleanly, a secondary option is also available to groups more experienced with raw HTML code. + +_Note: all code samples in this page have had short code `<` and `>` characters replaced with `<` and `>` to ensure that it is rendered correctly in preview. When using this code, these characters should be replaced._ + +## Custom list (raw HTML using grid/div component) + +Shortcode: +```text +{{< grid/div isMarkdown="false" >}} + +{{</ grid/div >}} +``` + +Output: +{{< grid/div isMarkdown="false" >}} + +{{}} + +## Basic unordered list + +Shortcode: +```text +{{< html/list_wrapper >}} + {{< html/li >}}Test 1{{</ html/li >}} + {{< html/li >}}Test 2{{</ html/li >}} + {{< html/li >}}Test 3{{</ html/li >}} +{{</ html/list_wrapper >}} +``` + +{{< html/list_wrapper >}} + {{< html/li >}}Test 1{{}} + {{< html/li >}}Test 2{{}} + {{< html/li >}}Test 3{{}} +{{}} + + +## Basic ordered list + +Shortcode: +```text +{{< html/list_wrapper listType="ol" >}} + {{< html/li >}}Test 1{{</ html/li >}} + {{< html/li >}}Test 2{{</ html/li >}} + {{< html/li >}}Test 3{{</ html/li >}} +{{</ html/list_wrapper >}} +``` + +Output: +{{< html/list_wrapper listType="ol" >}} + {{< html/li >}}Test 1{{}} + {{< html/li >}}Test 2{{}} + {{< html/li >}}Test 3{{}} +{{}} + + +## Basic unordered list with list style + +Shortcode: +```text +{{< html/list_wrapper listStyle="circle" >}} + {{< html/li >}}Test 1{{</ html/li >}} + {{< html/li >}}Test 2{{</ html/li >}} + {{< html/li >}}Test 3{{</ html/li >}} +{{</ html/list_wrapper >}} +``` + +Output: +{{< html/list_wrapper listStyle="circle" >}} + {{< html/li >}}Test 1{{}} + {{< html/li >}}Test 2{{}} + {{< html/li >}}Test 3{{}} +{{}} + + +## Basic ordered list with list style + +Shortcode: +```text +{{< html/list_wrapper listType="ol" listStyle="lower-roman" >}} + {{< html/li >}}Test 1{{</ html/li >}} + {{< html/li >}}Test 2{{</ html/li >}} + {{< html/li >}}Test 3{{</ html/li >}} +{{</ html/list_wrapper >}} +``` + +Output: +{{< html/list_wrapper listType="ol" listStyle="lower-roman" >}} + {{< html/li >}}Test 1{{}} + {{< html/li >}}Test 2{{}} + {{< html/li >}}Test 3{{}} +{{}} + +## Complex/nested lists + +Example of mixed shortcode and markdown lists. Supports shortcode and markdown being fully interchangable + +Shortcode: +```text +- Sample nested + {{< html/list_wrapper listType="ol" listStyle="lower-roman" >}} + {{< html/li >}}Sample content as shortcodes:{{</ html/li >}} +{{< html/list_wrapper listStyle="circle" >}} + {{< html/li >}}Test 1{{</ html/li >}} + {{< html/li >}}Test 2{{</ html/li >}} +{{</ html/list_wrapper >}} + {{< html/li >}}Test 2{{</ html/li >}} + {{< html/li >}}Sample content as markdown +- Test +- Test2 + {{</ html/li >}} + {{</ html/list_wrapper >}} +- Second bullet +``` + +Output: +- Sample nested + {{< html/list_wrapper listType="ol" listStyle="lower-roman" >}} + {{< html/li >}}Sample content as shortcodes:{{}} +{{< html/list_wrapper listStyle="circle" >}} + {{< html/li >}}Test 1{{}} + {{< html/li >}}Test 2{{}} +{{}} + {{< html/li >}}Test 2{{}} + {{< html/li >}}Sample content as markdown +- Test +- Test2 + {{}} + {{}} +- Second bullet diff --git a/layouts/shortcodes/html/li.html b/layouts/shortcodes/html/li.html new file mode 100644 index 0000000..942c1bf --- /dev/null +++ b/layouts/shortcodes/html/li.html @@ -0,0 +1 @@ +{{ .Inner | markdownify}} \ No newline at end of file diff --git a/layouts/shortcodes/html/list_wrapper.html b/layouts/shortcodes/html/list_wrapper.html new file mode 100644 index 0000000..7150125 --- /dev/null +++ b/layouts/shortcodes/html/list_wrapper.html @@ -0,0 +1,14 @@ + +{{ $listType := .Get "listType" | default "ul" }} +{{ $listClass := .Get "listClass" }} +{{ $listStyle := .Get "listStyle" }} + +{{ if eq $listType "ul" }} + + {{ .Inner }} + +{{ else }} + + {{ .Inner }} + +{{ end }} \ No newline at end of file