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