add customizable css variable

org-roam · Jul 5, 2020 · f9d0745 · f9d0745
1 parent 7617ac0
commit f9d0745
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -142,12 +142,12 @@
       .darkmode .select2-results,
       .darkmode .select2-container--default .select2-selection--multiple .select2-selection__choice {
           background-color: #1d1e20;
-       }
+      }
 
-       .darkmode .select2-search__field {
-           background-color: #1d1e20;
-           color: #c7cec6 ;
-       }
+      .darkmode .select2-search__field {
+          background-color: #1d1e20;
+          color: #c7cec6 ;
+      }
     </style>
   </head>
 
@@ -244,24 +244,33 @@
           return v;
       }
 
-      /* Get custom configuration for vis.Network */
-      function getCustomNetworkOptions() {
-          return $.get(`/network-vis-options?token=${token}`);
-      }
-
       var urlParams = new URLSearchParams(window.location.search);
       var token = urlParams.get('token');
 
-     $(window).on("load", function () {
-         getCustomNetworkOptions()
-             .done(init)
-             .fail(function (request, status, error) {
-                 console.error(`Error loading user network config: ${error.message}`);
-                 init();
-             });
-     });
+      $(window).on("load", function () {
+          var customNetworkOptions = {}
+          $.ajax({
+              async: false,
+              type: 'GET',
+              url: `/network-vis-options?token=${token}`,
+              success: function(data) {
+                  customNetworkOptions = data;
+              }
+          });
+
+          $.ajax({
+              async: false,
+              type: 'GET',
+              url: `/server-css?token=${token}`,
+              success: function(data) {
+                  var style = document.createElement('style');
+                  style.type = 'text/css';
+                  style.innerHTML = data;
+                  document.getElementsByTagName('head')[0].appendChild(style);
+                  console.log(style);
+              }
+          });
 
-     function init(customNetworkOptions) {
           var previewFrame = document.getElementById("preview-frame"); // div
           var hoverNode = document.getElementById("hovernode"); // iframe
           var globalNetwork;
@@ -765,8 +774,11 @@
                           previewFrame.style.OTransform = transformString;
                           previewFrame.style.transform = transformString;
 
-                          if (darkmode) {iframeSetColor("hovernode", "#1d1e20", "#c7cec6");
-                          } else {iframeSetColor("hovernode", "white", "black");}
+                          if (darkmode) {
+                              iframeSetColor("hovernode", "#1d1e20", "#c7cec6");
+                          } else {
+                              iframeSetColor("hovernode", "white", "black");
+                          }
 
                           previewFrame.style.display = "block";
                       }
@@ -826,7 +838,7 @@
                   bufferNetwork.setOptions({nodes: {font: { color: "black" }}});
               }
           }
-      }
+      });
     </script>
   </body>
 </html>
diff --git a/org-roam-server.el b/org-roam-server.el
@@ -108,6 +108,11 @@ or { \"physics\": { \"enabled\": false } }"
   :group 'org-roam-server
   :type 'string)
 
+(defcustom org-roam-server-style nil
+  "The CSS that can be used to customize the application."
+  :group 'org-roam-server
+  :type 'string)
+
 (defcustom org-roam-server-authenticate nil
   "Enable authentication."
   :group 'org-roam-server
@@ -394,6 +399,12 @@ DESCRIPTION is the shown attribute to the user if the image is not rendered."
           (httpd-error httpd-current-proc 403)))
   (insert (or org-roam-server-network-vis-options "{}")))
 
+(defservlet* server-css text/css (token)
+  (if org-roam-server-authenticate
+      (if (not (string= org-roam-server-token token))
+          (httpd-error httpd-current-proc 403)))
+  (insert org-roam-server-style))
+
 (defun org-roam-server-insert-title (title)
   "Insert the TITLE as `org-document-title`."
   (insert (propertize title 'font-lock-face 'org-document-title)))