Add figure shortcode with PST styling

jarrodmillman · jarrodmillman · commit 1fba82e3b4aa · 2024-03-14T08:39:01.000-07:00
diff --git a/assets/theme-css/pst/content/_figures.scss b/assets/theme-css/pst/content/_figures.scss
@@ -0,0 +1,25 @@
+figure {
+  a.headerlink {
+    // So that header link doesn't push caption to be off-center.
+    position: absolute;
+    font-size: inherit;
+  }
+  // Default headerlink hover doesn't trigger on figures
+  &:hover a.headerlink {
+    visibility: visible;
+  }
+
+  figcaption {
+    font-family: var(--pst-font-family-heading);
+    font-weight: var(--pst-font-weight-caption);
+    color: var(--pst-color-text-muted);
+    margin-left: auto;
+    margin-right: auto;
+
+    table.table {
+      width: fit-content;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}
diff --git a/assets/theme-css/pst/pydata-sphinx-theme.scss b/assets/theme-css/pst/pydata-sphinx-theme.scss
@@ -52,7 +52,7 @@
 @import "./content/admonitions";
 //@import "./content/api";
 @import "./content/code";
-//@import "./content/figures";
+@import "./content/figures";
 //@import "./content/footnotes";
 //@import "./content/hacks";
 @import "./content/lists";
diff --git a/doc/content/features.md b/doc/content/features.md
@@ -116,16 +116,6 @@ By default, `javaScript` points to the server at
 `https://views.scientific-python.org`. Contact the Scientific
 Python team to have your analytics hosted there.
 
-## Figures
-
-{{< figure src="https://source.unsplash.com/200x200/daily?cute+puppy"
-alt="Cute puppies"
-target="https://unsplash.com/"
-caption="Cute puppies"
-loading="lazy"
-height=200
-width=200 >}}
-
 ## Icons
 
 You can add custom icons (for use in, e.g., the footer) by downloading Material-UI SVGs from [Google Fonts](https://fonts.google.com/icons) to the `/assets/icons` directory.
diff --git a/layouts/partials/_elements/image.html b/layouts/partials/_elements/image.html
@@ -1,4 +1,4 @@
-{{- if .data.target -}}<a href="{{ .data.target }}">{{- end -}}
+{{ if .data.target -}}<a href="{{ .data.target }}">{{ end -}}
 <img src="{{ .data.src }}" alt="{{ .data.alt }}"
   {{- with .data.align }} class="align-{{ . }}"{{ end -}}
   {{- with .data.width }} width="{{ . }}"{{ end -}}
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
@@ -0,0 +1,53 @@
+{{/*
+
+doc: Figures
+
+{{< figure >}}
+src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
+alt = 'Cute puppies'
+height = 200
+width = 200
+caption = 'A figure is an image with a caption and/or a legend:'
+legend = '''
+**TODO: need to convert yamltotable to tomltotable**
+
+This paragraph is also part of the legend.
+'''
+{{< /figure >}}
+
+{{< figure >}}
+src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
+alt = 'Cute puppies'
+align = 'left'
+height = 150
+width = 150
+caption = '''
+A figure with left alignment.
+'''
+{{< /figure >}}
+
+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.
+
+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.
+
+*/}}
+
+{{- $figure := .Inner | transform.Unmarshal -}}
+{{- $align := default "default" $figure.align -}}
+{{- $id := printf "id%03d" $.Ordinal -}}
+<figure class="align-{{ $align }}" id="{{ $id }}">
+{{- $m := newScratch -}}
+{{- $m.Set "image" $figure -}}
+{{- $m.SetInMap "image" "align" "center" -}}
+{{ partial "_elements/image.html" (dict "data" $m.Values.image) }}
+<figcaption>
+<p><span class="caption-text">
+{{- $figure.caption | markdownify -}}
+</span><a class="headerlink" href="#{{ $id  }}" title="Link to this image">#</a></p>
+{{- with $figure.legend }}
+<div class="legend">
+{{ . | markdownify -}}
+</div>
+{{- end }}
+</figcaption>
+</figure>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-{{- if .data.target -}}<a href="{{ .data.target }}">{{- end -}}`
	`1`	`+{{ if .data.target -}}<a href="{{ .data.target }}">{{ end -}}`
`2`	`2`	`<img src="{{ .data.src }}" alt="{{ .data.alt }}"`
`3`	`3`	`{{- with .data.align }} class="align-{{ . }}"{{ end -}}`
`4`	`4`	`{{- with .data.width }} width="{{ . }}"{{ end -}}`