Modifications user guide (#5207)

- Modified layout and responsive
- Added remaining user guide cards
- Added new table of content:


https://github.com/twentyhq/twenty/assets/102751374/007118e5-60f2-4572-90cf-339c134f23c4

-Added fade-in:


https://github.com/twentyhq/twenty/assets/102751374/0669c06d-3eab-484c-a5b5-3857c68f42b5

---------

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>

packages/twenty-website/src/content/user-guide/constants/UserGuideHomeCards.ts

@@ -1,34 +0,0 @@
-export type UserGuideHomeCardsType = {
-  url: string;
-  title: string;
-  subtitle: string;
-  image: string;
-};
-
-export const USER_GUIDE_HOME_CARDS: UserGuideHomeCardsType[] = [
-  {
-    url: 'what-is-twenty',
-    title: 'What is Twenty',
-    subtitle:
-      "A brief on Twenty's commitment to reshaping CRM with Open Source",
-    image: '/images/user-guide/home/what-is-twenty.png',
-  },
-  {
-    url: 'create-workspace',
-    title: 'Create a Workspace',
-    subtitle: 'Custom objects store unique info in workspaces.',
-    image: '/images/user-guide/home/create-a-workspace.png',
-  },
-  {
-    url: 'import-export-data',
-    title: 'Import your data',
-    subtitle: 'Easily create a note to keep track of important information.',
-    image: '/images/user-guide/home/import-your-data.png',
-  },
-  {
-    url: 'objects',
-    title: 'Custom Objects',
-    subtitle: 'Custom objects store unique info in workspaces.',
-    image: '/images/user-guide/home/custom-objects.png',
-  },
-];

packages/twenty-website/src/content/user-guide/constants/UserGuideIndex.ts

@@ -1,35 +1,26 @@
-export type IndexSubtopic = {
-  title: string;
-  url: string;
-};
-
-export type IndexHeading = {
-  [heading: string]: IndexSubtopic[];
-};
-
 export const USER_GUIDE_INDEX = {
   'Getting Started': [
-    { title: 'What is Twenty', url: 'what-is-twenty' },
-    { title: 'Create a Workspace', url: 'create-workspace' },
+    { fileName: 'what-is-twenty' },
+    { fileName: 'create-workspace' },
   ],
   Objects: [
-    { title: 'Objects', url: 'objects' },
-    { title: 'Fields', url: 'fields' },
-    { title: 'Views, Sort and Filter', url: 'views-sort-filter' },
-    { title: 'Table Views', url: 'table-views' },
-    { title: 'Kanban Views', url: 'kanban-views' },
-    { title: 'Import/Export Data', url: 'import-export-data' },
+    { fileName: 'objects' },
+    { fileName: 'fields' },
+    { fileName: 'views-sort-filter' },
+    { fileName: 'table-views' },
+    { fileName: 'kanban-views' },
+    { fileName: 'import-export-data' },
   ],
   Functions: [
-    { title: 'Emails', url: 'emails' },
-    { title: 'Notes', url: 'notes' },
-    { title: 'Tasks', url: 'tasks' },
-    { title: 'Integrations', url: 'integrations' },
-    { title: 'API and Webhooks', url: 'api-webhooks' },
+    { fileName: 'emails' },
+    { fileName: 'notes' },
+    { fileName: 'tasks' },
+    { fileName: 'integrations' },
+    { fileName: 'api-webhooks' },
   ],
   Other: [
-    { title: 'Glossary', url: 'glossary' },
-    { title: 'Tips', url: 'tips' },
-    { title: 'Github', url: 'github' },
+    { fileName: 'glossary' },
+    { fileName: 'tips' },
+    { fileName: 'github' },
   ],
 };

packages/twenty-website/src/content/user-guide/constants/getUserGuideArticles.tsx

@@ -0,0 +1,36 @@
+import fs from 'fs';
+import matter from 'gray-matter';
+
+import { USER_GUIDE_INDEX } from '@/content/user-guide/constants/UserGuideIndex';
+
+export interface UserGuideArticlesProps {
+  title: string;
+  info: string;
+  image: string;
+  fileName: string;
+  topic: string;
+}
+
+export function getUserGuideArticles() {
+  const guides: UserGuideArticlesProps[] = [];
+
+  for (const [topic, files] of Object.entries(USER_GUIDE_INDEX)) {
+    files.forEach(({ fileName }) => {
+      const filePath = `src/content/user-guide/${fileName}.mdx`;
+      if (fs.existsSync(filePath)) {
+        const fileContent = fs.readFileSync(filePath, 'utf-8');
+        const { data: frontmatter } = matter(fileContent);
+
+        guides.push({
+          title: frontmatter.title || '',
+          info: frontmatter.info || '',
+          image: frontmatter.image || '',
+          fileName: fileName,
+          topic: topic,
+        });
+      }
+    });
+  }
+
+  return guides;
+}

packages/twenty-website/src/content/user-guide/constants/groupArticlesByTopic.tsx

@@ -0,0 +1,14 @@
+import { UserGuideArticlesProps } from '@/content/user-guide/constants/getUserGuideArticles';
+
+export const groupArticlesByTopic = (
+  items: UserGuideArticlesProps[],
+): Record<string, UserGuideArticlesProps[]> => {
+  return items.reduce(
+    (acc, item) => {
+      acc[item.topic] = acc[item.topic] || [];
+      acc[item.topic].push(item);
+      return acc;
+    },
+    {} as Record<string, UserGuideArticlesProps[]>,
+  );
+};