Fixes to support android app pinToHome

js-src/index.js

@@ -29,8 +29,49 @@ window.onload = () => {
         }
         new Tablesort(table)
     }
+    if (window !== undefined && window.Android !== undefined) {
+        executeAndroidExclusiveCode(Android)
+    }
 };
 
+function absoluteToHost(imageUrl) {
+    if (imageUrl.match(/^\//)) {
+        imageUrl = window.location.protocol + "//" + window.location.host + imageUrl 
+    }
+    return imageUrl.replace(/\?.*$/, '');
+}
+
+function executeAndroidExclusiveCode(android) {
+    document.querySelectorAll('*.android').forEach((element) => {
+        element.classList.remove('android')
+    })
+    const pinToHomeUrl = document.querySelector('a.pin-to-home')
+    if (pinToHomeUrl === null) {
+        return;
+    }
+    pinToHomeUrl.addEventListener('click', () => {
+        const url = new URL(window.location.href)
+        const pathandQuery = url.pathname + url.search;
+        const label = pathandQuery.replace(/^.*\/.?/g, '').
+            replace(/(?:^|-)\w/g, function(character) {
+                return character.toUpperCase() 
+            });
+        const firstImg = document.querySelector('div.description img');
+        let iconUrl;
+        if (firstImg !== null) {
+            if (!firstImg.src.match(/\.svg(?:\?|$)/)) {
+                iconUrl = absoluteToHost(firstImg.src);
+            }
+        }
+        if (iconUrl === undefined) {
+            const imagePreview = document.querySelector('meta[name="image"]');
+            iconUrl = absoluteToHost(imagePreview.content);
+        }
+        console.error(iconUrl);
+        android.pinPage(pathandQuery, label, iconUrl)
+    })
+}
+
 function addEasterEggAnimation() {
     const logoContainer = document.querySelector('div.burguillos-logo-container')
     if (logoContainer === null) {

public/css/styles.css

@@ -10,6 +10,8 @@ body {
   height: 100%; }
   body p, body h1, body h2, body h3, body h4, body a {
     font-family: 'arial'; }
+  body *.android {
+    display: none; }
   body div.site-wrapper {
     display: table;
     width: 100%;
@@ -163,7 +165,6 @@ body {
       padding-right: 10px;
       margin: 0; }
     body div.page-contents div.description {
-      margin-top: 60px;
       word-wrap: break-word;
       padding: 1%;
       margin-left: 3%;

public/css/styles.scss

@@ -18,6 +18,10 @@ body {
     font-family: 'arial';
   }
 
+  *.android {
+      display: none;
+  }
+
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -254,7 +258,6 @@ body {
     }
 
     div.description {
-        margin-top: 60px;
       input {
         display: block;
       }

templates/layouts/default.html.ep

@@ -38,6 +38,9 @@
 %= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug
 %= include 'page/_mobile_foldable', categories => $categories
             <%= content %></body>
+            <div class="description android">
+                <a href="#" class="pin-to-home">Añade esta página a la pantalla de inicio de tu móvil.</a>
+            </div>
             <hr/>
             <div class="footer description">
                 <p>©2022-2023 Sergio Iglesias</p>