-
-
-
-
-
+
+ Download Caddy
+ {{include "/includes/head.html"}}
+
+
+
+
+
+
+ {{include "/includes/header.html" "light-header"}}
+
+
+
+
+ }
*/
packages = [];
-
+
/**
* @type {string}
*/
filter = '';
-
+
/**
* @returns Promise<>
*/
@@ -50,7 +50,7 @@ class Package {
if (!this.filter) {
return pkgs;
}
-
+
return pkgs.filter(pkg => pkg.name.includes(this.filter) || pkg.repo.includes(this.filter) || pkg.description.includes(this.filter));
}
@@ -63,9 +63,9 @@ class Package {
const pkgs = this.getSearchPackages(this.packages);
switch (groupBy) {
case 'alphabetically':
- return pkgs.sort((a,b) => a.name.localeCompare(b.name));
+ return pkgs.sort((a, b) => a.name.localeCompare(b.name));
case 'download':
- return pkgs.sort((a,b) => b.downloads - a.downloads);
+ return pkgs.sort((a, b) => b.downloads - a.downloads);
case 'type':
return pkgs.reduce((acc, current) => {
if (!current?.modules?.length) {
@@ -118,3 +118,24 @@ class 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('')}`
+}
\ No newline at end of file
Download
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/new/resources/css/download.css b/new/resources/css/download.css
index 6823e70..67a840d 100644
--- a/new/resources/css/download.css
+++ b/new/resources/css/download.css
@@ -46,6 +46,13 @@ html {
top: 0;
}
+#platform {
+ width: unset;
+ min-height: unset;
+ height: unset;
+ line-height: unset;
+}
+
#packages {
width: 100%;
padding-top: 32px;
@@ -67,10 +74,29 @@ html {
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 {
border-radius: var(--radius);
border: 1px solid var(--button-border-color);
- padding: 0.75rem;
+ padding: 0.5rem 0.75rem;
display: inline-flex;
width: 100%;
}
@@ -80,6 +106,11 @@ html {
overflow-x: scroll;
display: inline-flex;
white-space: nowrap;
+ font-size: 1rem;
+}
+
+#command>svg {
+ height: 1em;
}
#command-builder::before {
diff --git a/new/resources/js/download.js b/new/resources/js/download.js
index 71941de..4caf6c1 100644
--- a/new/resources/js/download.js
+++ b/new/resources/js/download.js
@@ -27,12 +27,12 @@ class Package {
* @type {ReadonlyArray
+
+
- {{include "/includes/footer.html"}}
-
+
- document.getElementById('search-package').addEventListener('input', ({ target: { value } }) => {
- packageManager.setFilterValue(value.toLowerCase());
- renderList(packageManager.group(groupBy))
- })
- document.getElementById('sort-package').addEventListener('change', ({ target: { value } }) => {
- groupBy = value;
- renderList(packageManager.group(value))
- })
-
-
\ No newline at end of file
diff --git a/new/includes/card.html b/new/includes/card.html
index 5ae6221..c84231a 100644
--- a/new/includes/card.html
+++ b/new/includes/card.html
@@ -39,7 +39,7 @@
+ Download the caddy binary for
+
+
-
+
+
-
+
+ xcaddy build
+
+
-
-
+
-
-
- Download generated caddy binary with 3 extra modules or run the command below
-
-
-
-
-
- xcaddy build
-
-
-