feat(redesign): toggle module

new/download.html

@@ -29,12 +29,33 @@
 				<div id="packages">
 				</div>
 			</div>
+			<div id="download" class="wrapper">
+				<div class="shadow-lg">
+					<div>
+						<span>Download generated caddy binary with 3 extra modules or run the command below</span>
+					</div>
+
+					<div id="command">
+						<pre>
+							<span id="command-builder">xcaddy build</span>
+						</pre>
+						<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy" 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="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>
+						</svg>
+					</div>
+				</div>
+			</div>
 		</main>
 
 
 		{{include "/includes/footer.html"}}
 		<script type="text/javascript">
 			let groupBy = 'download';
+			let packages = [];
 			const getCardTemplate = item => `{{ include "/includes/card.html" }}`;
 
 			function renderList(list) {
@@ -60,6 +81,19 @@
 </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(() => {
 				renderList(packageManager.group(groupBy))
 			})

new/includes/card.html

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

new/resources/css/download.css

@@ -1,5 +1,10 @@
+* {
+    --border-download: 1px solid rgba(226, 232, 240, 0.8);
+    --radius: 0.5rem;
+}
+
 .card {
-    border: 1px solid rgba(226, 232, 240, 0.8);
+    border: var(--border-download);
     border-radius: 16px;
     padding: 16px;
     width: 100%;
@@ -18,6 +23,10 @@ html {
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
 }
 
+.shadow-lg {
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
 .wrapper.list {
     display: flex;
 }
@@ -45,6 +54,40 @@ html {
     gap: 48px;
 }
 
+#download {
+    position: sticky;
+    bottom: 0;
+    padding-bottom: 16px;
+}
+
+#download>div {
+    border: var(--border-download);
+    background-color: var(--body-bg);
+    border-radius: var(--radius);
+    padding: 1rem;
+}
+
+#command {
+    border-radius: var(--radius);
+    border: 1px solid var(--button-border-color);
+    padding: 0.75rem;
+    display: inline-flex;
+    width: 100%;
+}
+
+#command>pre {
+    width: 100%;
+    overflow-x: scroll;
+    display: inline-flex;
+    white-space: nowrap;
+}
+
+#command-builder::before {
+    content: '$';
+    color: var(--text-color-muted);
+    margin-right: 0.25rem;
+}
+
 h2 {
     padding-bottom: 16px;
     color: rgb(14, 110, 189);
@@ -92,10 +135,6 @@ h2 {
     font-weight: bold;
 }
 
-.card-icon {
-    border-radius: 8px;
-}
-
 .card-description {
     display: flex;
     color: var(--text-color-muted);
@@ -167,7 +206,7 @@ select {
     font-weight: 600;
     background-color: white;
     width: 100%;
-    border-radius: 0.5rem;
+    border-radius: var(--radius);
     border: none;
 }