added version as scale-tag in FooterCopyright #184 (#207)

Author: akyriako

docusaurus.config.ts

@@ -212,7 +212,7 @@ const config: Config = {
           ],
         },
       ],
-      copyright: `© T-Systems International GmbH ${new Date().getFullYear()} (` + process.env.REACT_APP_VERSION + `)`,
+      copyright: `© T-Systems International GmbH ${new Date().getFullYear()}`,
     },
     prism: {
       additionalLanguages: ['powershell', 'bash'],
@@ -262,7 +262,7 @@ const config: Config = {
   } satisfies Preset.ThemeConfig,
 
   customFields: {
-    version: `(v` + process.env.REACT_APP_VERSION + `)`,
+    version: process.env.REACT_APP_VERSION,
   },
 
   plugins: [

src/theme/Footer/Copyright/index.tsx

@@ -1,7 +1,20 @@
 import type { Props } from '@theme/Footer/Copyright';
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
 export default function FooterCopyright({ copyright }: Props): JSX.Element {
+  const { siteConfig } = useDocusaurusContext();
+  const version: string = siteConfig.customFields.version as string; 
+
+  let color: string = "orange"
+  if (version.startsWith("v")) {
+    color = "cyan"
+  } else if (version.includes("-development")){
+    color = "violet"
+  }
+
   return (
-    <span slot="notice">{copyright}</span>
+    <>
+      <span slot="notice">{copyright} <scale-tag size="small" style={{margin: '0 0 0 8px'}} color={color} type="strong">{version}</scale-tag></span>
+    </>
   );
 }

src/theme/Footer/index.tsx

@@ -5,18 +5,13 @@ import FooterLinks from '@theme/Footer/Links';
 import FooterLogo from '@theme/Footer/Logo';
 import FooterCopyright from '@theme/Footer/Copyright';
 import FooterLayout from '@theme/Footer/Layout';
-// import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; // get metadata about page
 
 function Footer(): JSX.Element | null {
-  // const context = useDocusaurusContext();
-  // const { siteConfig = {} } = context;
-
   const {footer} = useThemeConfig();
   if (!footer) {
     return null;
   }
   const {copyright, links, logo, style} = footer;
-  // const {version} = siteConfig.customFields["version"];
   return (
     <FooterLayout
       style={style}