mirror of
https://github.com/caddyserver/website.git
synced 2025-04-22 13:06:16 -04:00
feat(redesign): retrieve from URL
This commit is contained in:
darkweak
Francis Lavoie
parent
85ec18c9a6
commit
ee662393d0
4 changed files with 92 additions and 44 deletions
|
|
@ -49,7 +49,11 @@
|
|||
<option value="windows-arm-7">Windows arm 7</option>
|
||||
<option value="windows-arm64">Windows arm64</option>
|
||||
</select>
|
||||
<button class="primary">Download</button>
|
||||
<a id="download-link" href="https://localhost/api/download">
|
||||
<button class="primary">
|
||||
Download
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="command" onclick="copyCommand()">
|
||||
|
|
@ -91,33 +95,6 @@
|
|||
const getCardTemplate = item => `{{ include "/includes/card.html" }}`;
|
||||
const modulesCount = document.getElementById('modules-count');
|
||||
|
||||
function renderList(list) {
|
||||
if (groupBy === 'type') {
|
||||
const groupedData = Object.entries(packageManager.group(groupBy)).filter(([_, items]) => !!items.length)
|
||||
document.getElementById('side-panel-packages').innerHTML = `
|
||||
<div>
|
||||
<h2 class="blue">Namespaces</h2>
|
||||
${groupedData.map(([k]) => `<a href="#${k}"> ${k}</a>`).join('')}
|
||||
</div>`;
|
||||
document.getElementById('packages').innerHTML = groupedData.map(([category, items]) => `
|
||||
<section id="${category}">
|
||||
<h2 class="blue">${category}</h2>
|
||||
<div class="card-list">${items.map(item => getCardTemplate({ ...item, state: packages.includes(item.path) })).join('')}</div>
|
||||
</section>`).join('')
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('side-panel-packages').innerHTML = '';
|
||||
document.getElementById('packages').innerHTML = `
|
||||
<div class="card-list">
|
||||
${list.map(item => getCardTemplate({ ...item, state: packages.includes(item.path) })).join('')}
|
||||
</div>`;
|
||||
};
|
||||
|
||||
packageManager.getPackages().then(() => {
|
||||
renderList(packageManager.group(groupBy))
|
||||
})
|
||||
|
||||
document.getElementById('search-package').addEventListener('input', ({ target: { value } }) => {
|
||||
packageManager.setFilterValue(value.toLowerCase());
|
||||
renderList(packageManager.group(groupBy))
|
||||
|
|
|
|||
|
|
@ -29,7 +29,9 @@
|
|||
<path d="M12 3l0 6"></path>
|
||||
<path d="M12 15l0 6"></path>
|
||||
</svg>
|
||||
latest
|
||||
<input class="package-version" placeholder="latest"
|
||||
value="${item.state && item.state !== 'latest' ? item.state : ''}"
|
||||
oninput="updateVersion(event, '${item.path}')" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,11 @@ html {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
#download-link>button {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#platform {
|
||||
|
|
@ -273,4 +277,12 @@ select {
|
|||
background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
|
||||
background-size: 4px 4px, 4px 4px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.package-version {
|
||||
height: 50%;
|
||||
font-size: 80%;
|
||||
width: 4rem;
|
||||
padding-top: unset;
|
||||
padding-bottom: unset;
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
const BASE_API_PATH = 'https://localhost/api';
|
||||
const pkgURL = `${BASE_API_PATH}/packages`;
|
||||
const downloadURL = `${BASE_API_PATH}/download`;
|
||||
|
||||
class Package {
|
||||
/**
|
||||
* @typedef {Object} Module
|
||||
|
|
@ -20,9 +24,6 @@ class Package {
|
|||
* @property {string} name
|
||||
*/
|
||||
|
||||
/** @type {string} */
|
||||
pkgURL = "https://localhost/api/packages";
|
||||
|
||||
/**
|
||||
* @type {ReadonlyArray<Pkg>}
|
||||
*/
|
||||
|
|
@ -37,7 +38,7 @@ class Package {
|
|||
* @returns Promise<>
|
||||
*/
|
||||
getPackages() {
|
||||
return fetch(this.pkgURL, { headers: { 'X-Requested-With': 'XMLHttpRequest', Origin: 'https://caddyserver.com' } })
|
||||
return fetch(pkgURL, { headers: { 'X-Requested-With': 'XMLHttpRequest', Origin: 'https://caddyserver.com' } })
|
||||
.then(res => res.json())
|
||||
.then(({ result }) => this.packages = result.sort((a, b) => a.downloads - b.downloads).map(item => ({ ...item, description: item.modules?.map(m => m.docs ?? m.name).join('\n') ?? '', name: item.repo.split('/')[4].toLowerCase() })));
|
||||
}
|
||||
|
|
@ -119,27 +120,83 @@ class Package {
|
|||
|
||||
const packageManager = new Package();
|
||||
|
||||
let packages = [];
|
||||
const params = new URLSearchParams(window.location.search?.slice(1));
|
||||
let versions = params.getAll('p').reduce((acc, current) => {
|
||||
[p, v] = current.split('@');
|
||||
|
||||
acc[p] = v ?? '';
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
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) {
|
||||
if (module in versions) {
|
||||
delete versions[module];
|
||||
const countVersions = Object.keys(versions).length;
|
||||
if (!countVersions) {
|
||||
modulesCount.innerHTML = '';
|
||||
} else {
|
||||
modulesCount.innerHTML = `with ${packages.length} extra module${packages.length > 1 ? 's' : ''}`;
|
||||
modulesCount.innerHTML = `with ${countVersions} extra module${countVersions > 1 ? 's' : ''}`;
|
||||
}
|
||||
|
||||
element.innerHTML = "Add this module";
|
||||
} else {
|
||||
packages.push(module);
|
||||
versions[module] = '';
|
||||
const countVersions = Object.keys(versions).length;
|
||||
element.innerHTML = "Remove this module";
|
||||
modulesCount.innerHTML = `with ${packages.length} extra module${packages.length > 1 ? 's' : ''}`;
|
||||
modulesCount.innerHTML = `with ${countVersions} extra module${countVersions > 1 ? 's' : ''}`;
|
||||
}
|
||||
|
||||
document.getElementById('command-builder').innerText = `xcaddy build${packages.map(p => ` --with ${p}`).join('')}`
|
||||
setDownloadLink();
|
||||
}
|
||||
|
||||
function setDownloadLink() {
|
||||
document.getElementById('command-builder').innerText = getCommand();
|
||||
document
|
||||
.getElementById('download-link')
|
||||
.setAttribute('href', `${downloadURL}?${new URLSearchParams(Object.entries(versions).map(p => ['p', `${p}${!!versions[p] ? `@${versions[p]}` : ''}`])).toString()}`);
|
||||
}
|
||||
|
||||
function getCommand() {
|
||||
return `xcaddy build${Object.entries(versions ?? {}).map(([p, v]) => ` --with ${p}${!!v ? `@${v}` : ''}`).join('')}`
|
||||
}
|
||||
|
||||
function copyCommand() {
|
||||
navigator.clipboard.writeText(`xcaddy build${packages.map(s => ` --with ${s}`).join('')}`)
|
||||
}
|
||||
navigator.clipboard.writeText(getCommand())
|
||||
}
|
||||
|
||||
function renderList(list) {
|
||||
if (groupBy === 'type') {
|
||||
const groupedData = Object.entries(packageManager.group(groupBy)).filter(([_, items]) => !!items.length)
|
||||
document.getElementById('side-panel-packages').innerHTML = `
|
||||
<div>
|
||||
<h2 class="blue">Namespaces</h2>
|
||||
${groupedData.map(([k]) => `<a href="#${k}"> ${k}</a>`).join('')}
|
||||
</div>`;
|
||||
document.getElementById('packages').innerHTML = groupedData.map(([category, items]) => `
|
||||
<section id="${category}">
|
||||
<h2 class="blue">${category}</h2>
|
||||
<div class="card-list">${items.map(item => getCardTemplate({ ...item, state: versions[item.path] })).join('')}</div>
|
||||
</section>`).join('')
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('side-panel-packages').innerHTML = '';
|
||||
document.getElementById('packages').innerHTML = `
|
||||
<div class="card-list">
|
||||
${list.map(item => getCardTemplate({ ...item, state: versions[item.path] })).join('')}
|
||||
</div>`;
|
||||
};
|
||||
|
||||
packageManager.getPackages().then(() => {
|
||||
renderList(packageManager.group(groupBy));
|
||||
const countVersions = Object.keys(versions).length;
|
||||
modulesCount.innerHTML = countVersions ? `with ${countVersions} extra module${countVersions > 1 ? 's' : ''}` : '';
|
||||
setDownloadLink();
|
||||
})
|
||||
|
||||
function updateVersion({ target: { value } }, pkg) {
|
||||
versions[pkg] = value;
|
||||
setDownloadLink();
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue