feat: add jsFile option to include custom JavaScript

README.md

@@ -75,6 +75,7 @@ Open the `config.json` file and configure the radar to your needs.
 | basePath  | Set if hosting under a sub-path, otherwise set it to `/`. Default is `/techradar`                                              |
 | baseUrl   | Set to the full URL, where the radar will be hosted. Will be used for sitemap.xml. `https://www.aoe.com/techradar`             |
 | logoFile  | (optional) Filepath in public folder. Default is `logo.svg`                                                                    |
+| jsFile    | (optional) Filepath in public folder or URL to enable include of custom script                                                 |
 | toggles   | (optional) Modify the behaviour and contents of the radar. See config below.                                                   |
 | sections  | (optional) Modify the order of sections (`radar`, `tags`, `list`)                                                              |
 | colors    | A map of colors for the radar. Can be any valid CSS color value                                                                |

data/config.default.json

@@ -3,6 +3,7 @@
   "baseUrl": "",
   "editUrl": "https://github.dev/AOEpeople/techradar/blob/main/radar/{release}/{id}.md",
   "logoFile": "logo.svg",
+  "jsFile": "",
   "toggles": {
     "showChart": true,
     "showTagFilter": true,

package-lock.json

@@ -3287,12 +3287,13 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -5010,10 +5011,11 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
+      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -5878,6 +5880,7 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -8864,6 +8867,7 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },

src/lib/data.ts

@@ -22,7 +22,12 @@ export function getAppName() {
 }
 
 export function getLogoUrl() {
-  return assetUrl("/" + config.logoFile);
+  return assetUrl(config.logoFile);
+}
+
+export function getJsUrl(): string {
+  if (!config.jsFile) return "";
+  return assetUrl(config.jsFile);
 }
 
 export function getChartConfig() {

src/lib/utils.ts

@@ -7,6 +7,8 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export function assetUrl(path: string) {
+  if (/^https?:/.test(path)) return path;
   if (!config.basePath) return path;
+  if (!path.startsWith("/")) path = "/" + path;
   return `${config.basePath}${path}`;
 }

src/pages/_app.tsx

@@ -1,8 +1,10 @@
 import { NextPage } from "next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
+import Script from "next/script";
 
 import { Layout, type LayoutClass } from "@/components/Layout/Layout";
+import { getJsUrl } from "@/lib/data";
 import { formatTitle } from "@/lib/format";
 import { assetUrl } from "@/lib/utils";
 import "@/styles/_globals.css";
@@ -18,6 +20,7 @@ type CustomAppProps = AppProps & {
 };
 
 export default function App({ Component, pageProps, router }: CustomAppProps) {
+  const jsUrl = getJsUrl();
   return (
     <>
       <Head>
@@ -27,6 +30,7 @@ export default function App({ Component, pageProps, router }: CustomAppProps) {
       </Head>
       <Layout layoutClass={Component.layoutClass}>
         <Component {...pageProps} />
+        {jsUrl && <Script src={jsUrl} />}
       </Layout>
     </>
   );