Support named parameters for applicable shortcodes

.gitignore

@@ -9,3 +9,5 @@ public
 
 # vim droppings
 .*.swp
+
+.DS_Store

doc/content/about/theme-team.toml

@@ -1,49 +1,59 @@
 [[item]]
 type = 'card'
 classcard = 'text-center'
-body = '''{{< image >}}
-src = 'https://avatars.githubusercontent.com/u/601365?v=4"'
-alt = 'Avatar of Adam Porter'
-{{< /image >}}
-Adam Porter'''
+body = '''
+{{< image
+    src='https://avatars.githubusercontent.com/u/601365?v=4"'
+    alt="Avatar of Adam Porter"
+>}}
+Adam Porter
+'''
 link = 'https://github.com/alphapapa'
 
 [[item]]
 type = 'card'
 classcard = 'text-center'
-body = '''{{< image >}}
-src = 'https://avatars.githubusercontent.com/u/352264?u=1fd523aa28b0451454989400579d97a8c1bc1b9a&v=4"'
-alt = 'Avatar of Brian Hawthorne'
-{{< /image >}}
-Brian Hawthorne'''
+body = '''
+{{< image
+    src='https://avatars.githubusercontent.com/u/352264?u=1fd523aa28b0451454989400579d97a8c1bc1b9a&v=4"'
+    alt="Avatar of Brian Hawthorne"
+>}}
+Brian Hawthorne
+'''
 link = 'https://github.com/brianhawthorne'
 
 [[item]]
 type = 'card'
 classcard = 'text-center'
-body = '''{{< image >}}
-src = 'https://avatars.githubusercontent.com/u/123428?v=4"'
-alt = 'Avatar of Jarrod Millman'
-{{< /image >}}
-Jarrod Millman'''
+body = '''
+{{< image
+    src='https://avatars.githubusercontent.com/u/123428?v=4"'
+    alt="Avatar of Jarrod Millman"
+>}}
+Jarrod Millman
+'''
 link = 'https://github.com/jarrodmillman'
 
 [[item]]
 type = 'card'
 classcard = 'text-center'
-body = '''{{< image >}}
-src = 'https://avatars.githubusercontent.com/u/45071?u=c779b5e06448fbc638bc987cdfe305c7f9a7175e&v=4"'
-alt = 'Avatar of Stefan van der Walt'
-{{< /image >}}
-Stefan van der Walt'''
+body = '''
+{{< image
+    src='https://avatars.githubusercontent.com/u/45071?u=c779b5e06448fbc638bc987cdfe305c7f9a7175e&v=4"'
+    alt="Avatar of Stefan van der Walt"
+>}}
+Stefan van der Walt
+'''
 link = 'https://github.com/stefanv'
 
 [[item]]
 type = 'card'
 classcard = 'text-center'
-body = '''{{< image >}}
-src = 'https://avatars.githubusercontent.com/u/23188539?u=64445b52dbf3f75de8006ed4264fdd2afaed97a3&v=4"'
-alt = 'Avatar of Pamphile Roy'
-{{< /image >}}
-Pamphile Roy'''
+body = '''
+{{< image
+    src='https://avatars.githubusercontent.com/u/23188539?u=64445b52dbf3f75de8006ed4264fdd2afaed97a3&v=4"'
+    alt="Avatar of Pamphile Roy"
+>}}
+Pamphile Roy
+'''
 link = 'https://github.com/tupui'

doc/content/user_guide/web-components.md

@@ -50,40 +50,51 @@ success outline
 Here are some of the available button-style links, also using semantic
 colors:
 
-{{< button info >}}
-label: Info
-link: http://example.com/
-{{< /button >}}
-
-{{< button success >}}
-label: Success
-link: http://example.com/
-{{< /button >}}
-
-{{< button warning >}}
-label: Warning
-link: http://example.com/
-{{< /button >}}
-
-{{< button danger >}}
-label: Danger
-link: http://example.com/
-{{< /button >}}
-
-{{< button muted >}}
-label: Muted
-link: http://example.com/
-{{< /button >}}
-
-{{< button light >}}
-label: Light
-link: http://example.com/
-{{< /button >}}
-
-{{< button dark >}}
-label: Dark
-link: http://example.com/
-{{< /button >}}
+<!-- prettier-ignore-start -->
+
+{{< button
+    style="info"
+    label="Info"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="success"
+    label="Success"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="warning"
+    label="Warning"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="danger"
+    label="Danger"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="muted"
+    label="Muted"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="light"
+    label="Light"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="dark"
+    label="Dark"
+    link="http://example.com/"
+>}}
+
+<!-- prettier-ignore-end -->
 
 {{< admonition note >}}
 [Sphinx Design
@@ -104,6 +115,8 @@ buttons will automatically use the custom color.
 
 ## Cards
 
+<!-- prettier-ignore-start -->
+
 {{< grid >}}
 
 {{< card >}}
@@ -167,6 +180,8 @@ footer = 'Footer'
 
 {{< /grid >}}
 
+<!-- prettier-ignore-end -->
+
 ## Tabs
 
 Code example from the PyData Sphinx Theme's kitchen sink:

layouts/shortcodes/button.html

@@ -2,83 +2,97 @@
 
 doc: Create button links in various styles.
 
-{{< button info >}}
-label: Info
-link: http://example.com/
-{{< /button >}}
-
-{{< button success >}}
-label: Success
-link: http://example.com/
-{{< /button >}}
-
-{{< button warning >}}
-label: Warning
-link: http://example.com/
-{{< /button >}}
-
-{{< button danger >}}
-label: Danger
-link: http://example.com/
-{{< /button >}}
-
-{{< button muted >}}
-label: Muted
-link: http://example.com/
-{{< /button >}}
-
-{{< button light >}}
-label: Light
-link: http://example.com/
-{{< /button >}}
-
-{{< button dark >}}
-label: Dark
-link: http://example.com/
-{{< /button >}}
+{{< button
+    style="info"
+    label="Info"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="success"
+    label="Success"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="warning"
+    label="Warning"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="danger"
+    label="Danger"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="muted"
+    label="Muted"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="light"
+    label="Light"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="dark"
+    label="Dark"
+    link="http://example.com/"
+>}}
 
 <p>
 
-{{< button outline-info >}}
-label: Info
-link: http://example.com/
-{{< /button >}}
-
-{{< button outline-success >}}
-label: Success
-link: http://example.com/
-{{< /button >}}
-
-{{< button outline-warning >}}
-label: Warning
-link: http://example.com/
-{{< /button >}}
-
-{{< button outline-danger >}}
-label: Danger
-link: http://example.com/
-{{< /button >}}
-
-{{< button outline-muted >}}
-label: Muted
-link: http://example.com/
-{{< /button >}}
-
-{{< button outline-light >}}
-label: Light
-link: http://example.com/
-{{< /button >}}
-
-{{< button outline-dark >}}
-label: Dark
-link: http://example.com/
-{{< /button >}}
+{{< button
+    style="outline-info"
+    label="Info"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="outline-success"
+    label="Success"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="outline-warning"
+    label="Warning"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="outline-danger"
+    label="Danger"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="outline-muted"
+    label="Muted"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="outline-light"
+    label="Light"
+    link="http://example.com/"
+>}}
+
+{{< button
+    style="outline-dark"
+    label="Dark"
+    link="http://example.com/"
+>}}
 
 */}}
 
-{{ $button_style := .Get 0 }}
-{{ $button_data := transform.Unmarshal .Inner }}
-{{ $button_label := $button_data.label }}
-{{ $button_link := $button_data.link }}
+{{- $button := dict -}}
+{{- range $key, $value := .Params -}}
+{{- $button = merge $button (dict $key $value) -}}
+{{- end -}}
 
-<a href="{{$button_link}}"><span class="sd-btn sd-btn-{{$button_style}}">{{$button_label}}</span></a>
+<a href="{{$button.link}}"><span class="sd-btn sd-btn-{{$button.style}}">{{$button.label}}</span></a>