resize twitter and mastodon logo

dodo.py

@@ -1,41 +1,59 @@
+def resize_image(basename, width, format):
+    from PIL import Image
+    with Image.open('assets/{}.png'.format(basename)) as im:
+        if 'A' in im.getbands() and format != 'jpeg':
+            im = im.convert('RGBA')
+        else:
+            im = im.convert('RGB')
+        height = im.height * width // im.width
+        new = im.resize((width,height), resample=Image.LANCZOS)
+        if format == 'jpeg':
+            kwargs = dict(
+                    optimize = True,
+                    progressive = True,
+                    quality = 80,
+                    )
+        elif format == 'webp':
+            kwargs = dict(
+                    quality = 79,
+                    )
+        elif format == 'png':
+            kwargs = dict(
+                    optimize = True,
+                    )
+        new.save('static/{}-{}.{}'.format(basename, width, format), **kwargs)
+
 def task_gen_logo():
     """generate versions of the logo in various sizes"""
-
-    from PIL import Image
-
-    def resize_logo(width, format):
-        with Image.open('assets/logotype.png') as im:
-            im = im.convert('RGB')
-            height = im.height * width // im.width
-            new = im.resize((width,height), resample=Image.LANCZOS)
-            if format == 'jpeg':
-                kwargs = dict(
-                        optimize = True,
-                        progressive = True,
-                        quality = 80,
-                        )
-            elif format == 'webp':
-                kwargs = dict(
-                        quality = 79,
-                        )
-            new.save('static/logotype-{}.{}'.format(width, format), **kwargs)
-
     widths = (200, 400, 600, 800)
     formats = ('jpeg', 'webp')
     for width in widths:
         for format in formats:
             yield dict(
                     name='{}.{}'.format(width, format),
-                    actions=[(resize_logo, (width, format))],
+                    actions=[(resize_image, ('logotype', width, format))],
                     targets=[f'static/logotype-{width}.{format}'],
                     file_dep=['assets/logotype.png'],
                     clean=True,
                 )
 
+def task_button_icons():
+    widths = (20,40,80)
+    formats = ('webp', 'png')
+    for width in widths:
+        for format in formats:
+            for basename in ('twitter', 'mastodon'):
+                yield dict(
+                    name='{}-{}.{}'.format(basename, width, format),
+                    actions=[(resize_image, (basename, width, format))],
+                    targets=['static/{}-{}.{}'.format(basename,width,format)],
+                    file_dep=['assets/{}.png'.format(basename)],
+                    clean=True,
+                )
 
 def task_copy_asset():
     import shutil
-    assets = ('icon.png', 'logotype.png', 'settings.js', 'twitter.png', 'mastodon.png')
+    assets = ('icon.png', 'logotype.png', 'settings.js')
     for asset in assets:
         yield dict(
                 name=asset,
@@ -77,10 +95,9 @@ def task_compress_static():
         'static/icon.png',
         'static/logotype.png',
         'static/settings.js',
-        'static/twitter.png',
-        'static/mastodon.png',
         ) + tuple((f'static/logotype-{width}.{format}' for width, format in cross((200, 400, 600, 800), ('jpeg','webp'))))
 
+
     def compress_brotli(dependencies):
         for filename in dependencies:
             with open(filename, 'rb') as in_:

templates/index.html

@@ -1,3 +1,4 @@
+{% from 'lib/picture.html' import picture %}
 {% extends 'lib/layout.html' %}
 {% block body %}
 
@@ -30,7 +31,7 @@
 <p>
 <a style='background-color:#1da1f2' class='btn' href="/login/twitter">
     <span class='btn-header'>
-        <img src='{{ st('twitter.png') }}'>
+        {{picture(st, 'twitter', (20,40,80), ('webp', 'png'))}}
     </span><span class='btn-content'>Log in with Twitter</span>
 </a>
 </p>
@@ -42,7 +43,7 @@
 <a style='background-color:#282c37' class='btn' href="{{ url_for('mastodon_login_step1', instance_url=instance.instance) }}">
 {% if loop.first %}
     <span class='btn-header'>
-        <img src='{{ st('mastodon.png') }}'>
+        {{picture(st, 'mastodon', (20,40,80), ('webp', 'png'))}}
     </span><span class='btn-content'>Log in with
 {% else %}
     <span class='btn-content'>

templates/lib/layout.html

@@ -19,22 +19,12 @@
         {% endif -%}
         {% block scripts %}{% endblock %}
     </head>
+{%- from 'lib/picture.html' import picture %}
     <body>
         <header>
             <h1>
                 <a href="{{url_for('index')}}">
-                    <picture>
+                    {{ picture(st, 'logotype', (200,400,600,800), ('webp','jpeg'), '200px', alt='forget') }}
-                        <source type='image/webp' sizes='200px' srcset="
-                        {%- for width in (200,400,600,800) -%}
-                            {{ st('logotype-{}.webp'.format(width)) }} {{width}}w,
-                        {%- endfor -%}
-                        "/>
-                        <img src="{{ st('logotype-200.jpeg') }}" alt="Forget" width='200px' height='144px' sizes='200px' srcset="
-                        {%- for width in (200,400,600,800) -%}
-                            {{ st('logotype-{}.jpeg'.format(width)) }} {{width}}w,
-                        {%- endfor -%}
-                        "/>
-                    </picture>
                 </a>
             </h1>
         </header>

templates/lib/picture.html

@@ -0,0 +1,18 @@
+{% macro picture(st, basename, widths, formats, sizes=None, alt='') -%}
+{% if not sizes %}
+{% set sizes = '{}px'.format(widths[0]) %}
+{% endif %}
+
+
+<picture>
+    {%- for format in formats %}
+    <source type='image/{{format}}' sizes='{{sizes}}' srcset="
+    {%- for width in widths -%}
+        {{ st('{}-{}.{}'.format(basename, width, format)) }} {{width}}w,
+    {%- endfor -%}
+    "/>
+    {% endfor %}
+    <img src="{{ st('{}-{}.{}'.format(basename, widths[0], formats[-1])) }}" alt="{{alt}}" />
+</picture>
+
+{%- endmacro %}