Brought code up to v0.9.1

tomershvueli · Apr 13, 2020 · 7712041 · 7712041
1 parent 8dc5e55
commit 7712041
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 17 deletions.
diff --git a/.htaccess b/.htaccess
@@ -1,4 +1,54 @@
 <Files ~ "config.json$">
   Order allow,deny
   Deny from all
-</Files>
+</Files>
+
+# BROWSER CACHING USING CACHE-CONTROL HEADERS
+<ifModule mod_headers.c> 
+  # One year for image and video files
+  <filesMatch ".(flv|gif|ico|jpg|jpeg|mp4|mpeg|png|svg|swf|webp)$">
+    Header set Cache-Control "max-age=31536000, public"
+  </filesMatch>
+
+  # One month for JavaScript and PDF files
+  <filesMatch ".(js|pdf)$">
+    Header set Cache-Control "max-age=2592000, public"
+  </filesMatch>
+
+  # One week for CSS files
+  <filesMatch ".(css)$">
+    Header set Cache-Control "max-age=604800, public"
+  </filesMatch>
+</ifModule>
+
+# gzip compression - https://gtmetrix.com/enable-gzip-compression.html
+<IfModule mod_deflate.c>
+  # Compress HTML, CSS, JavaScript, Text, XML and fonts
+  AddOutputFilterByType DEFLATE application/javascript
+  AddOutputFilterByType DEFLATE application/rss+xml
+  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
+  AddOutputFilterByType DEFLATE application/x-font
+  AddOutputFilterByType DEFLATE application/x-font-opentype
+  AddOutputFilterByType DEFLATE application/x-font-otf
+  AddOutputFilterByType DEFLATE application/x-font-truetype
+  AddOutputFilterByType DEFLATE application/x-font-ttf
+  AddOutputFilterByType DEFLATE application/x-javascript
+  AddOutputFilterByType DEFLATE application/xhtml+xml
+  AddOutputFilterByType DEFLATE application/xml
+  AddOutputFilterByType DEFLATE font/opentype
+  AddOutputFilterByType DEFLATE font/otf
+  AddOutputFilterByType DEFLATE font/ttf
+  AddOutputFilterByType DEFLATE image/svg+xml
+  AddOutputFilterByType DEFLATE image/x-icon
+  AddOutputFilterByType DEFLATE text/css
+  AddOutputFilterByType DEFLATE text/html
+  AddOutputFilterByType DEFLATE text/javascript
+  AddOutputFilterByType DEFLATE text/plain
+  AddOutputFilterByType DEFLATE text/xml
+
+  # Remove browser bugs (only needed for really old browsers)
+  BrowserMatch ^Mozilla/4 gzip-only-text/html
+  BrowserMatch ^Mozilla/4\.0[678] no-gzip
+  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
+  Header append Vary User-Agent
+</IfModule>
diff --git a/hp_assets/css/bootstrap.min.css b/hp_assets/css/bootstrap.min.css
diff --git a/hp_assets/css/font-awesome.min.css b/hp_assets/css/font-awesome.min.css
diff --git a/hp_assets/js/jquery.min.js b/hp_assets/js/jquery.min.js
diff --git a/hp_assets/js/main.js b/hp_assets/js/main.js
@@ -149,7 +149,7 @@ function renderCloudronApps() {
 }
 
 $(function() {
-  $("#mobile-menu-wrap a").click(function(e) {
+  $("#mobile-menu-wrap a").on("click", function(e) {
     e.preventDefault();
     toggleMenu();
   });

diff --git a/hp_assets/lib/render_cloudron_app_icon.php b/hp_assets/lib/render_cloudron_app_icon.php
@@ -9,6 +9,9 @@
   $cache_dir = "../img/cache/";
   $cache_image_file_path = $cache_dir.$cloudron_app_id.'.png';
 
+  // We display these images 80x80, let's set the size to 160 to accommodate for retina displays
+  $icon_default_size = 160;
+
   $url = "{$config['cloudron_api_url']}/api/v1/apps/{$cloudron_app_id}/icon?access_token={$config['protected']['cloudron_api_access_token']}";
 
   header('Content-type: image/png');
@@ -36,7 +39,16 @@
 
   list($width_orig, $height_orig) = getimagesize($url);
 
-  $image_p = imagecreatetruecolor($width_orig, $height_orig);
+  // Be sure we keep proper proportions when sizing our image
+  if ($height_orig >= $width_orig) {
+    $new_height = $icon_default_size;
+    $new_width = $width_orig * ($icon_default_size / $height_orig);
+  } else {
+    $new_width = $icon_default_size;
+    $new_height = $height_orig * ($icon_default_size / $width_orig);
+  }
+
+  $image_p = imagecreatetruecolor($new_width, $new_height);
   $image = imagecreatefrompng($url);
 
   // Make sure the transparency information is saved
@@ -48,7 +60,7 @@
   // Fill the image with a transparent background
   imagefill($image_p, 0, 0, $trans_background);
 
-  imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width_orig, $height_orig, $width_orig, $height_orig);
+  imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width_orig, $height_orig);
 
   // Output the image
   echo imagepng($image_p, null, -1);

diff --git a/index.php b/index.php
@@ -16,16 +16,21 @@ function get_current_url() {
 
 ?>
 <!DOCTYPE HTML>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
       <title><?= $config['title']; ?></title>
 
       <meta name="viewport" content="width=device-width, initial-scale=1">
 
+      <meta name="description" content="<?= $config['title']; ?>" />
+
       <link rel="stylesheet" type="text/css" href="hp_assets/css/font-awesome.min.css" />
       <link rel="stylesheet" type="text/css" href="hp_assets/css/bootstrap.min.css" />
       <link rel="stylesheet" type="text/css" href="hp_assets/css/main.css" />
       <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
+      <!-- Preload our font file -->
+      <link rel="preload" as="font" type="font/woff2" crossorigin href="hp_assets/fonts/fontawesome-webfont.woff2" />
+
       <style type="text/css">
         #links-wrap a:hover {color: <?= $config['hover_color']; ?>;}
       </style>
@@ -37,16 +42,16 @@ function get_current_url() {
     <span class="fa fa-asterisk" style="opacity: 0;">&nbsp;</span>
 
     <div id="mobile-menu-wrap" class="hidden-lg">
-      <a href="#" class="bg "><span class="fa fa-bars">&nbsp;</span></a>
+      <a href="#" class="bg" aria-label="toggle-menu"><span class="fa fa-bars">&nbsp;</span></a>
     </div>
 
     <div id="clock-wrap" class="menu-item bg">
       <span id="clock"></span>
       <span id="cloudron-main-link"><a href="<?= $config['cloudron_api_url']; ?>"><i class="fa fa-gear"></i></a></span>
     </div>
 
-    <div id="links-wrap" class="menu-item bg">
-    </div>
+    <main id="links-wrap" class="menu-item bg">
+    </main>
 
     <div id="pic-info-wrap" class="menu-item hidden bg">
       <span id="pic-info">Picture by <a href="#" id="pic-info-url"></a> / <a href="https://unsplash.com/?utm_source=homepage&amp;utm_medium=referral">Unsplash</a></span>