From 790ee91958ac298cfa31e95912236eac9219942a Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Thu, 8 Feb 2024 22:51:45 +0600 Subject: [PATCH] feat: add initial homepage with download links --- website/package-lock.json | 35 +++++++- website/package.json | 6 +- website/src/app.d.ts | 4 + website/src/app.html | 23 ++--- website/src/app.postcss | 2 +- website/src/components/navbar/navbar.svelte | 28 ++++++ website/src/routes/+layout.svelte | 6 +- website/src/routes/+page.svelte | 96 ++++++++++++++++++--- website/src/routes/about/+page.svelte | 0 website/src/routes/blog/+page.svelte | 0 website/src/routes/downloads/+page.svelte | 0 website/svelte.config.js | 2 +- website/tailwind.config.ts | 27 +++--- 13 files changed, 187 insertions(+), 42 deletions(-) create mode 100644 website/src/components/navbar/navbar.svelte create mode 100644 website/src/routes/about/+page.svelte create mode 100644 website/src/routes/blog/+page.svelte create mode 100644 website/src/routes/downloads/+page.svelte diff --git a/website/package-lock.json b/website/package-lock.json index 8d6d9a5a..a0e777b4 100644 --- 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", diff --git a/website/package.json b/website/package.json index 345bb21e..54d74c17 100644 --- 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" } } diff --git a/website/src/app.d.ts b/website/src/app.d.ts index 8f4d6389..2a517df6 100644 --- 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'; +} diff --git a/website/src/app.html b/website/src/app.html index 19613e2c..21d96798 100644 --- a/website/src/app.html +++ b/website/src/app.html @@ -1,12 +1,15 @@ - - - - - %sveltekit.head% - - -
%sveltekit.body%
- - + + + + + + %sveltekit.head% + + + +
%sveltekit.body%
+ + + \ No newline at end of file diff --git a/website/src/app.postcss b/website/src/app.postcss index d2991eb0..831baa93 100644 --- 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; -} \ No newline at end of file +} diff --git a/website/src/components/navbar/navbar.svelte b/website/src/components/navbar/navbar.svelte new file mode 100644 index 00000000..7164ce82 --- /dev/null +++ b/website/src/components/navbar/navbar.svelte @@ -0,0 +1,28 @@ + + +
+

Spotube

+ +
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte index 74e9bb22..218794f5 100644 --- a/website/src/routes/+layout.svelte +++ b/website/src/routes/+layout.svelte @@ -1,5 +1,6 @@ - +
+ + +
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte index 8fc580e6..69860da6 100644 --- a/website/src/routes/+page.svelte +++ b/website/src/routes/+page.svelte @@ -1,15 +1,85 @@ - + + +
+
+

Spotube

+

+ An Open Source Client for every platform +
+ + + + +
+

+

+ And it's not + built with Electron (web technologies) +

- +


+
+
+ +
+ +
+
diff --git a/website/src/routes/about/+page.svelte b/website/src/routes/about/+page.svelte new file mode 100644 index 00000000..e69de29b diff --git a/website/src/routes/blog/+page.svelte b/website/src/routes/blog/+page.svelte new file mode 100644 index 00000000..e69de29b diff --git a/website/src/routes/downloads/+page.svelte b/website/src/routes/downloads/+page.svelte new file mode 100644 index 00000000..e69de29b diff --git a/website/svelte.config.js b/website/svelte.config.js index 915f4c93..933dddce 100644 --- 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} */ diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts index c6852df9..77611a2e 100644 --- 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;