Update downloads page

docs/docker/dhcp.md

@@ -97,4 +97,3 @@ The following bootfile names can be set as the boot file in the DHCP configurati
 | `netboot.xyz-arm64.efi`         | DHCP EFI boot image file, uses built-in iPXE NIC drivers             |
 | `netboot.xyz-arm64-snp.efi`     | UEFI w/ Simple Network Protocol, attempts to boot all net devices    |
 | `netboot.xyz-arm64-snponly.efi` | UEFI w/ Simple Network Protocol, only boots from device chained from |
-| `netboot.xyz-rpi4-snp.efi`      | UEFI for Raspberry Pi 4, attempts to boot all net devices            |

src/components/DownloadCard.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import styles from './DownloadCard.module.css';
+
+const DownloadCard = ({
+  title,
+  description,
+  url,
+  type,
+  isRecommended = false,
+  icon
+}) => {
+  const handleDownload = () => {
+    window.open(url, '_blank');
+  };
+
+  return (
+    <div className={clsx(
+      styles.downloadCard,
+      isRecommended && styles.recommended
+    )}>
+      {isRecommended && (
+        <div className={styles.recommendedBadge}>
+          Recommended
+        </div>
+      )}
+
+      <div className={styles.cardHeader}>
+        {icon && <div className={styles.icon}>{icon}</div>}
+        <h3 className={styles.title}>{title}</h3>
+        <span className={styles.type}>{type}</span>
+      </div>
+
+      <p className={styles.description}>{description}</p>
+
+      <button
+        className={styles.downloadButton}
+        onClick={handleDownload}
+        aria-label={`Download ${title}`}
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+        </svg>
+        Download
+      </button>
+    </div>
+  );
+};
+DownloadCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  isRecommended: PropTypes.bool,
+  icon: PropTypes.node
+};
+
+export default DownloadCard;

src/components/DownloadCard.module.css

@@ -0,0 +1,143 @@
+.downloadCard {
+  position: relative;
+  background: var(--ifm-card-background-color, #fff);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 12px;
+  padding: 1.5rem;
+  transition: all 0.2s ease;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.downloadCard:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+}
+
+.recommended {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 4px 12px rgba(37, 194, 160, 0.2);
+}
+
+.recommendedBadge {
+  position: absolute;
+  top: -8px;
+  right: 16px;
+  background: white;
+  border: 1px solid var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+[data-theme='dark'] .recommendedBadge {
+  background: var(--ifm-card-background-color);
+  border: 1px solid var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+}
+
+.cardHeader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 1rem;
+}
+
+.icon {
+  font-size: 1.5rem;
+  color: var(--ifm-color-primary);
+  min-width: 24px;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-800);
+  flex: 1;
+}
+
+.type {
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-emphasis-700);
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.description {
+  color: var(--ifm-color-emphasis-600);
+  margin-bottom: 1.5rem;
+  line-height: 1.5;
+  flex: 1;
+}
+
+.downloadButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: white;
+  border: 2px solid var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  font-size: 0.9rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.downloadButton:hover {
+  background: var(--ifm-color-primary);
+  color: white;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(37, 194, 160, 0.2);
+}
+
+[data-theme='dark'] .downloadButton {
+  background: var(--ifm-card-background-color);
+  border: 2px solid var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] .downloadButton:hover {
+  background: var(--ifm-color-primary);
+  color: var(--ifm-card-background-color);
+}
+
+.downloadButton svg {
+  transition: transform 0.2s ease;
+}
+
+.downloadButton:hover svg {
+  transform: translateY(2px);
+}
+
+@media (max-width: 768px) {
+  .downloadCard {
+    padding: 1rem;
+  }
+
+  .cardHeader {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .title {
+    font-size: 1rem;
+  }
+}

src/components/DownloadSection.js

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import DownloadCard from './DownloadCard';
+import styles from './DownloadSection.module.css';
+import PropTypes from 'prop-types';
+
+const DownloadSection = ({
+  title,
+  description,
+  downloads,
+  isCollapsible = false,
+  defaultExpanded = true
+}) => {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  const toggleExpanded = () => {
+    if (isCollapsible) {
+      setIsExpanded(!isExpanded);
+    }
+  };
+
+  return (
+    <div className={styles.downloadSection}>
+      <div
+        className={clsx(
+          styles.sectionHeader,
+          isCollapsible && styles.collapsible
+        )}
+        onClick={toggleExpanded}
+      >
+        <h3 className={styles.sectionTitle}>{title}</h3>
+        {description && (
+          <p className={styles.sectionDescription}>{description}</p>
+        )}
+        {isCollapsible && (
+          <button className={styles.toggleButton} aria-label="Toggle section">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className={clsx(styles.chevron, isExpanded && styles.expanded)}
+            >
+              <path d="M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6z"/>
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {(!isCollapsible || isExpanded) && (
+        <div className={styles.cardsGrid}>
+          {downloads.map((download, index) => (
+            <DownloadCard key={index} {...download} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+DownloadSection.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  downloads: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isCollapsible: PropTypes.bool,
+  defaultExpanded: PropTypes.bool,
+};
+
+export default DownloadSection;

src/components/DownloadSection.module.css

@@ -0,0 +1,89 @@
+.downloadSection {
+  margin-bottom: 3rem;
+}
+
+.sectionHeader {
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid var(--ifm-color-emphasis-200);
+}
+
+.collapsible {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 8px;
+  background: var(--ifm-background-surface-color);
+  transition: all 0.2s ease;
+}
+
+.collapsible:hover {
+  border-color: var(--ifm-color-primary);
+  background: var(--ifm-color-emphasis-100);
+}
+
+.sectionTitle {
+  margin: 0;
+  color: var(--ifm-color-emphasis-800);
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.sectionDescription {
+  margin: 0.5rem 0 0 0;
+  color: var(--ifm-color-emphasis-600);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.toggleButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: var(--ifm-color-emphasis-600);
+  transition: color 0.2s ease;
+}
+
+.toggleButton:hover {
+  color: var(--ifm-color-primary);
+}
+
+.chevron {
+  transition: transform 0.2s ease;
+}
+
+.chevron.expanded {
+  transform: rotate(180deg);
+}
+
+.cardsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .cardsGrid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .sectionTitle {
+    font-size: 1.25rem;
+  }
+
+  .collapsible {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .toggleButton {
+    align-self: flex-end;
+  }
+}