implemented basic rendering of slides

src/ui/src/assets/css/_mixins.scss

@@ -0,0 +1,3 @@
+@function color($color) {
+	@return var(--color-#{$color});
+}	

src/ui/src/assets/css/_scrollbars.scss

@@ -0,0 +1,14 @@
+*::-webkit-scrollbar {
+	width: 4px;
+}
+
+*::-webkit-scrollbar-track {
+	background: color(background);
+}
+
+*::-webkit-scrollbar-thumb {
+	background-color: color(scrollbar);
+	border-radius: 20px;
+	border: solid 4px color(background);
+	padding: 2px;
+}

src/ui/src/assets/css/_slide.scss

@@ -0,0 +1,5 @@
+.slide {
+	user-select: none;
+	background: color(background);
+	color: color(foreground);
+}

src/ui/src/assets/css/_slidesList.scss

@@ -1,4 +1,5 @@
 .slides-list {
-	background: #222;
+	//background: #222;
+	background: color(lighterBackground);
 	overflow-y: auto;
 }

src/ui/src/assets/css/_variables.scss

@@ -0,0 +1,13 @@
+$colors : (
+	//background : #272822,
+	background        : #1a1a1a,
+	foreground        : #ddd,
+	lighterBackground : #333,
+	scrollbar         : rgba(255,255,255,0.2)
+);
+
+:root {
+	@each $colorName, $colorValue in $colors {
+		--color-#{$colorName} : #{$colorValue};
+	}
+}

src/ui/src/assets/css/ation.scss

@@ -1,5 +1,11 @@
+
+@import "variables";
+@import "mixins";
+@import "scrollbars";
+
 @import "window";
 @import "slidesList";
+@import "slide";
 
 * {
 	box-sizing: border-box;
@@ -12,4 +18,5 @@ html, body {
 body {
 	margin: 0;
 	padding: 0;
+	background: color(background);
 }

src/ui/src/components/Ation.js

@@ -2,6 +2,7 @@ import React, {useEffect, useState} from "react";
 
 import SlidesList from "./SlidesList";
 import Modes      from "../models/Modes";
+import Slide      from "./Slide";
 
 const Ation = () => {
 	const [mode, setMode] = useState(Modes.NORMAL);
@@ -46,7 +47,7 @@ const Ation = () => {
 		<section className={`window${mode === Modes.PRESENT ? " fullscreen" : ""}`}>
 			<SlidesList deck={deck} />
 			<main className="main">
-				MAIN
+				<Slide data={deck[3] || null} />
 				<button onClick={openFile}>open</button>	
 			</main>
 		</section>

src/ui/src/components/Slide.js

@@ -1,18 +1,13 @@
 import React from "react";
 
+import SlideItem from "./SlideItem";
+
 const Slide = ({data}) => {
-	console.log(data);
 	return (
 		<article className="slide">
-			{data.content.map(item => {
+			{data?.content.map((item, index) =>
-				switch (item.type) {
+				<SlideItem item={item} key={index} />
-					case "heading":
+			)}
-						return <h1>{item.raw}</h1>
-						break;
-					default:
-						return JSON.stringify(item);
-				}
-			})}
 		</article>
 	);
 };

src/ui/src/components/SlideItem.js

@@ -0,0 +1,76 @@
+import React, {useMemo} from "react";
+
+import SyntaxHighlighter from "react-syntax-highlighter"
+import {monokai}         from "react-syntax-highlighter/dist/esm/styles/hljs";
+
+const Children = ({items}) => {
+	if (items instanceof Array)
+		return <>{items.map((child, index) => <SlideItem item={child} key={index} />)}</>;
+	return null;
+};
+
+const SlideItem = ({item}) => {
+	const content = useMemo(() => {
+		console.log("ITEM",item);
+		switch (item.type) {
+			case "heading":
+				return <h1><Children items={item.tokens} /></h1>
+			case "list":
+				if (item.ordered)
+					return <ol><Children items={item.items} /></ol>
+				else
+					return <ul><Children items={item.items} /></ul>
+			case "list_item":
+				const prefix = item.task ? <input type="checkbox" defaultChecked={item.checked} /> : null;
+				return <li>{prefix} <Children items={item.tokens} /></li>
+			case "paragraph":
+				return <p><Children items={item.tokens} /></p>
+			case "code":
+				return <SyntaxHighlighter style={monokai} language={item.lang}>{item.text}</SyntaxHighlighter>
+			case "strong":
+				return <b><Children items={item.tokens} /></b>
+			case "text":
+				return <>{item.text}</>
+			default:
+				return JSON.stringify(item);
+		}
+	}, [item]);
+
+	return (
+		<>
+			{content}
+		</>
+	);
+};
+
+export default SlideItem;
+
+/* {
+	"type": "paragraph",
+	"raw": "This is a very fancy **bold** keynote",
+	"text": "This is a very fancy **bold** keynote",
+	"tokens": [
+		{
+			"type": "text",
+			"raw": "This is a very fancy ",
+			"text": "This is a very fancy "
+		},
+		{
+			"type": "strong",
+			"raw": "**bold**",
+			"text": "bold",
+			"tokens": [
+				{
+					"type": "text",
+					"raw": "bold",
+					"text": "bold"
+				}
+			]
+		},
+		{
+			"type": "text",
+			"raw": " keynote",
+			"text": " keynote"
+		}
+	]
+} */