From a5cc452bb809bbf66a3de31c882b7582d692dfdf Mon Sep 17 00:00:00 2001
From: Charles-Antoine Mathieu <ca.mathieu@criteo.com>
Date: Sun, 25 Feb 2024 12:15:38 +0100
Subject: [PATCH] Webapp js/css customization

---
 README.md              | 11 +++++++++++
 webapp/Gruntfile.js    | 17 +++++++++++++++--
 webapp/css/custom.css  | 27 +++++++++++++++++++++++++++
 webapp/index.html      |  8 ++++++--
 webapp/js/ctrl/menu.js |  3 +++
 webapp/js/custom.js    |  1 +
 6 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 webapp/css/custom.css
 create mode 100644 webapp/js/custom.js

diff --git a/README.md b/README.md
index cf79cc83..c4737940 100644
--- a/README.md
+++ b/README.md
@@ -124,6 +124,17 @@ Suitable for standalone deployment.
 
 Suitable for distributed / High Availability deployment.
 
+### Web UI
+
+Plik provides an Angularjs Web UI by default.  
+This behaviour can be disabled by setting "NoWebInterface" in plikd.cfg
+
+The interface can be customized in a few ways:
+- The title can be changed in `js/custom.js`
+- The css styles can be override in `css/custom.css` (use !important)
+- The background can be changed : `img/background.jpg`
+- The favicon can be changed : `favicon.ico`
+
 ### Cli client <a name="cli-client"></a>
 Plik is shipped with a powerful golang multiplatform cli client (downloadable in web interface) :  
 
diff --git a/webapp/Gruntfile.js b/webapp/Gruntfile.js
index 07afaa5c..db917812 100644
--- a/webapp/Gruntfile.js
+++ b/webapp/Gruntfile.js
@@ -96,7 +96,20 @@ module.exports = function (grunt) {
                     dest: 'dist/fonts/',
                     flatten: true
                 }]
-            }
+            },
+            custom: {
+                files: [{
+                    src: [
+                        'css/custom.css',
+                    ],
+                    dest: 'dist/css/custom.css',
+                },{
+                    src: [
+                        'js/custom.js',
+                    ],
+                    dest: 'dist/js/custom.js',
+                }]
+            },
         },
         ngAnnotate: {
             options: {
@@ -119,7 +132,7 @@ module.exports = function (grunt) {
             javascript: {
                 files: {
                     'dist/js/app.js': ['dist/js/app.js'],
-                    'dist/js/vendor.js': ['dist/js/vendor.js']
+                    'dist/js/vendor.js': ['dist/js/vendor.js'],
                 }
             }
 
diff --git a/webapp/css/custom.css b/webapp/css/custom.css
new file mode 100644
index 00000000..4dbd763d
--- /dev/null
+++ b/webapp/css/custom.css
@@ -0,0 +1,27 @@
+/*
+
+Example to customize the title/menu/footer font
+
+@font-face {
+    font-family: 'Kode Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/kodemono/v1/A2BLn5pb0QgtVEPFnlYkkaoBgw4qv9odq5myxDOZadW2.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+    font-family: 'Kode Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/kodemono/v1/A2BLn5pb0QgtVEPFnlYkkaoBgw4qv9odq5myxD2ZaQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+header {
+    font-family: 'Kode Mono', sans-serif; !important;
+}
+
+footer {
+    font-family: 'Kode Mono', sans-serif; !important;
+}*/
diff --git a/webapp/index.html b/webapp/index.html
index 4829d358..866d53f7 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -8,11 +8,12 @@
     <meta name="description" content="temporary file upload service">
     <meta name="author" content="Mathieu Bodjikian, Charles-Antoine Mathieu">
 
-    <title>Plik</title>
+    <title ng-bind="title"></title>
 
     <!-- CSS -->
     <link href="css/vendor.css" rel="stylesheet" type="text/css">
     <link href="css/app.css" rel="stylesheet" type="text/css">
+    <link href="css/custom.css" rel="stylesheet" type="text/css">
 
     <!-- FAVICON -->
     <link rel="shortcut icon" href="favicon.ico">
@@ -26,7 +27,7 @@
             <div class="row">
                 <!-- PLIK LOGO -->
                 <div class="col-sm-3 text-center">
-                    <h1><a href="#/_">Plik</a></h1>
+                    <h1><a href="#/_">{{title}}</a></h1>
                 </div>
                 <!-- TOP MENU -->
                 <div class="col-sm-9 text-right hidden-xs">
@@ -57,6 +58,9 @@ <h1><a href="#/_">Plik</a></h1>
     </div>
 </footer>
 
+<!-- configuration -->
+<script src="js/custom.js" type="text/javascript"></script>
+
 <!-- framework, modules and libraries -->
 <script src="js/vendor.js" type="text/javascript"></script>
 
diff --git a/webapp/js/ctrl/menu.js b/webapp/js/ctrl/menu.js
index 21ce885a..44352c50 100644
--- a/webapp/js/ctrl/menu.js
+++ b/webapp/js/ctrl/menu.js
@@ -1,5 +1,8 @@
 plik.controller('MenuCtrl', ['$rootScope', '$scope', '$config',
     function ($rootScope, $scope, $config) {
+        // Set title
+        $rootScope.title = TITLE;
+
         // Get server config
         $config.getConfig()
             .then(function (config) {
diff --git a/webapp/js/custom.js b/webapp/js/custom.js
new file mode 100644
index 00000000..18fef1f1
--- /dev/null
+++ b/webapp/js/custom.js
@@ -0,0 +1 @@
+const TITLE = "Plik"
\ No newline at end of file