diff --git a/README.md b/README.md index 0d440818..a055f284 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,20 @@ To change the logo, create a public folder in your application and put your `log For reference have a look at [public/logo.svg](./public/logo.svg). +### Change the logo +By default the Date format used in the app is `"MMMM YYYY"`. +You can change this by editing the config file as shown below. +Please be sure you are entering a valid [moment.js format string](https://momentjs.com/docs/#/displaying/format). + +```json +{ + // ... + "dateFormat": "MMMM YYYY" +} +``` + +For reference have a look at [public/logo.svg](./public/logo.svg). + ### Change the rings and quadrants config To change the default rings and quadrants of the radar, you can place a custom `config.json` file within the `public` folder. The `showEmptyRings` option can be enabled to display the header for a ring even when it contains no items (helpful to diff --git a/public/config.json b/public/config.json index e286e03e..fd87d075 100644 --- a/public/config.json +++ b/public/config.json @@ -64,5 +64,6 @@ "arcWidth": 2 } ] - } -} \ No newline at end of file + }, + "dateFormat": "MMMM YYYY" +} diff --git a/src/components/ItemRevision/ItemRevision.tsx b/src/components/ItemRevision/ItemRevision.tsx index 1096e220..58853d3a 100644 --- a/src/components/ItemRevision/ItemRevision.tsx +++ b/src/components/ItemRevision/ItemRevision.tsx @@ -2,12 +2,18 @@ import Badge from "../Badge/Badge"; import { formatRelease } from "../../date"; import { Revision } from "../../model"; -export default function ItemRevision({ revision }: { revision: Revision }) { +export default function ItemRevision({ + revision, + dateFormat, +}: { + revision: Revision; + dateFormat?: string +}) { return (
- {revision.ring} | {formatRelease(revision.release)} + {revision.ring} | {formatRelease(revision.release, dateFormat)}
{revisions.map((revision) => ( - + ))}
); diff --git a/src/components/PageIndex/PageIndex.tsx b/src/components/PageIndex/PageIndex.tsx index accb7efd..b54c1f9d 100644 --- a/src/components/PageIndex/PageIndex.tsx +++ b/src/components/PageIndex/PageIndex.tsx @@ -46,7 +46,7 @@ export default function PageIndex({ )}
- {publishedLabel} {formatRelease(newestRelease)} + {publishedLabel} {formatRelease(newestRelease, config.dateFormat)}
); diff --git a/src/components/PageItem/PageItem.tsx b/src/components/PageItem/PageItem.tsx index 5a676387..3b273b5e 100644 --- a/src/components/PageItem/PageItem.tsx +++ b/src/components/PageItem/PageItem.tsx @@ -116,7 +116,7 @@ const PageItem: React.FC = ({ pageName, items, config, leaving, onLeave } dangerouslySetInnerHTML={{ __html: item.body }} /> {item.revisions.length > 1 && ( - + )}
diff --git a/src/config.ts b/src/config.ts index 6cfcb611..85c8450b 100644 --- a/src/config.ts +++ b/src/config.ts @@ -12,6 +12,7 @@ export interface ConfigData { ringsAttributes: {radius: number, arcWidth: number}[] }; homepageContent: HomepageOption; + dateFormat?: string; } export const radarName = diff --git a/src/date.test.tsx b/src/date.test.tsx new file mode 100644 index 00000000..efde281e --- /dev/null +++ b/src/date.test.tsx @@ -0,0 +1,11 @@ +import moment from "moment"; +import { formatRelease } from "./date"; + +describe("formatRelease", () => { + it("should format a date object using default output format", () => { + expect(formatRelease(moment('2022-01-05'))).toEqual('January 2022') + }); + it("should format a date object using a custom output format", () => { + expect(formatRelease(moment('2022-01-05'), 'DD.MM.YYYY')).toEqual('05.01.2022') + }); +}); diff --git a/src/date.ts b/src/date.ts index d6f220ab..97d72194 100644 --- a/src/date.ts +++ b/src/date.ts @@ -3,5 +3,5 @@ import moment from "moment"; const isoDateToMoment = (isoDate: moment.MomentInput) => moment(isoDate, "YYYY-MM-DD"); -export const formatRelease = (isoDate: moment.MomentInput) => - isoDateToMoment(isoDate).format("MMMM YYYY"); +export const formatRelease = (isoDate: moment.MomentInput, format: string = "MMMM YYYY") => + isoDateToMoment(isoDate).format(format);