Custom JS and CSS (#1950)

* First commit for custom styles and JS

* Adjusted classes

* Added ids and classes for services and bookmarks

* Apply suggestions from code review

* Remove mime dependency

* Update settings.json

* Detect custom css / js changes, no refresh

* Added preload to custom scripts and styles so they can load earlier

* Added data attribute name for bookmarks too

* Update [path].js

* code style, revert some pointer changes

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/pages/api/config/[path].js

@@ -0,0 +1,35 @@
+import path from "path";
+import fs from "fs";
+
+import { CONF_DIR } from "utils/config/config";
+import createLogger from "utils/logger";
+
+const logger = createLogger("configFileService");
+
+/**
+ * @param {import("next").NextApiRequest} req
+ * @param {import("next").NextApiResponse} res
+ */
+export default async function handler(req, res) {
+  const { path: relativePath } = req.query;
+
+  // only two supported files, for now
+  if (!['custom.css', 'custom.js'].includes(relativePath))
+  {
+    return res.status(422).end('Unsupported file');
+  }
+
+  const filePath = path.join(CONF_DIR, relativePath);
+
+  try {
+      // Read the content of the file or return empty content
+      const fileContent = fs.existsSync(filePath) ? fs.readFileSync(filePath, 'utf-8') : '';
+      // hard-coded since we only support two known files for now
+      const mimeType = (relativePath === 'custom.css') ? 'text/css' : 'text/javascript';
+      res.setHeader('Content-Type', mimeType);
+      return res.status(200).send(fileContent);
+    } catch (error) {
+      logger.error(error);
+      return res.status(500).end('Internal Server Error');
+    }
+}

src/pages/api/hash.js

@@ -4,7 +4,7 @@ import { readFileSync } from "fs";
 
 import checkAndCopyConfig, { CONF_DIR } from "utils/config/config";
 
-const configs = ["docker.yaml", "settings.yaml", "services.yaml", "bookmarks.yaml", "widgets.yaml"];
+const configs = ["docker.yaml", "settings.yaml", "services.yaml", "bookmarks.yaml", "widgets.yaml", "custom.css", "custom.js"];
 
 function hash(buffer) {
   const hashSum = createHash("sha256");