From 747ff31518c39ff41091bbc9628a9c7d03d1b44f Mon Sep 17 00:00:00 2001 From: Abdenasser Date: Thu, 7 Nov 2024 23:09:20 +0100 Subject: [PATCH] adds new download buttons for windows and linux --- .github/workflows/build-check.yml | 48 ++++++ docs/index.html | 179 ++++++++++++++++---- docs/styles.css | 262 +++++++++++++++++++++++++++++- src/lib/components/AppInfo.svelte | 48 ++++-- 4 files changed, 489 insertions(+), 48 deletions(-) create mode 100644 .github/workflows/build-check.yml diff --git a/.github/workflows/build-check.yml b/.github/workflows/build-check.yml new file mode 100644 index 0000000..5e96c33 --- /dev/null +++ b/.github/workflows/build-check.yml @@ -0,0 +1,48 @@ +name: Build Check + +on: + pull_request: + branches: [ main ] + +env: + CARGO_TERM_COLOR: always + +jobs: + build: + name: Build Check + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: 'lts/*' + cache: 'npm' + + - name: Install Rust + uses: dtolnay/rust-toolchain@stable + + - name: Install Linux Dependencies + run: | + sudo apt-get update + sudo apt-get install -y \ + build-essential \ + pkg-config \ + libgtk-3-dev \ + libayatana-appindicator3-dev \ + librsvg2-dev \ + libglib2.0-dev \ + libjavascriptcoregtk-4.0-dev \ + libsoup-3.0-dev \ + libwebkit2gtk-4.1-dev + + - name: Install Dependencies + run: npm install + + - name: Build Frontend + run: npm run build + + - name: Build Application + run: npm run tauri build \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 1ac5b66..9cd5304 100644 --- a/docs/index.html +++ b/docs/index.html @@ -127,39 +127,98 @@
-

Download

-

Choose the version that matches your system

-
- - 💻 -
- Intel Mac - For Intel-based Macs -
- - - 🍎 -
- Apple Silicon - For M1/M2/M3 Macs -
- - - 🐧 -
- Linux ARM64 - For ARM64-based Linux (.deb) -
- +

Download NeoHtop

+

Choose your platform to get started

+
+ Current Version: Loading...
-
- ✓ - Notarized by Apple for enhanced security - Learn more +
+ +
+

macOS

+ +
+ Notarized by Apple +
+
+ + 💻 +
+ Intel Chip + macOS 10.15 or later +
+ + + 🍎 +
+ Apple Silicon + macOS 11.0 or later +
+ +
+
+ + +
+

Windows

+
+ + 🪟 +
+ Windows + Windows 10 or later +
+ +
+
+ + +
+

Linux

+
+ +
+

x86_64

+ + 📦 +
+ .deb Package + Debian/Ubuntu +
+ + + 🐧 +
+ AppImage + Universal Linux +
+ +
+ + +
+

ARM64

+ + 📦 +
+ .deb Package + Debian/Ubuntu ARM64 +
+ + + 🐧 +
+ AppImage + Universal Linux ARM64 +
+ +
+
+
@@ -327,6 +386,62 @@

+ \ No newline at end of file diff --git a/docs/styles.css b/docs/styles.css index 98ea960..39aff8f 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -348,28 +348,60 @@ section { /* Download Section */ .download-options { display: flex; - gap: 1rem; + gap: 1.5rem; justify-content: center; margin: 2rem 0; flex-wrap: wrap; + padding: 0 1rem; } .download-button { background: var(--primary-color); color: white; - padding: 1rem 2rem; + padding: 1rem 1.5rem; border-radius: 8px; text-decoration: none; display: flex; align-items: center; - gap: 0.5rem; + gap: 1rem; transition: all 0.2s; - position: relative; + min-width: 250px; +} + +.download-button .button-text { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.download-button .primary { + font-weight: 600; + font-size: 1rem; +} + +.download-button .secondary { + font-size: 0.85rem; + opacity: 0.9; +} + +/* New styles for nested links */ +.download-button .secondary a { + color: inherit; + text-decoration: none; + padding: 2px 6px; + border-radius: 4px; + transition: all 0.2s; + display: inline-block; +} + +.download-button .secondary a:hover { + background-color: rgba(255, 255, 255, 0.2); + transform: translateY(-1px); } .download-button:hover { transform: translateY(-2px); - background: var(--secondary-color); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .download-button .icon { @@ -1104,4 +1136,224 @@ footer { .hero-background { flex: 0 0 100%; } +} + +.download-button.windows { + background: #00a4ef; +} + +.download-button.windows:hover { + background: #0090d5; +} + +.download-button.linux { + background: var(--primary-color); + flex-direction: column; + align-items: flex-start; + padding: 1rem 1.5rem; +} + +.download-button.linux:hover { + background: var(--secondary-color); +} + +.download-options-group { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.download-option { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.85rem; +} + +.download-option .format { + color: rgba(255, 255, 255, 0.8); + min-width: 65px; +} + +.download-option .separator { + color: rgba(255, 255, 255, 0.4); + font-size: 0.7rem; +} + +.download-option a { + color: inherit; + text-decoration: none; + padding: 2px 6px; + border-radius: 4px; + transition: all 0.2s; +} + +.download-option a:hover { + background-color: rgba(255, 255, 255, 0.2); + transform: translateY(-1px); +} + +.download-button.linux .secondary { + line-height: 1.6; + font-size: 0.85rem; +} + +.download-button.linux .secondary a { + color: inherit; + text-decoration: none; + padding: 2px 6px; + border-radius: 4px; + transition: all 0.2s; + white-space: nowrap; +} + +.download-button.linux .secondary a:hover { + background-color: rgba(255, 255, 255, 0.2); + transform: translateY(-1px); +} + +.download-button.linux .secondary .separator { + opacity: 0.7; + margin: 0 2px; +} + +.downloads { + padding: 2rem 0; +} + +.download-container { + max-width: 900px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.download-container h2 { + font-size: 2.5rem; + margin-bottom: 1rem; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.download-subtitle { + color: var(--text-secondary); + margin-bottom: 3rem; +} + +.download-options { + display: flex; + flex-direction: column; + gap: 2.5rem; +} + +.download-group { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.platform-title { + font-size: 1.2rem; + color: var(--text-secondary); + text-align: left; + margin-bottom: 0.5rem; +} + +.platform-options { + display: flex; + gap: 1rem; + justify-content: center; +} + +.download-button { + background: var(--card-background); + color: var(--text-primary); + padding: 1rem 1.5rem; + border-radius: 12px; + text-decoration: none; + display: flex; + align-items: center; + gap: 1rem; + transition: all 0.2s; + border: 1px solid rgba(255, 255, 255, 0.1); + min-width: 250px; +} + +.download-button:hover { + transform: translateY(-2px); + border-color: var(--primary-color); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.download-button .icon { + font-size: 1.5rem; +} + +.button-text { + display: flex; + flex-direction: column; + gap: 0.25rem; + text-align: left; +} + +.button-text .primary { + font-weight: 600; + font-size: 1rem; +} + +.button-text .secondary { + font-size: 0.85rem; + opacity: 0.8; +} + +.linux-options { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.format-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.format-label { + font-size: 0.9rem; + color: var(--text-secondary); + text-align: left; +} + +.format-buttons { + display: flex; + gap: 1rem; + justify-content: center; +} + +.format-buttons .download-button { + min-width: 150px; +} + +/* Dark mode adjustments */ +[data-theme="dark"] .download-button { + background: rgba(30, 41, 59, 0.8); + border-color: rgba(255, 255, 255, 0.1); +} + +[data-theme="dark"] .download-button:hover { + border-color: var(--primary-color); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +.version-info { + text-align: center; + margin: 1rem 0; + font-size: 0.9rem; + color: var(--text-secondary); +} + +#current-version { + font-weight: 600; + color: var(--primary-color); } \ No newline at end of file diff --git a/src/lib/components/AppInfo.svelte b/src/lib/components/AppInfo.svelte index 687403c..020ea52 100644 --- a/src/lib/components/AppInfo.svelte +++ b/src/lib/components/AppInfo.svelte @@ -32,16 +32,43 @@ "https://api.github.com/repos/abdenasser/neohtop/releases/latest", ); const data = await response.json(); - latestVersion = data.tag_name.replace("v", ""); - hasUpdate = version && latestVersion && version !== latestVersion; + + // Extract version number from tag (e.g., "1.0.6" from "macos-nightly-1.0.6") + const versionMatch = data.tag_name.match(/\d+\.\d+\.\d+/); + if (!versionMatch) { + console.warn( + "Unexpected version format in latest release:", + data.tag_name, + ); + return; + } + + latestVersion = versionMatch[0]; + + // Extract version number from current version + const currentVersionMatch = version.match(/\d+\.\d+\.\d+/); + if (!currentVersionMatch) { + console.warn("Unexpected current version format:", version); + return; + } + + // Compare only the version numbers + hasUpdate = currentVersionMatch[0] !== latestVersion; } catch (error) { console.error("Failed to check latest version:", error); + latestVersion = ""; + hasUpdate = false; } } onMount(async () => { - version = await getVersion(); - await checkLatestVersion(); + try { + version = await getVersion(); + await checkLatestVersion(); + } catch (error) { + console.error("Failed to initialize version info:", error); + version = ""; + } }); @@ -85,14 +112,13 @@ source :: + href={APP_INFO.github} + class="value" + target="_blank" + rel="noopener noreferrer" + > {APP_INFO.github} - - +
stack