mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-22 13:06:16 -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

122
new/docs/index.html
View file

@ -18,59 +18,77 @@
<main>
<div class="docs wrapper">
<nav>
<ul>
<li class="heading">Get Caddy</li>
<li>
<a href="/docs/install" class="current">Install</a>
<ul>
<li><a href="/docs/install/packages">OS packages</a></li>
<li><a href="/docs/install/downloads">Static binaries</a></li>
<li><a href="/docs/install/plugins">With plugins</a></li>
</ul>
</li>
<li><a href="/docs/build">Build from source</a></li>
<li class="heading">Tutorials</li>
<li><a href="/docs/basics">Caddy basics</a></li>
<li><a href="/docs/troubleshooting">How to fix problems</a></li>
<li><a href="/docs/static-files">Static files</a></li>
<li><a href="/docs/reverse-proxy">Reverse proxy</a></li>
<li><a href="/docs/reverse-proxy">Custom domains</a></li>
<li><a href="/docs/reverse-proxy">Automate mTLS</a></li>
<li class="heading">Reference</li>
<li><a href="/docs/command-line">Command line</a></li>
<li><a href="/docs/api">API</a></li>
<li><a href="/docs/json/">JSON config</a></li>
<li>
<a href="/docs/caddyfile">Caddyfile</a>
<ul>
<li><a href="/docs/caddyfile/concepts">Concepts</a></li>
<li><a href="/docs/caddyfile/directives">Directives</a></li>
<li><a href="/docs/caddyfile/matchers">Request matchers</a></li>
<li><a href="/docs/caddyfile/options">Global options</a></li>
<li><a href="/docs/caddyfile/patterns">Common patterns</a></li>
</ul>
</li>
<!-- <li><a href="/docs/caddyfile">Caddyfile</a></li> -->
<li><a href="/docs/automatic-https">Automatic HTTPS</a></li>
<li><a href="/docs/automatic-https">Modules</a></li>
<li class="heading">Articles</li>
<!-- <li><a href="/docs/v2-upgrade">Upgrading to Caddy 2</a></li> -->
<li><a href="/docs/conventions">Conventions</a></li>
<li><a href="/docs/config-adapters">Config Adapters</a></li>
<li><a href="/docs/logging">How Logging Works</a></li>
<li><a href="/docs/metrics">Monitoring Caddy</a></li>
<li><a href="/docs/architecture">Caddy Architecture</a></li>
<li><a href="/docs/running">Keep Caddy Running</a></li>
<li><a href="/docs/signature-verification">Verifying Asset Signatures</a></li>
<li class="heading">Develop</li>
<li><a href="/docs/architecture">Caddy architecture</a></li>
<li><a href="/docs/contribute">Contribute</a></li>
<li><a href="/docs/extend">Write a module</a></li>
<div id="docs-menu">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 6l16 0"></path>
<path d="M4 12l16 0"></path>
<path d="M4 18l16 0"></path>
</svg>
Pages
</div>
<div id="docs-menu-container">
<ul>
<li class="heading">Get Caddy</li>
<li>
<a href="/docs/install" class="current">Install</a>
<ul>
<li><a href="/docs/install/packages">OS packages</a></li>
<li><a href="/docs/install/downloads">Static binaries</a></li>
<li><a href="/docs/install/plugins">With plugins</a></li>
</ul>
</li>
<li><a href="/docs/build">Build from source</a></li>
</ul>
<ul>
<li class="heading">Tutorials</li>
<li><a href="/docs/basics">Caddy basics</a></li>
<li><a href="/docs/troubleshooting">How to fix problems</a></li>
<li><a href="/docs/static-files">Static files</a></li>
<li><a href="/docs/reverse-proxy">Reverse proxy</a></li>
<li><a href="/docs/reverse-proxy">Custom domains</a></li>
<li><a href="/docs/reverse-proxy">Automate mTLS</a></li>
</ul>
<ul>
<li class="heading">Reference</li>
<li><a href="/docs/command-line">Command line</a></li>
<li><a href="/docs/api">API</a></li>
<li><a href="/docs/json/">JSON config</a></li>
<li>
<a href="/docs/caddyfile">Caddyfile</a>
<ul>
<li><a href="/docs/caddyfile/concepts">Concepts</a></li>
<li><a href="/docs/caddyfile/directives">Directives</a></li>
<li><a href="/docs/caddyfile/matchers">Request matchers</a></li>
<li><a href="/docs/caddyfile/options">Global options</a></li>
<li><a href="/docs/caddyfile/patterns">Common patterns</a></li>
</ul>
</li>
<!-- <li><a href="/docs/caddyfile">Caddyfile</a></li> -->
<li><a href="/docs/automatic-https">Automatic HTTPS</a></li>
<li><a href="/docs/automatic-https">Modules</a></li>
</ul>
<ul>
<li class="heading">Articles</li>
<!-- <li><a href="/docs/v2-upgrade">Upgrading to Caddy 2</a></li> -->
<li><a href="/docs/conventions">Conventions</a></li>
<li><a href="/docs/config-adapters">Config Adapters</a></li>
<li><a href="/docs/logging">How Logging Works</a></li>
<li><a href="/docs/metrics">Monitoring Caddy</a></li>
<li><a href="/docs/architecture">Caddy Architecture</a></li>
<li><a href="/docs/running">Keep Caddy Running</a></li>
<li><a href="/docs/signature-verification">Verifying Asset Signatures</a></li>
</ul>
<ul>
<li class="heading">Develop</li>
<li><a href="/docs/architecture">Caddy architecture</a></li>
<li><a href="/docs/contribute">Contribute</a></li>
<li><a href="/docs/extend">Write a module</a></li>
</ul>
</ul>
</nav>

1
new/includes/header.html
View file

@ -1,7 +1,6 @@
<header class="{{index .Args 0}}">
<div class="topbar">
<div class="wrapper">
<div style="flex: 1;"></div>
<a href="https://zerossl.com">
A ZeroSSL Project
</a>

43
new/resources/css/common.css
View file

@ -4,6 +4,8 @@
--text-color: #222;
--header-bg: rgba(118, 179, 194, 0.11);
--header-border-color: #ebf0f2;
--topbar-link-color-hover: black;
--topbar-link-bg-hover: rgb(244, 249, 251);
--main-nav-link-color: #546c75;
--main-nav-link-hover-color: #01324b;
--link-color: #0097f2;
@ -27,6 +29,8 @@
--text-color: #cbe2e4; /* #a4c0c2 */
--header-bg: rgba(44, 130, 164, 0.11);
--header-border-color: transparent;
--topbar-link-color-hover: white;
--topbar-link-bg-hover: rgb(255 255 255 / .1);
--main-nav-link-color: #86a7b1;
--main-nav-link-hover-color: #e2e9ec;
--link-color: #34a1e4;
@ -168,8 +172,8 @@ header nav>ul {
}
.topbar a:hover {
background: rgb(0 0 0 / .05);
color: black;
background: var(--topbar-link-bg-hover);
color: var(--topbar-link-color-hover);
}
.navbar {
@ -479,3 +483,38 @@ header nav ul {
padding-right: 20px;
}
}
@media (max-width: 950px) {
header nav ul {
justify-content: space-evenly;
}
.topbar .wrapper {
justify-content: center;
flex-wrap: wrap;
gap: 0;
}
.logo {
height: 3em;
}
.navbar {
flex-direction: column;
gap: 0;
padding: 1em 0;
}
.navbar nav {
margin: .5em 0;
}
.navbar .actions {
margin: 0 auto;
}
.navbar nav > ul > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}

50
new/resources/css/docs.css
View file

@ -11,6 +11,7 @@
--pagenav-hover-bg: #f4f7f9;
--cmd-bg: #333;
--tip-color: #5c50bb;
--menu-toggle-bg: #e4f1f2;
}
.dark {
@ -26,6 +27,7 @@
--pagenav-hover-bg: #18262f;
--cmd-bg: black;
--tip-color: #a6b2f7;
--menu-toggle-bg: #274d5c;
}
@ -89,7 +91,12 @@ main {
min-width: 250px;
}
#docs-menu {
background: var(--menu-toggle-bg);
padding: 1em;
cursor: pointer;
display: none;
}
@ -189,7 +196,7 @@ main nav .heading {
letter-spacing: 1px;
}
main nav .heading:not(:first-child) {
main nav ul:not(:first-child) > .heading {
margin-top: 2.5em;
}
@ -359,9 +366,9 @@ article h5 {
font-size: .6em;
border-radius: 10px;
padding: .3em .5em;
margin-left: .25em;
position: absolute;
top: 5px;
left: 0;
text-decoration: none;
}
@ -579,7 +586,7 @@ td code {
#autonav {
position: absolute;
visibility: hidden;
display: none;
left: 80%;
top: 0;
background: var(--autonav-bg);
@ -597,8 +604,8 @@ td code {
font-size: 14px;
}
main nav > ul > li:hover #autonav {
visibility: visible;
main nav ul > li:hover #autonav {
display: block;
}
#autonav .heading {
@ -655,3 +662,34 @@ main nav > ul > li:hover #autonav {
display: none;
}
}
@media (max-width: 950px) {
#autonav {
display: none !important;
}
.docs {
flex-direction: column;
}
#docs-menu {
display: block;
}
#docs-menu-container {
height: 0;
overflow: hidden;
transition: height 250ms ease-out;
display: flex;
flex-wrap: wrap;
}
.docs nav ul {
min-width: 250px;
flex: 1;
}
main nav ul .heading {
margin-top: 2.5em !important;
}
}

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 &lt; (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 &lt; (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, '');
}