Merge pull request #2326 from liberapay/icons

README.md

@@ -140,7 +140,13 @@ For our styles we use [SASS](http://sass-lang.com/) and [Bootstrap 3](https://ge
 We compile Bootstrap ourselves from the SASS source in the `style/bootstrap/`
 directory. We do that to be able to easily customize it by changing values in
 `style/variables.scss`. Modifying the files in `style/bootstrap/` is probably
-not a good idea.
+a bad idea.
+
+### Icons
+
+For user interface icons we use [Bootstrap Icons](https://icons.getbootstrap.com/). An icon can be included in a page by calling the `icon` macro from `templates/macros/icons.html`, e.g. `{{ icon('liberapay') }}`. The icons are stored in the `www/assets/icons.svg` file. To add a new icon in that file, the root `<svg>` element of the icon being added must be turned into a `<symbol>` element, preserving only its `viewBox` attribute and adding an `id` attribute.
+
+If you don't find any icon in Bootstrap Icons that fits your use case, you can try to search online catalogs like [Flaticon](https://www.flaticon.com/search?type=uicon), [Icons8](https://icons8.com/icons), [Pictogrammers](https://pictogrammers.com/), [SVG Repo](https://www.svgrepo.com/) and [The Noun Project](https://thenounproject.com/). For brand icons, [Simple Icons](https://simpleicons.org/) is a good resource.
 
 ### Testing
 

liberapay/elsewhere/_base.py

@@ -77,7 +77,6 @@ def parse_as_xml(response):
 
 class Platform:
 
-    fontawesome_name = None
     has_teams = False
     optional_user_name = False
     single_domain = True

liberapay/elsewhere/bitbucket.py

@@ -9,7 +9,6 @@ class Bitbucket(PlatformOAuth1):
     # Platform attributes
     name = 'bitbucket'
     display_name = 'Bitbucket'
-    fontawesome_name = name
     account_url = 'https://bitbucket.org/{user_name}'
 
     # Auth attributes

liberapay/elsewhere/github.py

@@ -8,7 +8,6 @@ class GitHub(PlatformOAuth2):
     # Platform attributes
     name = 'github'
     display_name = 'GitHub'
-    fontawesome_name = name
     account_url = 'https://github.com/{user_name}'
     repo_url = 'https://github.com/{slug}'
     has_teams = True

liberapay/elsewhere/gitlab.py

@@ -8,7 +8,6 @@ class GitLab(PlatformOAuth2):
     # Platform attributes
     name = 'gitlab'
     display_name = 'GitLab.com'
-    fontawesome_name = name
     account_url = 'https://gitlab.com/{user_name}'
     repo_url = 'https://gitlab.com/{slug}'
     has_teams = True

liberapay/elsewhere/mastodon.py

@@ -14,7 +14,6 @@ class Mastodon(PlatformOAuth2):
     # Platform attributes
     name = 'mastodon'
     display_name = 'Mastodon'
-    fontawesome_name = name
     account_url = 'https://{domain}/@{user_name}'
     single_domain = False
 

liberapay/elsewhere/pleroma.py

@@ -7,7 +7,6 @@ class Pleroma(Mastodon):
     # Platform attributes
     name = 'pleroma'
     display_name = 'Pleroma'
-    fontawesome_name = name
     account_url = 'https://{domain}/{user_name}'
     single_domain = False
 

liberapay/elsewhere/twitch.py

@@ -8,7 +8,6 @@ class Twitch(PlatformOAuth2):
     # Platform attributes
     name = 'twitch'
     display_name = 'Twitch'
-    fontawesome_name = name
     account_url = 'https://twitch.tv/{user_name}'
     user_type = 'channel'
 

liberapay/elsewhere/twitter.py

@@ -8,7 +8,6 @@ class Twitter(PlatformOAuth1):
     # Platform attributes
     name = 'twitter'
     display_name = 'Twitter'
-    fontawesome_name = name
     account_url = 'https://twitter.com/{user_name}'
 
     # Auth attributes

liberapay/elsewhere/youtube.py

@@ -9,7 +9,6 @@ class Youtube(PlatformOAuth2):
     based_on = 'google'
     name = 'youtube'
     display_name = 'YouTube'
-    fontawesome_name = 'youtube-play'
     account_url = 'https://youtube.com/channel/{user_id}'
     optional_user_name = True
     user_type = 'channel'

liberapay/main.py

@@ -103,17 +103,26 @@ def _assert(x):
     assert x, repr(x)
     return x
 
+def soft_assert(x, msg):
+    if not x:
+        try:
+            raise AssertionError(msg)
+        except AssertionError as e:
+            website.tell_sentry(e)
+    return x
+
 website.renderer_factories['jinja2'].Renderer.global_context.update(builtins.__dict__)
 website.renderer_factories['jinja2'].Renderer.global_context.update({
     # This is shared via class inheritance with jinja2_* renderers.
     'assert': _assert,
+    'b64decode_s': b64decode_s,
+    'b64encode_s': b64encode_s,
     'Bold': Bold,
     'Community': Community,
     'Country': Country,
     'Currency': Currency,
-    'b64decode_s': b64decode_s,
-    'b64encode_s': b64encode_s,
     'generate_session_token': Participant.generate_session_token,
+    'soft_assert': soft_assert,
     'to_age': to_age,
     'to_javascript': utils.to_javascript,
     'urlquote': urlquote,

liberapay/website.py

@@ -37,6 +37,18 @@ def compute_previous_and_next_payday_dates(self):
     def link(self, path, text):
         return self._html_link % (path, text)
 
+    def read_asset(self, path):
+        try:
+            assert '..' not in path
+            resource = website.request_processor.resources.get(
+                f'{website.www_root}/assets/{path}'
+            )
+            bs = resource.render().body if resource.raw is None else resource.raw
+            return bs.decode('utf8')
+        except Exception as e:
+            self.tell_sentry(e)
+            return ''
+
     def respond(self, *args, **kw):
         # Run in a new (sub)context
         return copy_context().run(super().respond, *args, **kw)

liberapay/wireup.py

@@ -7,6 +7,7 @@
 import socket
 from sys import intern
 import traceback
+import xml.etree.ElementTree as ET
 
 import babel
 from babel.messages.pofile import read_po
@@ -605,15 +606,15 @@ def accounts_elsewhere(app_conf, asset, canonical_url, db):
     platforms = PlatformRegistry(platforms)
 
     for platform in platforms:
-        if platform.fontawesome_name:
-            continue
-        platform.icon = asset(
-            'platforms/%s.svg' % platform.name,
+        platform.icon_16 = asset(
+            'platforms/%s.16.webp' % platform.name,
             'platforms/%s.16.png' % platform.name,
+            'platforms/%s.svg' % platform.name,
         )
-        platform.logo = asset(
+        platform.icon_32 = asset(
+            'platforms/%s.32.webp' % platform.name,
+            'platforms/%s.32.png' % platform.name,
             'platforms/%s.svg' % platform.name,
-            'platforms/%s.png' % platform.name,
         )
 
     return {'platforms': platforms}
@@ -795,7 +796,7 @@ def compute_percentage(it, total):
 
 
 def asset_url_generator(env, asset_url, tell_sentry, www_root):
-    def asset(*paths):
+    def asset(*paths, domain=True):
         for path in paths:
             fspath = www_root+'/assets/'+path
             etag = ''
@@ -812,10 +813,33 @@ def asset(*paths):
                     continue
             except Exception as e:
                 tell_sentry(e)
-            return asset_url+path+(etag and '?etag='+etag)
+            if domain:
+                return asset_url+path+(etag and '?etag='+etag)
+            else:
+                return '/assets/'+path+(etag and '?etag='+etag)
     return {'asset': asset}
 
 
+def icon_names(www_root):
+    icons_file_path = f'{www_root}/assets/icons.svg'
+    svg = ET.parse(icons_file_path).getroot()
+    icon_identifiers = set()
+    for el in svg:
+        if el.tag != '{http://www.w3.org/2000/svg}symbol':
+            raise AssertionError(
+                f"{icons_file_path} contains unknown element <{el.tag.split('}')[1]}>"
+            )
+        icon_id = el.get('id')
+        if not icon_id:
+            raise AssertionError(f"{icons_file_path} contains a <symbol> without an id")
+        if icon_id in icon_identifiers:
+            raise AssertionError(
+                f'{icons_file_path} contains multiple symbols with id="{icon_id}"'
+            )
+        icon_identifiers.add(icon_id)
+    return {'icon_names': icon_identifiers}
+
+
 def load_scss_variables(project_root):
     """Build a dict representing the `style/variables.scss` file.
     """
@@ -865,6 +889,7 @@ def currency_exchange_rates(db):
     username_restrictions,
     load_i18n,
     asset_url_generator,
+    icon_names,
     accounts_elsewhere,
     load_scss_variables,
     s3,

simplates/refresh.spt

@@ -9,6 +9,7 @@ else:
 response.headers[b'Refresh'] = refresh_header
 
 [---] text/html
+% from "templates/macros/icons.html" import icon with context
 <!DOCTYPE html>
 <html lang="{{ locale.tag }}">
 <head>
@@ -18,14 +19,13 @@ response.headers[b'Refresh'] = refresh_header
     <link rel="icon" href="{{ website.asset('liberapay/icon-v2_black.16.png') }}" type="image/png">
     <link rel="stylesheet" href="{{ website.asset('bootstrap/css/bootstrap.css') }}">
     <link rel="stylesheet" href="{{ website.asset('base.css') }}" type="text/css">
-    <link rel="stylesheet" href="{{ website.asset('forkawesome/1.1.7/css/fork-awesome.min.css') }}" type="text/css">
     <meta name="theme-color" content="#f6c915">
 </head>
 <body>
     <nav class="navbar navbar-liberapay navbar-static-top" id="navbar" aria-hidden="true">
         <div class="container">
             <ul class="nav navbar-nav">
-                <li><a class="navbar-brand"><i class="fa fa-liberapay"></i></a></li>
+                <li><a class="navbar-brand">{{ icon('liberapay') }}</a></li>
             </ul>
         </div>
     </nav>

style/base/alerts.scss

@@ -20,7 +20,7 @@
     .actions {
         position: absolute;
         right: 10px;
-        top: 8px;
+        top: 7px;
         & > button {
             -moz-appearance: none;
             -webkit-appearance: none;