feat: support alternative logos like png

closes #442

README.md

@@ -63,6 +63,9 @@ the `about.md` if they do not exist yet.
 Place your `logo.svg` and `favicon.ico` in the `public` folder next to the `package.json`.
 The ideal logo is 150px x 60px. For reference have a look at [public/logo.svg](./public/logo.svg).
 
+If you want to use a file other than an SVG, copy it to the `public` folder and set the name of the
+file as `logoFile` inside the `config.json`. e.g. `"logoFile": "acme-logo.png"`
+
 ### Step 3: Configure the radar
 
 Open the `config.json` file and configure the radar to your needs.
@@ -71,6 +74,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`                                                                    |
 | 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

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

package-lock.json

@@ -4028,9 +4028,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.715",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.715.tgz",
-      "integrity": "sha512-XzWNH4ZSa9BwVUQSDorPWAUQ5WGuYz7zJUNpNif40zFCiCl20t8zgylmreNmn26h5kiyw2lg7RfTmeMBsDklqg==",
+      "version": "1.4.717",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.717.tgz",
+      "integrity": "sha512-6Fmg8QkkumNOwuZ/5mIbMU9WI3H2fmn5ajcVya64I5Yr5CcNmO7vcLt0Y7c96DCiMO5/9G+4sI2r6eEvdg1F7A==",
       "dev": true
     },
     "node_modules/emoji-regex": {

src/components/Footer/Footer.tsx

@@ -1,14 +1,14 @@
-import logo from "../../../public/logo.svg";
 import styles from "./Footer.module.css";
 
 import { SocialLinks } from "@/components/SocialLinks/SocialLinks";
-import { getAppName, getImprintUrl, getLabel } from "@/lib/data";
+import { getAppName, getImprintUrl, getLabel, getLogoUrl } from "@/lib/data";
 
 export function Footer() {
+  const logoUrl = getLogoUrl();
   return (
     <div className={styles.footer}>
       <div className={styles.branding}>
-        <img src={logo.src} className={styles.logo} alt={getAppName()} />
+        <img src={logoUrl} className={styles.logo} alt={getAppName()} />
         <p className={styles.description}>{getLabel("footer")}</p>
         <SocialLinks className={styles.socialLinks} />
       </div>

src/components/Logo/Logo.tsx

@@ -3,18 +3,19 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-import logo from "../../../public/logo.svg";
 import styles from "./Logo.module.css";
 
-import { getAppName } from "@/lib/data";
+import { getAppName, getLogoUrl } from "@/lib/data";
 import { cn } from "@/lib/utils";
 
 export function Logo() {
   const pathname = usePathname();
   const appName = getAppName();
+  const logoUrl = getLogoUrl();
+
   return (
     <Link href="/" className={cn(styles.logo, pathname != "/" && styles.small)}>
-      <img src={logo.src} className={cn(styles.src)} alt={appName} />
+      <img src={logoUrl} className={cn(styles.src)} alt={appName} />
       <span className={styles.subline}>{appName}</span>
     </Link>
   );

src/lib/data.ts

@@ -3,6 +3,7 @@ import config from "./config";
 
 import { format } from "@/lib/format";
 import { Flag, Item, Quadrant, Ring } from "@/lib/types";
+import { assetUrl } from "@/lib/utils";
 
 export function getLabel(key: keyof typeof config.labels) {
   return config.labels[key] || "";
@@ -20,6 +21,10 @@ export function getAppName() {
   return getLabel("title");
 }
 
+export function getLogoUrl() {
+  return assetUrl("/" + config.logoFile);
+}
+
 export function getChartConfig() {
   return config.chart;
 }