Add a basic logo

.justfile

@@ -3,16 +3,14 @@
 default:
    @just --list
 
-wasm-pack:
+build:
    wasm-pack build --release --target web
 
-
-wasm2:
+wasm:
    cargo build --target wasm32-unknown-unknown 
 
-
 serve:
-   cd html && python3 -m http.server
+   cd www-zola && zola serve
 
 
 # for use with twiggy ("cargo install twiggy")

www-zola/content/fetch-init.md

@@ -14,11 +14,13 @@ description = "Fetch PSSH data from a DASH initialization segment."
    <small>The URL of the initialization segment to fetch</small>
 </form>
 
-<div id="output" style="margin-top:2em;margin-bottom:2em;padding:1em"></div>
+<div id="output" style="margin-top:2em;margin-bottom:1.5em;padding:1em"></div>
 
 This tool fetches an initialization segment from a web server (an MP4 fragment), extracts any DRM
 initialization data (PSSH boxes) and decodes and prints them. Please note that the initialization
-segment is fetched using your own web browser.
+segment is fetched using your own web browser. Due to browser restrictions on “<a
+href="https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content">mixed content</a>”, this
+tool will probably only work with HTTPS URLs and fail with HTTP URLs.
 
 Some sample URLs for testing: [init1.mp4](https://m.dtv.fi/dash/dasherh264v3/drm/a1/i.mp4),
 [init2.mp4](https://s71135.cdn.mytvnet.vn/pkg20/__cl/vstv341/sc-gaFECw/V2_init.mp4).

www-zola/templates/base.html

@@ -7,8 +7,11 @@
        href="https://cdnjs.cloudflare.com/ajax/libs/picocss/2.0.3/pico.classless.amber.min.css"
        integrity="sha512-YB08WWnuKue7dhY2B4brKA30xfkpCHLSPR/KyjSNOzA8hPYaizvjjhdrvnU3h6dg04xRNCdhgcsfUXTeLAlA7Q=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    {#
     <link rel="icon" href="data:," />
-    <link rel="canonical" href="{{ current_url}} " />
+    #}
+    <link rel="icon" href="../img/pssh-box-logo.svg">
+    <link rel="canonical" href="{{ current_url}}" />
 {% if page -%}
    {% if page.title -%}
    <title>{{ page.title }}</title>
@@ -41,7 +44,7 @@
       <nav>
         <ul>
         {% if page %}
-          <li><h1>{{ page.title }}</h1></li>
+          <li><h1><img src="{{ config.base_url }}img/pssh-box-logo.svg" style="width:1em" alt="">&nbsp;{{ page.title }}</h1></li>
         {% else %}
           <li><h1>PSSH box tools</h1></li>
         {% endif %}

www-zola/templates/index.html

@@ -2,9 +2,27 @@
 
 {% block content %}
 <div class="grid">
-   <article><a href="decode/">Decode a PSSH box</a></article>
-   <article><a href="generate/">Generate a Widevine PSSH</a></article>
-   <article><a href="fetch-init/">Fetch an initialization segment and decode any PSSH data</a></article>
+   <article>
+     <h3><a href="decode/">Decode a PSSH box</a></h3>
+
+     <p>This tool decodes a PSSH box or sequence of PSSH boxes that are used to initialize DRM systems
+     for streaming media. You will typically find a PSSH box in a <tt>&lt;cenc:pssh&gt;</tt> element in a
+     DASH MPD manifest, or in the initialization segment of a media stream (an fMP4 fragment), or 
+     in an <tt>EXT-X-SESSION-KEY</tt> field of an m3u8 playlist.
+   </article>
+
+   <article>
+     <h3><a href="generate/">Generate a Widevine PSSH</a></h3>
+
+     <p>This tool generates a Widevine PSSH box and encodes it in Base 64 format.
+   </article>
+
+   <article>
+     <h3><a href="fetch-init/">Fetch an initialization segment</a></h3>
+
+     <p>This tool fetches an initialization segment from a web server (an MP4 fragment), extracts
+     any DRM initialization data (PSSH boxes) and decodes and prints them. 
+   </article>
 </div>
 
 <p>These tools are all implemented in WebAssembly and run directly in your browser. There is no