feat(redesign): Download page

new/resources/js/download.js

@@ -0,0 +1,120 @@
+class Package {
+    /**
+     * @typedef {Object} Module
+     * @property {string} docs
+     * @property {string} name
+     * @property {string} package
+     * @property {string} repo
+     */
+
+    /**
+     * @typedef {Object} Pkg
+     * @property {string} id
+     * @property {string} path
+     * @property {string} published
+     * @property {boolean} listed
+     * @property {boolean} available
+     * @property {number} downloads
+     * @property {ReadonlyArray<Module>} modules
+     * @property {string} repo
+     * @property {string} name
+     */
+
+    /** @type {string} */
+    pkgURL = "https://localhost/api/packages";
+
+    /** 
+     * @type {ReadonlyArray<Pkg>}
+     */
+    packages = [];
+    
+    /** 
+     * @type {string}
+     */
+    filter = '';
+    
+    /**
+     * @returns Promise<>
+     */
+    getPackages() {
+        return fetch(this.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() })));
+    }
+
+    setFilterValue(value) {
+        this.filter = value;
+    }
+
+    getSearchPackages(pkgs) {
+        if (!this.filter) {
+            return pkgs;
+        }
+        
+        return pkgs.filter(pkg => pkg.name.includes(this.filter) || pkg.repo.includes(this.filter) || pkg.description.includes(this.filter));
+    }
+
+    /**
+     * @param {'alphabetically' | 'type' | 'download'} groupBy
+     * @return {
+     *   Record<string, Pkg> | ReadonlyArray<Pkg}
+     */
+    group(groupBy = 'alphabetically') {
+        const pkgs = this.getSearchPackages(this.packages);
+        switch (groupBy) {
+            case 'alphabetically':
+                return pkgs.sort((a,b) => a.name.localeCompare(b.name));
+            case 'download':
+                return pkgs.sort((a,b) => b.downloads - a.downloads);
+            case 'type':
+                return pkgs.reduce((acc, current) => {
+                    if (!current?.modules?.length) {
+
+                        return acc;
+                    }
+
+                    current.modules.forEach(module => {
+                        let moduleName = module.name
+                        if (module.name.includes('.')) {
+                            const splitted = module.name.split('.')
+                            moduleName = `${splitted[0]}.${splitted[1]}`
+                        }
+                        if (acc[moduleName]) {
+                            acc[moduleName] = [...acc[moduleName], current];
+                        }
+                    })
+
+                    return acc;
+                }, {
+                    "http.handlers": [],
+                    "http.matchers": [],
+                    "dns.providers": [],
+                    "http.encoders": [],
+                    "caddy.config_loaders": [],
+                    "caddy.fs": [],
+                    "caddy.listeners": [],
+                    "caddy.logging.encoders": [],
+                    "caddy.logging.encoders.filter": [],
+                    "caddy.logging.writers": [],
+                    "caddy.storage": [],
+                    "events.handlers": [],
+                    "http.authentication.hashes": [],
+                    "http.authentication.providers": [],
+                    "http.ip_sources": [],
+                    "http.precompressed": [],
+                    "http.reverse_proxy.circuit_breakers": [],
+                    "http.reverse_proxy.selection_policies": [],
+                    "http.reverse_proxy.transport": [],
+                    "http.reverse_proxy.upstreams": [],
+                    "tls.certificates": [],
+                    "tls.client_auth": [],
+                    "tls.handshake_match": [],
+                    "tls.issuance": [],
+                    "tls.get_certificate": [],
+                    "tls.stek": [],
+                })
+        }
+    }
+}
+
+const packageManager = new Package();