mirror of
https://github.com/caddyserver/website.git
synced 2025-04-22 04:56:17 -04:00
Syntax highlight on-demand example, fix rollover
This commit is contained in:
parent
7cba863d53
commit
4610d84904
4 changed files with 40 additions and 27 deletions
36
new/includes/examples/on-demand.md
Normal file
36
new/includes/examples/on-demand.md
Normal 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>
|
|
@ -72,21 +72,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<div class="display right">
|
||||
<code class="light">{
|
||||
<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>
|
||||
|
||||
{{ markdown (include "/includes/examples/on-demand.md") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -188,11 +188,11 @@ on('mouseover', '.button:not(.cool), button:not(.cool)', (e) => {
|
|||
// mouseover highlights for feature sections that explain config
|
||||
on('mouseover', '.rollover', e => {
|
||||
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 => {
|
||||
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'));
|
||||
});
|
||||
|
||||
|
||||
|
|
|
@ -20,14 +20,5 @@ const resp = fetch("/resources/testimonials.json").then(async resp => {
|
|||
}
|
||||
$_(`.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'));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue