Use Mojolicious::Plugin::AssetPack

Less requests, concatenated and minified css and js => faster !

.gitignore

@@ -6,3 +6,4 @@ files/*
 templates/data.html.ep
 public/img/rezopole.png
 public/img/rezopole.xcf
+public/packed/*

README.md

@@ -107,6 +107,17 @@ Yup, that's all (Mojolicious magic), it will listen at "http://127.0.0.1:8080".
 
 For more options (interfaces, user, etc.), change the configuration in `lutim.conf` (have a look at http://mojolicio.us/perldoc/Mojo/Server/Hypnotoad#SETTINGS for the available options).
 
+***Warning!!!***
+
+If you want to update to Lutim **0.3**, from a previous version, you'll have to modify the database.
+
+```
+sqlite3 lutim.db
+PRAGMA writable_schema = 1;
+UPDATE SQLITE_MASTER SET SQL = 'CREATE TABLE lutim ( short TEXT PRIMARY KEY, path TEXT, footprint TEXT, enabled INTEGER, mediatype TEXT, filename TEXT, counter INTEGER, delete_at_first_view INTEGER, delete_at_day INTEGER, created_at INTEGER, created_by TEXT, last_access_at INTEGER, mod_token TEXT)' WHERE NAME = 'lutim';
+PRAGMA writable_schema = 0;
+```
+
 ## Reverse proxy
 You can use a reverse proxy like Nginx or Varnish (or Apache with the mod\_proxy module). The web is full of tutos.
 

cpanfile

@@ -3,6 +3,7 @@ requires 'IO::Socket::SSL';
 requires 'Data::Validate::URI';
 requires 'Mojolicious::Plugin::I18N';
 requires 'Mojolicious::Plugin::ConfigHashMerge';
+requires 'Mojolicious::Plugin::AssetPack';
 requires 'ORLite';
 requires 'File::Type';
 requires 'Text::Unidecode';

lib/Lutim.pm

@@ -13,6 +13,7 @@ sub startup {
     $self->{wait_for_it} = {};
 
     $self->plugin('I18N');
+    $self->plugin('AssetPack');
 
     my $config = $self->plugin('ConfigHashMerge', {
         default => {
@@ -279,6 +280,12 @@ sub startup {
         }
     );
 
+    $self->asset('index.css' => 'css/bootstrap.min.css', 'css/fontello.css', 'css/animation.css', 'css/uploader.css', 'css/hennypenny.css', 'css/lutim.css');
+    $self->asset('stats.css' => 'css/bootstrap.min.css', 'css/fontello.css', 'css/animation.css', 'css/morris-0.4.3.min.css', 'css/hennypenny.css', 'css/lutim.css');
+    $self->asset('about.css' => 'css/bootstrap.min.css', 'css/fontello.css', 'css/animation.css', 'css/hennypenny.css', 'css/lutim.css');
+
+    $self->asset('index.js' => 'js/jquery-2.1.0.min.js', 'js/bootstrap.min.js', 'js/lutim.js', 'js/dmuploader.min.js');
+    $self->asset('stats.js' => 'js/jquery-2.1.0.min.js', 'js/bootstrap.min.js', 'js/lutim.js', 'js/raphael-min.js', 'js/morris-0.4.3.min.js', 'js/stats.js');
 
     $self->defaults(layout => 'default');
 

public/css/lutim.css

@@ -0,0 +1,34 @@
+body {
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+
+.container {
+    padding: 15px;
+    margin: 0 auto;
+}
+
+.jsonly {
+    display: none;
+}
+
+.thumbnail {
+    margin-right: 8px;
+}
+
+.hennypenny {
+    font-family: 'Henny_Penny', cursive;
+    font-size: 42px;
+}
+
+.logo {
+    margin-right: 10px;
+}
+label.always-encrypt {
+    display: none;
+}
+.link_nocol,
+.link_nocol:hover{
+    color: #000000;
+    text-decoration: none;
+}

public/js/lutim.js

@@ -0,0 +1,3 @@
+$('document').ready(function() {
+    $('.jsonly').show();
+});

templates/index.html.ep

@@ -54,7 +54,7 @@
             <label>
                 <input type="checkbox" name="first-view"> <%=l 'delete-first' %>
             </label>
-            <label class="always-encrypt">
+            <label <%== (config('always_encrypt')) ? 'class="always-encrypt"' : '' %>>
                 <input type="checkbox" name="crypt"> <%=l 'crypt_image' %>
             </label>
         </div>
@@ -100,7 +100,7 @@
             <label>
                 <input type="checkbox" id="first-view"> <%=l 'delete-first' %>
             </label>
-            <label class="always-encrypt">
+            <label <%== (config('always_encrypt')) ? 'class="always-encrypt"' : '' %>>
                 <input type="checkbox" id="crypt"> <%=l 'crypt_image' %>
             </label>
         </div>
@@ -128,7 +128,6 @@
 </div>
 <!-- /D&D Zone -->
 
-%= javascript 'js/dmuploader.min.js'
 %= javascript begin
     function link(url, dl) {
         if (dl !== '') {

templates/layouts/default.html.ep

@@ -12,56 +12,13 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta charset="utf-8" />
         <link rel="icon" type="image/png" href="<%= url_for('/') %>img/favicon.png">
-        %= stylesheet 'css/bootstrap.min.css', media => 'screen'
-        %= stylesheet 'css/fontello.css'
-        %= stylesheet 'css/animation.css'
 % if (current_route 'index') {
-        %= stylesheet 'css/uploader.css'
+        %= asset 'index.css'
 % } elsif (current_route 'stats') {
-        %= stylesheet 'css/morris-0.4.3.min.css'
+        %= asset 'stats.css'
+% } elsif (current_route 'about') {
+        %= asset 'about.css'
 % }
-        %= stylesheet 'css/hennypenny.css'
-        %= stylesheet begin
-            body {
-                padding-top: 40px;
-                padding-bottom: 40px;
-            }
-
-            .container {
-                padding: 15px;
-                margin: 0 auto;
-            }
-
-            .jsonly {
-                display: none;
-            }
-
-            .thumbnail {
-                margin-right: 8px;
-            }
-
-            .hennypenny {
-                font-family: 'Henny_Penny', cursive;
-                font-size: 42px;
-            }
-
-            .logo {
-                margin-right: 10px;
-            }
-
-% if (config('always_encrypt')) {
-            label.always-encrypt {
-                display: none;
-            }
-% }
-        % end
-        %= javascript 'js/jquery-2.1.0.min.js'
-        %= javascript 'js/bootstrap.min.js'
-        %= javascript begin
-            $('document').ready(function() {
-                $('.jsonly').show();
-            });
-        % end
     </head>
     <body>
         <div class="container-fluid">
@@ -97,6 +54,11 @@
             <div class="alert alert-danger">
                 <strong><%= stash('stop_upload') %></strong>
             </div>
+% }
+% if (current_route 'index') {
+        %= asset 'index.js'
+% } elsif (current_route 'stats') {
+        %= asset 'stats.js'
 % }
             <%= content %>
             <div class="modal fade bs-modal-lg"  id="myModal" role="dialog">

templates/stats.html.ep

@@ -1,7 +1,4 @@
 % # vim:set sts=4 sw=4 ts=4 ft=html.epl expandtab:
-%= javascript 'js/raphael-min.js'
-%= javascript 'js/morris-0.4.3.min.js'
-%= javascript 'js/stats.js'
 <h4><%= $total %><%=l 'pushed-images' %></h4>
 <hr>