From 761bc3bf03916a2133af8f1113884d7bd1653f38 Mon Sep 17 00:00:00 2001 From: Abdenasser Date: Mon, 11 Nov 2024 02:48:16 +0100 Subject: [PATCH] downloads count --- docs/index.html | 78 ++--------------------------- docs/main.js | 129 +++++++++++++++++++++++++++++++++++------------- docs/styles.css | 84 ++++++++++++++++++++++++++++--- 3 files changed, 178 insertions(+), 113 deletions(-) diff --git a/docs/index.html b/docs/index.html index efae48e..edbde6f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -53,19 +53,13 @@

Monitor Your System
With Style

-

A beautiful, lightning-fast system monitor built with Rust and Svelte. Experience - real-time performance monitoring like never before.

+

A beautiful, lightning-fast cross-platform system monitor.

Download Now View on GitHub
-
- Rust - Tauri - Svelte -
Process Management
-

Download NeoHtop

-

Choose your platform to get started

-
- Current Version: Loading... +

Download NeoHtop Loading...

+
+ ... Total Downloads
+

Choose your platform to get started

@@ -402,68 +396,6 @@

Tech Stack

- \ No newline at end of file diff --git a/docs/main.js b/docs/main.js index 359e7a3..1c0693a 100644 --- a/docs/main.js +++ b/docs/main.js @@ -1,4 +1,6 @@ +// =============================== // Theme Management +// =============================== const themeToggle = document.getElementById('themeToggle'); const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); @@ -16,77 +18,136 @@ if (savedTheme) { setTheme(prefersDark.matches); } -// Theme toggle button +// Theme event listeners themeToggle.addEventListener('click', () => { const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; setTheme(!isDark); }); -// System theme changes prefersDark.addEventListener('change', (e) => { if (!localStorage.getItem('theme')) { setTheme(e.matches); } }); +// =============================== +// Version and Download Management +// =============================== +async function fetchDownloadStats() { + try { + const releasesResponse = await fetch('https://api.github.com/repos/abdenasser/neohtop/releases'); + const releases = await releasesResponse.json(); + const githubDownloads = releases.reduce((total, release) => { + const releaseDownloads = release.assets.reduce((sum, asset) => + sum + asset.download_count, 0); + return total + releaseDownloads; + }, 0); + + const brewResponse = await fetch('https://formulae.brew.sh/api/analytics/install/homebrew-core/365d.json'); + const brewData = await brewResponse.json(); + const brewInstalls = brewData.formulae?.neohtop?.[0]?.count || 0; + + const totalDownloads = githubDownloads + brewInstalls; + document.getElementById('download-count').textContent = new Intl.NumberFormat().format(totalDownloads); + } catch (error) { + console.error('Failed to fetch download stats:', error); + document.getElementById('download-count').textContent = 'N/A'; + } +} + +async function updateVersion() { + try { + const response = await fetch('https://api.github.com/repos/Abdenasser/neohtop/releases/latest'); + const data = await response.json(); + const version = data.tag_name; + const versionNumber = version.match(/\d+\.\d+\.\d+/)?.[0]; + + if (versionNumber) { + document.getElementById('current-version').textContent = "v" + versionNumber; + updateDownloadLinks(versionNumber); + } + } catch (error) { + console.error('Failed to fetch version:', error); + } +} + +function updateDownloadLinks(versionNumber) { + const platformUrls = { + 'macos-intel': `intel-NeoHtop_${versionNumber}_x64.dmg`, + 'macos-silicon': `silicon-NeoHtop_${versionNumber}_aarch64.dmg`, + 'windows': `NeoHtop_${versionNumber}_x64.exe`, + 'linux-deb-x64': `NeoHtop_${versionNumber}_x86_64.deb`, + 'linux-appimage-x64': `NeoHtop_${versionNumber}_x86_64.AppImage`, + 'linux-rpm-x64': `NeoHtop_${versionNumber}_x86_64.rpm`, + 'linux-deb-arm64': `NeoHtop_${versionNumber}_aarch64.deb`, + 'linux-appimage-arm64': `NeoHtop_${versionNumber}_aarch64.AppImage`, + 'linux-rpm-arm64': `NeoHtop_${versionNumber}_aarch64.rpm` + }; + + document.querySelectorAll('.download-button').forEach(link => { + const platform = link.getAttribute('data-type'); + if (platformUrls[platform]) { + link.href = `https://github.com/Abdenasser/neohtop/releases/download/v${versionNumber}/${platformUrls[platform]}`; + } + }); +} + +// =============================== +// UI Interactions +// =============================== // FAQ Accordion document.querySelectorAll('.faq-question').forEach(button => { button.addEventListener('click', () => { const faqItem = button.parentElement; const isActive = faqItem.classList.contains('active'); - - // Close all FAQ items - document.querySelectorAll('.faq-item').forEach(item => { - item.classList.remove('active'); - }); - - // Toggle clicked item - if (!isActive) { - faqItem.classList.add('active'); - } + document.querySelectorAll('.faq-item').forEach(item => item.classList.remove('active')); + if (!isActive) faqItem.classList.add('active'); }); }); // Download tracking document.querySelectorAll('.download-button').forEach(button => { button.addEventListener('click', (e) => { - const version = button.getAttribute('data-version'); - const type = button.getAttribute('data-type'); - - // Google Analytics event gtag('event', 'download', { 'event_category': 'App', - 'event_label': type, - 'value': version + 'event_label': button.getAttribute('data-type'), + 'value': button.getAttribute('data-version') }); }); }); -// Smooth scroll for navigation +// Smooth scroll document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { - target.scrollIntoView({ - behavior: 'smooth', - block: 'start' - }); + target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); - -// Intersection Observer for animations -const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - entry.target.classList.add('visible'); - } - }); -}, { - threshold: 0.1 -}); +// =============================== +// Animations +// =============================== +const observer = new IntersectionObserver( + (entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + } + }); + }, + { threshold: 0.1 } +); document.querySelectorAll('.feature, .step, .download-button').forEach(el => { observer.observe(el); }); + +// =============================== +// Initialization +// =============================== +document.addEventListener('DOMContentLoaded', () => { + updateVersion(); + fetchDownloadStats(); +}); diff --git a/docs/styles.css b/docs/styles.css index d4375ef..f24dfe3 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -226,12 +226,6 @@ section { animation: float 6s ease-in-out infinite; } -.tech-stack { - display: flex; - gap: 0.75rem; - flex-wrap: wrap; -} - /* Responsive design */ @media (max-width: 1024px) { .hero { @@ -1354,4 +1348,82 @@ footer { #current-version { font-weight: 600; color: var(--primary-color); +} + +/* Download Section Responsive Styles */ +@media (max-width: 768px) { + .download-options { + flex-direction: column; + gap: 2rem; + } + + .download-group { + width: 100%; + } + + .platform-options { + flex-direction: column; + } + + .download-button { + width: 100%; + margin: 0.5rem 0; + } + + .linux-downloads { + width: 100%; + margin-top: 1rem; + } + + .linux-downloads h4 { + margin-bottom: 0.5rem; + } + + /* Adjust text size for better readability on mobile */ + .button-text .primary { + font-size: 0.9rem; + } + + .button-text .secondary { + font-size: 0.8rem; + } +} + +/* Extra small devices */ +@media (max-width: 480px) { + .download-container { + padding: 1rem; + } + + .download-stats { + font-size: 0.9rem; + } + + .platform-title { + font-size: 1.2rem; + } +} + +.download-stats { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: rgba(var(--primary-color-rgb), 0.1); + border-radius: 6px; + margin: 1rem 0; + font-size: 0.9rem; +} + +#download-count { + font-weight: bold; + color: var(--primary-color); + font-size: 1.1rem; +} + +/* Adjust the existing download-subtitle margin */ +.download-subtitle { + color: var(--text-secondary); + margin-bottom: 2rem; + margin-top: 0.5rem; } \ No newline at end of file