This repository has been archived by the owner on Oct 13, 2021. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add custom list implementation along with notes for raw HTML lists (#209
- Loading branch information
1 parent
577a7d2
commit 2a27333
Showing
3 changed files
with
198 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" >}} | ||
<ul> | ||
<li> | ||
Sample nested | ||
<ol style="list-style-type: lower-roman"> | ||
<li>Sample content as shortcodes:</li> | ||
<ul style="list-style-type: circle"> | ||
<li>Test 1</li> | ||
<li>Test 2</li> | ||
</ul> | ||
<li>Test 2</li> | ||
<li> | ||
<p>Sample content as markdown</p> | ||
<ul> | ||
<li>Test</li> | ||
<li>Test2</li> | ||
</ul> | ||
</li> | ||
</ol> | ||
</li> | ||
<li>Second bullet</li> | ||
</ul> | ||
{{</ grid/div >}} | ||
``` | ||
|
||
Output: | ||
{{< grid/div isMarkdown="false" >}} | ||
<ul> | ||
<li> | ||
Sample nested | ||
<ol style="list-style-type: lower-roman"> | ||
<li>Sample content as shortcodes:</li> | ||
<ul style="list-style-type: circle"> | ||
<li>Test 1</li> | ||
<li>Test 2</li> | ||
</ul> | ||
<li>Test 2</li> | ||
<li> | ||
<p>Sample content as markdown</p> | ||
<ul> | ||
<li>Test</li> | ||
<li>Test2</li> | ||
</ul> | ||
</li> | ||
</ol> | ||
</li> | ||
<li>Second bullet</li> | ||
</ul> | ||
{{</ grid/div>}} | ||
|
||
## 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 >}} | ||
{{< html/li >}}Test 2{{</ html/li >}} | ||
{{< html/li >}}Test 3{{</ html/li >}} | ||
{{</ html/list_wrapper >}} | ||
|
||
|
||
## 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 >}} | ||
{{< html/li >}}Test 2{{</ html/li >}} | ||
{{< html/li >}}Test 3{{</ html/li >}} | ||
{{</ html/list_wrapper >}} | ||
|
||
|
||
## 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 >}} | ||
{{< html/li >}}Test 2{{</ html/li >}} | ||
{{< html/li >}}Test 3{{</ html/li >}} | ||
{{</ html/list_wrapper >}} | ||
|
||
|
||
## 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 >}} | ||
{{< html/li >}}Test 2{{</ html/li >}} | ||
{{< html/li >}}Test 3{{</ html/li >}} | ||
{{</ html/list_wrapper >}} | ||
|
||
## 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/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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<li{{with .Get ""}} class="{{ . }}"{{ end }}>{{ .Inner | markdownify}}</li> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
|
||
{{ $listType := .Get "listType" | default "ul" }} | ||
{{ $listClass := .Get "listClass" }} | ||
{{ $listStyle := .Get "listStyle" }} | ||
|
||
{{ if eq $listType "ul" }} | ||
<ul{{ with $listClass }} class="{{ . }}"{{ end }}{{ with $listStyle }} style="list-style-type: {{ . }}"{{ end }}> | ||
{{ .Inner }} | ||
</ul> | ||
{{ else }} | ||
<ol{{ with $listClass }} class="{{ . }}"{{ end }}{{ with $listStyle }} style="list-style-type: {{ . }}"{{ end }}> | ||
{{ .Inner }} | ||
</ol> | ||
{{ end }} |