enable blog and gbi case study

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "private": true,
   "dependencies": {
     "@faceless-ui/slider": "^1.1.14",

frontend/src/App.js

@@ -16,19 +16,11 @@ const Portfolio = lazy(() => import('./pages/Portfolio'));
 const Services = lazy(() => import('./pages/Services'));
 const Careers = lazy(() => import('./pages/Careers'));
 const Culture = lazy(() => import('./pages/Culture'));
-const DiligentMinds = lazy(() => import('./pages/DiligentMinds'));
-const EventsTimeline = lazy(() => import('./pages/EventsTimeline'));
+
 const About = lazy(() => import('./pages/About'));
 const Blog = lazy(() => import('./pages/Blog'));
-const BlogPost = lazy(() => import('./components/BlogPost'));
 const ProcessPage = lazy(() => import('./pages/ProcessPage'));
 const ContactPage = lazy(() => import('./pages/ContactPage'));
-const CaseStudyBI = lazy(() => import('./pages/CaseStudyBI'));
-const CaseStudyFinantial = lazy(() => import('./pages/CaseStudyFinantial'));
-const CaseStudyTicketing = lazy(() => import('./pages/CaseStudyTicketing'));
-const CaseStudyCentralized = lazy(() => import('./pages/CaseStudyCentralized'));
-const CaseStudyResource = lazy(() => import('./pages/CaseStudyResource'));
-const CaseStudyStrata = lazy(() => import('./pages/CaseStudyStrata'));
 const PrivacyPolicy = lazy(() => import('./pages/PrivacyPolicy'));
 const WorkWithUs = lazy(() => import('./pages/WorkWithUs'));
 const NotFoundPage = lazy(() => import('./pages/NotFoundPage'));
@@ -107,19 +99,9 @@ function App() {
             <Route exact path="/careers" element={<Careers />} />
             <Route exact path="/culture" element={<Culture />} />
             <Route exact path="/about" element={<About />} />
-            {/* <Route exact path="/blog" element={<Blog />}/> */}
-            {/* <Route exact path="/articles/:slug" element={<ArticlePage />} /> */}
+            <Route exact path="/blog" element={<Blog />}/>
+            <Route exact path="/articles/:slug" element={<ArticlePage />} />
             <Route exact path="/contact" element={<ContactPage />} />
-            <Route exact path="/casestudybi" element={<CaseStudyBI />} />
-            <Route exact path="/casestudystrata" element={<CaseStudyStrata />} />
-            <Route exact path="/casestudyfinancial" element={<CaseStudyFinantial />} />
-            <Route
-              exact
-              path="/casestudycentralized"
-              element={<CaseStudyCentralized />}
-            />
-            <Route exact path="/casestudyresource" element={<CaseStudyResource />} />
-            <Route exact path="/casestudyticketing" element={<CaseStudyTicketing />} />
             <Route exact path="/privacypolicy" element={<PrivacyPolicy />} />
           </Routes>
         </Suspense>

frontend/src/components/ArticleAuthorSection.jsx

@@ -4,13 +4,13 @@ const api_url = process.env.REACT_APP_API_URL;
 
 const ArticleAuthorSection = ({data}) => {
   return (
-    <div className="flex gap-2 mb-32p">
+    <div className="flex gap-4 mb-32p items-center">
     <img
-      className="max-h-[90px] object-fit rounded-full"
+      className="max-h-[60px] object-fit rounded-full"
       src={api_url + data.AuthorImage.data.attributes.url}
       alt={api_url + data.AuthorImage.data.attributes.alternativeText}
     />
-    <div className="flex flex-col items-start">
+    <div className="flex flex-col items-start align-middle">
       <p className="paragraph">{data.Author}</p>
       <p className="text-small-subhead text-gray-400 leading-normal">
         {data.AuthorTitle}

frontend/src/components/blog-micro-components/ImageGrid.jsx

@@ -1,20 +1,20 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 const api_url = process.env.REACT_APP_API_URL;
 
 const ImageGrid = ({ data }) => {
   const leng = data.data.length;
-
   return (
-    <div className="grid grid-cols-2 gap-4 pb-4">
+    <div className='flex justify-center'>
+      <div className="grid grid-cols-2 gap-4 pb-4 mx-auto">
       {data.data &&
         data.data.length > 0 &&
         data.data.map((item, index) => (
-          <div key={index}>
+          <Fragment key={index}>
             {leng % 2 != 0 ? (
               index == leng - 1 ? (
                 <img
-                  className="col-span-2 w-full rounded-md"
+                  className="col-start-1 col-span-2 row-start-1 row-span-1 w-full rounded-md"
                   src={api_url + item.attributes.url}
                   alt={item.attributes.alternativeText}
                 />
@@ -32,9 +32,11 @@ const ImageGrid = ({ data }) => {
                 alt={item.attributes.alternativeText}
               />
             )}
-          </div>
+          </Fragment>
         ))}
     </div>
+    </div>
+    
   );
 };
 

frontend/src/components/blog-micro-components/RichText.jsx

@@ -5,7 +5,7 @@ import '../../styles/reactMarkdown.css';
 const RichText = ({ data }) => {
   return (
     // eslint-disable-next-line react/no-children-prop
-    <ReactMarkdown className="article n-paragraph" children={data} />
+    <ReactMarkdown className="article n-paragraph" linkTarget="_blank" children={data} />
   );
 };
 

frontend/src/components/shared/ReactHelmet.jsx

@@ -1,32 +1,43 @@
 import { Helmet } from 'react-helmet-async';
 import PropTypes from 'prop-types';
 import '../../styles/cards.css';
-import { useEffect } from 'react';
+import { Fragment, useEffect } from 'react';
 
 const api_url = process.env.REACT_APP_API_URL;
 
 const ReactHelmet = ({ seo }) => {
   return (
-    <Helmet>
-      <title>{seo.metaTitle}</title>
-      <meta name="description" content={seo.metaDescription} />
-      <link rel="canonical" href={seo.canonicalURL} />
-      <meta name="keywords" content={seo.keywords} />
-      <meta name="viewport" content={seo.metaViewport} />
-      <meta name="robots" content={seo.metaRobots} />
-      <meta property="og:title" content={seo.metaSocial[0]?.title} />
-      <meta
-        property="og:image"
-        content={`${api_url}${seo.metaSocial[0]?.image?.data?.attributes?.url}`}
-      />
-      <meta property="og:description" content={seo.metaSocial[0]?.description} />
-      <meta property="twitter:title" content={seo.metaSocial[1]?.title} />
-      <meta
-        property="twitter:image"
-        content={`${api_url}${seo.metaSocial[1]?.image?.data?.attributes?.url}`}
-      />
-      <meta property="twitter:description" content={seo.metaSocial[1]?.description} />
-    </Helmet>
+    <Fragment>
+      {seo && (
+        <Helmet>
+          <title>{seo.metaTitle}</title>
+          <meta name="description" content={seo.metaDescription} />
+          <link rel="canonical" href={seo.canonicalURL} />
+          <meta name="keywords" content={seo.keywords} />
+          <meta name="viewport" content={seo.metaViewport} />
+          <meta name="robots" content={seo.metaRobots} />
+          {seo.metaSocial && seo.metaSocial.lenght > 0 && (
+            <Fragment>
+              <meta property="og:title" content={seo.metaSocial[0]?.title} />
+              <meta
+                property="og:image"
+                content={`${api_url}${seo.metaSocial[0]?.image?.data?.attributes?.url}`}
+              />
+              <meta property="og:description" content={seo.metaSocial[0]?.description} />
+              <meta property="twitter:title" content={seo.metaSocial[1]?.title} />
+              <meta
+                property="twitter:image"
+                content={`${api_url}${seo.metaSocial[1]?.image?.data?.attributes?.url}`}
+              />
+              <meta
+                property="twitter:description"
+                content={seo.metaSocial[1]?.description}
+              />
+            </Fragment>
+          )}
+        </Helmet>
+      )}
+    </Fragment>
   );
 };
 

frontend/src/pages/ArticlePage.jsx

@@ -46,11 +46,11 @@ export default function ArticlePage() {
 
   const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
 
-  useAnalytics('');
+  useAnalytics(helperString);
 
   useEffect(() => {
-    document.title = '';
-  }, []);
+    if (data && data[0].attributes) document.title = `${data[0].attributes.ArticleTitle}`;
+  }, [data]);
 
   if (isLoading) {
     return (

frontend/src/routes.js

@@ -1,145 +1,144 @@
-import CaseStudy from "./components/CaseStudy";
-import About from "./pages/About";
-import Careers from "./pages/Careers";
-import CaseStudyBI from "./pages/CaseStudyBI";
-import CaseStudyCentralized from "./pages/CaseStudyCentralized";
-import CaseStudyFinantial from "./pages/CaseStudyFinantial";
-import CaseStudyResource from "./pages/CaseStudyResource";
-import CaseStudyStrata from "./pages/CaseStudyStrata";
-import CaseStudyTicketing from "./pages/CaseStudyTicketing";
-import ContactPage from "./pages/ContactPage";
-import Home from "./pages/Home";
-import Portfolio from "./pages/Portfolio";
-import PrivacyPolicy from "./pages/PrivacyPolicy";
-import ProcessPage from "./pages/ProcessPage";
-import WorkWithUs from "./pages/WorkWithUs";
-import EventsTimeline from "./pages/EventsTimeline";
-import DiligentLife from "./pages/Culture";
-import DiligentMinds from "./pages/DiligentMinds";
+import CaseStudy from './components/CaseStudy';
+import About from './pages/About';
+import Careers from './pages/Careers';
+import CaseStudyBI from './pages/CaseStudyBI';
+import CaseStudyCentralized from './pages/CaseStudyCentralized';
+import CaseStudyFinantial from './pages/CaseStudyFinantial';
+import CaseStudyResource from './pages/CaseStudyResource';
+import CaseStudyStrata from './pages/CaseStudyStrata';
+import CaseStudyTicketing from './pages/CaseStudyTicketing';
+import ContactPage from './pages/ContactPage';
+import Home from './pages/Home';
+import Portfolio from './pages/Portfolio';
+import PrivacyPolicy from './pages/PrivacyPolicy';
+import ProcessPage from './pages/ProcessPage';
+import WorkWithUs from './pages/WorkWithUs';
+import EventsTimeline from './pages/EventsTimeline';
+import DiligentLife from './pages/Culture';
+import DiligentMinds from './pages/DiligentMinds';
 import Blog from './pages/Blog';
-import Culture from "./pages/Culture";
+import Culture from './pages/Culture';
 const routes = [
-    {
-      path: '/',
-      component: <Home/>,
-      title: 'Diligent Software',
-      exact: true,
-    },
-    {
-      path: '/workwithus',
-      component: <WorkWithUs/>,
-      title: 'Work with Us',
-      exact: true,
-      nav:true
-    },
-    {
-      path: '/portfolio',
-      component: <Portfolio/>,
-      title: 'Case Studies',
-      exact: true,
-      nav:true
-    },
-    {
-      path: '/process',
-      component: <ProcessPage />,
-      title: 'Process',
-      exact: true,
-      nav:true,
-    },
-    {
-      path: '/casestudybi',
-      component: <CaseStudyBI/>,
-      title: 'BI Healthcare System',
-      exact: true
-    },
-    {
-        path: '/casestudystrata',
-        component: <CaseStudyStrata/>,
-        title: 'Health Tracking Software',
-        exact: true
-      },
-      {
-        path: '/casestudyfinancial',
-        component: <CaseStudyFinantial/>,
-        title: 'Financial Engine',
-        exact: true
-      },
-      {
-        path: '/casestudyticketing',
-        component: <CaseStudyTicketing/>,
-        title: 'Ticketing System for Passengers',
-        exact: true
-      },
-      {
-        path: '/casestudycentralized',
-        component: <CaseStudyCentralized/>,
-        title: 'Centralized Monitoring System',
-        exact: true
-      },
-      {
-        path: '/casestudyresource',
-        component: <CaseStudyResource/>,
-        title: 'Resource Planning System',
-        exact: true
-      },
+  {
+    path: '/',
+    component: <Home />,
+    title: 'Diligent Software',
+    exact: true,
+  },
+  {
+    path: '/workwithus',
+    component: <WorkWithUs />,
+    title: 'Work with Us',
+    exact: true,
+    nav: true,
+  },
+  {
+    path: '/portfolio',
+    component: <Portfolio />,
+    title: 'Case Studies',
+    exact: true,
+    nav: true,
+  },
+  {
+    path: '/process',
+    component: <ProcessPage />,
+    title: 'Process',
+    exact: true,
+    nav: true,
+  },
+  {
+    path: '/casestudybi',
+    component: <CaseStudyBI />,
+    title: 'BI Healthcare System',
+    exact: true,
+  },
+  {
+    path: '/casestudystrata',
+    component: <CaseStudyStrata />,
+    title: 'Health Tracking Software',
+    exact: true,
+  },
+  {
+    path: '/casestudyfinancial',
+    component: <CaseStudyFinantial />,
+    title: 'Financial Engine',
+    exact: true,
+  },
+  {
+    path: '/casestudyticketing',
+    component: <CaseStudyTicketing />,
+    title: 'Ticketing System for Passengers',
+    exact: true,
+  },
+  {
+    path: '/casestudycentralized',
+    component: <CaseStudyCentralized />,
+    title: 'Centralized Monitoring System',
+    exact: true,
+  },
+  {
+    path: '/casestudyresource',
+    component: <CaseStudyResource />,
+    title: 'Resource Planning System',
+    exact: true,
+  },
+  {
+    path: '/careers',
+    component: <Careers />,
+    title: 'Careers',
+    exact: true,
+    nav: true,
+    drop: [
       {
-        path: '/careers',
-        component: <Careers/>,
-        title: 'Careers',
+        path: '/culture',
+        component: <Culture />,
+        title: 'Culture',
         exact: true,
-        nav:true,
-        drop: [
-          
-          {
-            path:'/culture',
-            component: <Culture />,
-            title: 'Culture',
-            exact: true,
-            nav:true,
-          },
-          //enable after we add content
-          // {
-          //   path:"/diligentminds",
-          //   component: <DiligentMinds />,
-          //   title: 'Diligent Minds',
-          //   exact: true,
-          //   nav:true,
-          // },
-          // {
-          //   path:"/eventstimeline",
-          //   component: <EventsTimeline />,
-          //   title: 'Events Timeline',
-          //   exact: true,
-          //   nav:true,
-          // },
-        ],
-      },
-    // {
-    //   path: '/blog',
-    //   component: <Blog />,
-    //   title: 'Blog',
-    //   exact: true,
-    //   nav:true,
-    // },
-      {
-        path: '/about',
-        component: <About/>,
-        title: 'About Us',
-        exact: true,
-        nav:true,
-      },
-      {
-        path: '/contact',
-        component: <ContactPage/>,
-        title: 'Contact Us',
-        exact: true,
-      },
-      {
-        path: '/privacypolicy',
-        component: <PrivacyPolicy/>,
-        title: 'Privacy Policy',
-        exact: true
+        nav: true,
       },
-  ];
+      //enable after we add content
+      // {
+      //   path:"/diligentminds",
+      //   component: <DiligentMinds />,
+      //   title: 'Diligent Minds',
+      //   exact: true,
+      //   nav:true,
+      // },
+      // {
+      //   path:"/eventstimeline",
+      //   component: <EventsTimeline />,
+      //   title: 'Events Timeline',
+      //   exact: true,
+      //   nav:true,
+      // },
+    ],
+  },
+  {
+    path: '/blog',
+    component: <Blog />,
+    title: 'Blog',
+    exact: true,
+    nav: true,
+  },
+  {
+    path: '/about',
+    component: <About />,
+    title: 'About Us',
+    exact: true,
+    nav: true,
+  },
+  {
+    path: '/contact',
+    component: <ContactPage />,
+    title: 'Contact Us',
+    exact: true,
+  },
+  {
+    path: '/privacypolicy',
+    component: <PrivacyPolicy />,
+    title: 'Privacy Policy',
+    exact: true,
+  },
+];
 
-  export default routes;
+export default routes;