kotii-markdown-render 1.0.0-beta.1.0

package/index.js

@@ -0,0 +1,2 @@
+import { MarkdownRender } from "./src/index.js";
+export { MarkdownRender };

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "kotii-markdown-render",
+  "version": "1.0.0-beta.1.0",
+  "description": "is the **React renderer** used by Kotii after Markdown is parsed and transformed",
+  "author": "ntsakosurprise <mashelesepru@gmail.com>",
+  "homepage": "https://github.com/kotii",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.cjs"
+    }
+  },
+  "directories": {
+    "lib": "dist",
+    "test": "__tests__"
+  },
+  "files": [
+    "dist/",
+    "index.js",
+    "src/",
+    "README.md",
+    "package.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.3",
+    "@types/styled-components": "^5.1.26",
+    "babel-cli": "^6.26.0",
+    "babel-loader": "^8.2.3",
+    "cross-env": "^7.0.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.6.1",
+    "webpack": "^5.69.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4",
+    "webpack-node-externals": "^3.0.0"
+  },
+  "peerDependencies": {
+    "kotii-languages": "1.0.0-beta.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "html-react-parser": "^4.0.0",
+    "kotii-styled": "^1.0.0-beta.2.0",
+    "prop-types": "^15.7.2"
+  },
+  "scripts": {
+    "compile:esm": "cross-env NODE_ENV=development NODE_MODE=esm webpack",
+    "compile:cjs": "cross-env NODE_ENV=development NODE_MODE=cjs webpack"
+  }
+}

package/src/components/MarkdownAd/index.jsx

@@ -0,0 +1,12 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+const MarkdownAd = ({ children }) => {
+  return <div>{children}</div>;
+};
+
+MarkdownAd.propTypes = {
+  children: PropTypes.element,
+};
+
+export default MarkdownAd;

package/src/components/MarkdownDemo/index.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const MarkdownDemo = () => {
+  return <></>;
+};
+
+export default MarkdownDemo;

package/src/components/MarkdownElement/index.jsx

@@ -0,0 +1,24 @@
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable react/prop-types */
+import parse from "html-react-parser";
+import PropTypes from "prop-types";
+import { StyledMarkdown } from "../StyledMarkdown/index.jsx";
+
+const MarkdownElement = ({ children, setCustom = false, htmlString }) => {
+  if (setCustom) return <>{children}</>;
+  return (
+    <>
+      <StyledMarkdown>
+        {children ? children : <div>{parse(htmlString)}</div>}
+      </StyledMarkdown>
+    </>
+  );
+};
+
+MarkdownElement.propTypes = {
+  children: PropTypes.element,
+  setCustom: PropTypes.bool,
+  htmlString: PropTypes.string,
+};
+
+export default MarkdownElement;

package/src/components/MarkdownHeader/index.jsx

@@ -0,0 +1,110 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
+// eslint-disable unused-imports/no-unused-imports */
+import { LanguageSwitcher, useLanguage } from "kotii-languages";
+import { ThemeSwitcher, useKotiiTheme } from "kotii-theme";
+import { Button } from "kotii-ui";
+
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+const Header = styled("header")((theme) => {
+  return {
+    width: "100%",
+    position: "fixed",
+    height: "100px",
+    backgroundColor: theme.backgroundColor,
+    top: 0,
+    zIndex: 2,
+    display: "flex",
+    flexDirection: "row",
+  };
+});
+const List = styled("ul")(() => ({
+  position: "relative",
+  display: "flex",
+  padding: "2px",
+  flexDirection: "row",
+  width: "95%",
+  paddingLeft: "5px",
+
+  "& ul": {
+    backgroundColor: "green",
+    position: "relative",
+    paddingLeft: "5px",
+    "& ul": {
+      backgroundColor: "yellow",
+    },
+  },
+}));
+
+const ListItem = styled("li")(() => ({
+  display: "flex",
+  position: "relative",
+  padding: "2px",
+  marginBottom: "2px",
+  // "&.active": {
+  //   ".nav__item-icon": {
+  //     marginTop: "-26px",
+  //     boxShadow: "0px 0px 16px 0px #4444",
+  //   },
+  // ".nav__item-text": { transform: "scale(1)" },
+  //},
+}));
+
+const ListLink = styled("a")(() => ({
+  display: "block",
+  // flexDirection: "column",
+  alignItems: "center",
+  color: "#2f3046",
+  textDecoration: "none",
+}));
+
+const renderItems = (items) => {
+  return items.map((ite, i) => {
+    return (
+      <ListItem key={i}>
+        <ListLink href={`${ite.text}`}>{ite.text}</ListLink>
+      </ListItem>
+    );
+  });
+};
+
+const MarkdownHeader = () => {
+  const { get } = useLanguage();
+  const { theme, grommetTheme } = useKotiiTheme();
+  console.log("THE CURRENT THEME IN REACT-MODULES;", grommetTheme);
+  console.log("THEMEBACKGROUND;;;", theme.backgroundColor);
+  const listItems = [
+    {
+      text: `${get("navigation.home")}`,
+    },
+    {
+      text: `${get("navigation.about")}`,
+    },
+    {
+      text: `${get("navigation.contact")}`,
+    },
+    {
+      text: `${get("navigation.help")}`,
+    },
+  ];
+  return (
+    <Header>
+      <List>{renderItems(listItems)}</List>
+      <div style={{ width: "300px", display: "flex" }}>
+        <LanguageSwitcher />
+        <Button text="I'm a Kotii-ui-button" />
+      </div>
+      <div style={{ width: "300px", display: "flex" }}>
+        <ThemeSwitcher />
+      </div>
+    </Header>
+  );
+};
+
+MarkdownHeader.propTypes = {
+  toc: PropTypes.array,
+};
+
+export default MarkdownHeader;

package/src/components/MarkdownRender/index.jsx

@@ -0,0 +1,186 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
+// eslint-disable unused-imports/no-unused-imports */
+import { useLanguage } from "kotii-languages";
+import PropTypes from "prop-types";
+import React from "react";
+
+import styled from "kotii-styled";
+import MarkdownAd from "../MarkdownAd/index.jsx";
+// import MarkdownHeader from "../MarkdownHeader/index.js";
+import MarkdownVideo from "../MarkdownVideo/index.jsx";
+import StandardComponent from "../StandardComponent/index.jsx";
+import MarkdownElement from "../MarkdownElement/index.jsx";
+
+const MarkdownRenderCanvas = styled("div")(() => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  // overflow: "hidden",
+}));
+
+const MarkdownContentArea = styled("div")(() => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "row",
+  // top: "100px",
+  // position: "relative",
+}));
+const MainArea = styled("div")(() => ({
+  width: "60%",
+  order: 1,
+}));
+const TestDemo = () => {
+  return <div>I am the Demo</div>;
+};
+
+const getSetLanguageContent = (contents, setLanguage) => {
+  let content = [];
+
+  contents.forEach((element) => {
+    if (element.locale.toLowerCase() === setLanguage.toLowerCase())
+      content = element;
+  });
+
+  return content;
+};
+
+const getLanguagePosts = (routes, setLanguage) => {
+  let posts = [];
+
+  routes.forEach((element) => {
+    element.markdownData.forEach((languageItem) => {
+      if (languageItem.locale.toLowerCase() === setLanguage.toLowerCase()) {
+        posts.push({
+          ...languageItem.parsedMarkdown.metaDataKeys,
+          path: element.path,
+        });
+      }
+    });
+  });
+
+  return posts;
+};
+
+// const capitalizeFirstLetter = (text) => {
+//   console.log("The text Uppercasing;;;", text);
+//   return `${text.slice(0, 1).toUpperCase()}${text.slice(1)}`;
+// };
+
+const isHtmlString = (itemChecked) => {
+  if (typeof itemChecked === "string" && itemChecked.length) return true;
+  return false;
+};
+const getHtmlBody = (itemChecked) => {
+  if (typeof itemChecked === "string" && itemChecked.length) return itemChecked;
+  return null;
+};
+
+const markdownComponentType = (mkComponent, index, options) => {
+  const {
+    languagePosts: posts,
+    markdownComponents,
+    markdownHtmlBody: body,
+    post: currentPost,
+  } = options;
+  console.log("THE MARKDOWN COMPONENT", mkComponent, markdownComponents, posts);
+  const componentType = Object.keys(mkComponent)[0];
+  const currentComponent = Object.entries(markdownComponents).find(
+    ([key, value]) => {
+      if (value.pathID === mkComponent[componentType]) return value;
+    }
+  )[1];
+  const isServer = typeof window != "undefined" ? false : true;
+  console.log("THE CURRENT COMPONENT", currentComponent);
+  const ComponentInContext = currentComponent.component;
+  console.log("THE COMPONENT IN CONTEXT", ComponentInContext);
+
+  switch (componentType) {
+    case "demo":
+      return <TestDemo key={index} posts={posts} post={currentPost} />;
+    case "component":
+      return <ComponentInContext posts={posts} post={currentPost} />;
+    case "video":
+      return (
+        <MarkdownVideo key={index}>
+          <ComponentInContext posts={posts} post={currentPost} />
+        </MarkdownVideo>
+      );
+    case "ad":
+      return (
+        <MarkdownAd key={index}>
+          <ComponentInContext posts={posts} post={currentPost} />
+        </MarkdownAd>
+      );
+    default:
+      return null;
+  }
+};
+
+const MarkdownRender = ({
+  markdownData,
+  markdownComponents,
+  routes = null,
+}) => {
+  console.log("MARKDOWN RENDER PROPS: docs", markdownData);
+  console.log("MARKDODWN RENDER PROPS: modules", markdownComponents);
+  const { language } = useLanguage();
+  const englishContent = getSetLanguageContent(markdownData, language);
+  const languagePosts = getLanguagePosts(routes, language);
+  console.log("THE ENGLISH CONTENT", englishContent);
+  const { fileName, parsedMarkdown } = englishContent;
+  const { html, toc, metaDataKeys } = parsedMarkdown;
+  const { useCustomRender = false } = metaDataKeys;
+  const markdownHtmlBody = getHtmlBody(html);
+  const componentsOptions = {
+    languagePosts,
+    markdownComponents,
+    markdownHtmlBody,
+    useCustomRender,
+    post: metaDataKeys,
+  };
+  console.log("THE PARSED MARKDOWN", parsedMarkdown);
+  console.log("Kotii-markdown set Language:::", language, React.lazy, toc);
+
+  // console.log("Filename;;;", fileName);
+  // console.log("html", html);
+  if (useCustomRender) {
+    return html.map((markdownHtmlItem, i) => {
+      if (!isHtmlString(markdownHtmlItem)) {
+        return markdownComponentType(markdownHtmlItem, i, componentsOptions);
+      }
+
+      return null;
+    });
+  }
+
+  return (
+    <MarkdownRenderCanvas>
+      {/* <MarkdownHeader /> */}
+
+      <MarkdownContentArea>
+        {/* <MarkdownSidebar /> */}
+        <MainArea>
+          {html.map((markdownHtmlItem, i) => {
+            if (isHtmlString(markdownHtmlItem))
+              return <MarkdownElement htmlString={markdownHtmlItem} key={i} />;
+            return markdownComponentType(
+              markdownHtmlItem,
+              markdownComponents,
+              i,
+              languagePosts
+            );
+          })}
+        </MainArea>
+        {/* <MarkdownTOC toc={toc} /> */}
+      </MarkdownContentArea>
+    </MarkdownRenderCanvas>
+  );
+};
+
+MarkdownRender.propTypes = {
+  markdownData: PropTypes.array.isRequired,
+  // markdownComponents: PropTypes.object.isRequired,
+};
+
+export default MarkdownRender;

package/src/components/MarkdownSidebar/index.jsx

@@ -0,0 +1,27 @@
+import styled from "kotii-styled";
+import PropTypes from "prop-types";
+
+const Sidebar = styled("div")(() => {
+  return { width: "18%", order: -1, height: "100vh" };
+});
+const StickyContent = styled("section")(() => ({
+  position: "fixed",
+  top: "100px",
+}));
+
+const createTableOfContents = () => {
+  return (
+    <StickyContent>
+      <p>I AM THE P</p>
+    </StickyContent>
+  );
+};
+const MarkdownSidebar = ({ toc }) => {
+  return <Sidebar>{createTableOfContents(toc)}</Sidebar>;
+};
+
+MarkdownSidebar.propTypes = {
+  toc: PropTypes.array.isRequired,
+};
+
+export default MarkdownSidebar;

package/src/components/MarkdownTOC/index.jsx

@@ -0,0 +1,98 @@
+import styled from "kotii-styled";
+import PropTypes from "prop-types";
+
+const TableOfContents = styled("div")(() => {
+  return { width: "15%", order: 2, paddingLeft: "3%" };
+});
+const StickyContent = styled("section")(() => ({
+  position: "fixed",
+  top: "100px",
+}));
+
+const List = styled("ul")(() => ({
+  position: "relative",
+  padding: "2px",
+  flexDirection: "column",
+  width: "95%",
+  paddingLeft: "5px",
+  display: "block",
+  "& ul": {
+    backgroundColor: "green",
+    position: "relative",
+    paddingLeft: "5px",
+    "& ul": {
+      backgroundColor: "yellow",
+    },
+  },
+}));
+
+const ListItem = styled("li")(() => ({
+  display: "block",
+  position: "relative",
+  padding: "2px",
+  marginBottom: "2px",
+  // "&.active": {
+  //   ".nav__item-icon": {
+  //     marginTop: "-26px",
+  //     boxShadow: "0px 0px 16px 0px #4444",
+  //   },
+  // ".nav__item-text": { transform: "scale(1)" },
+  //},
+}));
+
+const ListLink = styled("a")(() => ({
+  display: "block",
+  flexDirection: "column",
+  alignItems: "center",
+  color: "#2f3046",
+  textDecoration: "none",
+}));
+
+// const ListIcon = styled("div")(() => ({
+//   display: "flex",
+//   alignItems: "center",
+//   justifyContent: "center",
+//   fontSize: "1.6em",
+//   backgroundColor: "#fff",
+//   borderRadius: "50%",
+//   height: "25px",
+//   width: "25px",
+//   transition: "margin-top 250ms ease-in-out, box-shadow 250ms ease-in-out",
+// }));
+
+// const ListText = styled("span")(() => ({
+//   position: "absolute",
+//   bottom: "0",
+//   transform: "scale(0)",
+//   transition: "transform 250ms ease-in-out",
+// }));
+
+const getLevelChild = (content) => {
+  // if (content.children) return getLevelChild(content);
+  return (
+    <List>
+      {content.map((it, ii) => {
+        return (
+          <ListItem key={ii}>
+            <ListLink href={`#${it.id}`}>{it.id}</ListLink>
+            {it.children && it.children.length > 0
+              ? getLevelChild(it.children)
+              : null}
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+};
+const createTableOfContents = (toc) => {
+  return <StickyContent>{getLevelChild(toc)}</StickyContent>;
+};
+const MarkdownTOC = ({ toc }) => {
+  return <TableOfContents>{createTableOfContents(toc)}</TableOfContents>;
+};
+
+MarkdownTOC.propTypes = {
+  toc: PropTypes.array.isRequired,
+};
+
+export default MarkdownTOC;

package/src/components/MarkdownVideo/index.jsx

@@ -0,0 +1,15 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+const MarkdownVideo = ({ children, isNotChildVideo = false }) => {
+  console.log("THE CHILDREN", children, isNotChildVideo);
+  if (isNotChildVideo) return <video>{children}</video>;
+  return <div>{children}</div>;
+};
+
+MarkdownVideo.propTypes = {
+  children: PropTypes.element,
+  isNotChildVideo: PropTypes.bool,
+};
+
+export default MarkdownVideo;

package/src/components/StandardComponent/index.jsx

@@ -0,0 +1,18 @@
+/* eslint-disable react/prop-types */
+import styled from "kotii-styled";
+import PropTtypes from "prop-types";
+import React from "react";
+
+const StyledStandardComponent = styled("div")(() => ({
+  width: "100%",
+}));
+
+const StandardComponent = ({ children }) => {
+  return <StyledStandardComponent>{children}</StyledStandardComponent>;
+};
+
+StandardComponent.propTypes = {
+  children: PropTtypes.element.isRequired,
+};
+
+export default StandardComponent;