Add about page with project info (#44)

References
==========

- https://koenvangilst.nl/snippets/git-hash
- https://nodejs.dev/learn/the-package-json-guide

Author: nelsonmestevao

components/Admin/AboutApp/index.js

@@ -0,0 +1,39 @@
+import { Descriptions, Row, Badge, Space } from 'antd';
+
+const AboutApp = () => (
+  <Row justify="center">
+    <Descriptions bordered>
+      <Descriptions.Item label="Name" span={3}>
+        {process.env.APP_NAME}
+      </Descriptions.Item>
+      <Descriptions.Item label="Description" span={3}>
+        {process.env.APP_DESCRIPTION}
+      </Descriptions.Item>
+      <Descriptions.Item label="Version" span={3}>
+        v{process.env.APP_VERSION}
+      </Descriptions.Item>
+      <Descriptions.Item label="Homepage" span={2}>
+        <a href={process.env.HOMEPAGE}>{process.env.HOMEPAGE}</a>
+      </Descriptions.Item>
+      <Descriptions.Item label="Status" span={1}>
+        <Badge status="processing" text="Running" />
+      </Descriptions.Item>
+      <Descriptions.Item label="Repository URL" span={3}>
+        <a href={process.env.REPOSITORY_URL}>{process.env.REPOSITORY_URL}</a>
+      </Descriptions.Item>
+      <Descriptions.Item label="Bug Tracker" span={3}>
+        <a href={process.env.BUG_TRACKER}>{process.env.BUG_TRACKER}</a>
+      </Descriptions.Item>
+      <Descriptions.Item label="Hash" span={3}>
+        <a href={`${process.env.REPOSITORY_URL}/tree/${process.env.COMMIT_HASH}`}>
+          {process.env.COMMIT_HASH.substring(0, 8)}
+        </a>
+      </Descriptions.Item>
+      <Descriptions.Item label="License" span={3}>
+        {process.env.APP_LICENSE}
+      </Descriptions.Item>
+    </Descriptions>
+  </Row>
+);
+
+export default AboutApp;

components/Admin/Navbar/index.js

@@ -1,7 +1,13 @@
 import { useEffect, useState } from 'react';
 import LinkTo from '~/components/LinkTo';
 import { Avatar, Col, Menu, Row, Space, Typography } from 'antd';
-import { LinkOutlined, FormOutlined, TagsOutlined, UserOutlined } from '@ant-design/icons';
+import {
+  InfoCircleOutlined,
+  LinkOutlined,
+  FormOutlined,
+  TagsOutlined,
+  UserOutlined
+} from '@ant-design/icons';
 
 import API from '~/lib/api';
 
@@ -19,6 +25,10 @@ export const navbar = {
   redirects: {
     icon: <LinkOutlined />,
     title: 'Redirects'
+  },
+  about: {
+    icon: <InfoCircleOutlined />,
+    title: 'About'
   }
 };
 

next.config.js

@@ -0,0 +1,17 @@
+const pkg = require('./package.json');
+
+// starts a command line process to get the git hash
+const commitHash = require('child_process').execSync('git rev-parse HEAD').toString().trim();
+
+module.exports = {
+  env: {
+    APP_NAME: pkg.name,
+    APP_DESCRIPTION: pkg.description,
+    APP_VERSION: pkg.version,
+    APP_LICENSE: pkg.license,
+    HOMEPAGE: pkg.homepage,
+    BUG_TRACKER: pkg.bugs,
+    REPOSITORY_URL: pkg.repository.url,
+    COMMIT_HASH: commitHash
+  }
+};