Themed images #24
Merged
Themed images #24
Conversation
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
Collaborator
colegoldsmith
commented
Oct 5, 2023
colegoldsmith
commented
colegoldsmith
requested review from
mlr,
josuebran,
eric-schneider and
Estela-Beatriz
There was a problem hiding this comment.
Good news and bad news.
Good news
The .for-light and .for-dark roles worked like a charm! I went ahead and modified your example syntax with an alternate method for defining the role which reduces the number of lines required to implement a light-dark pair of images.
Bad news
While the SVG with CSS variables seems to work just fine using vanilla Asciidoctor, it appears that Antora doesn't currently support the opts=inline option. (See my code comment for additional context.) I found a brute force way to get the SVG working, but it's not ideal. I'm relatively bullish that I'll eventually be able to use some AsciiDoc trickery to make a more palatable workaround. But until then, we might be up a creek.
preview-src/index.adoc
Outdated
Comment on lines
928
to
946
| === SVG with CSS variables for Light and Dark modes | ||
|
|
||
| [source,svg] | ||
| ---- | ||
| <svg viewBox="0 0 300 200" fill="none"> | ||
| <path fill="var(--ds-text-primary)" d="..." /> | ||
| <path stroke="var(--ds-primary-outlined-border)" d="..." /> | ||
| <path fill="var(--ds-neutral-outlined-border)" d="..." /> | ||
| </svg> | ||
| ---- | ||
|
|
||
| [source,adoc] | ||
| ---- | ||
| image::your-diagram.svg[Description,300,opts=inline] <1> | ||
| ---- | ||
|
|
||
| <1> The `opts=inline` attribute is required to embed the SVG directly into the HTML. | ||
|
|
||
| image::preview-src/simple-diagram.svg[Simple Diagram,192,opts=inline] |
There was a problem hiding this comment.
Unfortunately, I've come to discover that Antora doesn't currently support the opts=inline option. See https://gitlab.com/antora/antora/-/issues/1001
I've been looking into whether there's an acceptable workaround that relies on other facilities in AsciiDoc, but haven't found anything I'd consider ideal. So far, the only successful method I've tried is to brute force the SVG into the HTML output using a passthrough block:
++++
<div class="imageblock">
<div class="content">
<svg width="300" fill="none" viewBox="0 0 192 117" xmlns="http://www.w3.org/2000/svg">
<path fill="var(--ds-text-primary)"
d="M68.4774 31.056V29.796H71.0254C71.6414 29.796 72.1874 29.698 72.6634 29.502C73.1487 29.2967 73.5594 29.0167 73.8954 28.662C74.2407 28.3073 74.502 27.892 74.6794 27.416C74.8567 26.94 74.9454 26.4267 74.9454 25.876C74.9454 25.2973 74.8567 24.7747 74.6794 24.308C74.502 23.832 74.2407 23.4213 73.8954 23.076C73.5594 22.7213 73.1487 22.4507 72.6634 22.264C72.1874 22.0773 71.6414 21.984 71.0254 21.984H68.4774V20.724H70.8854C71.8094 20.724 72.612 20.8687 73.2934 21.158C73.9747 21.438 74.5394 21.8207 74.9874 22.306C75.4447 22.782 75.7854 23.3187 76.0094 23.916C76.2334 24.504 76.3454 25.106 76.3454 25.722V26.03C76.3454 26.6273 76.2334 27.2247 76.0094 27.822C75.7854 28.4193 75.4447 28.9607 74.9874 29.446C74.5394 29.9313 73.9747 30.3233 73.2934 30.622C72.612 30.9113 71.8094 31.056 70.8854 31.056H68.4774ZM67.3854 31.056V20.724H68.7574V31.056H67.3854ZM78.6276 31V23.524H79.9716V31H78.6276ZM77.4796 24.588V23.524H79.9716V24.588H77.4796ZM79.0056 22.32C78.7069 22.32 78.4829 22.2407 78.3336 22.082C78.1936 21.9233 78.1236 21.7227 78.1236 21.48C78.1236 21.2373 78.1936 21.0367 78.3336 20.878C78.4829 20.7193 78.7069 20.64 79.0056 20.64C79.3043 20.64 79.5236 20.7193 79.6636 20.878C79.8129 21.0367 79.8876 21.2373 79.8876 21.48C79.8876 21.7227 79.8129 21.9233 79.6636 22.082C79.5236 22.2407 79.3043 22.32 79.0056 22.32ZM87.0922 31V28.76H86.8682V26.17C86.8682 25.6567 86.7329 25.2693 86.4622 25.008C86.2009 24.7467 85.8136 24.616 85.3002 24.616C85.0109 24.616 84.7122 24.6207 84.4042 24.63C84.0962 24.6393 83.8022 24.6487 83.5222 24.658C83.2422 24.6673 82.9996 24.6813 82.7942 24.7V23.524C82.9996 23.5053 83.2142 23.4913 83.4382 23.482C83.6716 23.4633 83.9096 23.454 84.1522 23.454C84.3949 23.4447 84.6282 23.44 84.8522 23.44C85.6176 23.44 86.2429 23.5333 86.7282 23.72C87.2136 23.8973 87.5729 24.1913 87.8062 24.602C88.0396 25.0127 88.1562 25.568 88.1562 26.268V31H87.0922ZM84.6422 31.196C84.0822 31.196 83.5969 31.1027 83.1862 30.916C82.7849 30.72 82.4722 30.44 82.2482 30.076C82.0336 29.712 81.9262 29.2733 81.9262 28.76C81.9262 28.228 82.0429 27.7847 82.2762 27.43C82.5189 27.0753 82.8689 26.8093 83.3262 26.632C83.7836 26.4453 84.3342 26.352 84.9782 26.352H87.0082V27.36H84.9222C84.3809 27.36 83.9656 27.4907 83.6762 27.752C83.3869 28.0133 83.2422 28.3493 83.2422 28.76C83.2422 29.1707 83.3869 29.502 83.6762 29.754C83.9656 30.006 84.3809 30.132 84.9222 30.132C85.2396 30.132 85.5429 30.076 85.8322 29.964C86.1216 29.8427 86.3596 29.6467 86.5462 29.376C86.7422 29.096 86.8496 28.7133 86.8682 28.228L87.2322 28.76C87.1856 29.292 87.0549 29.74 86.8402 30.104C86.6349 30.4587 86.3456 30.7293 85.9722 30.916C85.6082 31.1027 85.1649 31.196 84.6422 31.196ZM93.451 33.912C93.1056 33.912 92.7556 33.898 92.401 33.87C92.0556 33.842 91.7243 33.8047 91.407 33.758V32.624C91.743 32.6707 92.093 32.708 92.457 32.736C92.8303 32.7733 93.1803 32.792 93.507 32.792C94.1883 32.792 94.7296 32.6987 95.131 32.512C95.5416 32.3347 95.8356 32.05 96.013 31.658C96.1996 31.2753 96.293 30.7807 96.293 30.174V28.746L96.741 27.682C96.713 28.438 96.5543 29.068 96.265 29.572C95.9756 30.0667 95.5976 30.44 95.131 30.692C94.6736 30.9347 94.165 31.056 93.605 31.056C93.0823 31.056 92.6016 30.958 92.163 30.762C91.7336 30.5567 91.3603 30.2767 91.043 29.922C90.735 29.5673 90.4923 29.1613 90.315 28.704C90.147 28.2373 90.063 27.7473 90.063 27.234V26.982C90.063 26.4593 90.1516 25.974 90.329 25.526C90.5063 25.0687 90.7536 24.672 91.071 24.336C91.3883 24 91.7663 23.7387 92.205 23.552C92.653 23.3653 93.143 23.272 93.675 23.272C94.3003 23.272 94.851 23.4073 95.327 23.678C95.803 23.9393 96.1763 24.3267 96.447 24.84C96.727 25.344 96.881 25.9647 96.909 26.702L96.517 26.716V23.524H97.581V30.118C97.581 31.014 97.441 31.7373 97.161 32.288C96.8903 32.848 96.4516 33.2587 95.845 33.52C95.2476 33.7813 94.4496 33.912 93.451 33.912ZM93.857 29.824C94.305 29.824 94.711 29.726 95.075 29.53C95.4483 29.334 95.7423 29.054 95.957 28.69C96.181 28.3167 96.293 27.8733 96.293 27.36V26.716C96.293 26.212 96.1763 25.7873 95.943 25.442C95.719 25.0967 95.425 24.8353 95.061 24.658C94.697 24.4807 94.3003 24.392 93.871 24.392C93.3856 24.392 92.9563 24.504 92.583 24.728C92.2096 24.952 91.9203 25.2693 91.715 25.68C91.5096 26.0813 91.407 26.5573 91.407 27.108C91.407 27.6587 91.5096 28.1393 91.715 28.55C91.9296 28.9607 92.219 29.278 92.583 29.502C92.9563 29.7167 93.381 29.824 93.857 29.824ZM100.07 31V23.524H101.134V26.604H101.078C101.078 25.512 101.316 24.714 101.792 24.21C102.278 23.6967 103.001 23.44 103.962 23.44H104.214V24.644H103.738C102.992 24.644 102.418 24.8447 102.016 25.246C101.615 25.638 101.414 26.2073 101.414 26.954V31H100.07ZM110.307 31V28.76H110.083V26.17C110.083 25.6567 109.948 25.2693 109.677 25.008C109.416 24.7467 109.028 24.616 108.515 24.616C108.226 24.616 107.927 24.6207 107.619 24.63C107.311 24.6393 107.017 24.6487 106.737 24.658C106.457 24.6673 106.214 24.6813 106.009 24.7V23.524C106.214 23.5053 106.429 23.4913 106.653 23.482C106.886 23.4633 107.124 23.454 107.367 23.454C107.61 23.4447 107.843 23.44 108.067 23.44C108.832 23.44 109.458 23.5333 109.943 23.72C110.428 23.8973 110.788 24.1913 111.021 24.602C111.254 25.0127 111.371 25.568 111.371 26.268V31H110.307ZM107.857 31.196C107.297 31.196 106.812 31.1027 106.401 30.916C106 30.72 105.687 30.44 105.463 30.076C105.248 29.712 105.141 29.2733 105.141 28.76C105.141 28.228 105.258 27.7847 105.491 27.43C105.734 27.0753 106.084 26.8093 106.541 26.632C106.998 26.4453 107.549 26.352 108.193 26.352H110.223V27.36H108.137C107.596 27.36 107.18 27.4907 106.891 27.752C106.602 28.0133 106.457 28.3493 106.457 28.76C106.457 29.1707 106.602 29.502 106.891 29.754C107.18 30.006 107.596 30.132 108.137 30.132C108.454 30.132 108.758 30.076 109.047 29.964C109.336 29.8427 109.574 29.6467 109.761 29.376C109.957 29.096 110.064 28.7133 110.083 28.228L110.447 28.76C110.4 29.292 110.27 29.74 110.055 30.104C109.85 30.4587 109.56 30.7293 109.187 30.916C108.823 31.1027 108.38 31.196 107.857 31.196ZM113.838 31V23.524H114.902V26.73H114.734C114.734 26.002 114.827 25.386 115.014 24.882C115.21 24.3687 115.499 23.9767 115.882 23.706C116.264 23.4353 116.75 23.3 117.338 23.3H117.394C117.982 23.3 118.467 23.4353 118.85 23.706C119.242 23.9767 119.531 24.3687 119.718 24.882C119.904 25.386 119.998 26.002 119.998 26.73H119.606C119.606 26.002 119.704 25.386 119.9 24.882C120.096 24.3687 120.385 23.9767 120.768 23.706C121.16 23.4353 121.65 23.3 122.238 23.3H122.294C122.882 23.3 123.372 23.4353 123.764 23.706C124.156 23.9767 124.445 24.3687 124.632 24.882C124.828 25.386 124.926 26.002 124.926 26.73V31H123.582V26.436C123.582 25.8293 123.432 25.3627 123.134 25.036C122.835 24.7 122.42 24.532 121.888 24.532C121.337 24.532 120.894 24.7093 120.558 25.064C120.222 25.4093 120.054 25.8947 120.054 26.52V31H118.71V26.436C118.71 25.8293 118.56 25.3627 118.262 25.036C117.963 24.7 117.548 24.532 117.016 24.532C116.465 24.532 116.022 24.7093 115.686 25.064C115.35 25.4093 115.182 25.8947 115.182 26.52V31H113.838Z" />
<path stroke="var(--ds-primary-outlined-border)"
d="M12 0.5H180C186.351 0.5 191.5 5.64873 191.5 12V41C191.5 47.3513 186.351 52.5 180 52.5H12C5.64873 52.5 0.5 47.3513 0.5 41V12C0.5 5.64873 5.64873 0.5 12 0.5Z" />
<path fill="var(--ds-neutral-outlined-border)"
d="M95.6464 116.354C95.8417 116.549 96.1583 116.549 96.3536 116.354L99.5355 113.172C99.7308 112.976 99.7308 112.66 99.5355 112.464C99.3403 112.269 99.0237 112.269 98.8284 112.464L96 115.293L93.1716 112.464C92.9763 112.269 92.6597 112.269 92.4645 112.464C92.2692 112.66 92.2692 112.976 92.4645 113.172L95.6464 116.354ZM96.5 116V69H95.5V116H96.5Z" />
</svg>
</div>
</div>
++++
Co-authored-by: Eric Schneider <37347760+eric-schneider@users.noreply.github.com>
Co-authored-by: Eric Schneider <37347760+eric-schneider@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.