Show appropriate icons next to user websites.

very-scary-scenario · Nov 6, 2023 · 61c8d4e · 61c8d4e
1 parent 20055c4
commit 61c8d4e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/nkdsu/apps/vote/models.py b/nkdsu/apps/vote/models.py
@@ -9,7 +9,7 @@
 from io import BytesIO
 from string import ascii_letters
 from typing import Any, Iterable, Optional, cast
-from urllib.parse import quote
+from urllib.parse import quote, urlparse
 from uuid import uuid4
 
 from Levenshtein import ratio
@@ -545,6 +545,34 @@ def icon(self) -> str:
         'website'
         """
 
+        hostname = urlparse(self.url).hostname
+        assert hostname is not None, f"url {self.url!r} has no hostname"
+
+        rv = {
+            'bsky.app': 'bsky',
+            'cohost.org': 'cohost',
+            'facebook.com': 'facebook',
+            'instagram.com': 'instagram',
+            'linkedin.com': 'linkedin',
+            'threads.net': 'threads',
+            'tumblr.com': 'tumblr',
+            'twitch.tv': 'twitch',
+            'twitter.com': 'twitter',
+            'x.com': 'twitter',
+            'youtube.com': 'youtube',
+        }.get(hostname.removeprefix('www.'))
+
+        if rv is not None:
+            return rv
+
+        # some places let you use subdomains:
+        if hostname.endswith('.tumblr.com'):
+            return 'tumblr'
+        if hostname.endswith('.cohost.com'):
+            return 'cohost'
+
+        return 'website'
+
 
 def art_path(i: Track, f: str) -> str:
     return 'art/bg/%s.%s' % (i.pk, f.split('.')[-1])

diff --git a/nkdsu/static/less/main.less b/nkdsu/static/less/main.less
@@ -344,6 +344,28 @@ body {
           }
         }
 
+        ul.websites {
+          text-align: center;
+
+          li {
+            &::before {
+              .fas();
+              content: @fa-var-globe;
+              letter-spacing: .2em; // for eggbug
+            }
+            &[data-icon="bsky"]::before { content: @fa-var-cloud }
+            &[data-icon="cohost"]::before { content: %("%s%s", @fa-var-egg, @fa-var-bug) }
+            &[data-icon="facebook"]::before { .fab(); content: @fa-var-facebook }
+            &[data-icon="instagram"]::before { .fab(); content: @fa-var-instagram }
+            &[data-icon="linkedin"]::before { .fab(); content: @fa-var-linkedin }
+            &[data-icon="threads"]::before { .fas(); content: @fa-var-threads }
+            &[data-icon="tumblr"]::before { .fab(); content: @fa-var-tumblr }
+            &[data-icon="twitch"]::before { .fab(); content: @fa-var-twitch }
+            &[data-icon="twitter"]::before { .fab(); content: @fa-var-twitter }
+            &[data-icon="youtube"]::before { .fab(); content: @fa-var-youtube }
+          }
+        }
+
         .user-votes {
           > ul {
             .clearfix();
@@ -836,6 +858,7 @@ main.login {
 }
 
 .self-infobox {
+  margin: .5em 0;
   padding: .6em 0;
   background-color: fade(@light, 20%);
   border-radius: .5em;

diff --git a/nkdsu/templates/include/voter_meta.html b/nkdsu/templates/include/voter_meta.html
@@ -73,7 +73,7 @@ <h2>
   {% if voter.get_websites %}
     <ul class="websites">
       {% for website in voter.get_websites %}
-        <li>
+        <li data-icon="{{ website.icon }}">
           <a href="website.url">{{ website.url }}</a>
         </li>
       {% endfor %}