added branding option (#301)

added branding option via '@ <logo>' or '@ <name>' after the CodiMD logo and text.

This was a user can personalize their CodiMD instance

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/components/common/branding/branding.scss

@@ -0,0 +1,7 @@
+.regular-size {
+  height: 50px;
+}
+
+.inline-size {
+  height: 30px;
+}

src/components/common/branding/branding.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { ApplicationState } from '../../../redux'
+import { ShowIf } from '../show-if/show-if'
+import './branding.scss'
+
+export interface BrandingProps {
+  inline?: boolean
+}
+
+export const Branding: React.FC<BrandingProps> = ({ inline = false }) => {
+  const branding = useSelector((state: ApplicationState) => state.backendConfig.branding)
+  const showBranding = branding.name !== '' || branding.logo !== ''
+
+  console.log(branding.logo)
+
+  return (
+    <ShowIf condition={showBranding}>
+      <strong className={`mx-1 ${inline ? 'inline-size' : 'regular-size'}`} >@</strong>
+      {
+        branding.logo
+          ? <img
+            src={branding.logo}
+            alt={branding.name}
+            title={branding.name}
+            className={inline ? 'inline-size' : 'regular-size'}
+          />
+          : branding.name
+      }
+    </ShowIf>
+  )
+}

src/components/common/document-title/document-title.tsx

@@ -0,0 +1,13 @@
+import React, { useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { ApplicationState } from '../../../redux'
+
+export const DocumentTitle: React.FC = () => {
+  const branding = useSelector((state: ApplicationState) => state.backendConfig.branding)
+
+  useEffect(() => {
+    document.title = `CodiMD ${branding.name ? ` @ ${branding.name}` : ''}`
+  }, [branding])
+
+  return null
+}