Version Bump

Simplify Service Worker
Refactor UI to Use Semantic HTML Elements
2026-01-23 19:58:03 -08:00 · 2025-12-22 22:06:50 -05:00 · 2025-12-22 22:06:43 -05:00 · 2025-12-22 22:01:18 -05:00 · 2025-12-22 21:58:47 -05:00 · 2025-12-22 21:57:13 -05:00
10 changed files with 328 additions and 191 deletions
--- a/1
+++ b/1
@@ -1 +0,0 @@
-torrent.parts
--- a/README.md
+++ b/README.md
@@ -24,7 +24,6 @@ This project wouldn't be possible without the fantastic work of:
 - [@feross](https://github.com/feross) and contributors, for [`parse-torrent`](https://github.com/webtorrent/parse-torrent) and [`WebTorrent`](https://github.com/webtorrent/webtorrent)
 - [@cvisuri](https://github.com/cvisuri), for design work
 - [@CorralPeltzer](https://github.com/CorralPeltzer), for [`newTrackon`](https://github.com/CorralPeltzer/newTrackon)
- [@substack](https://github.com/substack) and contributors, for [`Browserify`](https://github.com/browserify/browserify)
 - [Cloudflare Pages](https://pages.cloudflare.com/) hosting

 ## License
@@ -42,24 +41,53 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 ## About Me

 <a href="https://herzog.tech/" target="_blank">
-  <img src="https://herzog.tech/signature/link.svg.png" width="32px" />
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://herzog.tech/signature/link-light.svg.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://herzog.tech/signature/link.svg.png">
+    <img src="https://herzog.tech/signature/link.svg.png" width="32px">
+  </picture>
 </a>
-<a href="https://twitter.com/xd1936" target="_blank">
-  <img src="https://herzog.tech/signature/twitter.svg.png" width="32px" />
+<a href="https://mastodon.social/@herzog" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://herzog.tech/signature/mastodon-light.svg.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://herzog.tech/signature/mastodon.svg.png">
+    <img src="https://herzog.tech/signature/mastodon.svg.png" width="32px">
+  </picture>
 </a>
 <a href="https://github.com/leoherzog" target="_blank">
-  <img src="https://herzog.tech/signature/github.svg.png" width="32px" />
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://herzog.tech/signature/github-light.svg.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://herzog.tech/signature/github.svg.png">
+    <img src="https://herzog.tech/signature/github.svg.png" width="32px">
+  </picture>
 </a>
 <a href="https://keybase.io/leoherzog" target="_blank">
-  <img src="https://herzog.tech/signature/keybase.svg.png" width="32px" />
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://herzog.tech/signature/keybase-light.svg.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://herzog.tech/signature/keybase.svg.png">
+    <img src="https://herzog.tech/signature/keybase.svg.png" width="32px">
+  </picture>
 </a>
 <a href="https://www.linkedin.com/in/leoherzog" target="_blank">
-  <img src="https://herzog.tech/signature/linkedin.svg.png" width="32px" />
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://herzog.tech/signature/linkedin-light.svg.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://herzog.tech/signature/linkedin.svg.png">
+    <img src="https://herzog.tech/signature/linkedin.svg.png" width="32px">
+  </picture>
 </a>
 <a href="https://hope.edu/directory/people/herzog-leo/" target="_blank">
-  <img src="https://herzog.tech/signature/anchor.svg.png" width="32px" />
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://herzog.tech/signature/anchor-light.svg.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://herzog.tech/signature/anchor.svg.png">
+    <img src="https://herzog.tech/signature/anchor.svg.png" width="32px">
+  </picture>
 </a>
 <br />
-<a href="https://www.buymeacoffee.com/leoherzog" target="_blank">
-  <img src="https://cdn.buymeacoffee.com/buttons/lato-black.png" alt="Buy Me A Coffee" width="217px" />
+<a href="https://herzog.tech/$" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://herzog.tech/signature/mug-tea-saucer-solid-light.svg.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://herzog.tech/signature/mug-tea-saucer-solid.svg.png">
+    <img src="https://herzog.tech/signature/mug-tea-saucer-solid.svg.png" alt="Buy Me A Tea" width="32px">
+  </picture>
+  Found this helpful? Buy me a tea!
 </a>
--- a/ext/alata-latin-400.woff
+++ b/ext/alata-latin-400.woff
--- a/ext/alata-latin-400.woff2
+++ b/ext/alata-latin-400.woff2
--- a/ext/alata-v9-latin-regular.ttf
+++ b/ext/alata-v9-latin-regular.ttf
--- a/ext/alata-v9-latin-regular.woff2
+++ b/ext/alata-v9-latin-regular.woff2
--- a/index.html
+++ b/index.html
@@ -40,8 +40,6 @@
  <link href="https://cdn.jsdelivr.net/npm/tippy.js@6/animations/shift-away-subtle.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css" rel="stylesheet" />
  <link href="/src/style.css" rel="stylesheet" />
-  <link href="/ext/alata-latin-400.woff2" rel="preload" as="style" />
-  <link href="/ext/alata-latin-400.woff" rel="preload" as="style" />
  <script async src="/ext/fa.min.js"></script>
  <script async defer src="https://buttons.github.io/buttons.js"></script>

@@ -56,34 +54,36 @@
    <a class="github-button" href="https://github.com/leoherzog/TorrentParts" data-icon="octicon-star" data-show-count="true" aria-label="Star TorrentParts on GitHub">Star</a>
  </header>

-  <div id="startButtons">
+  <form id="startForm">
+    <div id="startButtons">

-    <input id="magnet" type="text" placeholder="Enter URL" aria-label="Enter URL and press enter" />
-    <label for="magnet" class="sr-only">
-      Enter URL and press enter
-    </label>
+      <input id="magnet" type="text" placeholder="Enter URL" aria-label="Enter URL and press enter" />
+      <label for="magnet" class="sr-only">
+        Enter URL and press enter
+      </label>

-    <input id="torrent" type="file" accept=".torrent" aria-label="Select Torrent file" />
-    <label for="torrent">
-      <span class="fas fa-cloud-upload" aria-hidden="true"></span> Select Torrent File
-    </label>
+      <input id="torrent" type="file" accept=".torrent" aria-label="Select Torrent file" />
+      <label for="torrent">
+        <span class="fas fa-cloud-upload" aria-hidden="true"></span> Select Torrent File
+      </label>

-  </div>
+    </div>
+  </form>

-  <div id="examples">
+  <section id="examples">
    <div>...or, try some examples!</div>
    <button id="example1" aria-label="Load Magnet Example"><span class="fal fa-magnet" aria-hidden="true"></span> Magnet URL</button>
    <button id="example2" aria-label="Load URL to Torrent File Example"><span class="fal fa-link" aria-hidden="true"></span> URL to Torrent File</button>
    <button id="example3" aria-label="Load Torrent File Example"><span class="fal fa-file-alt" aria-hidden="true"></span> Torrent File</button>
-  </div>
+  </section>

-  <div id="properties" style="display:none">
+  <main id="properties" style="display:none">

    <button id="reset" aria-label="Reset the page">
      <span class="far fa-times"></span>
    </button>
    
-    <div id="share">
+    <nav id="share">
      <a id="openURLWrapper" target="_blank">
        <button id="openURL" aria-label="Open this Magnet URL in your Torrent client">
          <span class="fas fa-arrow-up-right-from-square fa-2x"></span>
@@ -104,37 +104,46 @@
          <span class="fas fa-file-download fa-2x"></span>
        </button>
      </div>
-    </div>
+    </nav>

-    <div class="property">
+    <fieldset class="property">
+      <legend>
+        <span class="info" data-tippy-content="This is the unique identifier that makes Torrents work. All of the files contained in this Torrent are run through an algorithm that generates a unique string, or &ldquo;hash&rdquo;."><span class="far fa-info-circle"></span></span>
+        Unique Hash
+      </legend>
      <div class="labels">
        <div>
-          <span class="info" data-tippy-content="This is the unique identifier that makes Torrents work. All of the files contained in this Torrent are run through an algorithm that generates a unique string, or &ldquo;hash&rdquo;."><span class="far fa-info-circle"></span></span>
-          <label for="hash">Unique Hash</label>
+          <label for="hash" class="sr-only">Unique Hash</label>
        </div>
      </div>
      <div class="content">
        <input id="hash" type="text" placeholder="" disabled/>
      </div>
-    </div>
+    </fieldset>

-    <div class="property">
+    <fieldset class="property">
+      <legend>
+        <span class="info" data-tippy-content="An optional title specified by the creator"><span class="far fa-info-circle"></span></span>
+        Torrent Name
+      </legend>
      <div class="labels">
        <div>
-          <span class="info" data-tippy-content="An optional title specified by the creator"><span class="far fa-info-circle"></span></span>
-          <label for="name">Torrent Name</label>
+          <label for="name" class="sr-only">Torrent Name</label>
        </div>
      </div>
      <div class="content">
        <input id="name" type="text" placeholder="Unnamed" dir="auto" />
      </div>
-    </div>
+    </fieldset>

-    <div class="property">
+    <fieldset class="property">
+      <legend>
+        <span class="info" data-tippy-content="Data embedded into a Torrent file that says what program created it and when. Not included in Magnet links."><span class="far fa-info-circle"></span></span>
+        Created
+      </legend>
      <div class="labels">
        <div>
-          <span class="info" data-tippy-content="Data embedded into a Torrent file that says what program created it and when. Not included in Magnet links."><span class="far fa-info-circle"></span></span>
-          <label for="created">Created</label>
+          <label for="created" class="sr-only">Created</label>
        </div>
        <label for="createdBy" style="display:none">Created By</label>
      </div>
@@ -143,28 +152,33 @@
        <br />
        <input id="createdBy" type="text" placeholder="Creation client unspecified" aria-label="Creation client" disabled />
      </div>
-    </div>
+    </fieldset>

-    <div class="property">
+    <fieldset class="property">
+      <legend>
+        <span class="info" data-tippy-content="An optional description specified by the creator"><span class="far fa-info-circle"></span></span>
+        Comment
+      </legend>
      <div class="labels">
        <div>
-          <span class="info" data-tippy-content="An optional description specified by the creator"><span class="far fa-info-circle"></span></span>
-          <label for="comment">Comment</label>
+          <label for="comment" class="sr-only">Comment</label>
        </div>
      </div>
      <div class="content">
        <input id="comment" type="text" placeholder="Not included in the URL/File provided" dir="auto" />
      </div>
-    </div>
+    </fieldset>

-    <div class="property">
+    <fieldset class="property">
+      <legend>
+        <span class="info" data-tippy-content="Servers that keep track of other users who are actively downloading this Torrent, called &ldquo;peers&rdquo;. Your client will contact these servers first to find out who else is available to download the files from."><span class="far fa-info-circle"></span></span>
+        Tracker URLs
+      </legend>
      <div class="labels">
-        <div>
-          <span class="info" data-tippy-content="Servers that keep track of other users who are actively downloading this Torrent, called &ldquo;peers&rdquo;. Your client will contact these servers first to find out who else is available to download the files from."><span class="far fa-info-circle"></span></span>
-          <label for="announce">Tracker URLs</label>
+        <div class="label-actions">
+          <a id="addTrackers">Add Known Working Trackers</a>
+          <a id="removeTrackers">Remove All</a>
        </div>
-        <a id="addTrackers">Add Known Working Trackers</a>
-        <a id="removeTrackers">Remove All</a>
      </div>
      <div class="content">
        <button id="addTracker" data-type="announce">
@@ -172,15 +186,17 @@
        </button>
        <div id="announce"></div>
      </div>
-    </div>
+    </fieldset>

-    <div class="property">
+    <fieldset class="property">
+      <legend>
+        <span class="info" data-tippy-content="A list of webservers on the internet that also have a copy of the file(s) in this Torrent, to use in case no peers are available"><span class="far fa-info-circle"></span></span>
+        Webseed URLs
+      </legend>
      <div class="labels">
-        <div>
-          <span class="info" data-tippy-content="A list of webservers on the internet that also have a copy of the file(s) in this Torrent, to use in case no peers are available"><span class="far fa-info-circle"></span></span>
-          <label for="urlList">Webseed URLs</label>
+        <div class="label-actions">
+          <a id="removeWebseeds">Remove All</a>
        </div>
-        <a id="removeWebseeds">Remove All</a>
      </div>
      <div class="content">
        <button id="addWebseed" data-type="urlList">
@@ -188,37 +204,42 @@
        </button>
        <div id="urlList"></div>
      </div>
-    </div>
+    </fieldset>

-    <div class="property">
+    <fieldset class="property">
+      <legend>
+        <span class="info" data-tippy-content="Torrents take files and split them into equal size pieces to make them easy to share. Piece size is configurable when a Torrent file is made."><span class="far fa-info-circle"></span></span>
+        Pieces
+      </legend>
      <div class="labels">
        <div>
-          <span class="info" data-tippy-content="Torrents take files and split them into equal size pieces to make them easy to share. Piece size is configurable when a Torrent file is made."><span class="far fa-info-circle"></span></span>
-          <label for="pieces">Pieces</label>
+          <label for="pieces" class="sr-only">Pieces</label>
        </div>
      </div>
      <div class="content">
        <input id="pieces" type="text" placeholder="Not included in the URL/File provided" aria-label="Piece size and length" disabled required />
      </div>
-    </div>
+    </fieldset>

-    <div class="property">
+    <fieldset class="property">
+      <legend>
+        <span class="info" data-tippy-content="The files listed in this Torrent file. Not included in Magnet links."><span class="far fa-info-circle"></span></span>
+        Files
+      </legend>
      <div class="labels">
-        <div>
-          <span class="info" data-tippy-content="The files listed in this Torrent file. Not included in Magnet links."><span class="far fa-info-circle"></span></span>
-          <label for="files">Files</label>
+        <div class="label-actions">
+          <a id="getFiles">Fetch Files List from WebTorrent</a>
        </div>
-        <a id="getFiles">Fetch Files List from WebTorrent</a>
      </div>
      <table id="files">
        <tbody id="filesBody"></tbody>
      </table>
-    </div>
+    </fieldset>

-  </div>
+  </main>

  <footer>
-    <a href="https://github.com/leoherzog/TorrentParts/releases" target="_blank" rel="noopener">v2.0.0</a>
+    <a href="https://github.com/leoherzog/TorrentParts/releases" target="_blank" rel="noopener">v2.0.2</a>
  </footer>

  <script type="module" src="/src/parse.js"></script>
--- a/src/parse.js
+++ b/src/parse.js
@@ -1,8 +1,8 @@
 import { Buffer } from 'https://cdn.jsdelivr.net/npm/buffer@6/+esm';
-import clipboard from 'https://cdn.jsdelivr.net/npm/clipboard@2/+esm'
+import clipboard from 'https://cdn.jsdelivr.net/npm/clipboard@2/+esm';
 import parseTorrent, { toMagnetURI, toTorrentFile, remote as parseTorrentRemote } from 'https://cdn.jsdelivr.net/npm/parse-torrent@11/+esm';
 import bytes from 'https://cdn.jsdelivr.net/npm/bytes@3/+esm';
-import mime from 'https://cdn.jsdelivr.net/npm/mime-types@2/+esm'
+import mime from 'https://cdn.jsdelivr.net/npm/mime-types@2/+esm';
 import WebTorrent from 'https://cdn.jsdelivr.net/npm/webtorrent@2/dist/webtorrent.min.js';
 import tippy from 'https://cdn.jsdelivr.net/npm/tippy.js@6/+esm';
 import { Notyf } from 'https://cdn.jsdelivr.net/npm/notyf@3/+esm';
@@ -14,7 +14,7 @@ var example3 = document.getElementById('example3');
 var properties = document.getElementById('properties');
 var originalSourceIcon = document.getElementById('originalSourceIcon');
 var source;
-var sourceTooltip = tippy(originalSourceIcon, {"theme": "torrent-parts", "animation": "shift-away-subtle"});
+var sourceTooltip = tippy(originalSourceIcon, { theme: 'torrent-parts', animation: 'shift-away-subtle' });
 var name = document.getElementById('name');
 var reset = document.getElementById('reset');
 var created = document.getElementById('created');
@@ -37,45 +37,45 @@ var copyURL = document.getElementById('copyURL');
 var copyMagnet = document.getElementById('copyMagnet');
 var downloadTorrentWrapper = document.getElementById('downloadTorrentWrapper');
 var downloadTorrent = document.getElementById('downloadTorrent');
-var openURLTooltip = tippy(openURL, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Open this Magnet URL in your Torrent client"});
-var copyURLTooltip = tippy(copyURL, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Copy torrent.parts link to clipboard"});
-var copyMagnetTooltip = tippy(copyMagnet, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Copy Magnet link to clipboard"});
-var downloadTorrentTooltip = tippy(downloadTorrentWrapper, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Download Torrent file"});
+var openURLTooltip = tippy(openURL, { theme: 'torrent-parts', animation: 'shift-away-subtle', content: 'Open this Magnet URL in your Torrent client' });
+var copyURLTooltip = tippy(copyURL, { theme: 'torrent-parts', animation: 'shift-away-subtle', content: 'Copy torrent.parts link to clipboard' });
+var copyMagnetTooltip = tippy(copyMagnet, { theme: 'torrent-parts', animation: 'shift-away-subtle', content: 'Copy Magnet link to clipboard' });
+var downloadTorrentTooltip = tippy(downloadTorrentWrapper, { theme: 'torrent-parts', animation: 'shift-away-subtle', content: 'Download Torrent file' });
 var parsed;
 var client = new WebTorrent();
 var notyf = new Notyf({
-  "duration": 8000,
-  "dismissible": true,
-  "ripple": false,
-  "position": {
-    "x": "right",
-    "y": "top",
+  duration: 8000,
+  dismissible: true,
+  ripple: false,
+  position: {
+    x: 'right',
+    y: 'top',
  },
-  "types": [
+  types: [
    {
-      "type": "success",
-      "background": "#46835C",
-      "icon": false
+      type: 'success',
+      background: '#46835C',
+      icon: false,
    },
    {
-      "type": "error",
-      "background": "#A60A0A",
-      "icon": false
-    }
-  ]
+      type: 'error',
+      background: '#A60A0A',
+      icon: false,
+    },
+  ],
 });

 function placeDownloadTooltips(e) {
  if (window.innerWidth > 1080) {
-    openURLTooltip.setProps({"placement": "right"});
-    copyURLTooltip.setProps({"placement": "right"});
-    copyMagnetTooltip.setProps({"placement": "right"});
-    downloadTorrentTooltip.setProps({"placement": "right"});
+    openURLTooltip.setProps({ placement: 'right' });
+    copyURLTooltip.setProps({ placement: 'right' });
+    copyMagnetTooltip.setProps({ placement: 'right' });
+    downloadTorrentTooltip.setProps({ placement: 'right' });
  } else {
-    openURLTooltip.setProps({"placement": "top"});
-    copyURLTooltip.setProps({"placement": "top"});
-    copyMagnetTooltip.setProps({"placement": "top"});
-    downloadTorrentTooltip.setProps({"placement": "top"});
+    openURLTooltip.setProps({ placement: 'top' });
+    copyURLTooltip.setProps({ placement: 'top' });
+    copyMagnetTooltip.setProps({ placement: 'top' });
+    downloadTorrentTooltip.setProps({ placement: 'top' });
  }
 }

@@ -85,22 +85,26 @@ placeDownloadTooltips();
 document.addEventListener('DOMContentLoaded', start);

 function start() {
+  // form submission prevention
+  document.getElementById('startForm').addEventListener('submit', function (event) {
+    event.preventDefault();
+  });

  // magnet input
-  document.getElementById('magnet').addEventListener('keyup', function(event) {
+  document.getElementById('magnet').addEventListener('keyup', function (event) {
    event.preventDefault();
    if (event.key === 'Enter') {
      source = 'magnet';
      originalSourceIcon.innerHTML = '<span class="fad fa-magnet fa-fw"></span>';
      sourceTooltip.setContent('Currently loaded information sourced from Magnet URL');
-      parse(magnet.value);
+      parse(this.value);
    }
  });

  // torrent select button
-  document.getElementById('torrent').addEventListener('change', function(event) {
+  document.getElementById('torrent').addEventListener('change', function (event) {
    event.preventDefault();
-    event.target.files[0].arrayBuffer().then(function(arrayBuffer) {
+    event.target.files[0].arrayBuffer().then(function (arrayBuffer) {
      source = 'torrent-file';
      originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
      sourceTooltip.setContent('Currently loaded information sourced from Torrent file');
@@ -109,13 +113,17 @@ function start() {
  });

  // body drag-and-drop torrent file support
-  document.addEventListener('dragover', function(event) {
+  document.addEventListener('dragover', function (event) {
    event.preventDefault();
  });

-  document.addEventListener('drop', function(event) {
+  document.addEventListener('drop', function (event) {
    event.preventDefault();
-    event.dataTransfer.items[0].getAsFile().arrayBuffer().then(function(arrayBuffer) {
+    if (event.dataTransfer.items.length === 0) return;
+    if (event.dataTransfer.items[0].kind !== 'file') return;
+    const file = event.dataTransfer.items[0].getAsFile();
+    if (!file) return;
+    file.arrayBuffer().then(function (arrayBuffer) {
      source = 'torrent-file';
      originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
      sourceTooltip.setContent('Currently loaded information sourced from Torrent file');
@@ -124,16 +132,16 @@ function start() {
  });

  // example buttons
-  example1.addEventListener('click', function(event) {
+  example1.addEventListener('click', function (event) {
    event.preventDefault();
-    notyf.success('Parsing Ubuntu 22.04 Magnet URL');
+    notyf.success('Parsing Ubuntu 24.04 Magnet URL');
    source = 'magnet';
    originalSourceIcon.innerHTML = '<span class="fad fa-magnet fa-fw"></span>';
    sourceTooltip.setContent('Currently loaded information sourced from Magnet URL');
-    parse('magnet:?xt=urn:btih:2c6b6858d61da9543d4231a71db4b1c9264b0685&dn=ubuntu-22.04-desktop-amd64.iso&tr=https%3A%2F%2Ftorrent.ubuntu.com%2Fannounce&tr=https%3A%2F%2Fipv6.torrent.ubuntu.com%2Fannounce');
+    parse('magnet:?xt=urn:btih:2aa4f5a7e209e54b32803d43670971c4c8caaa05&dn=ubuntu-24.04-desktop-amd64.iso&tr=https%3A%2F%2Ftorrent.ubuntu.com%2Fannounce&tr=https%3A%2F%2Fipv6.torrent.ubuntu.com%2Fannounce');
  });

-  example2.addEventListener('click', async function(event) {
+  example2.addEventListener('click', async function (event) {
    event.preventDefault();
    notyf.success('Fetching and Parsing &ldquo;The WIRED CD&rdquo; Torrent File...');
    source = 'remote-torrent-file';
@@ -142,7 +150,7 @@ function start() {
    parseRemote('https://webtorrent.io/torrents/wired-cd.torrent');
  });

-  example3.addEventListener('click', async function(event) {
+  example3.addEventListener('click', async function (event) {
    event.preventDefault();
    notyf.success('Parsing Jack Johnson Archive.org Torrent File');
    let response = await fetch('/ext/jj2008-06-14.mk4_archive.torrent');
@@ -155,20 +163,20 @@ function start() {

  // share buttons
  let copyurl = new clipboard('#copyURL');
-  copyurl.on('success', function(e) {
+  copyurl.on('success', function (e) {
    notyf.success('Copied site URL to clipboard!');
    console.info(e);
  });
-  copyurl.on('failure', function(e) {
+  copyurl.on('failure', function (e) {
    notyf.error('Problem copying to clipboard');
    console.warn(e);
  });

  let copymagnet = new clipboard('#copyMagnet');
-  copymagnet.on('success', function(e) {
+  copymagnet.on('success', function (e) {
    notyf.success('Copied Magnet URL to clipboard!');
  });
-  copymagnet.on('failure', function(e) {
+  copymagnet.on('failure', function (e) {
    notyf.error('Problem copying to clipboard');
    console.warn(e);
  });
@@ -190,7 +198,7 @@ function start() {
  removeWebseeds.addEventListener('click', () => removeAllRows('urlList'));
  getFiles.addEventListener('click', getFilesFromPeers);

-  tippy('[data-tippy-content]', {"theme": "torrent-parts", "animation": "shift-away-subtle"}); // all element-defined tooltips
+  tippy('[data-tippy-content]', { theme: 'torrent-parts', animation: 'shift-away-subtle' }); // all element-defined tooltips
  sourceTooltip.disable();

  if (window.location.hash) {
@@ -199,7 +207,6 @@ function start() {
    sourceTooltip.setContent('Currently loaded information sourced from shared torrent.parts link');
    parse(window.location.hash.split('#')[1]);
  }
-
 }

 async function parse(toLoad) {
@@ -212,13 +219,14 @@ async function parse(toLoad) {
      console.info('Magnet includes xs, attempting remote parse');
      parseRemote(parsed.xs);
    }
-  }
-  catch(e) { // maybe they put a URL to a torrent file in the magnet box?
+  } catch (e) {
+    // maybe they put a URL to a torrent file in the magnet box?
    console.warn(e);
    if (source == 'magnet') {
      console.info('Attempting remote parse');
      parseRemote(toLoad);
-    } else { // probably not. Just a bad file.
+    } else {
+      // probably not. Just a bad file.
      notyf.error('Problem parsing input. Is this a .torrent file?');
      console.error('Problem parsing input');
    }
@@ -247,9 +255,7 @@ async function parseRemote(toLoad) {
  }
 }

-
 function display() {
-
  console.log(parsed);

  hash.value = parsed.infoHash;
@@ -262,7 +268,7 @@ function display() {
  }
  createdBy.value = parsed.createdBy ? ' by ' + parsed.createdBy : '';
  comment.value = parsed.comment ? parsed.comment : '';
-  pieces.value = parsed.pieces ? parsed.pieces.length.toLocaleString() + ' ' + bytes.format(parsed.pieceLength, {"decimalPlaces": 1, "unitSeparator": " "}) + ' pieces (last piece ' + bytes.format(parsed.lastPieceLength, {"decimalPlaces": 1, "unitSeparator": " "}) + ')' : '';
+  pieces.value = parsed.pieces ? parsed.pieces.length.toLocaleString() + ' ' + bytes.format(parsed.pieceLength, { decimalPlaces: 1, unitSeparator: ' ' }) + ' pieces (last piece ' + bytes.format(parsed.lastPieceLength, { decimalPlaces: 1, unitSeparator: ' ' }) + ')' : '';

  announce.innerHTML = '';
  if (parsed.announce && parsed.announce.length) {
@@ -278,16 +284,18 @@ function display() {
      tracker.setAttribute('aria-label', 'Tracker URL #' + i);
      tracker.addEventListener('input', propertyChange);
      row.appendChild(tracker);
-      let remove = document.createElement('a');
+      let remove = document.createElement('button');
+      remove.type = 'button';
      remove.className = 'remove';
      remove.dataset.index = i;
      remove.innerHTML = '<span class="far fa-trash"></span>';
+      remove.setAttribute('aria-label', 'Remove tracker #' + i);
      remove.addEventListener('click', removeRow);
      row.appendChild(remove);
      announce.appendChild(row);
    }
-  // } else {
-  //   announce.innerHTML = '<em>No trackers specified in the URL/File provided</em>';
+    // } else {
+    //   announce.innerHTML = '<em>No trackers specified in the URL/File provided</em>';
  }

  urlList.innerHTML = '';
@@ -304,16 +312,18 @@ function display() {
      webseed.setAttribute('aria-label', 'Webseed URL #' + i);
      webseed.addEventListener('input', propertyChange);
      row.appendChild(webseed);
-      let remove = document.createElement('a');
+      let remove = document.createElement('button');
+      remove.type = 'button';
      remove.className = 'remove';
      remove.dataset.index = i;
      remove.innerHTML = '<span class="far fa-trash"></span>';
+      remove.setAttribute('aria-label', 'Remove webseed #' + i);
      remove.addEventListener('click', removeRow);
      row.appendChild(remove);
      urlList.appendChild(row);
    }
-  // } else {
-  //   urlList.innerHTML = '<em>No webseed URLs in the URL/File provided</em>';
+    // } else {
+    //   urlList.innerHTML = '<em>No webseed URLs in the URL/File provided</em>';
  }

  files.innerHTML = '';
@@ -339,10 +349,10 @@ function display() {
  } else {
    if (client.torrents.length > 0) {
      getFiles.style.display = 'none';
-      files.innerHTML = '<input type="text" placeholder="Attempting fetching of files from Webtorrent..." aria-label="Attempting fetching of files from Webtorrent..." disabled>';
+      files.innerHTML = '<output>Attempting fetching of files from Webtorrent...</output>';
    } else {
      getFiles.style.display = 'block';
-      files.innerHTML = '<input type="text" placeholder="Not included in the URL/File provided" aria-label="Files information not included in the URL/File provided" disabled>';
+      files.innerHTML = '<output>Not included in the URL/File provided</output>';
    }
    downloadTorrentTooltip.setContent('Files metadata is required to generate a Torrent file. Try fetching files list from WebTorrent.');
    downloadTorrent.removeEventListener('click', saveTorrent);
@@ -360,11 +370,10 @@ function display() {
  if (parsed.name) {
    document.title = 'Torrent Parts | ' + parsed.name;
  } else {
-    document.title = 'Torrent Parts | Inspect and edit what\'s in your Torrent file or Magnet link';
+    document.title = "Torrent Parts | Inspect and edit what's in your Torrent file or Magnet link";
  }

  sourceTooltip.enable();
-
 }

 function createFileRow(icon, name, size) {
@@ -373,10 +382,10 @@ function createFileRow(icon, name, size) {
  if (icon) iconcell.innerHTML = '<span class="far fa-' + icon + '"></span>';
  row.appendChild(iconcell);
  let namecell = document.createElement('td');
-  namecell.innerHTML = name;
+  namecell.textContent = name;
  row.appendChild(namecell);
  let totalcell = document.createElement('td');
-  totalcell.innerHTML = bytes.format(size, {"decimalPlaces": 1, "unitSeparator": " "});
+  totalcell.innerHTML = bytes.format(size, { decimalPlaces: 1, unitSeparator: ' ' });
  row.appendChild(totalcell);
  return row;
 }
@@ -391,10 +400,10 @@ function getFontAwesomeIconForMimetype(mimetype) {
      return 'file-word';
    case mimetype.includes('ms-excel'):
    case mimetype.includes('spreadsheet'):
-      return 'file-powerpoint';
+      return 'file-spreadsheet';
    case mimetype.includes('powerpoint'):
    case mimetype.includes('presentation'):
-        return 'file-powerpoint';
+      return 'file-powerpoint';
    case mimetype.includes('7z-'):
    case mimetype.includes('iso9660'):
    case mimetype.includes('zip'):
@@ -443,13 +452,13 @@ function resetProperties() {
  hash.value = '';
  announce.innerHTML = '';
  urlList.innerHTML = '';
-  client.torrents.forEach(torrent => torrent.destroy());
+  client.torrents.forEach((torrent) => torrent.destroy());
  getFiles.style.display = 'block';
  files.innerHTML = '';
  window.location.hash = '';
  copyURL.setAttribute('data-clipboard-text', '');
  copyMagnet.setAttribute('data-clipboard-text', '');
-  document.title = 'Torrent Parts | Inspect and edit what\'s in your Torrent file or Magnet link';
+  document.title = "Torrent Parts | Inspect and edit what's in your Torrent file or Magnet link";
  sourceTooltip.disable();
 }

@@ -459,14 +468,13 @@ async function addCurrentTrackers() {
  try {
    let response = await fetch('https://newtrackon.com/api/stable'); // get trackers with 95% uptime
    let trackers = await response.text();
-    parsed.announce = parsed.announce.concat(trackers.split('\n\n'));
+    parsed.announce = (parsed.announce || []).concat(trackers.split('\n\n'));
    parsed.announce.push('http://bt1.archive.org:6969/announce');
    parsed.announce.push('http://bt2.archive.org:6969/announce');
-    parsed.announce = parsed.announce.filter((v,i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties
+    parsed.announce = parsed.announce.filter((v, i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties
    notyf.success('Added known working trackers from newTrackon');
    updateModified();
-  }
-  catch(e) {
+  } catch (e) {
    notyf.error('Problem fetching trackers from newTrackon');
    console.warn(e);
  }
@@ -506,11 +514,13 @@ function updateModified() {
 function getFilesFromPeers() {
  console.info('Attempting fetching files from Webtorrent...');
  getFiles.style.display = 'none';
-  parsed.announce.push('wss://tracker.webtorrent.io');
+  parsed.announce = parsed.announce || [];
+  parsed.announce.push('wss://tracker.webtorrent.dev');
  parsed.announce.push('wss://tracker.openwebtorrent.com');
  parsed.announce.push('wss://tracker.btorrent.xyz');
  parsed.announce.push('wss://tracker.fastcast.nz');
-  parsed.announce = parsed.announce.filter((v,i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties
+  parsed.announce.push('wss://tracker.files.fm:7073/announce');
+  parsed.announce = parsed.announce.filter((v, i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties
  client.add(toMagnetURI(parsed), (torrent) => {
    parsed.info = Object.assign({}, torrent.info); // clone object
    parsed.files = torrent.files;
@@ -525,18 +535,13 @@ function getFilesFromPeers() {
  display();
 }

-// https://stackoverflow.com/a/36899900/2700296
 function saveTorrent() {
-  let data = toTorrentFile(parsed);
-  if (data !== null && navigator.msSaveBlob)
-    return navigator.msSaveBlob(new Blob([data], { "type": "application/x-bittorrent" }), parsed.name + '.torrent');
-  let a = document.createElement('a');
-  a.style.display = 'none';
-  let url = window.URL.createObjectURL(new Blob([data], { "type": "application/x-bittorrent" }));
-  a.setAttribute('href', url);
-  a.setAttribute('download', parsed.name + '.torrent');
-  document.body.appendChild(a);
+  const data = toTorrentFile(parsed);
+  const blob = new Blob([data], { type: 'application/x-bittorrent' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = parsed.name + '.torrent';
  a.click();
-  window.URL.revokeObjectURL(url);
-  a.remove();
-}
+  URL.revokeObjectURL(url);
+}
--- a/src/style.css
+++ b/src/style.css
@@ -35,12 +35,11 @@ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:b
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: local(''),
-       url('/ext/alata-latin-400.woff2') format('woff2'),
-       url('/ext/alata-latin-400.woff') format('woff');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  src: url('/ext/alata-v9-latin-regular.woff2') format('woff2'), 
+       url('/ext/alata-v9-latin-regular.ttf') format('truetype');
 }

+
 /* begin custom stuff */

 .sr-only {
@@ -69,7 +68,7 @@ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:b
 body {
  color: var(--white);
  background: var(--gradient);
-  font-family: 'Alata', sans-serif;
+  font-family: 'Alata', Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
@@ -256,12 +255,29 @@ label[for="torrent"] {
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
+  border: none;
+  padding: 0;
+  position: relative;
 }

 .property:first-child {
  width: 240px;
 }

+.property > legend {
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 280px;
+  text-align: right;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+}
+
 .labels {
  width: 280px;
  text-align: right;
@@ -270,7 +286,14 @@ label[for="torrent"] {
  flex-direction: column;
 }

-.labels > a {
+.label-actions {
+  margin-top: 26px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.labels > a, .label-actions > a {
  font-size: 80%;
  margin-top: 6px;
 }
@@ -307,10 +330,35 @@ input {

 #announce > *, #urlList > * {
  margin: 0 0 16px 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }

 .remove {
-  margin-left: 6px;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  width: auto;
+  height: auto;
+  padding: 0;
+  cursor: pointer;
+  display: inline;
+  color: var(--grey);
+  flex-shrink: 0;
+}
+
+output {
+  color: rgb(120, 126, 133) !important;
+  -webkit-text-fill-color: rgb(120, 126, 133) !important;
+  background: transparent;
+  border: 0;
+  padding: 8px 0;
+  font-style: normal;
+  display: block;
+  width: 440px;
+  height: 40px;
+  box-sizing: border-box;
 }

@media (max-width: 1080px) {
@@ -358,8 +406,12 @@ input {
    flex-direction: column;
  }

-  .property > label {
-    margin: 12px 0;
+  .property > legend {
+    position: static;
+    left: auto;
+    width: auto;
+    text-align: center;
+    margin-bottom: 16px;
  }

  input, button {
@@ -372,6 +424,13 @@ input {
    align-items: center;
  }

+  .label-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 0;
+  }
+
  .labels, .content, #files {
    width: auto;
    display: flex;
@@ -379,8 +438,28 @@ input {
    align-items: center;
  }

+  output {
+    text-align: center;
+  }
+
  #announce, #urlList {
    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #announce > *, #urlList > * {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 80vw;
+    gap: 6px;
+  }
+
+  #announce > * > input, #urlList > * > input {
+    width: calc(80vw - 40px);
+    flex: none;
  }

  #announce > * > *, #urlList > * > *, #addTracker, #addWebseed, #examples > button {
--- a/src/sw.js
+++ b/src/sw.js
@@ -1,33 +1,38 @@
-const assets = [
+const CACHE_NAME = 'torrent-parts-v2';
+const ASSETS = [
  '/',
  '/index.html',
-  '/bin/bundle.min.js',
+  '/src/parse.js',
  '/src/style.css',
-  '/ext/alata-latin-400.woff2',
-  '/ext/alata-latin-400.woff',
+  '/ext/alata-v9-latin-regular.woff2',
  '/ext/fa.min.js',
-  '/ext/notyf.min.js',
-  '/ext/jj2008-06-14.mk4_archive.torrent'
+  '/ext/jj2008-06-14.mk4_archive.torrent',
+  '/favicon.ico',
+  '/manifest.webmanifest',
 ];

-self.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('assets')
-      .then(function(cache) {
-        return cache.addAll(assets);
-      })
+self.addEventListener('install', (e) => {
+  self.skipWaiting();
+  e.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS)));
+});
+
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    Promise.all([
+      self.clients.claim(),
+      caches.keys().then((keys) => Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))),
+    ])
  );
 });

-self.addEventListener('fetch', function(event) {
-  event.respondWith(
-    caches.match(event.request)
-      .then(function(response) {
-        if (response) {
-          return response;
-        }
-        return fetch(event.request);
-      }
-    )
-  );
-});
+self.addEventListener('fetch', (e) => {
+  if (e.request.method !== 'GET') return;
+
+  const url = new URL(e.request.url);
+
+  // Only cache same-origin requests
+  if (url.origin !== self.location.origin) return;
+
+  // Cache-first for local assets
+  e.respondWith(caches.match(e.request).then((cached) => cached || fetch(e.request)));
+});
Author	SHA1	Message	Date
Leo Herzog	a086867ff7	Version Bump	2025-12-22 22:06:50 -05:00
Leo Herzog	74d74f8432	Simplify Service Worker	2025-12-22 22:06:43 -05:00
Leo Herzog	570df30bcc	Refactor UI to Use Semantic HTML Elements	2025-12-22 22:01:18 -05:00
Leo Herzog	615fe5092c	Improve Accessibility with Proper Button Elements and ARIA Labels	2025-12-22 21:58:47 -05:00
Leo Herzog	dc93c4722e	Update WebTorrent Trackers with Active Endpoints	2025-12-22 21:57:13 -05:00
Leo Herzog	b2496a7719	Remove Deprecated IE11 msSaveBlob Code	2025-12-22 21:56:14 -05:00
Leo Herzog	5791f8f749	Fix XSS Vulnerability and Null Reference Errors	2025-12-22 21:55:44 -05:00
Leo Herzog	c4af414e16	Version Bump	2025-07-02 13:46:20 -04:00
Leo Herzog	d22fdf219c	Restructure and Update Service Worker	2025-07-02 13:45:59 -04:00
Leo Herzog	d60f8ffcf1	Icon Fix	2025-07-02 13:34:30 -04:00
Leo Herzog	0c5f522459	Fixed Undefined Variable Reference	2025-07-02 13:33:49 -04:00
Leo Herzog	f81243896c	Run Through Prettier	2024-05-07 10:21:00 -04:00
Leo Herzog	41f408d828	Light/Dark Mode Readme Support	2024-01-18 16:54:15 -05:00
Leo Herzog	e17b51276b	Switch from BuyMeACoffee	2024-01-18 11:27:40 -05:00
Leo	c54f496dcc	Not Using Github Pages Anymore	2023-11-17 17:20:13 +00:00
Leo	2e584fe04f	No Longer Using Browserify Thanks for all the fish, @Substack	2023-11-17 16:57:50 +00:00
Leo	307af881ad	Update Font and Add Fallback Stack	2023-11-17 16:51:01 +00:00