Add i18n and improvements

divent/bot.py

@@ -1,6 +1,7 @@
+import json
 from asyncio import new_event_loop
 from datetime import datetime, timedelta
-from os import environ
+from os import environ, path
 from typing import List, Optional
 
 from disnake import Client, Guild
@@ -69,12 +70,36 @@ def make_oauth_session(
     )
 
 
-@app.context_processor
+CATALOG_CACHE = {}
+
+
+def i18n(str: str) -> str:
+    lang = request.accept_languages.best_match(["en", "fr"])
+
+    if lang not in CATALOG_CACHE:
+        catalog_file = f"{path.dirname(__file__)}/translations/{lang}.json"
+        if path.exists(catalog_file):
+            with open(catalog_file) as catalog_json:
+                catalog = json.load(catalog_json)
+                CATALOG_CACHE[lang] = catalog
+
+    if lang in CATALOG_CACHE and str in CATALOG_CACHE[lang]:
+        return CATALOG_CACHE[lang][str]
+
+    return str
+
+
 def days_before_failure():
     nextYear = datetime.today().year + 5 - ((datetime.today().year + 5) % 5)
     nextDate = datetime(year=nextYear, month=6, day=3)
     nextDelta = nextDate - datetime.now()
-    return dict(days_before_failure=nextDelta.days)
+
+    return nextDelta.days
+
+
+@app.context_processor
+def context_processor():
+    return dict(days_before_failure=days_before_failure(), _=i18n, bot=client.user)
 
 
 @app.template_filter("guild_icon_ext")

divent/static/css/global.css

@@ -1,6 +1,18 @@
+/* https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin */
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: local(''),
+        url('../fonts/open-sans-v29-latin-regular.woff2') format('woff2'),
+        url('../fonts/open-sans-v29-latin-regular.woff') format('woff');
+}
+
 body {
     background-color: #202225;
     margin: 0;
+    font-family: Whitney, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #b9bbbe;
 }
 
 #logo {
@@ -9,6 +21,10 @@ body {
     top: 24px;
 }
 
+#avatars {
+    text-align: center;
+}
+
 #content {
     position: absolute;
     top: 50%;
@@ -19,5 +35,57 @@ body {
     min-height: 400px;
     background-color: #18191c;
     border-radius: 5px;
-    box-shadow: 0 8px 16px rgba(0,0,0, 0.24);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
+    padding: 32px 16px 24px;
+}
+
+#scopes {
+    list-style-type: none;
+    padding: 0;
+}
+
+#scopes li {
+    margin: 8px;
+    font-size: 14px;
+}
+
+.fa-custom-circle {
+    border-radius: 20px;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    line-height: 22px;
+    font-size: 20px;
+    float: left;
+    margin-right: 12px;
+    margin-top: 6px;
+}
+
+.fa-check {
+    background-color: green;
+}
+
+.fa-times {
+    background-color: grey;
+}
+
+h1 {
+    font-size: 20px;
+    text-align: center;
+    color: white;
+}
+
+h2 {
+    font-size: 16px;
+    text-align: center;
+}
+
+h3 {
+    text-transform: uppercase;
+    font-size: 13px;
+}
+
+hr {
+    color:rgba(79, 84, 92, 0.48);
+    margin: 24px 0;
 }

divent/templates/base.html.j2

@@ -20,7 +20,7 @@
              id="logo"
              height="36"
              width="130"
-             alt="Discord Logo"/>
+             alt="{{ _('Discord Logo') }}"/>
         <div id="content">
             {% block content %}
             {% endblock content %}

divent/templates/index.html.j2

@@ -1,16 +1,27 @@
 {% extends "base.html.j2" %}
 {% block content %}
     <div id="box">
-        <h1>Divent</h1>
-        <h2>The discord scheduled event calendar generator</h2>
+        <div id="avatars">
+            <img src="{{ bot.display_avatar }}"
+                 alt="{{ _('Bot Logo') }}"
+                 width="80"
+                 height="80"/>
+        </div>
+        <h1>{{ bot.display_name }}</h1>
+        <h2>{{ _('The discord scheduled event calendar generator') }}</h2>
         <hr />
-        <h3>This will allow you to :</h3>
-        <ul>
-            <li>Subscribe to a calendar on Google, Yahoo, Outlook, Apple or any ICS complient software</li>
-            <li>Throwing you to a new isekai world</li>
+        <h3>{{ _('This will allow you to:') }}</h3>
+        <ul id="scopes">
+            <li>
+                <i class="fa fa-custom-circle fa-check"></i>
+                {{ _('Subscribe to a calendar on Google, Yahoo, Outlook, Apple or any ICS complient software') }}
+            </li>
+            <li>
+                <i class="fa fa-custom-circle fa-times"></i>
+                {{ _('Throwing you to a new isekai world') }}
+            </li>
         </ul>
         <hr />
     </div>
-    <div id="buttons">
-    </div>
+    <div id="buttons"></div>
 {% endblock content %}

divent/translations/fr.json

@@ -0,0 +1,8 @@
+{
+    "Discord Logo": "Logo Discord",
+    "Bot Logo": "Logo du robot",
+    "The discord scheduled event calendar generator": "Générateur de calendrier pour les évènements Discord",
+    "This will allow you to:": "Ceci vous permettra de :",
+    "Subscribe to a calendar on Google, Yahoo, Outlook, Apple or any ICS complient software": "S'abonner à un calendrier sur Google, Yahoo, Outlook, Apple ou tout autre logiciel compatible",
+    "Throwing you to a new isekai world": "Vous envoyer dans un monde fantaisiste armée d'une poile à frire"
+}

poetry.lock

@@ -709,7 +709,7 @@ testing = ["pytest (>=6)", "pytest-checkdocs (>=2.4)", "pytest-flake8", "pytest-
 [metadata]
 lock-version = "1.1"
 python-versions = "^3.8"
-content-hash = "2566e2b3365ca858319fc998523d32ffba94ee8df19bcc9b07257d2a19c8f7c6"
+content-hash = "aad6f01abb7b6a536c0e82001edc4ffd2150ee3d6828467e661b4d25d042436c"
 
 [metadata.files]
 aiofiles = [

pyproject.toml

@@ -11,6 +11,7 @@ disnake = "2.5.1"
 ics = "0.7"
 python-dotenv = "0.20.0"
 quart = "0.17.0"
+requests = "2.28.0"
 requests-oauthlib = "1.3.1"
 
 [tool.poetry.dev-dependencies]