feat: dev token loading, basic setup for musickit

web/.env

@@ -0,0 +1 @@
+VITE_BACKEND_URL=http://localhost:8080

web/package.json

@@ -25,6 +25,7 @@
     "eslint-plugin-vue": "^10.10.0",
     "globals": "^17.11.0",
     "npm-run-all2": "^9.0.2",
+    "sass-embedded": "^1.103.1",
     "typescript": "~6.0.0",
     "typescript-eslint": "^8.67.0",
     "vite": "^8.1.5",

web/src/ts/player/musickit/index.ts

@@ -1,5 +1,23 @@
-export const useMusicKit = () => {
-    const init = () => {
+export const useMusicKit = ( storefront: string = 'ch' ) => {
+    const init = async () => {
+        const res = await fetch( import.meta.env.VITE_BACKEND_URL + '/', {
+            'credentials': 'include'
+        } );
+
+        if ( res.status === 200 ) {
+            const token = await res.text();
+
+            window.MusicKit.configure( {
+                'developerToken': token,
+                'app': {
+                    'name': 'MusicPlayer',
+                    'build': '4',
+                    'icon': 'https://music.janishutz.com/logo.jpg'
+                },
+                'storefront': storefront.toUpperCase()
+            } );
+        }
+
         isInit = true;
     };
 

web/src/views/404View.vue

@@ -2,22 +2,24 @@
     <div class="not-found-view">
         <h1>404</h1>
         <p>Page not found</p>
-        <RouterLink to="/" class="button primary">
+        <RouterLink to="/" class="fancy-button">
             Home
         </RouterLink>
     </div>
 </template>
 
-<script setup lang="ts">
-
-</script>
-
-<style scoped>
+<style scoped lang="scss">
     .not-found-view {
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
+
+        h1 {
+            font-size: 20vh;
+            line-height: 100%;
+            margin: 10px;
+        }
     }
 </style>