I’ve been trying to figure out a way to display small images/icons inline in text in the documentation, but have failed so far. I’m writing this in the hope of getting some advice as to if this is at all possible, or if not, the knowledge that I should just give up.
The use for this is typically when you want to document a part of the UI.
If you use a full screenshot, it might not be clear what part of the screenshot you’re referring to, and it might require you to edit the image with arrows, circles or dim out the surroundings. This is both “labor-intensive” and highly likely to have a very inconsistent look from one author to another.
The alternative, and what seems to be what’s most used at the moment, is to just describe where to find the button/control in question, “at the far left near the top, click ‘Foo’ then ‘Bar’”. This is clumsy because the layout might be different on different devices, might not stay consistent over time, and can generally require the user to open the UI in the same location while reading the documentation to try to figure out what element is described.
I think it would be much better if you could include a picture of the button/control in question in the documentation: “Click the [picture of magic button] to start the magic”.
Is there any way to make this happen? From what I understand, the documentation is generated using VuePress. VuePress has a number of extensions, and it seems quite a lot of customization ability, but it’s frankly a bit over my head, and it seems like most of it isn’t enabled for the OH documentation build.
I’ve not found a VuePress extension that seems to be close to providing what I want, but it is mentoned that you can use Vue components, for example:
This is default theme built-in `<Badge />` component <Badge text="demo" />
This is where my limited knowledge of Vue blocks further investigation. I’ve looked at the “default components” in the documentation, and none of them seem to be capable of presenting inline images, but does that mean that such a component doesn’t exist, or couldn’t be made for that sake? I don’t know.
Any input is appreciated.