feat: add jsFile option to include custom JavaScript

AOEpeople · Jul 1, 2024 · 6a5b863 · 6a5b863
1 parent a443aef
commit 6a5b863
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 8 deletions.
diff --git a/README.md b/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                                                                |

diff --git a/data/config.default.json b/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,

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/data.ts b/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() {

diff --git a/src/lib/utils.ts b/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}`;
 }
diff --git a/src/pages/_app.tsx b/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>
     </>
   );