Merge pull request #63 from jelle619/master

Added mobile metadata & app icons optimised for Android/iOS + fixed some issues

webapp/titanembeds/static/img/appicons/README.md

@@ -0,0 +1,8 @@
+# Beautiful icons for mobile devices
+(for Safari on iOS and Google Chrome on Android)
+
+<img src="https://i.imgur.com/ozNO8Kk.png" 
+alt="Demo iOS Application Icon" />
+
+When a user decides to add a guild embed to his or her homescreen, it will use the TitanEmbeds icon instead of the current webpage view or a low resolution favicon (which often looks ugly).
+There are icons available specifically optimised for iOS and Android that are used accordingly.

webapp/titanembeds/templates/embed.html.j2

@@ -13,6 +13,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     
     {% include 'seo_meta.html.j2' %}
+    
+    <!--Provide default mobile metadata-->
+    <meta name="apple-mobile-web-app-title" content="{{ guild['name']|e }}">
+    <meta name="application-name" content="{{ guild['name']|e }}">
+    
     {% with title="Visit " + guild['name'] + " embed", description="Visit " + guild['name'] + " on Titan Embeds and chat with your friends from the comfort of your own website. This page is 100% embeddable, iFrameable and looks good on any webpages. Titan is hassle free and designed as easy to setup!", image=generate_guild_icon( guild['id'], guild['icon']) %}
       {% include "opengraph_tags.html.j2" %}
     {% endwith %}
@@ -376,4 +381,4 @@
       }
     </script>
   </body>
-</html>
+</html>

webapp/titanembeds/templates/seo_meta.html.j2

@@ -1,4 +1,15 @@
 <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/titanembeds_round.png') }}" />
 
 <meta name="keywords" content="Titan, Titan Embeds, TitanEmbeds, Discord, Discordapp, Embed, iFrame, Embed Discord, iFrame Discord, Widget, Bot, Server, Server Widget, Titan Embed, TitanEmbed" />
-<meta name="description" content="Embed your Discord server in any website. Titan is hassle free and designed as easy to setup." />
+<meta name="description" content="Embed your Discord server in any website. Titan is hassle free and designed as easy to setup." />
+
+<!--Specify icons for Apple devices (can also be used as fallback for Android)-->
+<link rel="apple-touch-icon" href="{{ url_for('static', filename='img/titanembeds_square.png') }}">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='img/appicons/icon_60x60@3x.png') }}" />
+<link rel="apple-touch-icon" sizes="76x76" href="{{ url_for('static', filename='img/appicons/icon_76x76@1x.png') }}" />
+<link rel="apple-touch-icon" sizes="152x152" href="{{ url_for('static', filename='img/appicons/icon_76x76@2x.png') }}" />
+<link rel="apple-touch-icon" sizes="58x58" href="{{ url_for('static', filename='img/appicons/icon_58x58@1x.png') }}" />
+
+<!--Specify icons for Android devices-->
+<link rel="icon" sizes="192x192" href="{{ url_for('static', filename='img/appicons/icon_192x192.png') }}">
+<link rel="icon" sizes="128x128" href="{{ url_for('static', filename='img/appicons/icon_128x128.png') }}">

webapp/titanembeds/templates/site_layout.html.j2

@@ -12,6 +12,10 @@
 
     <title>{{ title }} - Titan Embeds for Discord</title>
     
+    <!--Provide default mobile metadata-->
+    <meta name="apple-mobile-web-app-title" content="TitanEmbeds">
+    <meta name="application-name" content="TitanEmbeds">
+    
     {% include 'seo_meta.html.j2' %}
     
     {% with title=title, description="Embed your Discord server in any website. Titan is hassle free and designed as easy to setup." %}
@@ -83,4 +87,4 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js" integrity="sha256-uWtSXRErwH9kdJTIr1swfHFJn/d/WQ6s72gELOHXQGM=" crossorigin="anonymous"></script>
     {% block script %}{% endblock %}
   </body>
-</html>
+</html>