diff --git a/.gitignore b/.gitignore index e0d12fb7..0d1c931c 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,5 @@ public # vim droppings .*.swp + +.DS_Store diff --git a/doc/content/about/theme-team.toml b/doc/content/about/theme-team.toml index 2c377af9..97023360 100644 --- a/doc/content/about/theme-team.toml +++ b/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' diff --git a/doc/content/user_guide/web-components.md b/doc/content/user_guide/web-components.md index 25d5ca23..8001b679 100644 --- a/doc/content/user_guide/web-components.md +++ b/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 >}} + + +{{< 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/" +>}} + + {{< admonition note >}} [Sphinx Design @@ -104,6 +115,8 @@ buttons will automatically use the custom color. ## Cards + + {{< grid >}} {{< card >}} @@ -167,6 +180,8 @@ footer = 'Footer' {{< /grid >}} + + ## Tabs Code example from the PyData Sphinx Theme's kitchen sink: diff --git a/layouts/shortcodes/button.html b/layouts/shortcodes/button.html index e8d03713..a35507f9 100644 --- a/layouts/shortcodes/button.html +++ b/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/" +>}}

-{{< 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 -}} -{{$button_label}} +{{$button.label}} diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index f071ce07..a515dd70 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -2,36 +2,28 @@ doc: Figures -{{< figure >}} -src = 'https://source.unsplash.com/200x200/daily?cute+puppy' -alt = 'Cute puppies' -height = 200 -width = 200 -title = 'Figure title' -attribution = 'Figure Credits: Daily cute puppy image from unslash.com' -attributionlink = 'https://source.unsplash.com/200x200/daily?cute+puppy' -caption = ''' -A figure is an image with a caption. Figures may also include a tile, legend, and/or attribution. -''' -legend = ''' -**TODO: use tomltotable (https://github.com/scientific-python/scientific-python-hugo-theme/pull/548)** - -This paragraph is also part of the legend. -''' -{{< /figure >}} - -{{< figure >}} -src = 'https://source.unsplash.com/200x200/daily?cute+puppy' -alt = 'Cute puppies' -attribution = 'from unslash.com' -attributionlink = 'https://source.unsplash.com/200x200/daily?cute+puppy' -align = 'left' -height = 150 -width = 150 -caption = ''' -A figure with left alignment. -''' -{{< /figure >}} +{{< figure + src="https://images.unsplash.com/photo-1546238232-20216dec9f72" + alt="Cute puppies" + height=200 + width=400 + title="Figure title" + attribution="Figure Credits: Cute puppies image from unsplash.com" + attributionlink="https://images.unsplash.com/photo-1546238232-20216dec9f72" + caption="A figure is an image with a caption. Figures may also include a tile, legend, and/or attribution." + legend="**TODO: use tomltotable (https://github.com/scientific-python/scientific-python-hugo-theme/pull/548)**
This paragraph is also part of the legend." +>}} + +{{< figure + src="https://images.unsplash.com/photo-1546238232-20216dec9f72" + alt="Cute puppies" + attribution="Figure Credits: Cute puppies image from unsplash.com" + attributionlink="https://images.unsplash.com/photo-1546238232-20216dec9f72" + align="left" + height=150 + width=300 + caption="A figure with left alignment." +>}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. @@ -39,14 +31,19 @@ */}} -{{- $figure := .Inner | transform.Unmarshal -}} +{{- $figure := dict -}} + +{{- range $key, $value := .Params -}} +{{- $figure = merge $figure (dict $key $value) -}} +{{- end -}} + {{- $align := default "default" $figure.align -}} {{- $id := printf "id%03d" $.Ordinal -}} +

-{{- $m := newScratch -}} -{{- $m.Set "image" $figure -}} -{{- $m.SetInMap "image" "align" "center" -}} -{{ partial "_elements/image.html" (dict "data" $m.Values.image) }} +{{/* Create a clean copy of figure data with align center for image */}} +{{- $image := merge $figure (dict "align" "center") -}} +{{ partial "_elements/image.html" (dict "data" $image) }}
{{- with $figure.title -}} {{ . }}#
@@ -55,7 +52,7 @@ {{- with $figure.attributionlink -}}{{- end -}}{{- $figure.attribution -}}{{- if $figure.attributionlink -}}{{- end -}} {{- end }}

-{{- $figure.caption | markdownify -}} +{{- $figure.caption | markdownify | plainify -}} {{- with $figure.legend }}

diff --git a/layouts/shortcodes/grid.html b/layouts/shortcodes/grid.html index 5f1b2cb6..0468c4c5 100644 --- a/layouts/shortcodes/grid.html +++ b/layouts/shortcodes/grid.html @@ -66,30 +66,35 @@ [[item]] type = 'card' header = 'A clickable image card' -link = 'https://example.com' -body = '''{{< image >}} -src = 'https://source.unsplash.com/200x200/daily?cute+puppy' -alt = 'Cute puppies' -{{< /image >}}''' +link='https://example.com' +body=''' +{{< image + src="https://images.unsplash.com/photo-1546238232-20216dec9f72" + alt="Cute puppies" +>}} +''' [[item]] type = 'card' classcard = 'text-center' link = 'https://example.com' -body = '''{{< image >}} -src = 'https://source.unsplash.com/200x200/daily?cute+puppy' -alt = 'Cute puppies' -{{< /image >}} +body = ''' +{{< image + src="https://images.unsplash.com/photo-1546238232-20216dec9f72" + alt="Cute puppies" +>}} A clickable figure card''' [[item]] type = 'card' link = 'https://example.com' -body = '''{{< image >}} -src = 'https://source.unsplash.com/200x200/daily?cute+puppy' -alt = 'Cute puppies' -{{< /image >}}''' +body = ''' +{{< image + src="https://images.unsplash.com/photo-1546238232-20216dec9f72" + alt="Cute puppies" +>}} +''' footer = 'A clickable figure card' {{< /grid >}} diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html index 150cde29..9117810b 100644 --- a/layouts/shortcodes/image.html +++ b/layouts/shortcodes/image.html @@ -2,31 +2,33 @@ doc: Images -{{< image >}} -src = 'https://source.unsplash.com/200x200/daily?cute+puppy' -alt = 'Cute puppies' -{{< /image >}} +{{< image + src="https://images.unsplash.com/photo-1546238232-20216dec9f72" + alt="Cute puppies" + height=200 + width=400 +>}} A clickable image: -{{< image >}} -src = 'https://source.unsplash.com/200x200/daily?cute+puppy' -alt = 'Cute puppies' -target = 'https://unsplash.com/' -height = 200 -width = 200 -{{< /image >}} +{{< image + src="https://images.unsplash.com/photo-1546238232-20216dec9f72" + alt="Cute puppies" + target="https://unsplash.com/" + height=200 + width=400 +>}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -{{< image >}} -src = 'https://source.unsplash.com/200x200/daily?cute+puppy' -alt = 'Cute puppies' -align = 'right' -height = 200 -width = 200 -loading = 'lazy' -{{< /image >}} +{{< image + src="https://images.unsplash.com/photo-1546238232-20216dec9f72" + alt="Cute puppies" + align="right" + height=200 + width=400 + loading="lazy" +>}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. @@ -34,5 +36,8 @@ */}} -{{- $data := .Inner | transform.Unmarshal -}} -{{- partial "_elements/image.html" (dict "data" $data) -}} +{{- $image := dict -}} +{{- range $key, $value := .Params -}} +{{- $image = merge $image (dict $key $value) -}} +{{- end -}} +{{- partial "_elements/image.html" (dict "data" $image) -}} diff --git a/layouts/shortcodes/sidebar.html b/layouts/shortcodes/sidebar.html index 85e1949c..b358227f 100644 --- a/layouts/shortcodes/sidebar.html +++ b/layouts/shortcodes/sidebar.html @@ -3,14 +3,17 @@ doc: Create sidebars {{< sidebar title="Ch’ien / The Creative" >}} + Lorem ipsum dolor sit amet, consectetur adipisicing elit. -{{< image >}} -src = 'https://source.unsplash.com/200x200/daily?cute+puppy' -alt = 'Cute puppies' -align = 'center' -{{< /image >}} + +{{< image + src="https://images.unsplash.com/photo-1546238232-20216dec9f72" + alt="Cute puppies" + align="center" +>}} Lorem ipsum dolor sit amet, consectetur adipisicing elit. + {{< /sidebar >}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor diff --git a/tools/render_shortcode_docs.py b/tools/render_shortcode_docs.py index 5f8e03a7..f1522636 100644 --- a/tools/render_shortcode_docs.py +++ b/tools/render_shortcode_docs.py @@ -47,8 +47,10 @@ def shortcode_doc(fn): example = ( code.replace("{{< ", "{{}}", " */>}}") + .replace("\n>}}", "\n*/>}}") .replace("{{% ", "{{%/* ") .replace(" %}}", " */%}}") + .replace("\n%}}", "\n*/%}}") ) # Process rendering options. diff --git a/tools/team_query.py b/tools/team_query.py index 10c86aaa..70eb5be0 100644 --- a/tools/team_query.py +++ b/tools/team_query.py @@ -66,10 +66,11 @@ def api(query): [[item]] type = 'card' classcard = 'text-center' -body = '''{{< image >}} -src = '${avatarUrl}"' -alt = 'Avatar of ${name}' -{{< /image >}} +body = ''' +{{< image + src="${avatarUrl}" + alt="Avatar of ${name}" +>}} ${name}''' link = '${url}' """