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