minor details

README.md

@@ -27,15 +27,14 @@ immediately deployed to the demo-site at https://lastfm-widgets.deno.dev/.
 The widget (frontend code) should be compatible back to at least Firefox 115 and Chromium 109 based web-browsers
 (which are the last versions of these running on Windows 7/8 installations). It also runs in Safari, but unsure
 how old versions are supported (I'm not able to test that myself).
-The backend code is my first simple experiments/experience with Deno. It has been tested with Release Candidate
-versions of Deno 2.
+The backend code is my first simple experiments/experience with Deno. It has been tested with Deno 1.46 and
+Release Candidate versions of Deno 2.
 
 #### /widgets/ folder
 
 The widget frontend code. *All* that is needed for widget to work in *Demo* or *Basic* mode. See
 [Releases](https://github.com/StigNygaard/lastfm-widgets/releases) to get latest "release-version" of this folder's
-content. And see https://lastfm-widgets.deno.dev/ for an explanation of the modes and customizations the widget
-supports.
+content. And see https://lastfm-widgets.deno.dev/ for more about widget *modes* and how to use and customize the widget.
 
 #### /demo/ folder
 
@@ -56,5 +55,5 @@ What could future updates bring? *Maybe*:
 - A layout that adapt nicer to wider display dimensions of widget
 - Dark mode
 - Refactoring code *if* I'm in the mood for that kind of thing 🙂
-- More documentation (especially on the example proxy-api when it is a bit more mature)
+- More documentation (especially on the Deno proxy-api implementation when it feels a bit more mature)
 - Another widget

demo/demo.css

@@ -115,6 +115,11 @@ lastfm-tracks {
 
 button {
   margin: 1em 0;
+  display: none;
+}
+
+body.local-mode #stopBtn {
+  display: initial;
 }
 
 

demo/demo.js

@@ -122,12 +122,19 @@ function isMobile() {
     return /mobile|tablet|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 }
 
+function isLocalhost() {
+    return window.location.href.startsWith('http://localhost');
+}
+
 window.addEventListener(
     'DOMContentLoaded',
     function () {
         if (!isMobile()) {
             document.body.classList.add('desktop-mode');
         }
+        if (isLocalhost()) {
+            document.body.classList.add('local-mode');
+        }
         const widgetContainer = document.querySelector('div.widget');
         const widgetResizeable = widgetContainer.querySelector('div.resizeable');
         widgetContainer.addEventListener('stateChange', stateChangeHandler);

demo/index.html

@@ -62,9 +62,9 @@ <h2>The essential</h2>
       (<em><a href="https://www.last.fm/api/show/user.getInfo">user.getinfo</a></em> and
       <em><a href="https://www.last.fm/api/show/user.getRecentTracks">user.getrecenttracks</a></em>)
       from last.fm's audioscrobbler 2.0 api that the widget needs to function. Your own backend proxy-api is
-      a very good idea, if widget is to be placed on a page with <em>more</em> than <em>absolute minimal</em>
-      amount of traffic, because you can implement "throttling" in the proxy-api to prevent overwhelming
-      volumes of requests being sent directly to last.fm's API.</p>
+      a very good idea, if widget is to be placed on a page with <em>more</em> than very modest amounts of
+      traffic, because you can implement "throttling" in the proxy-api to prevent overwhelming volumes of
+      requests being sent directly to last.fm's API.</p>
 
     <ol>
       <li>
@@ -145,8 +145,7 @@ <h2>Get your own API key for <em>Basic</em> or <em>Backend-supported</em> mode</
   <div class="widget">
     <div class="resizeable">
     </div>
-<!--    <button id="stopBtn">Stop updating</button>-->
-<!--    <button id="incIntervalBtn">Increase interval</button>-->
+    <button id="stopBtn">Stop updating</button>
   </div>
   <div class="options">
     <h2 id="config">Customize widget...</h2>
@@ -170,8 +169,12 @@ <h2 id="config">Customize widget...</h2>
     </pre>
   </div>
 </main>
+
 <footer>
-  <p><i><b>Tracks</b> widget</i> is made by <a href="https://www.rockland.dk/" title="Homepage of Stig Nygaard">Stig Nygaard</a> &nbsp; — &nbsp; The <a href="https://github.com/StigNygaard/lastfm-widgets">code repository</a> and official <a href="https://github.com/StigNygaard/lastfm-widgets/releases">widget release versions</a> can be found on GitHub.</p>
+  <p><i><b>Tracks</b> widget</i> is made by
+    <a href="https://www.rockland.dk/" title="Homepage of Stig Nygaard">Stig Nygaard</a> &nbsp; — &nbsp; The
+    <a href="https://github.com/StigNygaard/lastfm-widgets">code repository</a> and official
+    <a href="https://github.com/StigNygaard/lastfm-widgets/releases">widget release versions</a> can be found on GitHub.</p>
 </footer>
 
 </body>

main.ts

@@ -23,7 +23,7 @@ Deno.serve(async (req: Request, info: Deno.ServeHandlerInfo) => {
             fsRoot: 'widgets',
             showDirListing: false,
             showDotfiles: false,
-            showIndex: true, // index.html
+            showIndex: false, // index.html
             enableCors: false, // CORS not allowed/enabled (no CORS headers)
             quiet: true, // logging of errors
             headers: []
@@ -43,3 +43,6 @@ Deno.serve(async (req: Request, info: Deno.ServeHandlerInfo) => {
     }
 
 });
+
+
+console.log(`${new Date().toISOString()} - main.ts running on Deno ${Deno.version.deno}`);

proxy-api/audioscrobbler.ts

@@ -268,3 +268,6 @@ function methodError(method: string, headers: Headers) {
         }
     }
 }
+
+
+console.log('audioscrobbler.ts was initiated.');

widgets/lastfm.js

@@ -67,8 +67,12 @@ function create(tagName, attributes = {}, ...content) {
     return element;
 }
 
+
+// https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator#sensitivity
+const RelaxedComparator = new Intl.Collator(undefined, { sensitivity: "base" });
+
 function caseInsensitiveIdenticalStrings(str1, str2) {
-    return str1.localeCompare(str2, undefined, { sensitivity: 'base' }) === 0;
+    return RelaxedComparator.compare(str1, str2) === 0;
 }
 
 /**