feat: allow to use custom date output formats

closes AOEpeople#116

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

public/config.json

@@ -64,5 +64,6 @@
  "arcWidth": 2
  }
  ]
- }
-}
+ },
+ "dateFormat": "MMMM YYYY"
+}

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 (
  <div className="item-revision">
  <div>
  <Badge type={revision.ring}>
- {revision.ring} | {formatRelease(revision.release)}
+ {revision.ring} | {formatRelease(revision.release, dateFormat)}
  </Badge>
  </div>
  <div

src/components/ItemRevisions/ItemRevisions.tsx

@@ -1,13 +1,15 @@
-import React from "react";
 import HeadlineGroup from "../HeadlineGroup/HeadlineGroup";
 import ItemRevision from "../ItemRevision/ItemRevision";
 import { Revision } from "../../model";
 import "./item-revisions.scss";
 import { useMessages } from "../../context/MessagesContext";
+
 export default function ItemRevisions({
  revisions,
+ dateFormat,
 }: {
  revisions: Revision[];
+ dateFormat?: string
 }) {
  const { revisionsText } = useMessages();
  return (
@@ -17,7 +19,7 @@ export default function ItemRevisions({
  </HeadlineGroup>
 
  {revisions.map((revision) => (
- <ItemRevision key={revision.release} revision={revision} />
+ <ItemRevision key={revision.release} revision={revision} dateFormat={dateFormat} />
  ))}
  </div>
  );

src/components/PageIndex/PageIndex.tsx

@@ -46,7 +46,7 @@ export default function PageIndex({
  <QuadrantGrid items={featuredOnly(items)} config={config} />
  )}
  <div className="publish-date">
- {publishedLabel} {formatRelease(newestRelease)}
+ {publishedLabel} {formatRelease(newestRelease, config.dateFormat)}
  </div>
  </Fadeable>
  );

src/components/PageItem/PageItem.tsx

@@ -116,7 +116,7 @@ const PageItem: React.FC<Props> = ({ pageName, items, config, leaving, onLeave }
  dangerouslySetInnerHTML={{ __html: item.body }}
  />
  {item.revisions.length > 1 && (
- <ItemRevisions revisions={item.revisions.slice(1)} />
+ <ItemRevisions revisions={item.revisions.slice(1)} dateFormat={config.dateFormat} />
  )}
  </div>
  </div>

src/config.ts

@@ -12,6 +12,7 @@ export interface ConfigData {
  ringsAttributes: {radius: number, arcWidth: number}[]
  };
  homepageContent: HomepageOption;
+ dateFormat?: string;
 }
 
 export const radarName =

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')
+ });
+});

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