From 77ad48f016c9070398f5089caeecd4cc60610c84 Mon Sep 17 00:00:00 2001
From: Gordon Williams <gw@pur3.co.uk>
Date: Mon, 16 Mar 2020 09:04:13 +0000
Subject: [PATCH] Add github link to repo in the app overview (fix #127)

---
 index.html | 20 +++++++++++++-------
 index.js   |  3 ++-
 2 files changed, 15 insertions(+), 8 deletions(-)
diff --git a/index.html b/index.html
index 324fda468..f18c05352 100644
--- a/index.html
+++ b/index.html
@@ -29,13 +29,19 @@
     }
     .chip {
       cursor: pointer;
+    }
+    .tile-content { position: relative; }
+    .link-github {
+      position:absolute;
+      top: 36px;
+      left: -24px;
     }
 	</style>
   </head>
   <body>
     <header class="navbar-primary navbar">
       <section class="navbar-section">
-        <a href="https://banglejs.com" class="navbar-brand mr-2"><img src="img/banglejs-logo-sml.png" alt="Bangle.js">&nbsp;&nbsp;App Loader</a>
+        <a href="https://banglejs.com" target="_blank" class="navbar-brand mr-2"><img src="img/banglejs-logo-sml.png" alt="Bangle.js">&nbsp;&nbsp;App Loader</a>
         <!-- <a href="#" class="btn btn-link">...</a> -->
       </section>
       <section class="navbar-section">
@@ -50,7 +56,7 @@
     </header>
 
     <div class="container" style="padding-top:4px">
-      <p><b>Note:</b> If you have a version of Bangle.js firmware before 2v04, please update to the <a href="https://www.espruino.com/Bangle.js#firmware-updates">latest firmware</a> or
+      <p><b>Note:</b> If you have a version of Bangle.js firmware before 2v04, please update to the <a href="https://www.espruino.com/Bangle.js#firmware-updates" target="_blank">latest firmware</a> or
         <a href="https://banglejs.com/oldapps/">use the legacy app loader</a>.
       </p>
     </div>
@@ -103,15 +109,15 @@
     <div class="container bangle-tab" id="aboutcontainer" style="display:none">
       <div class="hero bg-gray">
         <div class="hero-body">
-          <a href="https://banglejs.com"><img src="img/banglejs-logo-mid.png" alt="Bangle.js"></a>
+          <a href="https://banglejs.com" target="_blank"><img src="img/banglejs-logo-mid.png" alt="Bangle.js"></a>
           <h2>App Loader</h2>
-          <p>A tool for uploading and removing apps from <a href="https://banglejs.com">Bangle.js Smart Watches</a></p>
+          <p>A tool for uploading and removing apps from <a href="https://banglejs.com" target="_blank">Bangle.js Smart Watches</a></p>
         </div>
       </div>
       <div class="container" style="padding-top: 8px;">
-        <p>Using <a href="https://espruino.com/">Espruino</a>, Icons from <a href="https://icons8.com/">icons8.com</a></p>
-        <p>Check out <a href="https://github.com/espruino/BangleApps">the Source on GitHub</a> for more information.</p>
-
+        <p>Check out <a href="https://github.com/espruino/BangleApps" target="_blank">the Source on GitHub</a>, or
+          find out <a href="https://www.espruino.com/Bangle.js+App+Loader" target="_blank">how to add your own app</p>
+        <p>Using <a href="https://espruino.com/" target="_blank">Espruino</a>, Icons from <a href="https://icons8.com/" target="_blank">icons8.com</a></p>
 
         <h3>Utilities</h3>
         <p><button class="btn" id="settime">Set Bangle.js Time</button>
diff --git a/index.js b/index.js
index 83abfdc4b..bc326f3b2 100644
--- a/index.js
+++ b/index.js
@@ -272,11 +272,12 @@ function refreshLibrary() {
     if (versionInfo) versionInfo = " <small>("+versionInfo+")</small>";
     return `<div class="tile column col-6 col-sm-12 col-xs-12">
     <div class="tile-icon">
-      <figure class="avatar"><img src="apps/${app.icon?`${app.id}/${app.icon}`:"unknown.png"}" alt="${escapeHtml(app.name)}"></figure>
+      <figure class="avatar"><img src="apps/${app.icon?`${app.id}/${app.icon}`:"unknown.png"}" alt="${escapeHtml(app.name)}"></figure><br/>
     </div>
     <div class="tile-content">
       <p class="tile-title text-bold">${escapeHtml(app.name)} ${versionInfo}</p>
       <p class="tile-subtitle">${escapeHtml(app.description)}</p>
+      <a href="https://github.com/espruino/BangleApps/tree/master/apps/${app.id}" target="_blank" class="link-github"><img src="img/github-icon-sml.png" alt="See the code on GitHub"/></a>
     </div>
     <div class="tile-action">
       <button class="btn btn-link btn-action btn-lg ${(appInstalled&&app.interface)?"":"d-hide"}" appid="${app.id}" title="Download data from app"><i class="icon icon-download"></i></button>
