It would be nice to automatically highlight commonly used acronyms and show an explanation on hover.
Example
(the cursor is hovering the HTML text)
The code for this snippet looks like this:
<p>Lorem ipsum dolor <abbr title="Hypertext Markup Language">HTML</abbr> sit amet.</p>
It looks like there already is a Gatsby plugin for this: gatsby-remark-acronyms.
Seems fairly straight-forward to integrate.
Here is a list of all acronyms -> explanations we want, for now:
acronyms: {
PV: `Photovoltaics`,
CO2: `Carbon dioxide`,
CO2e: `Carbon dioxide equivalent`,
ML: `Machine Learning`,
UK: `United Kingdom`, // for the folks abroad
OSM: `Open Street Map`,
TSO: `Transmission System Operator`,
ESO: `Electricity System Operator`,
DNO: `Distribution System Operators`,
MPAN: `Meter Point Administration Number`,
EV: `Electric Vehicle`,
},
If the plugin works then it should be fairly easy. If it doesn't work we should look whether there are any other solutions out there.
For now this should only work for everything going trough the remark transformer, i.e. the blog posts.
It would be nice to automatically highlight commonly used acronyms and show an explanation on hover.
Example
(the cursor is hovering the
HTMLtext)The code for this snippet looks like this:
It looks like there already is a Gatsby plugin for this: gatsby-remark-acronyms. Seems fairly straight-forward to integrate.
Here is a list of all acronyms -> explanations we want, for now:
If the plugin works then it should be fairly easy. If it doesn't work we should look whether there are any other solutions out there. For now this should only work for everything going trough the remark transformer, i.e. the blog posts.