We injected some custom CSS code (in Settings > Custom HTML head content) to display an "north east arrow icon" ↗️ behind external links on BookStack pages, using the content property, code point ↗.
Since release 21.08.x BookStack is parsing the value behind content, and automatically re-encodes HTML entities, not only „high“ Unicode data points, but simply everything which supports HTML re-encoding, in particular also § towards §.
The change in 21.08.x unfortunately breaks our icon hack.
Here our said CSS injection:
<style type="text/css">
/* adds arrow icon to external links */
a[href*="//"]:not([href*="our.bookstack.com"])::after {
content: "↗️";
text-decoration: none;
padding-left: 0.15em;
color: #999;
}
a[href*="//"]:not([href*="our.bookstack.com"]):hover::after {
text-decoration: underline;
text-decoration-color: red;
}
</style>
<script>
/* sets the target attribute to '_blank' if link doesn't begin with '#' or 'https://our.bookstack.com' */
window.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.page-content a[href]').forEach(function(el, x, y) {
if (el.getAttribute('href') &&
(!el.getAttribute('href').startsWith('#')) &&
(!el.getAttribute('href').startsWith('https://our.bookstack.com'))) {
el.setAttribute('target', '_blank');
}
});
});
</script>
We injected some custom CSS code (in Settings > Custom HTML head content) to display an "north east arrow icon"↗️ behind external links on BookStack pages, using the
contentproperty, code point↗.Since release 21.08.x BookStack is parsing the value behind
content, and automatically re-encodes HTML entities, not only „high“ Unicode data points, but simply everything which supports HTML re-encoding, in particular also§towards§.The change in 21.08.x unfortunately breaks our icon hack.
Here our said CSS injection: