lastfm recent track

app/assets/css/styles.css

@@ -1,5 +1,3 @@
-@import url('bootstrap-v5.3.1.min.css');
-
 .nav-masthead .nav-link {
 	color: rgba(255, 255, 255, 0.5);
 	border-bottom: 0.25rem solid transparent;

app/assets/js/app.js

@@ -55,4 +55,14 @@ const location_handler = async () => {
   document
     .querySelector('meta[name="description"]')
     .setAttribute('content', route.description);
+
+  if (route.script) {
+    let script = document.getElementById('content').querySelector('script');
+    document.querySelector('#autorun').innerHTML = script.innerHTML;
+    script.remove();
+
+    eval(document.querySelector('#autorun').innerHTML);
+  } else {
+    document.querySelector('#autorun').innerHTML = '';
+  }
 };

app/assets/js/routes.js

@@ -28,5 +28,6 @@ export const routes = {
     template: '/pages/personal.html',
     title: 'Personal',
     description: '...',
+    script: true,
   },
 };

app/index.html

@@ -6,9 +6,12 @@
 		<title>a2s</title>
 		<meta name="description" content="" />
 		<link rel="manifest" href="manifest.json" />
-		<style>
-			@import './assets/css/styles.css';
-		</style>
+		<link
+			rel="stylesheet"
+			type="text/css"
+			href="./assets/css/bootstrap-v5.3.1.min.css"
+		/>
+		<link rel="stylesheet" type="text/css" href="./assets/css/styles.css" />
 		<script type="module">
 			import './assets/js/app.js';
 		</script>
@@ -30,5 +33,7 @@
 			<!-- app footer -->
 			<include src="app/partitial/footer.html"></include>
 		</div>
+
+		<script id="autorun" type="module"></script>
 	</body>
 </html>

app/partitial/footer.html

@@ -1,6 +1,11 @@
 <footer class="text-center text-shadow mt-3 text-white-50">
 	<p class="font-monospace">
 		build:
-		<a class="text-reset text-decoration-none border-bottom py-1" href="#" target="_blank">ab6324f</a>
+		<a
+			class="text-reset text-decoration-none border-bottom py-1"
+			href="#"
+			target="_blank"
+			>ab6324f</a
+		>
 	</p>
 </footer>

app/partitial/header.html

@@ -1,16 +1,18 @@
 <header class="mb-3">
 	<div class="text-shadow">
 		<h3 id="app_title" class="float-md-start mb-0">
-			<span class="font-monospace">inet://</span><br>
-			<p class="text-secondary fs-6 text-shadow m-0">// licking and assemble //</p>
+			<span class="font-monospace">inet://</span><br />
+			<p class="text-secondary fs-6 text-shadow m-0">
+				// licking and assemble //
+			</p>
 		</h3>
 		<nav class="nav nav-masthead justify-content-center float-md-end">
 			<a class="nav-link fw-bold py-1 px-0 icon-link" href="/">
 				<svg
 					class="svg-icon"
 					xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
+					width="16"
+					height="16"
 					viewBox="0 0 24 24"
 					fill="none"
 					stroke="currentColor"
@@ -30,8 +32,8 @@
 				<svg
 					class="svg-icon"
 					xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
+					width="16"
+					height="16"
 					viewBox="0 0 24 24"
 					fill="none"
 					stroke="currentColor"
@@ -46,11 +48,7 @@
 				</svg>
 				About
 			</a>
-			<a
-				id="app_theme_switcher"
-				class="nav-link fw-bold py-1 px-0"
-				href="#"
-			></a>
+			<a id="app_theme_switcher" class="nav-link fw-bold py-1 px-0"></a>
 		</nav>
 	</div>
 </header>

app/partitial/menu.html

@@ -47,7 +47,10 @@
 	</li>
 	<li><hr class="dropdown-divider" /></li>
 	<li>
-		<a class="dropdown-item d-flex gap-2 align-items-center" href="#personal">
+		<a
+			class="dropdown-item d-flex gap-2 align-items-center"
+			href="#personal"
+		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				width="16"

package.json

@@ -5,7 +5,7 @@
   "description": "ololo",
   "scripts": {
     "serve": "npx parcel serve --dist-dir public app/index.html",
-    "build": "npx parcel build --dist-dir public app/index.html",
+    "build": "npx parcel build --dist-dir public app/index.html --no-optimize",
     "prettier": "npx prettier --write .",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

public/js/lastfm-nowplay.js

@@ -0,0 +1,32 @@
+export function update_lastfm_nowplay() {
+  let user = 'Alex_Popov';
+  let apikey = '5556942dcf4c422dca68d57fbbfdee23';
+  let url = `http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${user}&api_key=${apikey}&format=json&limit=1`;
+
+  let status_text = document.getElementById('lastfm_card_title');
+  let song_text = document.getElementById('lastfm_card_content');
+  let desc_text = document.getElementById('lastfm_card_footer');
+
+  fetch(url)
+    .then((response) => response.json())
+    .then((data) => {
+      // update desc
+      let desc_string = `Всего прослушано ${data.recenttracks['@attr'].total} треков`;
+      desc_text.innerText = desc_string;
+
+      // update content
+      let track_string = `${data.recenttracks.track[0].artist['#text']} — ${data.recenttracks.track[0].name}`;
+      song_text.innerText = track_string;
+
+      // TODO: get play now
+      status_text.innerText = 'Последняя проигранная композиция';
+    })
+    .catch((err) => console.warn('Something went wrong.', err));
+}
+
+/*
+  Application name a2s
+  API key          5556942dcf4c422dca68d57fbbfdee23
+  Shared secret    e1e1baa61478c5745c35b985ed2a49a9
+  Registered to    Alex_Popov
+*/

public/pages/personal.html

@@ -5,4 +5,27 @@
 	</ol>
 </nav>
 
-<p class="fs-3 text-shadow">Тут ничего нет... пока!</p>
+<div class="card text-center">
+	<div id="lastfm_card_title" class="card-header">Загружается...</div>
+	<div class="card-body">
+		<h5 id="lastfm_card_content" class="card-title placeholder-glow">
+			<span class="placeholder col-3 rounded"></span>
+		</h5>
+	</div>
+	<div
+		id="lastfm_card_footer"
+		class="card-footer text-body-secondary placeholder-glow"
+	>
+		<span class="placeholder col-2 rounded"></span>
+	</div>
+</div>
+
+<script type="module">
+	import { update_lastfm_nowplay } from './js/lastfm-nowplay.js';
+
+	function autorun() {
+		update_lastfm_nowplay();
+		setInterval(autorun, 120_000); // 2 minutes
+	}
+	autorun();
+</script>