feat: add initial homepage with download links

2025-12-10 17:07:30 +00:00 · 2024-02-08 22:51:45 +06:00 · 2024-02-08 22:51:45 +06:00 · 790ee91958
commit 790ee91958
parent fc22f615cb
13 changed files with 187 additions and 42 deletions
--- a/website/package-lock.json
+++ b/website/package-lock.json
@ -9,11 +9,13 @@
      "version": "0.0.1",
      "dependencies": {
        "@floating-ui/dom": "1.6.1",
+        "@fortawesome/free-brands-svg-icons": "^6.5.1",
        "@octokit/rest": "^20.0.2",
        "highlight.js": "11.9.0",
        "lucide-svelte": "^0.323.0",
        "remark-container": "^0.1.2",
-        "remark-github": "^12.0.0"
+        "remark-github": "^12.0.0",
+        "svelte-fa": "^4.0.2"
      },
      "devDependencies": {
        "@playwright/test": "^1.28.1",
@ -24,7 +26,7 @@
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "@tailwindcss/typography": "0.5.10",
        "@types/eslint": "8.56.0",
-        "@types/node": "20.11.16",
+        "@types/node": "^20.11.16",
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "autoprefixer": "10.4.17",
@ -545,6 +547,27 @@
      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+      "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.11.14",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@ -4227,6 +4250,14 @@
        }
      }
    },
+    "node_modules/svelte-fa": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/svelte-fa/-/svelte-fa-4.0.2.tgz",
+      "integrity": "sha512-lza8Jfii6jcpMQB73mBStONxaLfZsUS+rKJ/hH6WxsHUd+g68+oHIL9yQTk4a0uY9HQk78T/CPvQnED0msqJfg==",
+      "peerDependencies": {
+        "svelte": "^4.0.0"
+      }
+    },
    "node_modules/svelte-hmr": {
      "version": "0.15.3",
      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
--- a/website/package.json
+++ b/website/package.json
@ -21,7 +21,7 @@
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "@tailwindcss/typography": "0.5.10",
    "@types/eslint": "8.56.0",
-    "@types/node": "20.11.16",
+    "@types/node": "^20.11.16",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "autoprefixer": "10.4.17",
@ -43,10 +43,12 @@
  "type": "module",
  "dependencies": {
    "@floating-ui/dom": "1.6.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
    "@octokit/rest": "^20.0.2",
    "highlight.js": "11.9.0",
    "lucide-svelte": "^0.323.0",
    "remark-container": "^0.1.2",
-    "remark-github": "^12.0.0"
+    "remark-github": "^12.0.0",
+    "svelte-fa": "^4.0.2"
  }
 }
--- a/website/src/app.d.ts
+++ b/website/src/app.d.ts
@ -7,3 +7,7 @@ declare namespace App {
 	// interface Error {}
 	// interface Platform {}
 }
+
+declare module '@fortawesome/pro-solid-svg-icons/index.es' {
+	export * from '@fortawesome/pro-solid-svg-icons';
+}
--- a/website/src/app.html
+++ b/website/src/app.html
@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en" class="dark">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="vintage">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+  <meta name="viewport" content="width=device-width" />
+  %sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover" data-theme="wintry">
+  <div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
--- a/website/src/app.postcss
+++ b/website/src/app.postcss
@ -8,4 +8,4 @@
 	font-family: 'Abril Fatface';
 	src: url('/fonts/AbrilFatface.ttf');
 	font-display: swap;
-}
+}
--- a/website/src/components/navbar/navbar.svelte
+++ b/website/src/components/navbar/navbar.svelte
@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Home, Newspaper, Download } from 'lucide-svelte';
+
+	const routes: Record<string, [string, any]> = {
+		'/': ['Home', Home],
+		'/blog': ['Blog', Newspaper],
+		'/downloads': ['Downloads', Download],
+		'/about': ['About', null]
+	};
+</script>
+
+<section class="flex justify-between">
+	<h2 class="text-3xl">Spotube</h2>
+	<nav class="flex gap-3">
+		{#each Object.entries(routes) as route}
+			<a href={route[0]}>
+				<button
+					class={`btn rounded-full flex gap-2 ${route[0] === '/downloads' ? 'variant-glass-primary' : 'variant-glass-surface'}`}
+				>
+					{#if route[1][1] !== null}
+						<svelte:component this={route[1][1]} size={16} />
+					{/if}
+					{route[1][0]}
+				</button>
+			</a>
+		{/each}
+	</nav>
+</section>
--- a/website/src/routes/+layout.svelte
+++ b/website/src/routes/+layout.svelte
@ -1,5 +1,6 @@
 <script lang="ts">
 	import '../app.postcss';
+	import Navbar from '../components/navbar/navbar.svelte';

 	// Highlight JS
 	import hljs from 'highlight.js/lib/core';
@ -22,4 +23,7 @@
 	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
 </script>

-<slot />
+<main class="p-2 md:p-4 flex flex-col">
+	<Navbar />
+	<slot />
+</main>
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@ -1,15 +1,85 @@
-<!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
+<script lang="ts">
+	import {
+		faSpotify,
+		faAndroid,
+		faWindows,
+		faApple,
+		faUbuntu,
+		faFedora,
+		faRedhat,
+		faOpensuse,
+		faLinux,
+		faDebian,
+		type IconDefinition
+	} from '@fortawesome/free-brands-svg-icons/index';
+	import Fa from 'svelte-fa';
+	import { ChevronDown } from 'lucide-svelte';
+	import { popup, type PopupSettings } from '@skeletonlabs/skeleton';

-<div class="container h-full mx-auto flex justify-center items-center">
-	<div class="space-y-5">
-		<h1 class="h1">Let's get cracking bones!</h1>
-		<p>Start by exploring:</p>
-		<ul>
-			<li><code class="code">/src/routes/+layout.svelte</code> - barebones layout</li>
-			<li><code class="code">/src/app.postcss</code> - app wide css</li>
-			<li>
-				<code class="code">/src/routes/+page.svelte</code> - this page, you can replace the contents
-			</li>
-		</ul>
+	const popupFeatured: PopupSettings = {
+		// Represents the type of event that opens/closed the popup
+		event: 'click',
+		// Matches the data-popup value on your popup element
+		target: 'popupFeatured',
+		// 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">
+	<div class="ps-4 pt-4 md:ps-24 md:pt-24">
+		<h1 class="h1">Spotube</h1>
+		<h3 class="h3">
+			An Open Source <Fa class="inline text-[#1DB954]" icon={faSpotify} /> Client for every platform
+			<div class="inline-flex gap-3 items-center">
+				<Fa class="inline text-[#A4C639]" icon={faAndroid} />
+				<Fa class="inline text-[#00A2F0]" icon={faWindows} />
+				<Fa class="inline text-[#FCC624]" icon={faLinux} />
+				<Fa class="inline" icon={faApple} />
+			</div>
+		</h3>
+		<p class="text-surface-500">
+			And it's <span class="text-error-500 underline decoration-dashed">not</span>
+			built with Electron (web technologies)
+		</p>
 	</div>
-</div>
+	<br /><br /><br />
+	<div class="flex justify-center">
+		<div class="card variant-glass-tertiary p-6 shadow-xl" data-popup="popupFeatured">
+			<ul class="flex flex-col gap-4">
+				{#each Object.entries(downloadLinks) as links}
+					<li class="w-full">
+						<a href={links[1][0]} class="flex w-full">
+							<div class="flex gap-2 rounded-xl bg-primary-500 items-center px-4 rounded-e-none">
+								{#each links[1][1] as icon}
+									<Fa class="inline" {icon} />
+								{/each}
+							</div>
+							<button class="btn variant-ghost-primary rounded-xl rounded-s-none p-4 w-full">
+								<p>{links[0]}</p>
+							</button>
+						</a>
+					</li>
+				{/each}
+			</ul>
+		</div>
+		<button class="flex gap-2 btn variant-filled-primary" use:popup={popupFeatured}>
+			Download
+			<ChevronDown />
+		</button>
+	</div>
+</section>
--- a/website/src/routes/about/+page.svelte
+++ b/website/src/routes/about/+page.svelte
--- a/website/src/routes/blog/+page.svelte
+++ b/website/src/routes/blog/+page.svelte
--- a/website/src/routes/downloads/+page.svelte
+++ b/website/src/routes/downloads/+page.svelte
--- a/website/svelte.config.js
+++ b/website/svelte.config.js
@ -1,7 +1,7 @@
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { mdsvex } from 'mdsvex';
-import containers from 'remark-containers';
+import containers from 'remark-container';
 import github from 'remark-github';

 /** @type {import('@sveltejs/kit').Config} */
--- a/website/tailwind.config.ts
+++ b/website/tailwind.config.ts
@ -1,13 +1,16 @@
-import { join } from 'path'
-import type { Config } from 'tailwindcss'
+import { join } from 'path';
+import type { Config } from 'tailwindcss';
 import typography from '@tailwindcss/typography';
-import { skeleton } from '@skeletonlabs/tw-plugin'
+import { skeleton } from '@skeletonlabs/tw-plugin';

 export default {
 	darkMode: 'class',
-	content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
+	],
 	theme: {
-		extend: {},
+		extend: {}
 	},
 	plugins: [
 		typography,
@ -15,11 +18,11 @@ export default {
 			themes: {
 				preset: [
 					{
-						name: 'vintage',
-						enhancements: true,
-					},
-				],
-			},
-		}),
-	],
+						name: 'wintry',
+						enhancements: true
+					}
+				]
+			}
+		})
+	]
 } satisfies Config;