Documentation page creation (#409)

* Removed the component of search bar and filter options

* Added documentation page

* Create the page + navigation component + content of the architecture

* Added a layout and created the home page header

* Added tutorial carousel

* Added the workshop slider

* Added transcript and steps to the query

* Added transcript options to the single tutorial page

* Added the timestamps for the videos

* Added checker for the transcripts

* Removed the checker for steps and transcript

* Added chapter for each steps of the videos

* Added coming soon to section on home

* update error message for vlab exist on creation (#399)

* 110/change user journey format 2 (#406)

* New format for user journey used in suggestions

* New format for user journey used in suggestions

* Fix error with localStorage and SSR

* Public project notebook update complete metadata (#405)

* Removed the component of search bar and filter options

* Added object of interest, scale and authors in addition to the readme in a dropdown

* Refine H1, H2 and H3 of the readMe

* Corrected import order

---------

Co-authored-by: Loris Olivier <53363974+loris-maru@users.noreply.github.com>

* 110/change user journey format 3 (#407)

* New format for user journey used in suggestions

* New format for user journey used in suggestions

* Fix issue for new user

* Public projects corrections ayima feedback (#412)

* Removed the component of search bar and filter options

* Correction round 1

* Correction round 2

* Notebook read more button style + unique key for tables rows

---------

Co-authored-by: Loris Olivier <53363974+loris-maru@users.noreply.github.com>

* Removed console log + import order

* Ran prettier and removed comments

* Fixes based on Fabien feedbacks

---------

Co-authored-by: Loris Olivier <53363974+loris-maru@users.noreply.github.com>
Co-authored-by: Bilal MEDDAH <b_meddah@esi.dz>
Co-authored-by: Tolokoban <contact@tolokoban.org>

Author: 4 people

public/images/documentation/documentation_image_header.jpg

@@ -0,0 +1,10 @@
+import DocumentationSideBloc from '@/components/documentation/global/side-bloc';
+
+export default function DocumentationLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="relative min-h-screen w-screen bg-primary-9 p-8">
+      <DocumentationSideBloc />
+      <main className="ml-[255px] w-2/3">{children}</main>
+    </div>
+  );
+}

src/app/app/documentation/layout.tsx

@@ -0,0 +1,5 @@
+import DocumentationHomepage from '@/components/documentation/main/Homepage';
+
+export default function DocumentationPage() {
+  return <DocumentationHomepage />;
+}

src/app/app/documentation/page.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useRef, useState } from 'react';
+
+import { useSanityForSingleTutorial } from '@/components/documentation/tutorials/fetch-single-tutorial';
+import SliderTimestamps from '@/components/documentation/tutorials/slider-timestamps';
+import TextContentBloc from '@/components/documentation/tutorials/TextContentBloc';
+
+export default function SingleTutorialPage() {
+  const params = useParams();
+  const slug = params.slug as string;
+
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [videoTime, setVideoTime] = useState<number>(0);
+
+  const content = useSanityForSingleTutorial({ slug });
+
+  const handleTimeUpdate = () => {
+    if (videoRef.current) {
+      setVideoTime(Math.floor(videoRef.current.currentTime));
+    }
+  };
+
+  if (!content) {
+    return (
+      <div className="container mx-auto p-4 text-white">
+        <h1 className="text-3xl font-bold">Tutorial Not Found</h1>
+        <p>The tutorial with slug &quot;{slug}&quot; could not be found or is still loading.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex w-full flex-col">
+      <header className="mb-4 w-full text-white">
+        <div className="text-base font-normal uppercase tracking-wider">Tutorial</div>
+        <h1 className="text-3xl font-bold">{content.title}</h1>
+      </header>
+      <div className="mb-4 w-full">
+        {content.url ? (
+          <video
+            playsInline
+            loop
+            controls
+            className="h-auto w-full rounded-lg border border-solid border-primary-7"
+            src={content.url}
+            ref={videoRef}
+            onTimeUpdate={handleTimeUpdate}
+          >
+            <track kind="captions" srcLang="en" label="English captions" />
+          </video>
+        ) : (
+          <p className="text-white">Video URL not available.</p>
+        )}
+      </div>
+      <SliderTimestamps
+        content={content.steps ?? []}
+        videoTime={videoTime}
+        setVideoTime={setVideoTime}
+        videoRef={videoRef}
+      />
+      <TextContentBloc content={content} />
+    </div>
+  );
+}

src/app/app/documentation/tutorials/[slug]/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Table, TableProps } from 'antd';
-import { useState } from 'react';
+import { Key, useState } from 'react';
 import { EModelsProps } from '../type/artifactsType';
 import columns from './columns/e-model-columns';
 
@@ -13,17 +13,17 @@ export default function EModelTable({ content }: { content: EModelsProps[] }) {
 
   const rowSelection: TableProps<EModelsProps>['rowSelection'] = {
     type: 'radio',
-    onChange: (selectedRowKeys: React.Key[], selectedRows: EModelsProps[]) => {
+    onChange: (selectedRowKeys: Key[], selectedRows: EModelsProps[]) => {
       setSelectedRow(selectedRows[0] || null);
     },
   };
 
   const handleDownload = () => {
-    console.log('Want to download:', selectedRow?.download);
     if (selectedRow?.downloadLink) {
       const link = document.createElement('a');
       link.href = selectedRow.download ?? '';
-      link.download = selectedRow.name || 'model'; // Use model name as filename or fallback to 'model'
+      link.download = selectedRow.name || 'model';
+
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);

src/components/PublicProjects/tables/e-model-table.tsx

@@ -1,23 +1,24 @@
 'use client';
 
-import { useAtomValue } from 'jotai';
-import { unwrap } from 'jotai/utils';
 import {
   DownOutlined,
   HomeOutlined,
   QuestionCircleOutlined,
   UpOutlined,
   UserOutlined,
 } from '@ant-design/icons';
+import { useAtomValue } from 'jotai';
+import { unwrap } from 'jotai/utils';
 import Link from 'next/link';
-
 import HelpMenu from '../HelpMenu';
+import DocumentationIcon from '../icons/DocumentationIcon';
+
 import UserMenu from '@/components/user-menu';
 import { LabItem, LinkItem, ProjectItem } from '@/components/VerticalLinks';
+import { useUnwrappedValue } from '@/hooks/hooks';
 import { virtualLabDetailAtomFamily } from '@/state/virtual-lab/lab';
 import { virtualLabProjectDetailsAtomFamily } from '@/state/virtual-lab/projects';
 import { classNames } from '@/util/utils';
-import { useUnwrappedValue } from '@/hooks/hooks';
 
 type SideMenuProps = {
   lab: LabItem;
@@ -99,6 +100,9 @@ export default function SideMenu({ lab, project, links }: SideMenuProps) {
         </div>
 
         <div className="mb-5 flex w-full flex-col items-center gap-2 overflow-hidden text-primary-3">
+          <Link href="/app/virtual-lab" className="group cursor-pointer">
+            <DocumentationIcon iconColor="white" />
+          </Link>
           <HelpMenu>
             <QuestionCircleOutlined className="group-hover:text-white" />
           </HelpMenu>

src/components/SideMenu/index.tsx

@@ -1,15 +1,27 @@
 'use client';
 
-import Link from 'next/link';
 import { HomeOutlined, QuestionCircleOutlined, UserOutlined } from '@ant-design/icons';
+import Link from 'next/link';
 
-import { classNames } from '@/util/utils';
-import UserMenu from '@/components/user-menu';
 import HelpMenu from '@/components/HelpMenu';
+import { DocumentationIcon } from '@/components/icons';
+import UserMenu from '@/components/user-menu';
+import { classNames } from '@/util/utils';
 
 export default function Profile() {
   return (
     <div className="mt-auto flex flex-col gap-4">
+      <Link
+        href="/app/documentation"
+        aria-label="documentation"
+        className={classNames(
+          'flex h-12 w-12 items-center justify-center p-3',
+          'text-white transition-all duration-200',
+          'border border-primary-6 hover:border-primary-5 hover:bg-primary-5'
+        )}
+      >
+        <DocumentationIcon className="h-auto w-5 text-white" />
+      </Link>
       <HelpMenu
         cls={{
           trigger: '!p-0',
@@ -19,7 +31,7 @@ export default function Profile() {
           className={classNames(
             'flex w-max items-center justify-center p-3',
             'text-white transition-all duration-200',
-            'border border-white hover:border-primary-5 hover:bg-primary-5'
+            'border border-primary-6 hover:border-primary-5 hover:bg-primary-5'
           )}
         >
           <QuestionCircleOutlined className="text-xl" />
@@ -32,7 +44,7 @@ export default function Profile() {
         className={classNames(
           'flex w-max items-center justify-center p-3',
           'text-white transition-all duration-200',
-          'border border-white hover:border-primary-5 hover:bg-primary-5'
+          'border border-primary-6 hover:border-primary-5 hover:bg-primary-5'
         )}
       >
         <HomeOutlined className="text-xl" />
@@ -46,7 +58,7 @@ export default function Profile() {
           className={classNames(
             'flex w-max items-center justify-center p-3',
             'text-white transition-all duration-200',
-            'border border-white hover:border-primary-5 hover:bg-primary-5'
+            'border border-primary-6 hover:border-primary-5 hover:bg-primary-5'
           )}
         >
           <UserOutlined className="text-xl" />