Feat(slides) : Added Slide system + finish parsing markdown + presentation mode

index.ts

@@ -1,13 +1,13 @@
-import { app, BrowserWindow } from "electron";
+import { app, BrowserWindow, protocol } from "electron";
 import { join } from "path";
 import { createArchive } from "./src/main/createArchive";
 import { openFileDialog, saveFileDialog } from "./src/main/dialogs";
-
+import url from "url"
 import {
     deleteCodePrezTempFolder,
     openCodePrezArchive,
 } from "./src/main/openAndCloseCodePrezFiles";
-import { markdownHighlight } from "./src/renderer/utils/utils";
+import { markdownRenderer } from "./src/main/markdownRenderer"
 
 const createWindow = () => {
     const win = new BrowserWindow({
@@ -48,15 +48,25 @@ const createWindow = () => {
         if (!archivePath) return;
 
         const presentationData = await openCodePrezArchive(archivePath);
-        const createSection = separate(presentationData);
+        const createSection = separateAndRender(presentationData);
+
+        if (!presentationData) return;
 
-        if (!presentationData) {
-            return null;
-        }
         presentationData.presentationFileContent = createSection || ([] as any);
         win.webContents.send("set-codeprez-data", presentationData);
     });
 
+    //Set to maximize
+    win.webContents.ipc.on("maximized-app", () => {
+        win.setFullScreen(false)
+    })
+
+    //Set to fullscreen
+    win.webContents.ipc.on("fullscreen-app", () => {
+        win.setFullScreen(true)
+    })
+
+
     win.once("ready-to-show", async () => {
         win.show();
 
@@ -70,16 +80,29 @@ const createWindow = () => {
     return win;
 };
 
-const separate = (data: any) => {
+const separateAndRender = (data: any) => {
     const slides = data?.presentationFileContent?.split(/^---$/gm);
+
     const createSection = slides?.map((slide: any, index: any) => {
-        const dataMd: string = markdownHighlight().render(slide);
+        const dataMd: string = markdownRenderer(data.presentationPath).render(slide);
         return dataMd;
     });
     return createSection;
 };
+
 const initialize = async () => {
-    await app.whenReady();
+    await app.whenReady().then(() => {
+        protocol.registerFileProtocol('codeprez', (request, callback) => {
+            try {
+                const filePath = url.fileURLToPath('file://' + request.url.slice('codeprez:/'.length))
+                callback(filePath)
+            }
+            catch (error) {
+                console.error(error)
+                callback("404")
+            }
+        })
+    });
     const win = createWindow();
 };
 

package.json

@@ -53,6 +53,7 @@
   },
   "devDependencies": {
     "@types/decompress": "^4.2.4",
+    "@types/markdown-it": "^12.2.3",
     "electron": "^23.1.1"
   }
 }

src/App.tsx

@@ -5,6 +5,7 @@ import { HashRouter, Route, Routes } from "react-router-dom";
 import { SideBar } from "./components/SideBar";
 import { Home } from "./components/Home";
 import { Presentation } from "./components/Presentation";
+import { SlideViewer } from "./renderer/components/SlideViewer"
 import "highlight.js/styles/github.css";
 
 function App() {
@@ -16,13 +17,18 @@ function App() {
                 height: "100%",
             }}
         >
+            <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+            />
             <HashRouter>
                 <Routes>
                     <Route path="/" Component={SideBar}>
                         <Route path="/" Component={Home}></Route>
                         <Route path="/add" Component={NewPrez}></Route>
+                        <Route path="/prez" Component={Presentation}></Route>
                     </Route>
-                    <Route path="/prez" Component={Presentation}></Route>
+                    <Route path="/viewer" Component={SlideViewer}></Route>
                 </Routes>
             </HashRouter>
         </div>

src/assets/css/Home.css

@@ -28,3 +28,15 @@
     color: var(--pink);
     border-color: var(--pink);
 }
+
+.go-to-viewer-button {
+    color:var(--black-grey);
+    border-color: var(--black-grey);
+    background-color: var(--pink);
+}
+
+.go-to-viewer-button:hover {
+    background-color: var(--black-grey);
+    color: var(--pink);
+    border-color: var(--pink);
+}

src/assets/css/NewPrez.css

@@ -41,9 +41,6 @@
     margin: 1em 0;
 }
 
-
-
-
 .sendingButton{
     cursor: pointer;
     border:none;

src/assets/css/Presentation.css

@@ -0,0 +1,23 @@
+.presentation-page {
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
+}
+
+.presentation-page::-webkit-scrollbar {
+    width: 5px;
+}
+
+.presentation-page::-webkit-scrollbar-thumb {
+    background: #666; 
+}
+
+.presentation-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.authors {
+    display: flex;
+}

src/assets/css/SideBar.css

@@ -13,6 +13,13 @@
     gap:1em;
 }
 
+.sidebar .slide-preview {
+    max-width: inherit;
+    max-height: inherit;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
 button{
     cursor: pointer;
     display: flex;

src/assets/css/Slide.css

@@ -0,0 +1,80 @@
+section {
+    /* height: 100vh; */
+    border-radius: 10px;
+    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    /* flex-wrap: wrap; */
+    background: var(--black-grey);
+    box-sizing: border-box;
+    /* padding: 0 40px; */
+}
+
+h1 {
+    font-size: 2em;
+}
+
+section p img {
+    max-height: 80%;
+    max-width: 80%;
+}
+
+.slide-container p {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10px;
+}
+
+pre {
+    border-radius: 10px;
+    min-width: 20%;
+    max-width: 90%;
+    max-height: 60%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+pre code {
+    border-radius: inherit;
+    width: 100%;
+    max-height: 100%;
+    overflow: auto;
+}
+
+strong {
+    margin: 0 4px;
+}
+
+code:not(pre > code) {
+    background-color: var(--dark-grey);
+    border-radius: 5px;
+    padding: 2px;
+    color: var(--white);
+    margin: 2px;
+}
+
+pre button {
+    width: 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.scale-preview {
+    transform : scale(0.85);
+}
+
+.scale-sidebar {
+    transform : scale(0.7);
+    /* height: 300px; */
+    width: 100%;
+    max-height: 300px;
+}

src/assets/css/SlideViewer.css

@@ -0,0 +1,27 @@
+.viewer-container {
+    height: 100vh;
+    scroll-snap-type: y mandatory;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+
+    -ms-overflow-style: none;
+    scrollbar-width: none; /* Firefox */
+}
+
+.viewer-container::-webkit-scrollbar {
+    width: 5px;
+}
+
+.viewer-container::-webkit-scrollbar-thumb {
+    background: #666; 
+}
+
+.viewer-container:focus {
+    outline:none;
+}
+
+.viewer-slide {
+    scroll-snap-align: start;
+    box-sizing: border-box;
+}

src/assets/css/index.css

@@ -27,15 +27,17 @@ body {
 
   background-color: var(--background-color);
   color: var(--white);
+  overflow: hidden;
 }
 
-h1 {
+.new-prez h1, .home h1, .presentation-title {
   border:#B4B4B4 1px solid;
   text-align: center;
   color: white;
   padding:0.5em 1em;
   margin:10px;
   border-radius: 10px;
+  text-decoration: none;
 }
 
 

src/components/NavigationButton.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 interface NavigationButtonProp {
-  goTo: 'prez' | 'add';
+  goTo: 'prez' | 'add' |'viewer';
   withIcon?: boolean;
 }
 
@@ -10,20 +10,32 @@ export const NavigationButton: FC<NavigationButtonProp> = ({
   withIcon,
 }) => {
   const navigate = useNavigate();
+  const {state} = useLocation();
+
   const createCodePrez = () => {
     navigate('/add');
   };
 
-  const launchPresentation = () => {
-    console.log("launchPrez");
-    navigate('/prez');
+  const openPresentation = () => {
+    window.api.getPresentationData(navigateToPresentation);
   };
+
+  const navigateToPresentation = (data: PresentationData) => {
+    navigate('/prez', {
+      state: data
+    });
+  }
+
+  const playPresentation = () => {
+    navigate('/viewer', {state: state});
+  }
+
   if (goTo === 'prez') {
     return (
-      <button onClick={launchPresentation} className="go-to-prez-button">
+      <button onClick={openPresentation} className="go-to-prez-button">
         Ouvrir une présentation
         {withIcon && (
-          <span className="material-symbols-outlined">play_arrow</span>
+          <span className="material-symbols-outlined">slide_library</span>
         )}
       </button>
     );
@@ -36,6 +48,15 @@ export const NavigationButton: FC<NavigationButtonProp> = ({
         )}
       </button>
     );
+  } else if (goTo == "viewer") {
+    return (
+      <button onClick={playPresentation} className="go-to-viewer-button">
+        Lancer la présentation
+        {withIcon && (
+          <span className="material-symbols-outlined">play_arrow</span>
+        )}
+      </button>
+    )
   }
   return <></>;
 };