feat: Display landing page only in demo mode (#226)

frontend/messages/en.json

@@ -84,7 +84,7 @@
     "languages": "Languages"
   },
   "Toast": {
-    "need_signed_in": "You need signed in",
+    "need_signed_in": "You need to sign in",
     "session_expired": "Session expired"
   },
   "Auth": {

frontend/src/app/[locale]/HeaderNavbarMenu.tsx

@@ -24,6 +24,7 @@ import DropdownAccount from './DropdownAccount';
 import DropdownLanguage from './DropdownLanguage';
 import UserAvatar from '@/components/UserAvatar';
 import { LocaleCodeType } from '@/types/locale';
+import Config from '@/config/config';
 
 type NabbarMenuMessages = {
   projects: string;
@@ -54,6 +55,10 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
       label: messages.projects,
       isExternal: false,
     },
+  ];
+
+  if (Config.isDemoSite) {
+    commonLinks.push(
       {
         uid: 'docs',
         href: 'https://kimatata.github.io/unittcms/docs/getstarted/selfhost',
@@ -65,8 +70,9 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
         href: 'https://kimatata.github.io/unittcms/docs/roadmap/',
         label: messages.roadmap,
         isExternal: true,
-    },
+      }
-  ];
+    );
+  }
 
   const router = useRouter();
   const pathname = usePathname();

frontend/src/app/[locale]/LandingPage.tsx

@@ -0,0 +1,106 @@
+import { useTranslations } from 'next-intl';
+import { Divider } from '@heroui/react';
+import PaneMainTitle from './PaneMainTitle';
+import PaneMainFeatures from './PaneMainFeatures';
+import DemoImage from './DemoImage';
+import { title, subtitle } from '@/components/primitives';
+import { PageType } from '@/types/base';
+import { LocaleCodeType } from '@/types/locale';
+
+export default function LandingPage({ params }: PageType) {
+  const t = useTranslations('Index');
+
+  const demoImages = [
+    {
+      uid: 'project',
+      title: t('project_title'),
+      subTitle: t('project_subtitle'),
+    },
+    {
+      uid: 'case',
+      title: t('case_management_title'),
+      subTitle: t('case_management_subtitle'),
+    },
+    {
+      uid: 'run',
+      title: t('run_management_title'),
+      subTitle: t('run_management_subtitle'),
+    },
+    {
+      uid: 'member',
+      title: t('member_management_title'),
+      subTitle: t('member_management_subtitle'),
+    },
+  ];
+
+  return (
+    <section className="mx-auto max-w-screen-xl my-12">
+      <div className="flex flex-wrap">
+        <div className="w-full md:w-7/12 order-last md:order-first p-4">
+          <PaneMainTitle locale={params.locale as LocaleCodeType} />
+        </div>
+
+        <div className="w-full md:w-5/12 p-4">
+          <div
+            style={{
+              position: 'relative',
+              textAlign: 'center',
+            }}
+          >
+            <span
+              style={{
+                fontSize: '10rem',
+                position: 'relative',
+                zIndex: 1,
+              }}
+            >
+              📋
+            </span>
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                filter: 'blur(48px)',
+                zIndex: 0,
+                background: 'linear-gradient(to bottom, #ffecd2, #fcb69f)',
+              }}
+            ></div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        className="flex flex-wrap flex-col items-center"
+        style={{
+          marginTop: '6rem',
+        }}
+      >
+        <PaneMainFeatures />
+      </div>
+
+      <Divider className="my-12" />
+      <div className="flex flex-wrap lg:text-left text-center">
+        {demoImages.map((demoImage) => (
+          <div key={demoImage.uid} className="flex flex-wrap">
+            <div className="w-full lg:w-5/12 p-4">
+              <h2 className={title({ size: 'sm', color: 'pink' })}>{demoImage.title}</h2>
+              <h4 className={subtitle({ class: 'mt-4' })}>{demoImage.subTitle}</h4>
+            </div>
+
+            <div className="flex justify-center w-full lg:w-7/12 p-4">
+              <DemoImage imageName={demoImage.uid} altText={demoImage.title} />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <Divider className="my-12" />
+      <div className="w-full text-center py-2">
+        <div>Copyright © 2024-present UnitTCMS</div>
+      </div>
+    </section>
+  );
+}

frontend/src/app/[locale]/page.tsx

@@ -1,106 +1,13 @@
-import { useTranslations } from 'next-intl';
+import { redirect } from 'next/navigation'
-import { Divider } from '@heroui/react';
-import { title, subtitle } from '@/components/primitives';
-import PaneMainTitle from './PaneMainTitle';
-import PaneMainFeatures from './PaneMainFeatures';
-import DemoImage from './DemoImage';
 import { PageType } from '@/types/base';
-import { LocaleCodeType } from '@/types/locale';
+import Config from '@/config/config';
+import LandingPage from '@/src/app/[locale]/LandingPage';
 
 export default function Home({ params }: PageType) {
-  const t = useTranslations('Index');
 
-  const demoImages = [
+  if (!Config.isDemoSite) {
-    {
+    redirect(`/${params.locale}/projects`)
-      uid: 'project',
+  }
-      title: t('project_title'),
-      subTitle: t('project_subtitle'),
-    },
-    {
-      uid: 'case',
-      title: t('case_management_title'),
-      subTitle: t('case_management_subtitle'),
-    },
-    {
-      uid: 'run',
-      title: t('run_management_title'),
-      subTitle: t('run_management_subtitle'),
-    },
-    {
-      uid: 'member',
-      title: t('member_management_title'),
-      subTitle: t('member_management_subtitle'),
-    },
-  ];
 
-  return (
+  return <LandingPage params={params} />
-    <section className="mx-auto max-w-screen-xl my-12">
-      <div className="flex flex-wrap">
-        <div className="w-full md:w-7/12 order-last md:order-first p-4">
-          <PaneMainTitle locale={params.locale as LocaleCodeType} />
-        </div>
-
-        <div className="w-full md:w-5/12 p-4">
-          <div
-            style={{
-              position: 'relative',
-              textAlign: 'center',
-            }}
-          >
-            <span
-              style={{
-                fontSize: '10rem',
-                position: 'relative',
-                zIndex: 1,
-              }}
-            >
-              📋
-            </span>
-            <div
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                filter: 'blur(48px)',
-                zIndex: 0,
-                background: 'linear-gradient(to bottom, #ffecd2, #fcb69f)',
-              }}
-            ></div>
-          </div>
-        </div>
-      </div>
-
-      <div
-        className="flex flex-wrap flex-col items-center"
-        style={{
-          marginTop: '6rem',
-        }}
-      >
-        <PaneMainFeatures />
-      </div>
-
-      <Divider className="my-12" />
-      <div className="flex flex-wrap lg:text-left text-center">
-        {demoImages.map((demoImage) => (
-          <div key={demoImage.uid} className="flex flex-wrap">
-            <div className="w-full lg:w-5/12 p-4">
-              <h2 className={title({ size: 'sm', color: 'pink' })}>{demoImage.title}</h2>
-              <h4 className={subtitle({ class: 'mt-4' })}>{demoImage.subTitle}</h4>
-            </div>
-
-            <div className="flex justify-center w-full lg:w-7/12 p-4">
-              <DemoImage imageName={demoImage.uid} altText={demoImage.title} />
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <Divider className="my-12" />
-      <div className="w-full text-center py-2">
-        <div>Copyright © 2024-present UnitTCMS</div>
-      </div>
-    </section>
-  );
 }