From 484068fc38f9077a1b6b54f9f53b53486a02a6d0 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Fri, 9 Feb 2024 13:07:39 +0600 Subject: [PATCH] feat: add older and nightly downloads page --- website/package-lock.json | 42 +++++- website/package.json | 5 +- .../downloads/download-items.svelte | 25 ++++ website/src/components/markdown/layout.svelte | 3 + website/src/components/navbar/navbar.svelte | 4 +- website/src/lib/index.ts | 15 ++ website/src/routes/downloads/+page.svelte | 32 ++-- .../src/routes/downloads/nightly/+page.svelte | 33 +++++ .../src/routes/downloads/older/+page.svelte | 138 ++++++++++++++++++ website/src/routes/downloads/older/+page.ts | 14 ++ .../src/routes/downloads/packages/+page.svx | 70 +++++++++ website/svelte.config.js | 8 +- 12 files changed, 369 insertions(+), 20 deletions(-) create mode 100644 website/src/components/downloads/download-items.svelte create mode 100644 website/src/components/markdown/layout.svelte create mode 100644 website/src/routes/downloads/nightly/+page.svelte create mode 100644 website/src/routes/downloads/older/+page.svelte create mode 100644 website/src/routes/downloads/older/+page.ts create mode 100644 website/src/routes/downloads/packages/+page.svx diff --git a/website/package-lock.json b/website/package-lock.json index a0e777b4..9aa4c4ad 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -10,12 +10,15 @@ "dependencies": { "@floating-ui/dom": "1.6.1", "@fortawesome/free-brands-svg-icons": "^6.5.1", + "@octokit/openapi-types": "^19.1.0", "@octokit/rest": "^20.0.2", + "date-fns": "^3.3.1", "highlight.js": "11.9.0", "lucide-svelte": "^0.323.0", "remark-container": "^0.1.2", "remark-github": "^12.0.0", - "svelte-fa": "^4.0.2" + "svelte-fa": "^4.0.2", + "svelte-markdown": "^0.4.1" }, "devDependencies": { "@playwright/test": "^1.28.1", @@ -1231,6 +1234,11 @@ "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", "dev": true }, + "node_modules/@types/marked": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.2.tgz", + "integrity": "sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg==" + }, "node_modules/@types/mdast": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz", @@ -1878,6 +1886,15 @@ "node": ">=4" } }, + "node_modules/date-fns": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.3.1.tgz", + "integrity": "sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -2946,6 +2963,17 @@ "node": ">=12" } }, + "node_modules/marked": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/marked/-/marked-5.1.2.tgz", + "integrity": "sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 16" + } + }, "node_modules/mdast-util-find-and-replace": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.1.tgz", @@ -4270,6 +4298,18 @@ "svelte": "^3.19.0 || ^4.0.0" } }, + "node_modules/svelte-markdown": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/svelte-markdown/-/svelte-markdown-0.4.1.tgz", + "integrity": "sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==", + "dependencies": { + "@types/marked": "^5.0.1", + "marked": "^5.1.2" + }, + "peerDependencies": { + "svelte": "^4.0.0" + } + }, "node_modules/svelte-preprocess": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.3.tgz", diff --git a/website/package.json b/website/package.json index 54d74c17..f39f01e5 100644 --- a/website/package.json +++ b/website/package.json @@ -44,11 +44,14 @@ "dependencies": { "@floating-ui/dom": "1.6.1", "@fortawesome/free-brands-svg-icons": "^6.5.1", + "@octokit/openapi-types": "^19.1.0", "@octokit/rest": "^20.0.2", + "date-fns": "^3.3.1", "highlight.js": "11.9.0", "lucide-svelte": "^0.323.0", "remark-container": "^0.1.2", "remark-github": "^12.0.0", - "svelte-fa": "^4.0.2" + "svelte-fa": "^4.0.2", + "svelte-markdown": "^0.4.1" } } diff --git a/website/src/components/downloads/download-items.svelte b/website/src/components/downloads/download-items.svelte new file mode 100644 index 00000000..1dfb1ee2 --- /dev/null +++ b/website/src/components/downloads/download-items.svelte @@ -0,0 +1,25 @@ + + +
+ {#each Object.entries(links) as link} + +
+ {#each link[1][1] as icon} + + {/each} +

+ {link[1][2]} +

+
+

{link[0]}

+ + {/each} +
diff --git a/website/src/components/markdown/layout.svelte b/website/src/components/markdown/layout.svelte new file mode 100644 index 00000000..34898dfc --- /dev/null +++ b/website/src/components/markdown/layout.svelte @@ -0,0 +1,3 @@ +
+ +
diff --git a/website/src/components/navbar/navbar.svelte b/website/src/components/navbar/navbar.svelte index 3d4f0ab3..9f11e0ca 100644 --- a/website/src/components/navbar/navbar.svelte +++ b/website/src/components/navbar/navbar.svelte @@ -20,7 +20,9 @@ > -

Spotube

+

+ Spotube +

= { + Android: [`${nightlyReleaseUrl}/Spotube-android-all-arch.apk`, [faAndroid], 'apk'], + Windows: [`${nightlyReleaseUrl}/Spotube-windows-x86_64-setup.exe`, [faWindows], 'exe'], + macOS: [`${nightlyReleaseUrl}/Spotube-macos-universal.dmg`, [faApple], 'dmg'], + 'Ubuntu, Debian': [`${nightlyReleaseUrl}/Spotube-linux-x86_64.deb`, [faUbuntu, faDebian], 'deb'], + 'Fedora, Redhat, Opensuse': [ + `${nightlyReleaseUrl}/Spotube-linux-x86_64.rpm`, + [faFedora, faRedhat, faOpensuse], + 'rpm' + ], + iPhone: [`${nightlyReleaseUrl}/Spotube-iOS.ipa`, [faApple], 'ipa'] +}; diff --git a/website/src/routes/downloads/+page.svelte b/website/src/routes/downloads/+page.svelte index 5eb0c3fb..0bc9210e 100644 --- a/website/src/routes/downloads/+page.svelte +++ b/website/src/routes/downloads/+page.svelte @@ -1,7 +1,14 @@
@@ -13,18 +20,19 @@
Spotube is available for every platform

-
- {#each Object.entries(extendedDownloadLinks) as links} - -
- {#each links[1][1] as icon} - - {/each} -

- {links[1][2]} -

+ + +


+ +

Other Downloads

+

+
+ {#each otherDownloads as download} + +
+ +
{download[1]}
-

{links[0]}

 {/each}
diff --git a/website/src/routes/downloads/nightly/+page.svelte b/website/src/routes/downloads/nightly/+page.svelte new file mode 100644 index 00000000..d90b74a5 --- /dev/null +++ b/website/src/routes/downloads/nightly/+page.svelte @@ -0,0 +1,33 @@ + + +
+

+ Nightly Downloads + +

+

+ +
+ + +
diff --git a/website/src/routes/downloads/older/+page.svelte b/website/src/routes/downloads/older/+page.svelte new file mode 100644 index 00000000..3e9288ae --- /dev/null +++ b/website/src/routes/downloads/older/+page.svelte @@ -0,0 +1,138 @@ + + +
+
+

Older versions

+ +
+

+ +
+ {#each data.releases as release} +

+ {release.tag_name} + + ({formatDistanceToNow(release.published_at ?? new Date(), { addSuffix: true })}) + +

+
+ {#each Object.entries(groupByOS(release.assets)) as [osName, assets]} +
+
+ + {osName} +
+
+ {#each assets as asset} + + + + {/each} +
+
+ {/each} +
+ + + + + Release Notes & Changelogs + + + + + + +
+ {/each} +
+ +
diff --git a/website/src/routes/downloads/older/+page.ts b/website/src/routes/downloads/older/+page.ts new file mode 100644 index 00000000..e26a329c --- /dev/null +++ b/website/src/routes/downloads/older/+page.ts @@ -0,0 +1,14 @@ +import type { PageLoad } from './$types'; +import { Octokit } from '@octokit/rest'; + +const github = new Octokit(); +export const load: PageLoad = async () => { + const { data: releases } = await github.repos.listReleases({ + owner: 'KRTirtho', + repo: 'spotube' + }); + + return { + releases + }; +}; diff --git a/website/src/routes/downloads/packages/+page.svx b/website/src/routes/downloads/packages/+page.svx new file mode 100644 index 00000000..9044550f --- /dev/null +++ b/website/src/routes/downloads/packages/+page.svx @@ -0,0 +1,70 @@ + + + + +
+

Package Managers

+ + Spotube is available in various Package Managers supported by Platform + + ## Linux + ### Flatpak + + Make sure [Flatpak](https://flatpak.org) is installed in your Linux device & Run the following command in the terminal: + + ```bash + $ flatpak install com.github.KRTirtho.Spotube + ```` + + ### Arch User Repository (AUR) + + If you're an Arch Linux user, you can also install Spotube from AUR. + Make sure you have `yay`/`pamac`/`paru` installed in your system. And Run the Following command in the Terminal: + + ```bash + $ yay -Sy spotube-bin + ``` + + ```bash + $ pamac install spotube-bin + ``` + + ```bash + $ paru -Sy spotube-bin + ``` + + ## Windows + + ### Chocolatey + + Spotube is available in [community.chocolatey.org](https://community.chocolatey.org) repo. If you have chocolatey install in your system just run following command in an Elevated Command Prompt or PowerShell: + + ```powershell + $ choco install spotube + ``` + + ### WinGet + + Spotube is also available in the Official Windows PackageManager WinGet. Make sure you have WinGet installed in your Windows machine and run following in a Terminal: + + ```powershell + $ winget install --id KRTirtho.Spotube + ``` + + ### Scoop + + Spotube is also available in [Scoop](https://scoop.sh) bucket. Make sure you have Scoop installed in your Windows machine and run following in a Terminal: + + ```powershell + $ scoop bucket add extras + $ scoop install spotube + ``` +
diff --git a/website/svelte.config.js b/website/svelte.config.js index 933dddce..24bf93b4 100644 --- a/website/svelte.config.js +++ b/website/svelte.config.js @@ -1,20 +1,18 @@ import adapter from '@sveltejs/adapter-static'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; import { mdsvex } from 'mdsvex'; -import containers from 'remark-container'; -import github from 'remark-github'; /** @type {import('@sveltejs/kit').Config} */ const config = { - extensions: ['.svelte'], + extensions: ['.svelte', '.svx', '.md'], // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors preprocess: [ vitePreprocess(), mdsvex({ - extensions: ['.svx'], + extensions: ['.svx', '.md'], highlight: {}, - remarkPlugins: [containers, github] + layout: './src/components/markdown/layout.svelte' }) ], vitePlugin: {