website: add map, atlas cli

Author: romain-dartigues

pyproject.toml

@@ -19,6 +19,7 @@ dev = [
 [project.scripts]
 sti = "sti:main"
 serve = "sti.app:app.run"
+atlas = "sti.atlas:main"
 
 [build-system]
 requires = ["hatchling"]

src/sti/app.py

@@ -2,9 +2,10 @@
 from io import BytesIO
 from zlib import crc32
 from pathlib import Path
+from base64 import b64encode
 
 # dependencies
-from flask import Flask, render_template, send_file
+from flask import Flask, Response, render_template, send_file
 
 # local
 from .utils import get_icons_from, get_refs_from
@@ -14,6 +15,7 @@
     __name__,
     static_folder=git_root / "images",
 )
+app.jinja_env.add_extension('jinja2.ext.loopcontrols')
 
 svg_lib = {
     "refs": get_refs_from(git_root / "images/reference"),
@@ -24,10 +26,32 @@
     FAVICON = file.read()
     FAVETAG = f"{crc32(FAVICON):x}"
 
+@app.template_filter()
+def b2s(b: bytes) -> str:
+    return b.decode("utf8")
+
 @app.route("/favicon.ico")
 def favicon():
     return send_file(BytesIO(FAVICON), mimetype='image/x-icon', etag=FAVETAG)
 
+@app.route("/atlas.svg")
+def svglib():
+    return Response(
+        render_template(
+            "atlas.svg", library=svg_lib["icons"].values()
+    ),
+        mimetype="image/svg+xml",
+    )
+
+@app.route("/mxlibrary.xml")
+def mxlibrary():
+    return Response(
+        render_template(
+            "mxlibrary.xml", library=svg_lib["icons"].values()
+        ),
+        mimetype="application/xml",
+    )
+
 @app.route("/", defaults={"path": "index"})
 @app.route("/<string:path>.html")
 @app.route("/<string:path>")

src/sti/atlas.py

@@ -0,0 +1,90 @@
+#!/usr/bin/env python3
+"""Super Tiny Icons Atlas generator"""
+# stdlib
+from argparse import ArgumentParser
+from base64 import b64encode
+from pathlib import Path
+import json
+import logging
+import sys
+
+# dependencies
+from jinja2 import Environment, FileSystemLoader
+
+# local
+from .utils import Icon
+
+current_dir = Path(__file__).absolute().parent
+tpl = Environment(loader=FileSystemLoader(current_dir / "templates"))
+
+class Atlas:
+    lib: list[Icon] = None
+
+    def __init__(self):
+        self.lib = []
+
+    def add(self, path: Path):
+        self.lib.append(Icon.from_path(path, with_path=False, with_data=True))
+        return self
+
+    def write_drawio(self, fp):
+        fp.write("<mxlibrary>")
+        json.dump([
+            {
+                "title": entry.label,
+                "data": f"data:image/svg+xml;base64,{b64encode(entry.data).decode('ascii')}",
+                "aspect": "fixed",
+                "w": entry.dimension,
+                "h": entry.dimension,
+            } for entry in self.lib
+        ], fp, indent=1, sort_keys=True)
+        fp.write("</mxlibrary>")
+
+    def write_svg(self, fp):
+        template = tpl.get_template(name="atlas.svg")
+        fp.write(template.render(library=self.lib))
+
+def parse_args():
+    """parse arguments, initialize logging"""
+    parser = ArgumentParser(description=__doc__.splitlines()[0])
+    parser.add_argument(
+        "-q",
+        "--quiet",
+        action="store_const",
+        const=0,
+        default=2,
+        dest="verbose",
+    )
+    parser.add_argument("-v", "--verbose", action="count")
+
+    group = parser.add_argument_group("Configuration")
+    group.add_argument(
+        "-f",
+        "--format",
+        choices=["drawio", "svg"],
+        default=None,
+        required=True,
+    )
+    args = parser.parse_args()
+    loglevel = min(
+        max(logging.CRITICAL - (args.verbose * 10), logging.DEBUG), logging.CRITICAL
+    )
+    logging.basicConfig(
+        format="%(levelname)s: %(message)s",
+        level=loglevel,
+        stream=sys.stderr,
+    )
+    return args
+
+def main():
+    args = parse_args()
+    atlas = Atlas()
+    for entry in Path(__file__).parents[1].with_name("images").glob("svg/*.svg"):
+        atlas.add(entry)
+    if args.format == "drawio":
+        atlas.write_drawio(sys.stdout)
+    if args.format == "svg":
+        atlas.write_svg(sys.stdout)
+
+if __name__ == "__main__":
+    main()

src/sti/cli.py

@@ -3,14 +3,14 @@
 # stdlib
 from argparse import ArgumentParser
 from pathlib import Path
-from os.path import commonprefix
 import logging
 import sys
 
 # dependencies
 from jinja2 import Environment, FileSystemLoader
 
 # local
+from .atlas import Atlas
 from .utils import get_icons_from, get_refs_from
 
 
@@ -60,7 +60,17 @@ def main():
     if git_root in out.parents and not out.exists():
         out.mkdir(parents=True)
 
-    for template_name in ("index", "list", "reference"):
+    atlas = Atlas()
+    for entry in Path(__file__).parents[1].with_name("images").glob("svg/*.svg"):
+        atlas.add(entry)
+
+    for writer in filter(lambda _:_.startswith('write_'), dir(atlas)):
+        with (Path(args.output) / f"atlas.{writer.removeprefix('write_')}").open(
+                "w", encoding="utf8"
+            ) as out:
+            getattr(atlas, writer)(out)
+
+    for template_name in ("index", "libraries", "list", "reference"):
         template = tpl_env.get_template(name=f"{template_name}.html")
         with (Path(args.output) / f"{template_name}.html").open(
                 "w", encoding="utf8"

src/sti/templates/atlas.svg

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}{% endblock %}SuperTinyIcons</title>
+  <link rel="icon" href="favicon.ico">
   <style>{% block style %}
   html {
    display: grid;
@@ -100,6 +101,7 @@
   }
   {% endblock %}
   </style>
+  {% block script %}{% endblock %}
  </head>
  <body{% if pagename %} id="{{ pagename }}"{% endif %}>
  <header>
@@ -112,6 +114,7 @@ <h1>Super Tiny Icons</h1>
   <a href="index.html">Home</a>
   <a href="list.html">What's available so far</a>
   <a href="reference.html">Reference</a>
+  <a href="libraries.html">Libraries</a>
   <a href="https://github.com/edent/SuperTinyIcons/">This project on GitHub</a>
  </nav>
  <main>

src/sti/templates/base.html

@@ -0,0 +1,61 @@
+{% extends "base.html" %}
+
+<style>{% block style %}
+{{ super() }}
+ h3 img {
+  height:1em;width:1em;padding-right:1ex;vertical-align:text-bottom;
+ }
+{% endblock %}
+</style>
+
+{% block script %}
+ <script>
+  var tiles;
+  fetch("atlas.svg", { cache: "force-cache" })
+   .then((response) => response.text())
+   .then((data) => {
+    let size = Number(data.length).toString().replace(/\B(?=(\d{3})+(?!\d))/g, "\u2009");
+    const container = document.querySelector(".atlas");
+    const parser = new DOMParser();
+    let tiles = parser.parseFromString(data, "image/svg+xml").querySelectorAll("svg svg");
+    container.querySelector("p").insertAdjacentHTML("afterend", `<p>The <a href="atlas.svg"><b>whole</b> library</a> weight only <var>${size}&nbsp;B</var> (uncompressed) for <var>${tiles.length}</var> icons!</p>`);
+    let table = container.querySelector("table tbody");
+    for (let i = 0; i < 10; ++i) {
+     let tile = tiles[Math.floor(Math.random()*tiles.length)];
+     let sample = `<img alt="${tile.ariaLabel}" height="32" width="32" src="atlas.svg#${tile.id}">\n`;
+     table.insertAdjacentHTML("beforeend", `<tr><td><code>${sample.replace(/</g, "&lt;")}</code></td><td>${sample}</td></tr>\n`)
+    }
+  });
+ </script>
+{% endblock %}
+
+{% block content %}
+<h2>Libraries</h2>
+
+<section class="atlas">
+ <h3><img alt="" src="atlas.svg#svg">SVG texture atlas (a.k.a. spritesheet)</h3>
+ <p>A single file containing the icons; this limit the requests to the server and can improve the page load time.</p>
+ <p>Example:</p>
+ <table>
+  <thead>
+  <tr>
+   <th>HTML</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+   <td><code>&lt;img alt="Acast" height="32" src="atlas.svg#acast"&gt;</code></td>
+   <td><img alt="Acast" height="32" width="32" src="atlas.svg#acast"></td>
+  </tr>
+  </tbody>
+ </table>
+</section>
+
+ <section>
+  <h3><img alt="" src="atlas.svg#drawio">Draw.io</h3>
+  <p>Are you using <a href="https://draw.io">Draw.io</a>?</p>
+  <p>Feeling you are missing some icons for your charts?</p>
+  <p><a href="atlas.drawio">Download Super Tiny Icons as a graphic library for Draw.io</a>!</p>
+  <p>File ▸ Open Library from ▸ URL...</p>
+ </section>
+{% endblock %}

src/sti/templates/libraries.html

@@ -9,24 +9,98 @@
   align-items: center;
   justify-content: center;
  }
-section div {
- text-align: center;
- padding: 1.5em 1em;
- box-sizing: border-box;
- width:128px;
- align-self: flex-end;
-}
-section img {
- width:100px;
-}
-section span {
- font-family: monospace;
-}
+ section div {
+  text-align: center;
+  padding: 1.5em 1em;
+  box-sizing: border-box;
+  width:128px;
+  align-self: flex-end;
+ }
+ section img {
+  width:100px;
+ }
+ section span {
+  font-family: monospace;
+ }
+
+ #map {
+  background:#eee;
+  display:flex;
+  flex-wrap:wrap;
+  gap:1px;
+ }
+ #map i {
+  display:inline-block;
+  padding:2px;
+  background-color:hsl(var(--a) 100% 50%);
+  opacity: .25;
+ }
+ #map i:hover {
+ opacity:1;
+ }
+ .thumb.selected img {
+  box-shadow: 0 0 1em #2098D1;
+ }
 {% endblock %}
 </style>
+
+{% block script %}<script>
+ function save(filename, data, mime) {
+  const blob = new Blob([data], {type: mime || "application/octet-stream"});
+  if(window.navigator.msSaveOrOpenBlob) {
+   window.navigator.msSaveBlob(blob, filename);
+  }
+  else{
+   const elem = window.document.createElement('a');
+   elem.href = window.URL.createObjectURL(blob);
+   elem.download = filename;
+   document.body.appendChild(elem);
+   elem.click();
+   document.body.removeChild(elem);
+  }
+ }
+
+ document.addEventListener("DOMContentLoaded", function(){
+  let tpl='';
+  document.querySelectorAll('.thumb').forEach(function(e){
+   let size = parseInt(e.dataset.size);
+   let percent = size/1024;
+   let angle = 360*percent;
+   tpl += '<i style="--s:' + size + '; --p:'+ percent + '; --a:' + (angle) +'" title="'+ e.dataset.name + ': ' + size +' B"></i>';
+   e.addEventListener('click', function() { e.classList.toggle("selected") }, false);
+   fetch(e.querySelector("img").src)
+    .then((response) => response.text())
+    .then((text) => {
+     localStorage.setItem(e.querySelector("img").src, text);
+    });
+  });
+  document.querySelector('#map').innerHTML = tpl;
+
+  document.querySelector(".download .drawio").addEventListener('click', function() {
+   let lib = [];
+   document.querySelectorAll('.thumb.selected').forEach(function (e) {
+     lib.push({
+      title: e.querySelector("strong").textContent,
+      data: "data:image/svg+xml;base64," + btoa(localStorage.getItem(e.querySelector("img").src)),
+      aspect: "fixed",
+      h: 32,
+      w: 32,
+    });
+   });
+   if (lib.length) {save("STILib.xml", "<mxlibrary>" + JSON.stringify(lib) + "</mxlibrary>");}
+  });
+ });
+</script>
+{% endblock %}
+
 {% block content %}
 <h2>What's Available so far?</h2>
-
+<aside id="map"></aside>
+<div class="download">
+ <h3>Download selected for</h3>
+ <button class="drawio">Draw.io</button>
+ <button class="svg">SVG</button>
+</div>
 <section>
 {% for _, icon in icons | dictsort -%}
  <div class="thumb" data-name="{{ icon.name }}" data-size="{{ icon.size }}">