mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-24 05:56:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Finish responsive layout; several bug fixes

Browse source
This commit is contained in:
Matthew Holt 2023-05-31 15:53:49 -06:00
parent 8b77ddcce8
commit c24f50cad3
No known key found for this signature in database
GPG key ID: 2A349DD577D586A5
6 changed files with 232 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

59
new/resources/js/common.js
View file

@ -53,66 +53,9 @@ ready(function() {
// on page load, immediately set the configured theme
setTheme(getTheme());
const autonav = $('#autonav');
// when a left-side-nav-link is hovered, show the in-page nav in a popout to the side
on('mouseover', 'main nav li a:not(#autonav a)', async e => {
const response = await fetch("/temporary-markdown-proxy"+e.target.getAttribute('href'));
const markdown = await response.text();
const tokens = marked.lexer(markdown);
autonav.replaceChildren();
let seenH1 = false;
for (const tkn of tokens) {
if (tkn.type != "heading") continue;
if (tkn.depth == 1) {
seenH1 = true;
}
if (!seenH1 || tkn.depth != 2) continue;
// this includes HTML entities like < (i.e. not user-facing text), but
// that's how the server-side markdown renderer does it too ¯\_(ツ)_/¯
const anchor = anchorID(tkn.text);
const a = document.createElement('a');
a.classList.add('autonav-link');
a.innerHTML = marked.parseInline(tkn.text);
a.href = `${e.target.href}#${anchor}`;
autonav.append(a);
}
if ($('#autonav *')) {
const sections = document.createElement('div')
sections.classList.add('heading');
sections.innerText = 'Sections';
autonav.prepend(sections);
e.target.closest('li').append(autonav);
} else {
// no links, so remove it from nav so as not to display an empty box
$('body').append(autonav);
}
});
const spacingMS = 50;
let delay = spacingMS;
$$('main article h2').forEach(elem => {
const a = document.createElement('a');
a.innerText = elem.innerText;
a.href = `#${elem.id}`;
setTimeout(function() {
$('#pagenav').append(a);
}, delay);
delay += spacingMS;
});
});
function anchorID(text) {
return text.trim().toLowerCase().replace(/\s/g, '-').replace(/[^\w-]/g, '');
}
// when the system theme changes, apply that to our site if system theme is configured
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
if (getTheme() == "system") {

77
new/resources/js/docs.js
View file

@ -11,6 +11,19 @@ ready(function() {
}
currentPageLink?.classList?.add('current');
// generate in-page nav before adding anchor links to headings
const spacingMS = 50;
let delay = spacingMS;
$$('main article h2').forEach(elem => {
const a = document.createElement('a');
a.innerText = elem.innerText;
a.href = `#${elem.id}`;
setTimeout(function() {
$('#pagenav').append(a);
}, delay);
delay += spacingMS;
});
// add anchor links, inspired by https://github.com/bryanbraun/anchorjs
$$('article > h2[id], article > h3[id], article > h4[id], article > h5[id], article > h6[id]').forEach(function(elem) {
const anchor = document.createElement('a');
@ -20,4 +33,66 @@ ready(function() {
anchor.innerText = '🔗';
elem.append(anchor);
});
});
const autonav = $('#autonav');
// when a left-side-nav-link is hovered, show the in-page nav in a popout to the side
on('mouseover', 'main nav li a:not(#autonav a)', async e => {
// only show the pop-out nav if not on mobile/narrow screen
if ($('#docs-menu').offsetParent != null) {
return;
}
const response = await fetch("/temporary-markdown-proxy"+e.target.getAttribute('href'));
const markdown = await response.text();
const tokens = marked.lexer(markdown);
// empty the container
autonav.replaceChildren();
let seenH1 = false;
for (const tkn of tokens) {
if (tkn.type != "heading") continue;
if (tkn.depth == 1) {
seenH1 = true;
}
if (!seenH1 || tkn.depth != 2) continue;
// this includes HTML entities like < (i.e. not user-facing text), but
// that's how the server-side markdown renderer does it too ¯\_(ツ)_/¯
const anchor = anchorID(tkn.text);
const a = document.createElement('a');
a.classList.add('autonav-link');
a.innerHTML = marked.parseInline(tkn.text);
a.href = `${e.target.href}#${anchor}`;
autonav.append(a);
}
if ($('#autonav *')) {
const sections = document.createElement('div')
sections.classList.add('heading');
sections.innerText = 'Sections';
autonav.prepend(sections);
e.target.closest('li').append(autonav);
autonav.style.display = ''; // unhide the container
} else {
// no links; hide the container so we don't see an empty box
autonav.style.display = 'none';
}
});
});
on('click', '#docs-menu', e => {
const nav = $('#docs-menu-container');
if (!nav.offsetHeight) {
nav.style.height = `${nav.scrollHeight}px`;
} else {
nav.style.height = 0;
}
});
function anchorID(text) {
return text.trim().toLowerCase().replace(/\s/g, '-').replace(/[^\w-]/g, '');
}