feat(footer): Add a footer

This currently displays the linsk back to informatics matters, the DM docs and the UI version number

Author: OliverDudgeon

.env

@@ -1,4 +1,5 @@
 NEXT_TELEMETRY_DISABLED=1
+NEXT_PUBLIC_APP_VERSION=$npm_package_version
 
 NEXT_PUBLIC_BASE_PATH=$BASE_PATH
 # Fix nextjsauth0 not using the basePath from NextJS

components/Footer.tsx

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+import { Box, Container, Link, Paper, Typography } from '@material-ui/core';
+
+export const Footer = () => {
+  return (
+    <Paper square component="footer">
+      <Container maxWidth="md">
+        <Box p={2}>
+          <Typography variant="h4">
+            <strong
+              css={css`
+                font-family: Raleway;
+              `}
+            >
+              Squonk
+            </strong>{' '}
+            Data Manager —{' '}
+            <Link href="https://discourse.squonk.it/c/squonk-data-manager-knowledge-base/">
+              Docs
+            </Link>
+          </Typography>
+          <Typography variant="subtitle1">
+            A product by{' '}
+            <Link href="https://www.informaticsmatters.com/">
+              <strong>Informatics Matters</strong>
+            </Link>
+          </Typography>
+          <Typography variant="body2">Version: {process.env.NEXT_PUBLIC_APP_VERSION}</Typography>
+        </Box>
+      </Container>
+    </Paper>
+  );
+};

components/Layout.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 
 import { Box } from '@material-ui/core';
 
+import { Footer } from './Footer';
 import Header from './Header';
 
 const Layout: FC = ({ children }) => {
@@ -11,6 +12,7 @@ const Layout: FC = ({ children }) => {
       <Box component="main" paddingY={2}>
         {children}
       </Box>
+      <Footer />
     </>
   );
 };

styles/fonts/raleway.scss

@@ -1,20 +1,20 @@
 @import '../mixins/font-face-template.scss';
 
-@include font-face-template ('Releway', 'Raleway-Thin', normal, 100);
-@include font-face-template ('Releway', 'Raleway-ThinItalic', italic, 100);
-@include font-face-template ('Releway', 'Raleway-ExtraLight', normal, 200);
-@include font-face-template ('Releway', 'Raleway-ExtraLightItalic', italic, 200);
-@include font-face-template ('Releway', 'Raleway-Light', normal, 300);
-@include font-face-template ('Releway', 'Raleway-LightItalic', italic, 300);
-@include font-face-template ('Releway', 'Raleway-Regular', normal, normal);
-@include font-face-template ('Releway', 'Raleway-Italic', italic, normal);
-@include font-face-template ('Releway', 'Raleway-Medium', normal, 500);
-@include font-face-template ('Releway', 'Raleway-MediumItalic', italic, 500);
-@include font-face-template ('Releway', 'Raleway-SemiBold', normal, 600);
-@include font-face-template ('Releway', 'Raleway-SemiBoldItalic', italic, 600);
-@include font-face-template ('Releway', 'Raleway-BoldItalic', italic, bold);
-@include font-face-template ('Releway', 'Raleway-Bold', normal, bold);
-@include font-face-template ('Releway', 'Raleway-ExtraBold', normal, 800);
-@include font-face-template ('Releway', 'Raleway-ExtraBoldItalic', italic, 800);
-@include font-face-template ('Releway', 'Raleway-Black', normal, 900);
-@include font-face-template ('Releway', 'Raleway-BlackItalic', italic, 900);
+@include font-face-template ('Raleway', 'Raleway-Thin', normal, 100);
+@include font-face-template ('Raleway', 'Raleway-ThinItalic', italic, 100);
+@include font-face-template ('Raleway', 'Raleway-ExtraLight', normal, 200);
+@include font-face-template ('Raleway', 'Raleway-ExtraLightItalic', italic, 200);
+@include font-face-template ('Raleway', 'Raleway-Light', normal, 300);
+@include font-face-template ('Raleway', 'Raleway-LightItalic', italic, 300);
+@include font-face-template ('Raleway', 'Raleway-Regular', normal, normal);
+@include font-face-template ('Raleway', 'Raleway-Italic', italic, normal);
+@include font-face-template ('Raleway', 'Raleway-Medium', normal, 500);
+@include font-face-template ('Raleway', 'Raleway-MediumItalic', italic, 500);
+@include font-face-template ('Raleway', 'Raleway-SemiBold', normal, 600);
+@include font-face-template ('Raleway', 'Raleway-SemiBoldItalic', italic, 600);
+@include font-face-template ('Raleway', 'Raleway-BoldItalic', italic, bold);
+@include font-face-template ('Raleway', 'Raleway-Bold', normal, bold);
+@include font-face-template ('Raleway', 'Raleway-ExtraBold', normal, 800);
+@include font-face-template ('Raleway', 'Raleway-ExtraBoldItalic', italic, 800);
+@include font-face-template ('Raleway', 'Raleway-Black', normal, 900);
+@include font-face-template ('Raleway', 'Raleway-BlackItalic', italic, 900);