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

fix(redesign): JS behavior

Browse source
This commit is contained in:
darkweak 2023-10-15 13:36:22 +02:00 • committed by Francis Lavoie
parent d201a427d1
commit 3dc98f5584
No known key found for this signature in database
GPG key ID: C5204D4F28147FC8
4 changed files with 171 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

62
new/download.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Download Caddy</title> <title>Download Caddy</title>
{{include "/includes/head.html"}} {{include "/includes/head.html"}}
@ -7,6 +8,7 @@
<link rel="stylesheet" href="/resources/css/docs.css"> <link rel="stylesheet" href="/resources/css/docs.css">
<script src="/resources/js/download.js"></script> <script src="/resources/js/download.js"></script>
</head> </head>
<body> <body>
{{include "/includes/header.html" "light-header"}} {{include "/includes/header.html" "light-header"}}
<main> <main>
@ -31,17 +33,47 @@
</div> </div>
<div id="download" class="wrapper"> <div id="download" class="wrapper">
<div class="shadow-lg"> <div class="shadow-lg">
<div> <div id="downloader">
<span>Download generated caddy binary with 3 extra modules or run the command below</span> <span>Download the caddy binary <span id="modules-count"></span> for</span>
<select size="1" selected="linux-amd64" id="platform" class="shadow">
<option value="dragonfly-amd64">Dragonfly amd64</option>
<option value="freebsd-amd64">FreeBSD amd64</option>
<option value="freebsd-arm-6">FreeBSD arm 6</option>
<option value="freebsd-arm-7">FreeBSD arm 7</option>
<option value="freebsd-arm64">FreeBSD arm64</option>
<option value="linux-amd64">Linux amd64</option>
<option value="linux-arm-5">Linux arm 5</option>
<option value="linux-arm-6">Linux arm 6</option>
<option value="linux-arm-7">Linux arm 7</option>
<option value="linux-arm64">Linux arm64</option>
<option value="linux-mips">Linux mips</option>
<option value="linux-mips64">Linux mips64</option>
<option value="linux-mips64le">Linux mips64le</option>
<option value="linux-mipsle">Linux mipsle</option>
<option value="linux-ppc64">Linux ppc64</option>
<option value="linux-ppc64le">Linux ppc64le</option>
<option value="linux-s390x">Linux s390x</option>
<option value="darwin-amd64">macOS amd64 (Intel)</option>
<option value="darwin-arm64">macOS arm64 (Apple)</option>
<option value="openbsd-amd64">OpenBSD amd64</option>
<option value="openbsd-arm-6">OpenBSD arm 6</option>
<option value="openbsd-arm-7">OpenBSD arm 7</option>
<option value="openbsd-arm64">OpenBSD arm64</option>
<option value="windows-amd64">Windows amd64</option>
<option value="windows-arm-6">Windows arm 6</option>
<option value="windows-arm-7">Windows arm 7</option>
<option value="windows-arm64">Windows arm64</option>
</select>
<button>Download</button>
</div> </div>
<div id="command"> <div id="command">
<pre> <pre>
<span id="command-builder">xcaddy build</span> <span id="command-builder">xcaddy build</span>
</pre> </pre>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy" width="24" height="24" <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy" width="24"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
stroke-linejoin="round"> stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path> <path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path>
<path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path> <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
@ -55,8 +87,8 @@
{{include "/includes/footer.html"}} {{include "/includes/footer.html"}}
<script type="text/javascript"> <script type="text/javascript">
let groupBy = 'download'; let groupBy = 'download';
let packages = [];
const getCardTemplate = item => `{{ include "/includes/card.html" }}`; const getCardTemplate = item => `{{ include "/includes/card.html" }}`;
const modulesCount = document.getElementById('modules-count');
function renderList(list) { function renderList(list) {
if (groupBy === 'type') { if (groupBy === 'type') {
@ -69,7 +101,7 @@
document.getElementById('packages').innerHTML = groupedData.map(([category, items]) => ` document.getElementById('packages').innerHTML = groupedData.map(([category, items]) => `
<section id="${category}"> <section id="${category}">
<h2 class="blue">${category}</h2> <h2 class="blue">${category}</h2>
<div class="card-list">${items.map(getCardTemplate).join('')}</div> <div class="card-list">${items.map(item => getCardTemplate({ ...item, state: packages.includes(item.path) })).join('')}</div>
</section>`).join('') </section>`).join('')
return; return;
} }
@ -77,23 +109,10 @@
document.getElementById('side-panel-packages').innerHTML = ''; document.getElementById('side-panel-packages').innerHTML = '';
document.getElementById('packages').innerHTML = ` document.getElementById('packages').innerHTML = `
<div class="card-list"> <div class="card-list">
${list.map(getCardTemplate).join('')} ${list.map(item => getCardTemplate({ ...item, state: packages.includes(item.path) })).join('')}
</div>`; </div>`;
}; };
function togglePackage({ target: { dataset: { module } } }) {
const element = document.getElementById('packages').querySelector(`button[data-module="${module}"]`);
if (packages.includes(module)) {
packages = packages.filter(p => p !== module)
element.innerHTML = "Add this module";
} else {
packages.push(module);
element.innerHTML = "Remove this module";
}
document.getElementById('command-builder').innerText = `xcaddy build${packages.map(p => ` --with ${p}`).join('')}`
}
packageManager.getPackages().then(() => { packageManager.getPackages().then(() => {
renderList(packageManager.group(groupBy)) renderList(packageManager.group(groupBy))
}) })
@ -108,4 +127,5 @@
}) })
</script> </script>
</body> </body>
</html> </html>

2
new/includes/card.html
View file

@ -39,7 +39,7 @@
</p> </p>
<div class="card-actions"> <div class="card-actions">
<button type="button" class="button card-button" data-module="${item.path}" onclick="togglePackage(event)"> <button type="button" class="button card-button" data-module="${item.path}" onclick="togglePackage(event)">
Add this module ${item.state ? 'Remove' : 'Add'} this module
</button> </button>
</div> </div>
</div> </div>

33
new/resources/css/download.css
View file

@ -46,6 +46,13 @@ html {
top: 0; top: 0;
} }
#platform {
width: unset;
min-height: unset;
height: unset;
line-height: unset;
}
#packages { #packages {
width: 100%; width: 100%;
padding-top: 32px; padding-top: 32px;
@ -67,10 +74,29 @@ html {
padding: 1rem; padding: 1rem;
} }
#download>div {
border: var(--border-download);
background-color: var(--body-bg);
border-radius: var(--radius);
padding: 1rem;
}
#downloader>button {
margin: 0 auto;
min-width: fit-content;
white-space: nowrap;
font-size: 80%;
font-weight: bold;
}
#downloader {
padding-bottom: 8px;
}
#command { #command {
border-radius: var(--radius); border-radius: var(--radius);
border: 1px solid var(--button-border-color); border: 1px solid var(--button-border-color);
padding: 0.75rem; padding: 0.5rem 0.75rem;
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
} }
@ -80,6 +106,11 @@ html {
overflow-x: scroll; overflow-x: scroll;
display: inline-flex; display: inline-flex;
white-space: nowrap; white-space: nowrap;
font-size: 1rem;
}
#command>svg {
height: 1em;
} }
#command-builder::before { #command-builder::before {

21
new/resources/js/download.js
View file

@ -118,3 +118,24 @@ class Package {
} }
const packageManager = new Package(); const packageManager = new Package();
let packages = [];
function togglePackage({ target: { dataset: { module } } }) {
const element = document.getElementById('packages').querySelector(`button[data-module="${module}"]`);
if (packages.includes(module)) {
packages = packages.filter(p => p !== module);
if (!packages.length) {
modulesCount.innerHTML = '';
} else {
modulesCount.innerHTML = `with ${packages.length} extra module${packages.length > 1 ? 's' : ''}`;
}
element.innerHTML = "Add this module";
} else {
packages.push(module);
element.innerHTML = "Remove this module";
modulesCount.innerHTML = `with ${packages.length} extra module${packages.length > 1 ? 's' : ''}`;
}
document.getElementById('command-builder').innerText = `xcaddy build${packages.map(p => ` --with ${p}`).join('')}`
}