feat: support alternative logos like png

closes AOEpeople#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,

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;
 }