Syntax highlight on-demand example, fix rollover

This commit is contained in:
Francis Lavoie 2023-11-22 05:51:58 -05:00
parent 7cba863d53
commit 4610d84904
No known key found for this signature in database
GPG key ID: 0F66EE1687682239
4 changed files with 40 additions and 27 deletions

View file

@ -0,0 +1,36 @@
<script>
ready(() => {
let startElement, endElement;
startElement = findWithContent('.ex-on-demand pre.chroma code span.line', 'on_demand_tls {');
endElement = findNextText(startElement, '}');
wrapRangeWithSpan(startElement, endElement, 'rollover-abuse rollover-purple');
startElement = findWithContent('.ex-on-demand pre.chroma code span.line', 'tls');
endElement = findNextText(startElement, '}');
wrapRangeWithSpan(startElement, endElement, 'rollover-ondemand rollover-green');
window.$_('.ex-on-demand code').classList.add('light');
});
</script>
<div class="ex-on-demand">
```caddy
{
on_demand_tls {
ask http://localhost:9123/check
}
}
https:// {
tls {
on_demand
}
# reverse_proxy, etc...
}
# other sites...
```
</div>

View file

@ -72,21 +72,7 @@
</div> </div>
<div> <div>
<div class="display right"> <div class="display right">
<code class="light">{ {{ markdown (include "/includes/examples/on-demand.md") }}
<span class="rollover-abuse rollover-purple"> on_demand_tls {
ask http://localhost:9123/check
}</span>
}
https:// {
<span class="rollover-ondemand rollover-green"> tls {
on_demand
}</span>
<span class="comment"># reverse_proxy, etc...</span>
}
<span class="comment"># other sites...</span></code>
</div> </div>
</div> </div>
</div> </div>

View file

@ -188,11 +188,11 @@ on('mouseover', '.button:not(.cool), button:not(.cool)', (e) => {
// mouseover highlights for feature sections that explain config // mouseover highlights for feature sections that explain config
on('mouseover', '.rollover', e => { on('mouseover', '.rollover', e => {
const target = e.target.closest('.rollover') || e.target; const target = e.target.closest('.rollover') || e.target;
$$(`.${target.dataset.rollover}`).forEach(elem => elem.classList.add('show')); $$_(`.${target.dataset.rollover}`).forEach(elem => elem.classList.add('show'));
}); });
on('mouseout', '.rollover', e => { on('mouseout', '.rollover', e => {
const target = e.target.closest('.rollover') || e.target; const target = e.target.closest('.rollover') || e.target;
$$(`.${target.dataset.rollover}`).forEach(elem => elem.classList.remove('show')); $$_(`.${target.dataset.rollover}`).forEach(elem => elem.classList.remove('show'));
}); });

View file

@ -20,14 +20,5 @@ const resp = fetch("/resources/testimonials.json").then(async resp => {
} }
$_(`.testimonial-col:nth-child(${i%3 + 1})`).append(tpl); $_(`.testimonial-col:nth-child(${i%3 + 1})`).append(tpl);
} }
on('mouseover', '.rollover', e => {
const target = e.target.closest('.rollover') || e.target;
$$_(`.${target.dataset.rollover}`).forEach(elem => elem.classList.add('show'));
});
on('mouseout', '.rollover', e => {
const target = e.target.closest('.rollover') || e.target;
$$_(`.${target.dataset.rollover}`).forEach(elem => elem.classList.remove('show'));
});
}); });
}); });