Merge pull request #511 from root-gg/web-custom

Webapp js/css customization
root-gg · Feb 27, 2024 · ef758cc · ef758cc
2 parents ee2d6fc + 7590ad1
commit ef758cc
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,7 @@ Plik is a scalable & friendly temporary file upload system (Wetransfer like) in
 2. [Configuration](#configuration)
 3. [Data Backends](#data-backends)
 4. [Metadata Backends](#metadata-backends)
+5. [Web UI](#web-ui)
 5. [Client CLI](#cli-client)
 6. [Go Client](#go-client)
 7. [HTTP API](#api)
@@ -124,6 +125,25 @@ Suitable for standalone deployment.
 
 Suitable for distributed / High Availability deployment.
 
+### Web UI <a name="web-ui"></a>
+
+By default, Plikd serves an Angularjs Web UI on the same port as the API.
+This behaviour can be disabled by setting "NoWebInterface" in plikd.cfg.
+
+The WebUI path can be changed by setting "WebappDirectory" in plikd.cfg.
+It defaults to the relative path it has in the release .tar.gz '../webapp/dist'.
+
+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`
+
+If you are using docker the files are located at `/home/plik/webapp/dist` in the container. For example:
+```sh
+$ docker run -t -d -p 8080:8080 -v my_background.jpg:/home/plik/webapp/dist/img/background.jpg rootgg/plik
+```
+
 ### Cli client <a name="cli-client"></a>
 Plik is shipped with a powerful golang multiplatform cli client (downloadable in web interface) :  
 

diff --git a/documentation/docker.md b/documentation/docker.md
@@ -85,5 +85,5 @@ plik    | [01/27/2022 10:48:26][INFO    ] Starting plikd server v...
 plik    | [01/27/2022 10:48:26][INFO    ] Starting server at http://0.0.0.0:8080
 ```
 
-Reach out on telegram or this thread if you need help or have any suggestion :
+Reach out on telegram on this thread if you need help or have any suggestion :
 https://github.com/root-gg/plik/issues/326
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+const TITLE = "Plik"