If the site is deployed to a different root path (e.g. /photos/), the absolute
/images path is broken. Use a relative path instead since the CSS and the images
are both underneath the static directory.
The SHORTCODE.Ordinal method "returns the zero-based ordinal of the shortcode in
relation to its parent." (https://gohugo.io/methods/shortcode/ordinal/)
This is a problem if the same shortcode is used on the different page through
different paths, e.g. once on the page itself and once by a partial (e.g. a
header or footer).
Instead of just using the .Ordinal by itself, use a hash of the parent file
_and_ the ordinal, which gives us a properly unique identifier.
Embedding a Leaflet map within a Tailwind Typography-styled <article> leads to a
very subtle (the higher the zoom the subtler) vertical map offset. It is
particularly noticeable in combination with track overlays where tracks and map
are suddenly misaligned.
The root cause is this part of the Tailwind-generated stylesheet:
.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
margin-top: 2em;
margin-bottom: 2em
}
It adds a 2em margin to all <img> element and, because Leaflet tiles are images,
that leads to a vertical offset.
The obvious solution is to not embed maps in a <article class="prose">. Another
workaround is to add a "not-prose" class to the map container:
<div id="map_container" class="not-prose">…</div>
While the above should reliably prevent any other Tailwind shenanigans, forcing
the <img> margin to be zero should work well enough for now.
See commit 200335d594893f9a1b405279e53533e5024ee0eb in quip-maps for an
explanation:
demo: css: Fix attribution moving to bottom when map not resizeable
This contains a fix for the elevation profile choking on .gpx files containing
waypoints (a Leaflet.Heightgraph bug) and disables waypoint rendering by
default.
