Feature/add tina

.env.dist

@@ -15,3 +15,5 @@ SENTRY_PROJECT=
 NEXT_PUBLIC_SENTRY_DSN=
 SENTRY_LOG_LEVEL=[info|debug]
 SENTRY_AUTH_TOKEN=
+NEXT_PUBLIC_TINA_TOKEN=
+NEXT_PUBLIC_TINA_CLIENTID=

.tina/blocks/chapters.ts

@@ -0,0 +1,35 @@
+import type { TinaTemplate } from "tinacms";
+import { emptySlideTemplate, chapterHeading } from "./slides";
+
+export const chapter: TinaTemplate = {
+  name: "chapter",
+  label: "Chapitre",
+  ui: {
+    defaultItem: {
+      title: "Titre du chapitre",
+      subtitle: "Sous titre du chapitre",
+    },
+    itemProps: (item) => {
+      return { label: item?.title };
+    },
+  },
+  fields: [
+    {
+      type: "string",
+      label: "Titre",
+      name: "title",
+    },
+    {
+      type: "string",
+      label: "Sous titre",
+      name: "subtitle",
+    },
+    {
+      type: "object",
+      list: true,
+      name: "slides",
+      label: "Slides",
+      templates: [emptySlideTemplate, chapterHeading],
+    },
+  ],
+};

.tina/blocks/slides.ts

@@ -0,0 +1,71 @@
+import type { TinaTemplate } from "tinacms";
+import { CheckListSchema } from "../../src/components/templates/schema";
+
+export const emptySlideTemplate: TinaTemplate = {
+  name: "empty",
+  label: "Slide libre",
+  ui: {
+    defaultItem: {
+      title: "Nouvelle slide libre",
+      subtitle: "Sous titre slide",
+    },
+    itemProps: (item) => {
+      return { label: item?.title };
+    },
+  },
+  fields: [
+    {
+      type: "string",
+      label: "Titre",
+      name: "title",
+    },
+    {
+      type: "string",
+      label: "Sous titre",
+      name: "subtitle",
+    },
+    {
+      type: "rich-text",
+      label: "Contenu de la slide",
+      name: "body",
+      templates: [CheckListSchema],
+    },
+    {
+      type: "string",
+      label: "Notes",
+      name: "notes",
+    },
+  ],
+};
+
+export const chapterHeading: TinaTemplate = {
+  name: "chapterHeading",
+  label: "Titre Chapitre",
+  ui: {
+    defaultItem: {
+      title: "Nouvelle slide titre chapitre",
+      subtitle: "Sous titre slide",
+    },
+    itemProps: (item) => {
+      return { label: item?.title };
+    },
+  },
+  fields: [
+    {
+      type: "string",
+      label: "Titre",
+      name: "title",
+    },
+    {
+      type: "string",
+      label: "Sous titre",
+      name: "subtitle",
+    },
+    {
+      type: "image",
+      label: "Image d'arrière plan",
+      name: "imgSrc",
+      isBody: true,
+    },
+  ],
+};

.tina/components/TinaDynamicProvider.js

@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+const TinaProvider = dynamic(() => import('./TinaProvider'), { ssr: false })
+import { TinaEditProvider } from 'tinacms/dist/edit-state'
+
+const DynamicTina = ({ children }) => {
+  return (
+    <>
+      <TinaEditProvider editMode={<TinaProvider>{children}</TinaProvider>}>
+        {children}
+      </TinaEditProvider>
+    </>
+  )
+}
+
+export default DynamicTina

.tina/components/TinaProvider.js

@@ -0,0 +1,14 @@
+import TinaCMS from "tinacms";
+import { tinaConfig } from "../schema.ts";
+
+// Importing the TinaProvider directly into your page will cause Tina to be added to the production bundle.
+// Instead, import the tina/provider/index default export to have it dynamially imported in edit-moode
+/**
+ *
+ * @private Do not import this directly, please import the dynamic provider instead
+ */
+const TinaProvider = ({ children }) => {
+  return <TinaCMS {...tinaConfig}>{children}</TinaCMS>;
+};
+
+export default TinaProvider;

.tina/schema.ts

@@ -0,0 +1,86 @@
+import { defineSchema, defineConfig } from "tinacms";
+import { client } from "./__generated__/client";
+import slugify from "slugify";
+import { chapter } from "./blocks/chapters";
+
+const branch =
+  process.env.NEXT_PUBLIC_TINA_BRANCH ||
+  process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF ||
+  process.env.HEAD ||
+  "main";
+
+const schema = defineSchema({
+  // See https://tina.io/docs/tina-cloud/connecting-site/ for more information about this config
+  config: {
+    token: process.env.NEXT_PUBLIC_TINA_TOKEN, // generated on app.tina.io,
+    clientId: process.env.NEXT_PUBLIC_TINA_CLIENTID, // generated on app.tina.io
+    branch,
+    media: {
+      tina: {
+        publicFolder: "public",
+        mediaRoot: "uploads",
+      },
+    },
+  },
+
+  collections: [
+    {
+      label: "Cours",
+      name: "course",
+      path: "courses",
+      format: "mdx",
+      ui: {
+        filename: {
+          readonly: true,
+          // Example of using a custom slugify function
+          slugify: (values) => {
+            // Values is an object containing all the values of the form. In this case it is {title?: string, topic?: string}
+            return `${
+              values?.course_title
+                ? slugify(values?.course_title?.toLowerCase())
+                : "titre_du_cours"
+            }`;
+          },
+        },
+      },
+      fields: [
+        {
+          type: "string",
+          label: "Titre du cours",
+          name: "course_title",
+          required: true,
+        },
+        {
+          type: "string",
+          label: "Sous titre du cours",
+          name: "course_subtitle",
+        },
+        {
+          type: "string",
+          label: "Description du cours",
+          name: "course_description",
+        },
+        {
+          type: "object",
+          list: true,
+          name: "chapters",
+          label: "Chapitres",
+          templates: [chapter],
+        },
+      ],
+    },
+  ],
+});
+
+export default schema;
+
+export const tinaConfig = defineConfig({
+  client,
+  schema,
+  //@ts-ignore
+  cmsCallback: (cms) => {
+    import("react-tinacms-editor").then(({ MarkdownFieldPlugin }) => {
+      cms.plugins.add(MarkdownFieldPlugin);
+    });
+  },
+});

package.json

@@ -2,11 +2,11 @@
   "name": "with-typescript",
   "version": "1.0.0",
   "scripts": {
-    "dev": "nodemon server.js & yarn ts:watch",
+    "dev": "tinacms dev -c \"nodemon server.js & yarn ts:watch\"",
     "ts": "tsc --noEmit --incremental",
     "ts:watch": "yarn ts --watch",
-    "build": "next build && tsc --project tsconfig.server.json",
-    "start": "NODE_ENV=production node dist/server.js",
+    "build": "tinacms build && next build && tsc --project tsconfig.server.json",
+    "start": "tinacms build && NODE_ENV=production node dist/server.js",
     "type-check": "tsc",
     "export": "ts-node -T scripts/export.ts",
     "create-admin-user": "ts-node -T scripts/createAdminUser.ts",
@@ -30,6 +30,7 @@
     "@sentry/cli": "^1.68.0",
     "@sentry/nextjs": "^6.11.0",
     "@sentry/node": "^6.11.0",
+    "@tinacms/cli": "^0.61.23",
     "@types/express": "^4.17.13",
     "@types/mdx-js__react": "^1.5.3",
     "@types/mermaid": "^8.2.7",
@@ -53,11 +54,14 @@
     "react-icons": "4.2.0",
     "react-swipeable": "^6.1.2",
     "react-syntax-highlighter": "^15.4.3",
+    "react-tinacms-editor": "^0.53.26",
     "slugify": "^1.6.0",
     "socket.io": "^4.1.3",
     "socket.io-client": "^4.1.3",
+    "styled-components": "^5.3.6",
     "superjson": "^1.7.5",
     "swr": "^1.3.0",
+    "tinacms": "^0.69.17",
     "use-timer": "^2.0.1",
     "yup": "^0.32.11"
   },

src/components/mdx/ChapterHeading.tsx

@@ -6,7 +6,7 @@ type ChapterHeadingProps = {
   title: string;
   subtitle: string;
   bgGradientColors?: string[] | null;
-  children: any;
+  children?: any;
 };
 
 const ChapterHeading: React.FC<ChapterHeadingProps & FlexProps> = ({

src/components/mdx/ChaptersMenu.tsx

@@ -66,7 +66,7 @@ const ChaptersMenu: React.FC<ChaptersMenuProps> = ({
             onClick={() => handleChapterClick(chapter)}
           >
             <Text fontSize="xs">
-              {chaptersInfo[i]?.title ?? `Chapitre ${i + 1}`}
+              {(chaptersInfo && chaptersInfo[i]?.title) ?? `Chapitre ${i + 1}`}
             </Text>
             <Text fontWeight="bold" fontSize="lg">
               {chapter.replace(/^[\d-]*\s*/, "")}

src/components/mdx/MDXProvider.tsx

@@ -24,7 +24,7 @@ type ChildrenProp = {
   courseMap?: Boolean;
 };
 
-export const mdComponents = {
+export const classicElements = {
   // huge headings
   h1: (props: any) => <Heading fontSize="2.4em" {...props} />,
   h2: (props: any) => <Heading fontSize="2em" {...props} />,
@@ -71,6 +71,23 @@ export const mdComponents = {
       {...props}
     />
   ),
+  SlideHeader: (props: any) => <SlideHeader {...props} />,
+  Image: (props: any) => (
+    <Image
+      objectFit="contain"
+      maxHeight="90%"
+      maxWidth="100%"
+      flex="0 auto"
+      // m="md"
+      alt="image mdx"
+      marginX="auto"
+      {...props}
+    />
+  ),
+};
+
+export const mdComponents = {
+  ...classicElements,
   // ChakraUI
   Box,
   Flex,
@@ -92,7 +109,7 @@ export const mdComponents = {
   // Custom components
   ChapterHeading,
   SlideHeader,
-  // slides wrapper
+  // Chapter wrapper
   Slides,
   Notes: (props: any) => (
     <Text width="100%" height="100%" p="1em" fontSize="1.4em" {...props} />
@@ -113,12 +130,14 @@ export const courseMapComponents = {
   ),
 };
 
-const MDXProvider = ({ children, courseMap }: ChildrenProp) => (
-  <MDXDefaultProvider
-    components={{ ...mdComponents, ...(courseMap && courseMapComponents) }}
-  >
-    {children}
-  </MDXDefaultProvider>
-);
+const MDXProvider = ({ children, courseMap }: ChildrenProp) => {
+  return (
+    <MDXDefaultProvider
+      components={{ ...mdComponents, ...(courseMap && courseMapComponents) }}
+    >
+      {children}
+    </MDXDefaultProvider>
+  );
+};
 
 export default MDXProvider;

src/components/mdx/Slide.tsx

@@ -30,9 +30,9 @@ const Slide: React.FC<SlideProps> = ({
   printPagination,
   containerProps,
 }) => {
-  const hasHeader = children && children[0] && children[0].props.slideTitle;
+  const hasHeader = children && children[0] && children[0]?.props?.slideTitle;
   const isChapterHeading =
-    children && children[0] && children[0].props.mdxType === "ChapterHeading";
+    children && children[0] && children[0]?.props?.mdxType === "ChapterHeading";
 
   const header = !isChapterHeading && hasHeader ? children.shift() : null;
   const fontSize = () => {
@@ -43,7 +43,6 @@ const Slide: React.FC<SlideProps> = ({
   const { isLandscape, ratio } = useSlideRatioStyle();
   const { currentMode } = useSlidesContext();
   const isSlideshow = currentMode !== "speaker";
-
   return (
     <Flex
       className="slide"
@@ -68,7 +67,7 @@ const Slide: React.FC<SlideProps> = ({
           width="100%"
         >
           <SlideHeader
-            slideTitle={hasHeader && header ? header.props.slideTitle : title}
+            slideTitle={hasHeader && header ? header?.props?.slideTitle : title}
           />
           <Flex
             flexDirection="column"