feat: initial download page

This commit is contained in:
Kingkor Roy Tirtho 2024-02-08 23:26:50 +06:00
parent 790ee91958
commit 060e8154cf
5 changed files with 73 additions and 24 deletions

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<html lang="en">
<head>
<meta charset="utf-8" />

View File

@ -1 +1,38 @@
// place files you want to import through the `$lib` alias in this folder.
import {
faAndroid,
faApple,
faDebian,
faFedora,
faOpensuse,
faUbuntu,
faWindows,
faRedhat
} from '@fortawesome/free-brands-svg-icons';
import { type IconDefinition } from '@fortawesome/free-brands-svg-icons/index';
const releasesUrl = 'https://github.com/KRTirtho/Spotube/releases/latest/download';
export const downloadLinks: Record<string, [string, IconDefinition[]]> = {
'Android Apk': [`${releasesUrl}/Spotube-android-all-arch.apk`, [faAndroid]],
'Windows Executable': [`${releasesUrl}/Spotube-windows-x86_64-setup.exe`, [faWindows]],
'macOS Dmg': [`${releasesUrl}/Spotube-macos-universal.dmg`, [faApple]],
'Ubuntu, Debian': [`${releasesUrl}/Spotube-linux-x86_64.deb`, [faUbuntu, faDebian]],
'Fedora, Redhat, Opensuse': [
`${releasesUrl}/Spotube-linux-x86_64.rpm`,
[faFedora, faRedhat, faOpensuse]
],
'iPhone Ipa': [`${releasesUrl}/Spotube-iOS.ipa`, [faApple]]
};
export const extendedDownloadLinks: Record<string, [string, IconDefinition[], string]> = {
Android: [`${releasesUrl}/Spotube-android-all-arch.apk`, [faAndroid], 'apk'],
Windows: [`${releasesUrl}/Spotube-windows-x86_64-setup.exe`, [faWindows], 'exe'],
macOS: [`${releasesUrl}/Spotube-macos-universal.dmg`, [faApple], 'dmg'],
'Ubuntu, Debian': [`${releasesUrl}/Spotube-linux-x86_64.deb`, [faUbuntu, faDebian], 'deb'],
'Fedora, Redhat, Opensuse': [
`${releasesUrl}/Spotube-linux-x86_64.rpm`,
[faFedora, faRedhat, faOpensuse],
'rpm'
],
iPhone: [`${releasesUrl}/Spotube-iOS.ipa`, [faApple], 'ipa']
};

View File

@ -4,17 +4,12 @@
faAndroid,
faWindows,
faApple,
faUbuntu,
faFedora,
faRedhat,
faOpensuse,
faLinux,
faDebian,
type IconDefinition
faLinux
} from '@fortawesome/free-brands-svg-icons/index';
import Fa from 'svelte-fa';
import { ChevronDown } from 'lucide-svelte';
import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
import { downloadLinks } from '$lib';
const popupFeatured: PopupSettings = {
// Represents the type of event that opens/closed the popup
@ -24,20 +19,6 @@
// Defines which side of your trigger the popup will appear
placement: 'bottom'
};
const releasesUrl = 'https://github.com/KRTirtho/Spotube/releases/latest/download';
const downloadLinks: Record<string, [string, IconDefinition[]]> = {
'Android Apk': [`${releasesUrl}/Spotube-android-all-arch.apk`, [faAndroid]],
'Windows Executable': [`${releasesUrl}/Spotube-windows-x86_64-setup.exe`, [faWindows]],
'Apple Dmg': [`${releasesUrl}/Spotube-macos-universal.dmg`, [faApple]],
'Linux Ubuntu/Debian': [`${releasesUrl}/Spotube-linux-x86_64.deb`, [faUbuntu, faDebian]],
'Linux Fedora/Redhat/Opensuse': [
`${releasesUrl}/Spotube-linux-x86_64.rpm`,
[faFedora, faRedhat, faOpensuse]
],
'iPhone Ipa': [`${releasesUrl}/Spotube-iOS.ipa`, [faApple]]
};
</script>
<section class="flex flex-col gap-4">

View File

@ -0,0 +1,31 @@
<script lang="ts">
import { extendedDownloadLinks } from '$lib';
import { Download } from 'lucide-svelte';
import Fa from 'svelte-fa';
</script>
<section class="p-4 md:p-16">
<h2 class="h2 flex items-center gap-4">
Download
<Download class="inline" size={30} />
</h2>
<br /><br />
<h5 class="h5">Spotube is available for every platform</h5>
<br />
<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{#each Object.entries(extendedDownloadLinks) as links}
<a href={links[1][0]} class="flex flex-col btn variant-ghost-primary rounded-xl p-0">
<div class="relative bg-primary-500 p-4 flex gap-4 justify-center rounded-t-xl w-full">
{#each links[1][1] as icon}
<Fa {icon} />
{/each}
<p class="chip variant-ghost-error text-error-400 absolute right-2 uppercase">
{links[1][2]}
</p>
</div>
<p class="p-4">{links[0]}</p>
</a>
{/each}
</div>
</section>

View File

@ -4,7 +4,7 @@ import typography from '@tailwindcss/typography';
import { skeleton } from '@skeletonlabs/tw-plugin';
export default {
darkMode: 'class',
darkMode: 'media',
content: [
'./src/**/*.{html,js,svelte,ts}',
join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')