diff --git a/README.md b/README.md index a224497..7c6caa3 100644 --- a/README.md +++ b/README.md @@ -59,17 +59,18 @@ The ideal logo is 150px x 60px. For reference have a look at [public/logo.svg](. Copy the [`config.json`](./data/config.json) next to the `package.json` and adapt it to your needs. -| Attribute | Description | -| --------- | --------------------------------------------------------------------------------- | -| basePath | Set if hosting under a sub-path, otherwise set it to `/`. Default is `/techradar` | -| colors | A map of colors for the radar. Can be any valid CSS color value | -| quadrants | Config of the 4 quadrants of the radar. See config below. | -| rings | Config of the rings of the radar. See config below. | -| flags | Config of the flags of the radar. See config below | -| chart | If you hava a lot of items, you can increase the `size` to scale down the radar | -| social | Social links in the footer. See config below | -| imprint | URL to the legal information | -| labels | Configure the labels to change the texts and labels of the radar | +| Attribute | Description | +| --------- | ------------------------------------------------------------------------------------------------------------------------------ | +| basePath | Set if hosting under a sub-path, otherwise set it to `/`. Default is `/techradar` | +| colors | A map of colors for the radar. Can be any valid CSS color value | +| quadrants | Config of the 4 quadrants of the radar. See config below. | +| rings | Config of the rings of the radar. See config below. | +| flags | Config of the flags of the radar. See config below | +| chart | If you hava a lot of items, you can increase the `size` to scale down the radar | +| social | Social links in the footer. See config below | +| imprint | URL to the legal information | +| labels | Configure the labels to change the texts and labels of the radar | +| editUrl | (optional) If set, an edit button will be shown next to the revision.
You can use placeholders for `{id}` and `{release}` | #### `config.quadrants` diff --git a/data/config.json b/data/config.json index 09109f2..1ef27c5 100644 --- a/data/config.json +++ b/data/config.json @@ -1,5 +1,6 @@ { "basePath": "/techradar", + "editUrl": "https://github.dev/AOEpeople/techradar/blob/main/radar/{release}/{id}.md", "colors": { "foreground": "#fcf2e6", "background": "#113521", diff --git a/package-lock.json b/package-lock.json index 817d872..39c0983 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "aoe_technology_radar", - "version": "4.0.0-alpha.2", + "version": "4.0.0-alpha.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "aoe_technology_radar", - "version": "4.0.0-alpha.2", + "version": "4.0.0-alpha.5", "hasInstallScript": true, "bin": { "techradar": "bin/techradar.sh" diff --git a/package.json b/package.json index 9145b7f..b02bf02 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aoe_technology_radar", - "version": "4.0.0-alpha.4", + "version": "4.0.0-alpha.5", "private": true, "bin": { "techradar": "./bin/techradar.sh" diff --git a/src/components/ItemDetail/ItemDetail.module.css b/src/components/ItemDetail/ItemDetail.module.css index 707d1e1..ae639ba 100644 --- a/src/components/ItemDetail/ItemDetail.module.css +++ b/src/components/ItemDetail/ItemDetail.module.css @@ -9,10 +9,27 @@ margin: 0 30px 0 0; } +.editLink { + position: absolute; + top: 10px; + right: 10px; + display: block; + width: 20px; + height: 20px; + opacity: 0; + transition: opacity 0.2s; +} + .revision { padding: 30px 0 15px 35px; - margin-left: 5px; + margin-left: 20px; border-left: 1px solid var(--border); + + &:hover { + .editLink { + opacity: 1; + } + } } .release { @@ -31,7 +48,7 @@ margin: -15px 0 0 -60px; } -.icon { +.notMaintainedIcon { fill: currentColor; width: 24px; height: 24px; @@ -44,6 +61,7 @@ } .content { + position: relative; background: var(--content); color: var(--text); border-radius: 6px; diff --git a/src/components/ItemDetail/ItemDetail.tsx b/src/components/ItemDetail/ItemDetail.tsx index 90e7d4d..d2f01bf 100644 --- a/src/components/ItemDetail/ItemDetail.tsx +++ b/src/components/ItemDetail/ItemDetail.tsx @@ -1,9 +1,9 @@ import styles from "./ItemDetail.module.css"; import { RingBadge } from "@/components/Badge/Badge"; -import Attention from "@/components/Icons/Attention"; +import { Attention, Edit } from "@/components/Icons"; import { Tag } from "@/components/Tags/Tags"; -import { getLabel, getReleases } from "@/lib/data"; +import { getEditUrl, getLabel, getReleases } from "@/lib/data"; import { Item } from "@/lib/types"; import { cn } from "@/lib/utils"; @@ -31,14 +31,19 @@ export function ItemDetail({ item }: ItemProps) { {notMaintainedText && isNotMaintained(item.release) && (
- +
{notMaintainedText}
)} - + {item.revisions?.map((revision, index) => ( - + ))} @@ -46,13 +51,15 @@ export function ItemDetail({ item }: ItemProps) { } interface RevisionProps { + id: string; release: string; ring: string; body?: string; } -function Revision({ release, ring, body }: RevisionProps) { +function Revision({ id, release, ring, body }: RevisionProps) { const date = new Date(release); + const editLink = getEditUrl({ id, release }); const formattedDate = date.toLocaleDateString("en-US", { month: "short", year: "numeric", @@ -65,6 +72,11 @@ function Revision({ release, ring, body }: RevisionProps) {
{body ?
: null} + {editLink && ( + + + + )}
); diff --git a/src/icons/edit.svg b/src/icons/edit.svg new file mode 100644 index 0000000..099999a --- /dev/null +++ b/src/icons/edit.svg @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/src/lib/data.ts b/src/lib/data.ts index 8da48dc..c2cf232 100644 --- a/src/lib/data.ts +++ b/src/lib/data.ts @@ -1,6 +1,7 @@ import config from "../../data/config.json"; import data from "../../data/data.json"; +import { format } from "@/lib/format"; import { Flag, Item, Quadrant, Ring } from "@/lib/types"; export function getLabel(key: keyof typeof config.labels) { @@ -47,6 +48,11 @@ export function getTags(): string[] { return data.tags; } +export function getEditUrl(props: { id: string; release: string }) { + if (!config.editUrl) return ""; + return format(config.editUrl, props); +} + export function getQuadrants(): Quadrant[] { return config.quadrants.map((q, i) => ({ ...q, position: i + 1 })); } diff --git a/src/lib/format.ts b/src/lib/format.ts index 9307540..ceb3a1d 100644 --- a/src/lib/format.ts +++ b/src/lib/format.ts @@ -1,5 +1,13 @@ import { getAppName } from "@/lib/data"; +// Replaces placeholders in a string with values from a context object +// e.g. format("Hello {name}.", {name: "World"}) => "Hello World." +export function format(text: string, context: Record): string { + return text.replace(/{(\w+)}/g, (match, key) => { + return context[key] || match; + }); +} + // Format the title of the page export function formatTitle(...title: string[]): string { return [...title, getAppName()].join(" | ");