feat: provide edito button to jump directly to the item in a repo

closes #115

public/config.json

@@ -65,5 +65,9 @@
       }
     ]
   },
-  "dateFormat": "MMMM YYYY"
+  "dateFormat": "MMMM YYYY",
+  "editLink": {
+    "radarLink": "https://github.com/AOEpeople/techradar/edit/main/radar",
+    "title": "Edit"
+  }
 }

src/components/EditButton/EditButton.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Item } from "../../model";
+import "./editButton.scss";
+
+type EditButtonProps = {
+  baseUrl: string;
+  item: Item & { release? : string }
+  title?: string;
+};
+
+export default function EditButton({baseUrl, item, title}: React.PropsWithChildren<EditButtonProps>) {
+  const href = `${baseUrl}/${item.release}/${item.name}.md`;
+  return (
+    <a className="icon-link" href={href} target="_blank" rel="noopener noreferrer">{title || 'Edit'}</a>
+  );
+}

src/components/EditButton/editButton.scss

@@ -0,0 +1,2 @@
+.edit-button {
+}

src/components/PageItem/PageItem.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Badge from "../Badge/Badge";
+import EditButton from "../EditButton/EditButton";
 import ItemList from "../ItemList/ItemList";
 import Link from "../Link/Link";
 import FooterEnd from "../FooterEnd/FooterEnd";
@@ -47,6 +48,7 @@ const PageItem: React.FC<Props> = ({ pageName, items, config, leaving, onLeave }
   });
 
   const item = getItem(pageName, items);
+  const editButton = config.editLink ? <EditButton baseUrl={config.editLink.radarLink} item={item} title={config.editLink.title}/> : ''
 
   return (
     <>
@@ -99,10 +101,11 @@ const PageItem: React.FC<Props> = ({ pageName, items, config, leaving, onLeave }
           >
             <div className="item-page__header">
               <div className="split">
-                <div className="split__left">
+                <div className="split__left hero-headline__wrapper">
                   <h1 className="hero-headline hero-headline--inverse">
                     {item.title}
                   </h1>
+                  {editButton}
                 </div>
                 <div className="split__right">
                   <Badge big type={item.ring}>

src/components/PageItem/item-page.scss

@@ -50,6 +50,12 @@
   }
 }
 
+.hero-headline__wrapper {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
 .mobile-item-page {
   background: #fff;
   margin: 0 -15px;

src/components/PageItemMobile/PageItemMobile.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import Badge from "../Badge/Badge";
+import EditButton from "../EditButton/EditButton";
 import ItemList from "../ItemList/ItemList";
 import Link from "../Link/Link";
 import Fadeable from "../Fadeable/Fadeable";
@@ -40,6 +40,7 @@ export default function PageItemMobile({
 
   const item = getItem(pageName, items);
   const itemsInRing = getItemsInRing(pageName, items);
+  const editButton = config.editLink ? <EditButton baseUrl={config.editLink.radarLink} item={item} title={config.editLink.title}/> : ''
   return (
     <Fadeable leaving={leaving} onLeave={onLeave}>
       <SetTitle title={item.title} />
@@ -53,6 +54,7 @@ export default function PageItemMobile({
                   <h1 className="hero-headline hero-headline--inverse">
                     {item.title}
                   </h1>
+                  {editButton}
                 </div>
                 <div className="split__right">
                   <Badge big type={item.ring}>

src/config.ts

@@ -13,6 +13,10 @@ export interface ConfigData {
   };
   homepageContent: HomepageOption;
   dateFormat?: string;
+  editLink?: {
+    radarLink: string,
+    title?: string
+  }
 }
 
 export const radarName =