fresh look for docs

frontend/src/codeeditor-index.css

@@ -90,3 +90,17 @@ code {
   color: #fff;
   font-size: 14px;
 }
+
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #494949;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: rgb(26,26,26);
+}
+

frontend/src/index.css

@@ -18,6 +18,11 @@ code {
   margin-right: -13px;
 }
 
+.toc:hover {
+    background-color: gray;
+    color: white;
+}
+
 /* .cm-string{
   z-index: -1;
 }
@@ -31,3 +36,16 @@ code {
   background-color: rgba(28, 47, 69, 0.6) !important;
   color: rgb(255, 255, 255) !important;
 }
+
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #494949;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: rgb(26,26,26);
+}

frontend/src/views/Docs.jsx

@@ -34,6 +34,7 @@ import {
     ExpandMore as ExpandMoreIcon,
     FileCopy as FileCopyIcon
 } from "@mui/icons-material";
+import { fontGrid } from "@mui/material/styles/cssUtils.js";
 
 const Body = {
     //maxWidth: 1000,
@@ -53,6 +54,7 @@ const hrefStyle = {
     textDecoration: "none",
 };
 
+
 const hrefStyle2 = {
     color: "#f86a3e",
     textDecoration: "none",
@@ -65,7 +67,7 @@ const innerHrefStyle = {
 
 
 export const CopyToClipboard = (props) => {
-	const {text, style, onCopy} = props;
+    const { text, style, onCopy } = props;
     const parsedstyle = style !== undefined ? style : {
         position: "absolute",
         right: 0,
@@ -108,7 +110,7 @@ export const OuterLink = (props) => {
             {props.children}
         </Link>
     );
-  }
+}
 
 
 export const Img = (props) => {
@@ -140,7 +142,7 @@ export const CodeHandler = (props) => {
     if (props.inline === true) {
         // Show it inline
         return (
-			<span style={{backgroundColor: theme.palette.inputColor, display: "inline", whiteSpace: "pre-wrap", padding: "6px 3px 6px 3px", }}>
+            <span style={{ backgroundColor: theme.palette.inputColor, display: "inline", whiteSpace: "pre-wrap", padding: "6px 3px 6px 3px", }}>
                 {newprop}
             </span>
         )
@@ -168,7 +170,7 @@ export const CodeHandler = (props) => {
                     name={""}
                 />
                 :
-			<div style={{display: "flex", position: "relative", }}>
+                <div style={{ display: "flex", position: "relative", }}>
                     <code
                         style={{
                             // Wrap if larger than X
@@ -213,6 +215,7 @@ const Docs = (defaultprops) => {
     const [firstrequest, setFirstrequest] = useState(true);
     const [list, setList] = useState([]);
     const [isopen, setOpen] = useState(-1);
+    const [hover, setHover] = useState(false);
     const [, setListLoaded] = useState(false);
     const [anchorEl, setAnchorEl] = React.useState(null);
     const [headingSet, setHeadingSet] = React.useState(false);
@@ -229,115 +232,34 @@ const Docs = (defaultprops) => {
         setAnchorEl(event.currentTarget);
     }
 
+    function handleMouseOver() {
+        setHover(!hover);
+    }
+
     function handleClose() {
         setAnchorEl(null);
     }
 
-  const handleCollapse = (index) => {
-    setOpen(isopen === index ? -1 : index)
-  };
 
     const SidebarPaperStyle = {
-    backgroundColor: theme.palette.surfaceColor,
+        backgroundColor: "rgb(26,26,26)",
+        backgroundImage: "none",
         overflowX: "hidden",
         position: "relative",
         paddingLeft: 15,
         paddingRight: 15,
-    paddingTop: 15,
-    marginTop: 15,
         minHeight: "80vh",
-    //height: "50vh",
     };
 
+
     const Heading = (props) => {
         const element = React.createElement(
             `h${props.level}`,
             { style: { marginTop: props.level === 1 ? 20 : 50 } },
             props.children
         );
-    const [hover, setHover] = useState(false);
 
         var extraInfo = "";
-    if (props.level === 1) {
-      extraInfo = (
-        <div
-          style={{
-            backgroundColor: theme.palette.inputColor,
-            padding: 15,
-            borderRadius: theme.palette.borderRadius,
-            marginBottom: 30,
-            display: "flex",
-          }}
-        >
-          <div style={{ flex: 3, display: "flex", vAlign: "center", position: "sticky", top: 50, }}>
-            {isMobile ? null : (
-              <Typography style={{ display: "inline", marginTop: 6 }}>
-                <a
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  href={selectedMeta.link}
-                  style={{ textDecoration: "none", color: "#f85a3e" }}
-                >
-                  <Button style={{ color: "white", }} variant="outlined" color="secondary">
-                    <EditIcon /> &nbsp;&nbsp;Edit
-                  </Button>
-                </a>
-              </Typography>
-            )}
-            {isMobile ? null : (
-              <div
-                style={{
-                  height: "100%",
-                  width: 1,
-                  backgroundColor: "white",
-                  marginLeft: 50,
-                  marginRight: 50,
-                }}
-              />
-            )}
-            <Typography style={{ display: "inline", marginTop: 11 }}>
-              {selectedMeta.read_time} minute
-              {selectedMeta.read_time === 1 ? "" : "s"} to read
-            </Typography>
-          </div>
-          <div style={{ flex: 2 }}>
-            {isMobile ||
-              selectedMeta.contributors === undefined ||
-              selectedMeta.contributors === null ? (
-              ""
-            ) : (
-              <div style={{ margin: 10, height: "100%", display: "inline" }}>
-                {selectedMeta.contributors.slice(0, 7).map((data, index) => {
-                  return (
-                    <a
-                      key={index}
-                      rel="noopener noreferrer"
-                      target="_blank"
-                      href={data.url}
-                      target="_blank"
-                      style={{ textDecoration: "none", color: "#f85a3e" }}
-                    >
-                      <Tooltip title={data.url} placement="bottom">
-                        <img
-                          alt={data.url}
-                          src={data.image}
-                          style={{
-                            marginTop: 5,
-                            marginRight: 10,
-                            height: 40,
-                            borderRadius: 40,
-                          }}
-                        />
-                      </Tooltip>
-                    </a>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        </div>
-      );
-    }
 
         if (extraInfo !== "" && props.level === 1 && props.children !== undefined && props.children !== null && props.children.length > 0) {
             if (props.children[0].toLowerCase().includes("privacy") || props.children[0].toLowerCase().includes("terms")) {
@@ -366,10 +288,9 @@ const Docs = (defaultprops) => {
         )
     }
 
+
     const SideBar = {
-    minWidth: 300,
+        width: "17%",
-    width: "20%",
-    left: 0,
         position: "sticky",
         top: 50,
         minHeight: "90vh",
@@ -380,6 +301,14 @@ const Docs = (defaultprops) => {
         //borderRight: "1px solid rgba(255,255,255,0.3)",
     };
 
+    const IndexBar = {
+        alignSelf: "flex-start",
+        position: "sticky",
+        top: 80,
+        overflow: "auto",
+        marginTop: 70,
+    }
+
     const fetchDocList = () => {
         fetch(`${globalUrl}/api/v1/docs`, {
             method: "GET",
@@ -418,8 +347,11 @@ const Docs = (defaultprops) => {
                 if (responseJson.success && responseJson.reason !== undefined) {
                     // Find <img> tags and translate them into ![]() format
                     const imgRegex = /<img.*?src="(.*?)"/g;
-		  const newdata = responseJson.reason.replace(imgRegex, '![]($1)');
+                    const tocRegex = /^## Table of contents[\s\S]*?(?=^##\s|\Z)|^\* \[[^\]]+\]\([^)]+\)\n?(?![^\n]+\]\([^)]+\))/gm;
-          setData(newdata)
+                    const newdata = responseJson.reason.replace(imgRegex, '![]($1)')
+                        .replace(tocRegex, "");
+                    console.log(newdata)
+                    setData(newdata);
                     if (docId === undefined) {
                         document.title = "Shuffle documentation introduction";
                     } else {
@@ -538,7 +470,7 @@ const Docs = (defaultprops) => {
             var elements = parent.getElementsByTagName("h2");
 
             const name = window.location.hash
-        .slice(1, window.location.hash.lenth)
+                .slice(1, window.location.hash.length)
                 .toLowerCase()
                 .split("%20")
                 .join(" ")
@@ -633,8 +565,6 @@ const Docs = (defaultprops) => {
     const CustomButton = (props) => {
         const { title, icon, link } = props
 
-    const [hover, setHover] = useState(false)
-
         return (
             <a
                 href={link}
@@ -675,7 +605,6 @@ const Docs = (defaultprops) => {
     const DocumentationButton = (props) => {
         const { item, link } = props
 
-    const [hover, setHover] = useState(false);
 
         if (link === undefined || link === null) {
             return null
@@ -768,6 +697,7 @@ const Docs = (defaultprops) => {
         a: OuterLink,
     }
 
+
     // PostDataBrowser Section
     const postDataBrowser =
         list === undefined || list === null ? null : (
@@ -795,11 +725,6 @@ const Docs = (defaultprops) => {
                                             key={index}
                                             style={hrefStyle}
                                             to={path}
-                      onClick={() => {
-                        setTocLines([]);
-                        fetchDocs(item);
-                        handleCollapse(index);
-                      }}
                                         >
                                             <ListItemText
                                                 style={{ color: itemMatching ? "#f86a3e" : "inherit" }}
@@ -807,40 +732,14 @@ const Docs = (defaultprops) => {
                                             >
                                                 {newname}
                                             </ListItemText>
-                      {isopen === index ? <ExpandMoreIcon /> : <KeyboardArrowRightIcon />}
                                         </ListItemButton>
-                    {itemMatching &&
-                      tocLines !== null &&
-                      tocLines !== undefined &&
-                      tocLines.length > 0 ? (
-                      <Collapse in={isopen === index} timeout="auto" unmountOnExit>
-                        {tocLines.map((data, index) => {
-
-                          return (
-                            <ListItemButton
-                              component={Link}
-                              key={index}
-                              style={innerHrefStyle}
-                              to={data.link}
-                            >
-                              <ListItemText
-                                variant="body2"
-                                style={{ cursor: "pointer" }}
-                              >
-                                {data.text}
-                              </ListItemText>
-                            </ListItemButton>
-                          );
-                        })}
-                      </Collapse>
-                    ) : null}
                                     </li>
                                 );
                             })}
                         </List>
                     </Paper>
                 </div>
-        <div style={{ width: "70%", margin: "auto", overflow: "hidden", marginTop: 50, paddingRight: 50 }}>
+                <div style={{ width: "60%", margin: "30px 0px 30px 30px", overflow: "hidden", paddingRight: 50, paddingLeft: 40 }}>
                     {props.match.params.key === undefined ?
                         mainpageInfo
                         :
@@ -859,6 +758,18 @@ const Docs = (defaultprops) => {
                         </div>
                     }
                 </div>
+                <nav style={IndexBar}>
+                    {tocLines.map(data => (
+                        <ListItemButton
+                            component={Link}
+                            key={data.text}
+                            style={hrefStyle}
+                            to={data.link}
+                        >
+                            {data.text}
+                        </ListItemButton>
+                    ))}
+                </nav>
             </div>
         );
 
@@ -887,14 +798,6 @@ const Docs = (defaultprops) => {
                     >
                         <div style={{ color: "white" }}>More docs</div>
                     </Button>
-          <Menu
-            id="simple-menu"
-            anchorEl={anchorEl}
-            style={{}}
-            keepMounted
-            open={Boolean(anchorEl)}
-            onClose={handleClose}
-          >
                     {list.map((data, index) => {
                         const item = data.name;
                         if (item === undefined) {
@@ -917,7 +820,6 @@ const Docs = (defaultprops) => {
                             </MenuItem>
                         );
                     })}
-          </Menu>
                 </div>
                 {props.match.params.key === undefined ?
                     mainpageInfo