Merge pull request #621 from credebl/common-component-for-logo-image

refactor: custom component for logo file and platform name

.env.sample

@@ -1,16 +1,18 @@
 PUBLIC_BASE_URL=
 PUBLIC_CRYPTO_PRIVATE_KEY=
 
-PUBLIC_PLATFORM_NAME= // Please specify your paltform name 
-PUBLIC_PLATFORM_LOGO= // Please specify your logo file link
-PUBLIC_POWERED_BY= // Please specify your powered by org name
-PUBLIC_PLATFORM_WEB_URL= // Please specify your platform web URL
-PUBLIC_POWERED_BY_URL= // Please specify your support URL
-PUBLIC_PLATFORM_DOCS_URL= // Please specify your documentation URL
-PUBLIC_PLATFORM_GIT= // Please specify your Github URL
-PUBLIC_PLATFORM_SUPPORT_EMAIL= // Please specify your support email 
-PUBLIC_PLATFORM_TWITTER_URL= // Please specify your twitter URL
-PUBLIC_PLATFROM_DISCORD_SUPPORT= // Please specify your discord support url
+PUBLIC_SHOW_NAME_AS_LOGO= # Please provide true if you want to give platform name with logo 
+
+PUBLIC_PLATFORM_NAME= # Please specify your paltform name 
+PUBLIC_PLATFORM_LOGO= # Please specify your logo file link
+PUBLIC_POWERED_BY= # Please specify your powered by org name
+PUBLIC_PLATFORM_WEB_URL= # Please specify your platform web URL
+PUBLIC_POWERED_BY_URL= # Please specify your support URL
+PUBLIC_PLATFORM_DOCS_URL= # Please specify your documentation URL
+PUBLIC_PLATFORM_GIT= # Please specify your Github URL
+PUBLIC_PLATFORM_SUPPORT_EMAIL= # Please specify your support email 
+PUBLIC_PLATFORM_TWITTER_URL= # Please specify your twitter URL
+PUBLIC_PLATFROM_DISCORD_SUPPORT= # Please specify your discord support url
 
 
 

src/app/NavBarSidebar.astro

@@ -11,7 +11,7 @@ import SignOutButton from '../components/SignOutButton/index';
 import AgentHealth from '../commonComponents/AgentHealth';
 import { getFromCookies } from '../api/Auth';
 import { RolePermissions } from '../config/permissions';
-import { envConfig } from '../config/envConfig';
+import LogoFile from '../commonComponents/LogoFile.jsx';
 
 const { hideOrgAgent } = Astro.props;
 
@@ -70,15 +70,7 @@ const permittedPages = RolePermissions.find(
 						pathRoutes.users.dashboard}
 					class="flex ml-2 md:mr-24"
 				>
-					<img
-						src={envConfig.PLATFORM_DATA.logo}
-						class="h-8 mr-3"
-						alt={`${envConfig.PLATFORM_DATA.name} logo`}
-					/>
-					<span
-						class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white"
-						>{envConfig.PLATFORM_DATA.name}</span
-					>
+					<LogoFile />
 				</a>
 			</div>
 			<div class="flex items-center">

src/app/NavBarStacked.astro

@@ -1,5 +1,5 @@
 ---
-import { envConfig } from "../config/envConfig";
+import LogoFile from "../commonComponents/LogoFile";
 ---
 
 <nav
@@ -10,15 +10,7 @@ import { envConfig } from "../config/envConfig";
 		<div class="flex items-center justify-between">
 			<div class="flex items-center justify-start">
 				<a class="flex ml-2 md:mr-24" href="/">
-					<img
-						src={envConfig.PLATFORM_DATA.logo}
-						class="h-8 mr-3"
-						alt={`${envConfig.PLATFORM_DATA.name} Logo`}
-					/>
-					<span
-						class="ml-2 self-center text-2xl font-semibold whitespace-nowrap text-black"
-						>{envConfig.PLATFORM_DATA.name}</span
-					>
+					<LogoFile />
 				</a>			
 
 			</div>

src/commonComponents/LogoFile.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { envConfig } from '../config/envConfig';
+
+const LogoFile = () => {
+    return (
+		<>
+		<img
+		src={envConfig.PLATFORM_DATA.logo}
+		className="h-8 mr-3"
+		alt={`${envConfig.PLATFORM_DATA.name} logo`}
+	/>
+	{envConfig.PLATFORM_DATA.nameAsLogo === 'true' && (
+                <span className="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">
+                    {envConfig.PLATFORM_DATA.name}
+                </span>
+            )}
+		</>
+
+    )
+}
+
+export default LogoFile;

src/commonComponents/PublicNavbar.astro

@@ -2,6 +2,7 @@
 import { pathRoutes } from '../config/pathRoutes';
 import ColorModeSwitcher from '../components/ColorModeSwitcher.astro';
 import { envConfig } from '../config/envConfig';
+import LogoFile from './LogoFile';
 
 const { limitedWidth } = Astro.props;
 
@@ -54,16 +55,7 @@ const navbarClass = `bg-white dark:bg-gray-900 w-full z-20 top-0 left-0 border-g
 				</svg>
 			</button>
 			<a href="/" class="flex items-center">
-				<img
-					src={envConfig.PLATFORM_DATA.logo}
-					class="h-8 mr-3"
-					alt={`${envConfig.PLATFORM_DATA.name} logo`}
-				/>
-				<span
-					class="hidden md:block self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
-				>
-				{envConfig.PLATFORM_DATA.name}
-				</span>
+				<LogoFile />
 			</a>
 			<div class="hidden lg:block ml-2">
 				<a

src/components/Authentication/NavBar.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { envConfig } from '../../config/envConfig';
+import LogoFile from '../../commonComponents/LogoFile';
 
 const NavBar = () => {
     return (
@@ -9,14 +8,7 @@ const NavBar = () => {
             <div className="flex items-center justify-between">
                 <div className="flex items-center justify-start">
                 <a className="flex ml-2 md:mr-24" href="/">
-                        <img
-                            src={envConfig.PLATFORM_DATA.logo}
-                            className="h-8 mr-3"
-                            alt={`${envConfig.PLATFORM_DATA.name} Logo`}
-                        />
-                        <span
-                            className="ml-2 self-center text-2xl font-semibold whitespace-nowrap text-black dark:text-white"
-                        >{envConfig.PLATFORM_DATA.name}</span>
+                        <LogoFile />
 
                     </a>
                 </div>

src/components/SignUpForm.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { Button, Checkbox, Label, TextInput } from 'flowbite-react';
-import { asset } from '../lib/data.js';
-import { envConfig } from '../config/envConfig.js';
+import LogoFile from '../commonComponents/LogoFile'
 
 export default function ShadowInputs() {
 
@@ -18,8 +17,7 @@ export default function ShadowInputs() {
                 href="#"
                 className="flex items-center justify-center mb-8 text-2xl font-semibold lg:mb-10 dark:text-white"
             >
-                <img src={asset(`${envConfig.PLATFORM_DATA.logo}`)} alt={`${envConfig.PLATFORM_DATA.name} logo`} className="mr-4 h-11" />
-                <span>{envConfig.PLATFORM_DATA.name}</span>
+                <LogoFile />
             </a>
             <div
                 className="w-full max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-800"

src/config/envConfig.ts

@@ -17,7 +17,7 @@ if (import.meta.env) {
 	}
 }
 
-const { PUBLIC_BASE_URL, PUBLIC_CRYPTO_PRIVATE_KEY, PUBLIC_PLATFORM_NAME, PUBLIC_PLATFORM_LOGO, PUBLIC_POWERED_BY, PUBLIC_PLATFORM_WEB_URL, PUBLIC_POWERED_BY_URL, PUBLIC_PLATFORM_DOCS_URL, PUBLIC_PLATFORM_GIT, PUBLIC_PLATFORM_SUPPORT_EMAIL, PUBLIC_PLATFORM_TWITTER_URL, PUBLIC_PLATFORM_SUPPORT_INVITE, PUBLIC_PLATFORM_DISCORD_URL }: any = envVariables;
+const { PUBLIC_BASE_URL, PUBLIC_CRYPTO_PRIVATE_KEY,PUBLIC_SHOW_NAME_AS_LOGO, PUBLIC_PLATFORM_NAME, PUBLIC_PLATFORM_LOGO, PUBLIC_POWERED_BY, PUBLIC_PLATFORM_WEB_URL, PUBLIC_POWERED_BY_URL, PUBLIC_PLATFORM_DOCS_URL, PUBLIC_PLATFORM_GIT, PUBLIC_PLATFORM_SUPPORT_EMAIL, PUBLIC_PLATFORM_TWITTER_URL, PUBLIC_PLATFORM_SUPPORT_INVITE, PUBLIC_PLATFORM_DISCORD_URL }: any = envVariables;
 
 export const envConfig = {
 	PUBLIC_BASE_URL:
@@ -26,6 +26,8 @@ export const envConfig = {
 		PUBLIC_CRYPTO_PRIVATE_KEY ||
 		import.meta.env.PUBLIC_CRYPTO_PRIVATE_KEY,
 	PLATFORM_DATA: {
+		nameAsLogo:
+		PUBLIC_SHOW_NAME_AS_LOGO || import.meta.env.PUBLIC_SHOW_NAME_AS_LOGO,
 		name:
 			PUBLIC_PLATFORM_NAME || import.meta.env.PUBLIC_PLATFORM_NAME,
 		logo:

src/pages/index.astro

@@ -4,7 +4,6 @@ import PublicNavbar from '../commonComponents/PublicNavbar.astro';
 import { envConfig } from '../config/envConfig';
 const cookie = Astro.cookies.get("platform-data").value;
 const env = import.meta.env || process.env;
-console.log(2433, env, cookie);
 
 ---
 

src/pages/user/[user].astro

@@ -1,6 +1,6 @@
 ---
+import LogoFile from '../../commonComponents/LogoFile';
 import CustomAvatar from '../../components/Avatar';
-import { envConfig } from '../../config/envConfig';
 import { pathRoutes } from '../../config/pathRoutes';
 
 const { user } = Astro.params;
@@ -17,15 +17,7 @@ const userData = data?.data;
 				<div class="flex px-3 py-2 justify-start">
 					<div class="flex items-center justify-start">
 						<a href={pathRoutes.users.dashboard} class="flex ml-2 md:mr-24">
-							<img
-								src={envConfig.PLATFORM_DATA.logo}
-								class="h-8 mr-3"
-								alt={`${envConfig.PLATFORM_DATA.name} Logo`}
-							/>
-							<span
-								class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white"
-								>{envConfig.PLATFORM_DATA.name}</span
-							>
+							<LogoFile />
 						</a>
 					</div>
 				</div>