fix: actually use tailwind styles

feat: upgrade to svelte 4 and switch to bun
Update README.md
2023-10-13 18:33:49 +03:00 · 2023-10-13 18:12:34 +03:00 · 2023-05-09 20:23:43 +03:00
20 changed files with 200 additions and 2236 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -11,3 +11,5 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+/result
+bun.lockb
--- a/.prettierignore
+++ b/.prettierignore
@ -13,3 +13,5 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+/result
+bun.lockb
--- a/README.md
+++ b/README.md
@ -14,7 +14,7 @@ A production build is also available at `packages.x86_64-linux.musikspider`.
 # TODOs

 - [x] basic music playing and controls
- [ ] implement playlists (local)
+- [ ] implement playlists (local and remote)
 - [ ] implement album and artist viewing
 - [ ] implement persistence of music data, playlists and such
 - [ ] implement scrobbling (last.fm, etc)
--- a/bun.lockb
+++ b/bun.lockb
--- a/flake.lock
+++ b/flake.lock
@ -1,96 +1,96 @@
 {
-  "nodes": {
-    "naked-shell": {
-      "locked": {
-        "lastModified": 1681286841,
-        "narHash": "sha256-3XlJrwlR0nBiREnuogoa5i1b4+w/XPe0z8bbrJASw0g=",
-        "owner": "yusdacra",
-        "repo": "mk-naked-shell",
-        "rev": "7612f828dd6f22b7fb332cc69440e839d7ffe6bd",
-        "type": "github"
-      },
-      "original": {
-        "owner": "yusdacra",
-        "repo": "mk-naked-shell",
-        "type": "github"
-      }
-    },
-    "nixpkgs": {
-      "locked": {
-        "lastModified": 1681126633,
-        "narHash": "sha256-evQ3Ct/yJDSHej16Hiq+JfxRjgm9FXu/2LBxsyorGdE=",
-        "owner": "nixos",
-        "repo": "nixpkgs",
-        "rev": "db24d86dd8a4769c50d6b7295e81aa280cd93f35",
-        "type": "github"
-      },
-      "original": {
-        "owner": "nixos",
-        "ref": "nixos-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
-    "nixpkgs-lib": {
-      "locked": {
-        "dir": "lib",
-        "lastModified": 1680213900,
-        "narHash": "sha256-cIDr5WZIj3EkKyCgj/6j3HBH4Jj1W296z7HTcWj1aMA=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "e3652e0735fbec227f342712f180f4f21f0594f2",
-        "type": "github"
-      },
-      "original": {
-        "dir": "lib",
-        "owner": "NixOS",
-        "ref": "nixos-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
-    "parts": {
-      "inputs": {
-        "nixpkgs-lib": "nixpkgs-lib"
-      },
-      "locked": {
-        "lastModified": 1680392223,
-        "narHash": "sha256-n3g7QFr85lDODKt250rkZj2IFS3i4/8HBU2yKHO3tqw=",
-        "owner": "hercules-ci",
-        "repo": "flake-parts",
-        "rev": "dcc36e45d054d7bb554c9cdab69093debd91a0b5",
-        "type": "github"
-      },
-      "original": {
-        "owner": "hercules-ci",
-        "repo": "flake-parts",
-        "type": "github"
-      }
-    },
-    "root": {
-      "inputs": {
-        "naked-shell": "naked-shell",
-        "nixpkgs": "nixpkgs",
-        "parts": "parts",
-        "systems": "systems"
-      }
-    },
-    "systems": {
-      "locked": {
-        "lastModified": 1680978846,
-        "narHash": "sha256-Gtqg8b/v49BFDpDetjclCYXm8mAnTrUzR0JnE2nv5aw=",
-        "owner": "nix-systems",
-        "repo": "x86_64-linux",
-        "rev": "2ecfcac5e15790ba6ce360ceccddb15ad16d08a8",
-        "type": "github"
-      },
-      "original": {
-        "owner": "nix-systems",
-        "repo": "x86_64-linux",
-        "type": "github"
-      }
-    }
-  },
-  "root": "root",
-  "version": 7
+	"nodes": {
+		"naked-shell": {
+			"locked": {
+				"lastModified": 1681286841,
+				"narHash": "sha256-3XlJrwlR0nBiREnuogoa5i1b4+w/XPe0z8bbrJASw0g=",
+				"owner": "yusdacra",
+				"repo": "mk-naked-shell",
+				"rev": "7612f828dd6f22b7fb332cc69440e839d7ffe6bd",
+				"type": "github"
+			},
+			"original": {
+				"owner": "yusdacra",
+				"repo": "mk-naked-shell",
+				"type": "github"
+			}
+		},
+		"nixpkgs": {
+			"locked": {
+				"lastModified": 1697059129,
+				"narHash": "sha256-9NJcFF9CEYPvHJ5ckE8kvINvI84SZZ87PvqMbH6pro0=",
+				"owner": "nixos",
+				"repo": "nixpkgs",
+				"rev": "5e4c2ada4fcd54b99d56d7bd62f384511a7e2593",
+				"type": "github"
+			},
+			"original": {
+				"owner": "nixos",
+				"ref": "nixos-unstable",
+				"repo": "nixpkgs",
+				"type": "github"
+			}
+		},
+		"nixpkgs-lib": {
+			"locked": {
+				"dir": "lib",
+				"lastModified": 1696019113,
+				"narHash": "sha256-X3+DKYWJm93DRSdC5M6K5hLqzSya9BjibtBsuARoPco=",
+				"owner": "NixOS",
+				"repo": "nixpkgs",
+				"rev": "f5892ddac112a1e9b3612c39af1b72987ee5783a",
+				"type": "github"
+			},
+			"original": {
+				"dir": "lib",
+				"owner": "NixOS",
+				"ref": "nixos-unstable",
+				"repo": "nixpkgs",
+				"type": "github"
+			}
+		},
+		"parts": {
+			"inputs": {
+				"nixpkgs-lib": "nixpkgs-lib"
+			},
+			"locked": {
+				"lastModified": 1696343447,
+				"narHash": "sha256-B2xAZKLkkeRFG5XcHHSXXcP7To9Xzr59KXeZiRf4vdQ=",
+				"owner": "hercules-ci",
+				"repo": "flake-parts",
+				"rev": "c9afaba3dfa4085dbd2ccb38dfade5141e33d9d4",
+				"type": "github"
+			},
+			"original": {
+				"owner": "hercules-ci",
+				"repo": "flake-parts",
+				"type": "github"
+			}
+		},
+		"root": {
+			"inputs": {
+				"naked-shell": "naked-shell",
+				"nixpkgs": "nixpkgs",
+				"parts": "parts",
+				"systems": "systems"
+			}
+		},
+		"systems": {
+			"locked": {
+				"lastModified": 1680978846,
+				"narHash": "sha256-Gtqg8b/v49BFDpDetjclCYXm8mAnTrUzR0JnE2nv5aw=",
+				"owner": "nix-systems",
+				"repo": "x86_64-linux",
+				"rev": "2ecfcac5e15790ba6ce360ceccddb15ad16d08a8",
+				"type": "github"
+			},
+			"original": {
+				"owner": "nix-systems",
+				"repo": "x86_64-linux",
+				"type": "github"
+			}
+		}
+	},
+	"root": "root",
+	"version": 7
 }
--- a/flake.nix
+++ b/flake.nix
@ -20,16 +20,19 @@
      }: {
        devShells.default = config.mk-naked-shell.lib.mkNakedShell {
          name = "musikspider-devshell";
-          packages = with pkgs; [nodejs yarn deno];
+          packages = with pkgs; [nodejs_20 bun];
+          shellHook = ''
+            export PATH="$PATH:$PWD/node_modules/.bin"
+          '';
        };
-        packages.musikspider = pkgs.mkYarnPackage {
-          src = ./.;
+        # packages.musikspider = pkgs.mkYarnPackage {
+        #   src = ./.;

-          buildPhase = "HOME=$TMPDIR yarn --offline build";
-          distPhase = "true";
-          installPhase = "mv deps/musikspider/build $out";
-        };
-        packages.default = config.packages.musikspider;
+        #   buildPhase = "HOME=$TMPDIR yarn --offline build";
+        #   distPhase = "true";
+        #   installPhase = "mv deps/musikspider/build $out";
+        # };
+        # packages.default = config.packages.musikspider;
      };
    };
 }
--- a/package.json
+++ b/package.json
@ -12,27 +12,29 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@iconify-json/line-md": "^1.1.24",
-		"@iconify-json/mdi": "^1.1.50",
-		"@skeletonlabs/skeleton": "^1.2.5",
-		"@sveltejs/kit": "^1.15.9",
-		"@typescript-eslint/eslint-plugin": "^5.59.1",
-		"@typescript-eslint/parser": "^5.59.1",
-		"autoprefixer": "^10.4.14",
-		"eslint": "^8.39.0",
-		"eslint-config-prettier": "^8.8.0",
+		"@iconify-json/line-md": "^1.1.32",
+		"@iconify-json/mdi": "^1.1.54",
+		"@skeletonlabs/skeleton": "^2.3.0",
+		"@skeletonlabs/tw-plugin": "^0.2.2",
+		"@sveltejs/kit": "^1.25.2",
+		"@types/node": "^20.8.5",
+		"@typescript-eslint/eslint-plugin": "^6.7.5",
+		"@typescript-eslint/parser": "^6.7.5",
+		"autoprefixer": "^10.4.16",
+		"eslint": "^8.51.0",
+		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-svelte3": "^4.0.0",
-		"postcss": "^8.4.23",
-		"prettier": "^2.8.8",
-		"prettier-plugin-svelte": "^2.10.0",
-		"svelte": "^3.58.0",
-		"svelte-adapter-deno": "^0.9.0",
-		"svelte-check": "^3.2.0",
-		"tailwindcss": "^3.3.2",
-		"tslib": "^2.5.0",
-		"typescript": "^5.0.4",
-		"unplugin-icons": "^0.16.1",
-		"vite": "^4.3.3"
+		"postcss": "^8.4.31",
+		"prettier": "^3.0.3",
+		"prettier-plugin-svelte": "^3.0.3",
+		"svelte": "^4.2.1",
+		"svelte-adapter-bun": "^0.5.0",
+		"svelte-check": "^3.5.2",
+		"tailwindcss": "^3.3.3",
+		"tslib": "^2.6.2",
+		"typescript": "^5.2.2",
+		"unplugin-icons": "^0.17.0",
+		"vite": "^4.4.11"
 	},
 	"type": "module",
 	"dependencies": {
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -0,0 +1,13 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+const config = {
+	plugins: [
+		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+		tailwindcss(),
+		//But others, like autoprefixer, need to run after,
+		autoprefixer
+	]
+};
+
+module.exports = config;
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,6 +0,0 @@
-export default {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
-	}
-};
--- a/src/app.d.ts
+++ b/src/app.d.ts
@ -11,4 +11,4 @@ declare global {
 	}
 }

-export { };
+export {};
--- a/src/app.html
+++ b/src/app.html
@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html class="dark" lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

--- a/src/app.postcss
+++ b/src/app.postcss
@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body {
 	@apply h-full overflow-hidden;
--- a/src/components/track.svelte
+++ b/src/components/track.svelte
@ -9,9 +9,11 @@
 	import Spinnny from '~icons/line-md/loading-loop';
 	import IconPlay from '~icons/mdi/play';
 	import IconMusic from '~icons/mdi/music';
-	import { toastStore } from '@skeletonlabs/skeleton';
+	import { getToastStore } from '@skeletonlabs/skeleton';
 	import { getAudioElement, makeShareUrl } from '../utils';

+	const toastStore = getToastStore();
+
 	export let track_with_id: TrackWithId;
 	let track = track_with_id.track;
 	let track_id = track_with_id.id;
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@ -1,11 +1,8 @@
 <script lang="ts">
-	// Your selected Skeleton theme:
-	import '@skeletonlabs/skeleton/themes/theme-crimson.css';
-	// This contains the bulk of Skeletons required styles:
-	import '@skeletonlabs/skeleton/styles/all.css';
 	import '../../app.postcss';

-	import { AppShell, Toast, toastStore } from '@skeletonlabs/skeleton';
+	import { AppShell, Toast, getToastStore, initializeStores } from '@skeletonlabs/skeleton';
+	import type { ToastSettings, ToastStore } from '@skeletonlabs/skeleton';
 	import {
 		address,
 		changeLoop,
@ -24,6 +21,9 @@
 	import LoopButton from '../../components/loopButton.svelte';
 	import { getAudioElement, interceptKeys } from '../../utils';

+	initializeStores();
+	const toastStore = getToastStore();
+
 	$: title = $currentTrack !== null ? `${$currentTrack.track.title} - musikspider` : `musikspider`;

 	comm.setCallbacks({
@ -94,6 +94,7 @@
 	<title>{title}</title>
 </svelte:head>

+<Toast position="tr" />
 <AppShell>
 	<svelte:fragment slot="footer">
 		<div class="flex w-screen place-content-end max-sm:place-content-center">
@ -109,4 +110,3 @@
 	</svelte:fragment>
 	<slot />
 </AppShell>
-<Toast position="tr" />
--- a/src/routes/share/[token]/+page.server.ts
+++ b/src/routes/share/[token]/+page.server.ts
@ -3,29 +3,29 @@ import { LOCAL_MUSIKQUAD_SERVER } from '$env/static/private';
 import { scheme } from '../../../utils';

 interface MusicInfo {
-  title: string;
-  album: string;
-  artist: string;
+	title: string;
+	album: string;
+	artist: string;
 }

 export async function load({ params }) {
-  const token = params.token;
-  let color = '#222222';
+	const token = params.token;
+	let color = '#222222';

-  const resp = await fetch(`${LOCAL_MUSIKQUAD_SERVER}/share/info/${token}`);
-  const info: MusicInfo = await resp.json();
+	const resp = await fetch(`${LOCAL_MUSIKQUAD_SERVER}/share/info/${token}`);
+	const info: MusicInfo = await resp.json();

-  /*const thumb_resp = await fetch(`${LOCAL_MUSIKQUAD_SERVER}/share/thumbnail/${token}`);
+	/*const thumb_resp = await fetch(`${LOCAL_MUSIKQUAD_SERVER}/share/thumbnail/${token}`);
  if (thumb_resp.ok) {
    const thumb = await thumb_resp.blob();
    const rawColor = await getColor(thumb);
    color = rgbToHex(rawColor[0], rawColor[1], rawColor[2]);
  }*/

-  return {
-    info,
-    color,
-    thumbnail_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/thumbnail/${token}`,
-    audio_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/audio/${token}`
-  };
+	return {
+		info,
+		color,
+		thumbnail_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/thumbnail/${token}`,
+		audio_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/audio/${token}`
+	};
 }
--- a/src/routes/share/[token]/+page.svelte
+++ b/src/routes/share/[token]/+page.svelte
@ -1,8 +1,4 @@
 <script lang="ts">
-	// Your selected Skeleton theme:
-	import '@skeletonlabs/skeleton/themes/theme-crimson.css';
-	// This contains the bulk of Skeletons required styles:
-	import '@skeletonlabs/skeleton/styles/all.css';
 	import '../../../app.postcss';

 	import IconMusic from '~icons/mdi/music';
--- a/svelte.config.js
+++ b/svelte.config.js
@ -1,9 +1,9 @@
-import adapter from 'svelte-adapter-deno';
+import adapter from 'svelte-adapter-bun';
 import { vitePreprocess } from '@sveltejs/kit/vite';

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: vitePreprocess(),
+	preprocess: [vitePreprocess({})],

 	kit: {
 		adapter: adapter()
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-	content: [
-		'./src/**/*.{html,js,svelte,ts}',
-		require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
-	],
-	theme: {
-		extend: {}
-	},
-	plugins: [...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()],
-	darkMode: 'class'
-};
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -0,0 +1,22 @@
+import { join } from 'path';
+import type { Config } from 'tailwindcss';
+
+import { skeleton } from '@skeletonlabs/tw-plugin';
+
+const config = {
+	darkMode: 'class',
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
+	],
+	theme: {
+		extend: {}
+	},
+	plugins: [
+		skeleton({
+			themes: { preset: ['crimson'] }
+		})
+	]
+} satisfies Config;
+
+export default config;
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
dusk	319b886803	fix: actually use tailwind styles	2023-10-13 18:33:49 +03:00
dusk	7c8c6132a9	feat: upgrade to svelte 4 and switch to bun	2023-10-13 18:12:34 +03:00
dusk	409163319e	Update README.md	2023-05-09 20:23:43 +03:00