diff --git a/frontend/src/codeeditor-index.css b/frontend/src/codeeditor-index.css
index 6a8b757f..c87341f5 100644
--- a/frontend/src/codeeditor-index.css
+++ b/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);
+}
+
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4188b885..9b1fc96c 100755
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -18,6 +18,11 @@ code {
margin-right: -13px;
}
+.toc:hover {
+ background-color: gray;
+ color: white;
+}
+
/* .cm-string{
z-index: -1;
}
@@ -30,4 +35,17 @@ code {
.CodeMirror-selectedtext{
background-color: rgba(28, 47, 69, 0.6) !important;
color: rgb(255, 255, 255) !important;
-}
\ No newline at end of file
+}
+
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: #494949;
+ border-radius: 5px;
+}
+
+::-webkit-scrollbar-track {
+ background-color: rgb(26,26,26);
+}
diff --git a/frontend/src/views/Docs.jsx b/frontend/src/views/Docs.jsx
index 4ae1cfbe..d7c6b35f 100755
--- a/frontend/src/views/Docs.jsx
+++ b/frontend/src/views/Docs.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
import { toast } from 'react-toastify';
import Markdown from 'react-markdown'
@@ -11,104 +11,151 @@ import { useParams, useNavigate, Link } from "react-router-dom";
import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
import {
- Grid,
- TextField,
- IconButton,
- Tooltip,
- Divider,
- Button,
- Menu,
- MenuItem,
- Typography,
- Paper,
- List,
- Collapse,
- ListItemButton,
- ListItemText
+ Grid,
+ TextField,
+ IconButton,
+ Tooltip,
+ Divider,
+ Button,
+ Menu,
+ MenuItem,
+ Typography,
+ Paper,
+ List,
+ Collapse,
+ ListItemButton,
+ ListItemText
} from "@mui/material";
import {
- Link as LinkIcon,
- Edit as EditIcon,
- KeyboardArrowRight as KeyboardArrowRightIcon,
- ExpandMore as ExpandMoreIcon,
- FileCopy as FileCopyIcon
+ Link as LinkIcon,
+ Edit as EditIcon,
+ KeyboardArrowRight as KeyboardArrowRightIcon,
+ ExpandMore as ExpandMoreIcon,
+ FileCopy as FileCopyIcon
} from "@mui/icons-material";
+import { fontGrid } from "@mui/material/styles/cssUtils.js";
+import { active } from "d3";
const Body = {
- //maxWidth: 1000,
- //minWidth: 768,
- maxWidth: "100%",
- minWidth: "100%",
- display: "flex",
- height: "100%",
- color: "white",
- position: "relative",
- //textAlign: "center",
+ //maxWidth: 1000,
+ //minWidth: 768,
+ maxWidth: "100%",
+ minWidth: "100%",
+ display: "flex",
+ height: "100%",
+ color: "white",
+ position: "relative",
+ //textAlign: "center",
};
const dividerColor = "rgb(225, 228, 232)";
const hrefStyle = {
- color: "rgba(255, 255, 255, 0.40)",
- textDecoration: "none",
+ color: "rgba(255, 255, 255, 0.40)",
+ textDecoration: "none",
+};
+
+
+const hrefStyleToc2 = {
+ color: "rgba(255, 255, 255, 0.6)",
+ textDecoration: "none",
+ fontSize: "14px",
+ fontWeight: 400,
+ padding: "4px 0",
+ paddingLeft: "12px",
+ paddingRight: "12px",
+ lineHeight: "20px",
};
const hrefStyle2 = {
- color: "#f86a3e",
- textDecoration: "none",
+ color: "#f86a3e",
+ textDecoration: "none",
};
const innerHrefStyle = {
- color: "rgba(255, 255, 255, 0.75)",
- textDecoration: "none",
+ color: "rgba(255, 255, 255, 0.75)",
+ textDecoration: "none",
};
+// Emma Goto
+const useIntersectionObserver = (setActiveId) => {
+ const headingElementsRef = useRef({})
+ const callback = (headings) => {
+ headingElementsRef.current = headings.reduce((map, headingElemet) => {
+ if (headingElemet.target.id != undefined || headingElemet.target.id != "") {
+ map[headingElemet.target.id] = headingElemet
+ return map
+ }
+ }, headingElementsRef.current)
+
+ const visibleHeadings = [];
+ Object.keys(headingElementsRef.current).forEach((key) => {
+ const headingElemet = headingElementsRef.current[key];
+ if (headingElemet.isIntersecting) visibleHeadings.push(headingElemet)
+ })
+
+ if (visibleHeadings.length > 0) {
+ console.log(visibleHeadings)
+ setActiveId(visibleHeadings[0].target.id)
+ }
+ }
+
+ const observer = new IntersectionObserver(callback, {
+ });
+
+ const headingElements = Array.from(document.querySelectorAll("h2"))
+ if (headingElements.length != 0) {
+ headingElements.forEach((element) => observer.observe(element));
+ return () => observer.disconnect()
+ }
+}
+
export const CopyToClipboard = (props) => {
- const {text, style, onCopy} = props;
- const parsedstyle = style !== undefined ? style : {
- position: "absolute",
- right: 0,
- top: -10,
- }
+ const { text, style, onCopy } = props;
+ const parsedstyle = style !== undefined ? style : {
+ position: "absolute",
+ right: 0,
+ top: -10,
+ }
- return (
-
- {
- navigator.clipboard.writeText(text);
- toast("Copied to clipboard")
- }}
- >
-
-
-
- )
+ return (
+
+ {
+ navigator.clipboard.writeText(text);
+ toast("Copied to clipboard")
+ }}
+ >
+
+
+
+ )
}
export const OuterLink = (props) => {
if (props.href.includes("http") || props.href.includes("mailto")) {
- return (
-
- {props.children}
-
- );
+ return (
+
+ {props.children}
+
+ );
}
return (
-
- {props.children}
-
+
+ {props.children}
+
);
- }
+}
export const Img = (props) => {
@@ -120,850 +167,948 @@ export const CodeHandler = (props) => {
const validate = validateJson(propvalue)
- var newprop = propvalue
- if (validate.valid === false) {
- // Check if https://shuffler.io in the url
- // if so, then we change it for the current url
- if (propvalue.includes("https://shuffler.io")) {
- newprop = propvalue.replace("https://shuffler.io", window.location.origin)
- }
+ var newprop = propvalue
+ if (validate.valid === false) {
+ // Check if https://shuffler.io in the url
+ // if so, then we change it for the current url
+ if (propvalue.includes("https://shuffler.io")) {
+ newprop = propvalue.replace("https://shuffler.io", window.location.origin)
+ }
- // Check if it contains Bearer APIKEY
- // If so, replace apikey
- //if (newprop.includes("Bearer APIKEY")) {
- // newprop = newprop.replace("Bearer APIKEY", "Bearer API
- //}
- }
+ // Check if it contains Bearer APIKEY
+ // If so, replace apikey
+ //if (newprop.includes("Bearer APIKEY")) {
+ // newprop = newprop.replace("Bearer APIKEY", "Bearer API
+ //}
+ }
- // Need to check if it's singletick or multi
+ // Need to check if it's singletick or multi
console.log("PROP: ", propvalue, props)
- if (props.inline === true) {
- // Show it inline
- return (
-
- {newprop}
-
- )
- }
+ if (props.inline === true) {
+ // Show it inline
+ return (
+
+ {newprop}
+
+ )
+ }
return (
-
- {validate.valid === true ?
-
- :
-
-
- {newprop}
-
-
-
- }
-
- )
+
+ {validate.valid === true ?
+
+ :
+
+
+ {newprop}
+
+
+
+ }
+
+ )
}
const Docs = (defaultprops) => {
- const { globalUrl, selectedDoc, serverside, serverMobile } = defaultprops;
+ const { globalUrl, selectedDoc, serverside, serverMobile } = defaultprops;
- let navigate = useNavigate();
+ let navigate = useNavigate();
- // Quickfix for react router 5 -> 6
- const params = useParams();
- //var props = JSON.parse(JSON.stringify(defaultprops))
- var props = Object.assign({ selected: false }, defaultprops);
- props.match = {}
- props.match.params = params
+ // Quickfix for react router 5 -> 6
+ const params = useParams();
+ //var props = JSON.parse(JSON.stringify(defaultprops))
+ var props = Object.assign({ selected: false }, defaultprops);
+ props.match = {}
+ props.match.params = params
- useEffect(() => {
- //if (params["key"] === undefined) {
- // navigate("/docs/about")
- // return
- //}
- }, [])
- //console.log("PARAMS: ", params)
+ //console.log("PARAMS: ", params)
- const [mobile, setMobile] = useState(serverMobile === true || isMobile === true ? true : false);
- const [data, setData] = useState("");
- const [firstrequest, setFirstrequest] = useState(true);
- const [list, setList] = useState([]);
- const [isopen, setOpen] = useState(-1);
- const [, setListLoaded] = useState(false);
- const [anchorEl, setAnchorEl] = React.useState(null);
- const [headingSet, setHeadingSet] = React.useState(false);
- const [selectedMeta, setSelectedMeta] = React.useState({
- link: "hello",
- read_time: 2,
- });
- const [tocLines, setTocLines] = React.useState([]);
- const [baseUrl, setBaseUrl] = React.useState(
- serverside === true ? "" : window.location.href
- );
-
- function handleClick(event) {
- setAnchorEl(event.currentTarget);
- }
-
- function handleClose() {
- setAnchorEl(null);
- }
-
- const handleCollapse = (index) => {
- setOpen(isopen === index ? -1 : index)
- };
-
- const SidebarPaperStyle = {
- backgroundColor: theme.palette.surfaceColor,
- 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 [mobile, setMobile] = useState(serverMobile === true || isMobile === true ? true : false);
+ const [data, setData] = useState("");
+ const [firstrequest, setFirstrequest] = useState(true);
+ const [list, setList] = useState([]);
+ const [activeId, setActiveId] = useState();
+ const [isopen, setOpen] = useState(-1);
const [hover, setHover] = useState(false);
+ const [, setListLoaded] = useState(false);
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const [anchorElToc, setAnchorElToc] = React.useState(null);
+ const [headingSet, setHeadingSet] = React.useState(false);
+ const [selectedMeta, setSelectedMeta] = React.useState({
+ link: "hello",
+ read_time: 2,
+ });
+ const [tocLines, setTocLines] = React.useState([]);
+ const [baseUrl, setBaseUrl] = React.useState(
+ serverside === true ? "" : window.location.href
+ );
- var extraInfo = "";
- if (props.level === 1) {
- extraInfo = (
-
-
- {isMobile ? null : (
-
-
-
- Edit
-
-
-
- )}
- {isMobile ? null : (
-
- )}
-
- {selectedMeta.read_time} minute
- {selectedMeta.read_time === 1 ? "" : "s"} to read
-
-
-
- {isMobile ||
- selectedMeta.contributors === undefined ||
- selectedMeta.contributors === null ? (
- ""
- ) : (
-
- {selectedMeta.contributors.slice(0, 7).map((data, index) => {
- return (
-
-
-
-
-
- );
- })}
-
- )}
-
-
- );
- }
-
- 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")) {
- extraInfo = ""
- }
- }
-
- return (
- {
- setHover(true);
- }}
- >
- {props.level !== 1 ? (
-
- ) : null}
- {element}
- {extraInfo}
-
- )
- }
-
- const SideBar = {
- minWidth: 300,
- width: "20%",
- left: 0,
- position: "sticky",
- top: 50,
- minHeight: "90vh",
- maxHeight: "90vh",
- overflowX: "hidden",
- overflowY: "auto",
- zIndex: 1000,
- //borderRight: "1px solid rgba(255,255,255,0.3)",
- };
-
- const fetchDocList = () => {
- fetch(`${globalUrl}/api/v1/docs`, {
- method: "GET",
- headers: {
- "Content-Type": "application/json",
- Accept: "application/json",
- },
- })
- .then((response) => response.json())
- .then((responseJson) => {
- if (responseJson.success) {
- setList(responseJson.list);
- } else {
- setList(["# Error loading documentation. Please contact us if this persists.",]);
- toast("Failed loading documentation. Please reload the window")
- }
- setListLoaded(true);
- })
- .catch((error) => { });
- };
-
- const fetchDocs = (docId) => {
- fetch(`${globalUrl}/api/v1/docs/${docId}`, {
- method: "GET",
- headers: {
- "Content-Type": "application/json",
- Accept: "application/json",
- },
- })
- .then((response) => response.json())
- .then((responseJson) => {
- if (responseJson.success === false) {
- //toast("Failed loading documentation. Please reload the UI")
- }
-
- if (responseJson.success && responseJson.reason !== undefined) {
- // Find tags and translate them into ![]() format
- const imgRegex = / 1) {
- parsedline[0] = parsedline[0].replaceAll("*", "");
- parsedline[0] = parsedline[0].replaceAll("[", "");
- parsedline[0] = parsedline[0].replaceAll("]", "");
- parsedline[0] = parsedline[0].replaceAll("(", "");
- parsedline[0] = parsedline[0].replaceAll(")", "");
- parsedline[0] = parsedline[0].trim();
-
- parsedline[1] = parsedline[1].replaceAll("*", "");
- parsedline[1] = parsedline[1].replaceAll("[", "");
- parsedline[1] = parsedline[1].replaceAll("]", "");
- parsedline[1] = parsedline[1].replaceAll(")", "");
- parsedline[1] = parsedline[1].replaceAll("(", "");
- parsedline[1] = parsedline[1].trim();
- //console.log(parsedline[0], parsedline[1])
-
- innerTocLines.push({
- text: parsedline[0],
- link: parsedline[1],
- });
- } else {
- console.log("Bad line for parsing: ", line);
- }
- }
- }
-
- setTocLines(innerTocLines);
- }
- } else {
- setData("# Error\nThis page doesn't exist.");
- }
- })
- .catch((error) => { });
- };
-
- if (firstrequest) {
- setFirstrequest(false);
- if (!serverside) {
- if (window.innerWidth < 768) {
- setMobile(true);
- }
- }
-
- if (selectedDoc !== undefined) {
- setData(selectedDoc.reason);
- setList(selectedDoc.list);
- setListLoaded(true);
- } else {
- if (!serverside) {
- fetchDocList();
-
- //const propkey = props.match.params.key
- //if (propkey === undefined) {
+ useEffect(() => {
+ //if (params["key"] === undefined) {
// navigate("/docs/about")
- // return null
+ // return
//}
- //
- if (props.match.params.key === undefined) {
+ }, [])
- } else {
- console.log("DOCID: ", props.match.params.key)
- fetchDocs(props.match.params.key)
- }
- }
+ useIntersectionObserver(setActiveId);
+ console.log(activeId)
+
+ function handleClick(event) {
+ setAnchorEl(event.currentTarget);
}
- }
- // Handles search-based changes that origin from outside this file
- if (serverside !== true && window.location.href !== baseUrl) {
- setBaseUrl(window.location.href);
- fetchDocs(props.match.params.key);
- }
-
- const parseElementScroll = () => {
- const offset = 45;
- var parent = document.getElementById("markdown_wrapper_outer");
- if (parent !== null) {
- //console.log("IN PARENT")
- var elements = parent.getElementsByTagName("h2");
-
- const name = window.location.hash
- .slice(1, window.location.hash.lenth)
- .toLowerCase()
- .split("%20")
- .join(" ")
- .split("_")
- .join(" ")
- .split("-")
- .join(" ")
- .split("?")[0]
-
- //console.log(name)
- var found = false;
- for (var key in elements) {
- const element = elements[key];
- if (element.innerHTML === undefined) {
- continue;
- }
-
- // Fix location..
- if (element.innerHTML.toLowerCase() === name) {
- //console.log(element.offsetTop)
- element.scrollIntoView({ behavior: "smooth" });
- //element.scrollTo({
- // top: element.offsetTop+offset,
- // behavior: "smooth"
- //})
- found = true;
- //element.scrollTo({
- // top: element.offsetTop-100,
- // behavior: "smooth"
- //})
- }
- }
-
- // H#
- if (!found) {
- elements = parent.getElementsByTagName("h3");
- //console.log("NAMe: ", name)
- found = false;
- for (key in elements) {
- const element = elements[key];
- if (element.innerHTML === undefined) {
- continue;
- }
-
- // Fix location..
- if (element.innerHTML.toLowerCase() === name) {
- element.scrollIntoView({ behavior: "smooth" });
- //element.scrollTo({
- // top: element.offsetTop-offset,
- // behavior: "smooth"
- //})
- found = true;
- //element.scrollTo({
- // top: element.offsetTop-100,
- // behavior: "smooth"
- //})
- }
- }
- }
+ function handleClickToc(event) {
+ setAnchorElToc(event.currentTarget);
}
- //console.log(element)
- //console.log("NAME: ", name)
- //console.log(document.body.innerHTML)
- // parent = document.getElementById(parent);
+ function handleCollapse(index) {
+ setOpen(isopen === index ? -1 : index)
+ }
- //var descendants = parent.getElementsByTagName(tagname);
+ function handleMouseOver() {
+ setHover(!hover);
+ }
- // this.scrollDiv.current.scrollIntoView({ behavior: 'smooth' });
+ function handleClose() {
+ setAnchorEl(null);
+ }
- //$(".parent").find("h2:contains('Statistics')").parent();
- };
+ function handleCloseToc() {
+ setAnchorElToc(null);
+ }
- if (serverside !== true && window.location.hash.length > 0) {
- parseElementScroll();
- }
-
- const markdownStyle = {
- color: "rgba(255, 255, 255, 0.90)",
- overflow: "hidden",
- paddingBottom: 100,
- margin: "auto",
- maxWidth: "100%",
- minWidth: "100%",
- overflow: "hidden",
- fontSize: isMobile ? "1.3rem" : "1.1rem",
- };
-
-
-
-
- const CustomButton = (props) => {
- const { title, icon, link } = props
-
- const [hover, setHover] = useState(false)
-
- return (
-
- {
- if (link === "" || link === undefined) {
- event.preventDefault()
- console.log("IN CLICK!")
- if (window.drift !== undefined) {
- window.drift.api.startInteraction({ interactionId: 340043 })
- } else {
- console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
- }
- } else {
- console.log("Link defined: ", link)
+ function scrollToHash() {
+ const hash = window.location.hash.replace("#", "")
+ if (hash) {
+ const element = document.getElementById(hash)
+ if (element) {
+ element.scrollIntoView({ behavior: "instant" })
}
- }} onMouseOver={() => {
- setHover(true)
- }}
- onMouseOut={() => {
- setHover(false);
- }}
- >
- {icon}
-
- {title}
-
-
-
- )
- }
+ }
-
- const DocumentationButton = (props) => {
- const { item, link } = props
-
- const [hover, setHover] = useState(false);
-
- if (link === undefined || link === null) {
- return null
}
- return (
-
- {
- setHover(true)
- }}
- onMouseOut={() => {
- setHover(false);
- }}
- >
-
- {item}
-
-
-
- )
- }
+ function tocvalue(markdown) {
+ const items = [];
+ let currentMainItem = null;
- const headerStyle = {
- marginTop: 25,
- }
+ const lines = markdown.split('\n');
- const mainpageInfo =
-
-
- Documentation
-
-
- />
- link="https://discord.gg/B2CBzUm" />
-
+ for (let i = 0; i < lines.length; i++) {
+ const line = lines[i];
+ if (line.startsWith('* [')) {
+ const matches = line.match(/^\* \[([^)]+)\]\(#([^)]+)\)/);
+ if (matches) {
+ currentMainItem = {
+ id: matches[2],
+ title: matches[1],
+ items: [],
+ };
+ items.push(currentMainItem);
+ }
+ } else if (line.startsWith(' * [')) {
+ if (currentMainItem) {
+ const matches = line.match(/^ \* \[([^)]+)\]\(#([^)]+)\)/);
+ if (matches) {
+ currentMainItem.items.push({
+ id: matches[2],
+ title: matches[1],
+ });
+ }
+ }
+ } else if (line.startsWith('##')) {
+ continue
+ }
+ }
+ return items
+ }
-
-
Tutorial
-
- Dive in. Hands-on is the best approach to see how Shuffle can transform your security operations. Our set of tutorials and videos teach you how to build your skills. Check out the getting started section to give it a go!
-
+ const SidebarPaperStyle = {
+ backgroundColor: "rgb(26,26,26)",
+ backgroundImage: "none",
+ overflowX: "hidden",
+ position: "relative",
+ paddingLeft: 15,
+ paddingRight: 15,
+ minHeight: "80vh",
+ };
-
Why Shuffle?
-
- Security first. We incentivize trying before buying, and give you the full set of tools you need to automate your operations. What's more is we also help you find usecases that fit your unique needs. Accessibility is key, and we intend to help every SOC globally use and share their usecases.
-
+ const Heading = (props) => {
+ var id = props.children[0].toLowerCase().toString()
+ if (props.level <= 3) {
+ id = props.children[0].toLowerCase().toString().replaceAll(" ", "-");
+ }
-
Get help
-
- Our promise is to make it easier and easier to automate your operations. In some cases however, it may be good with a helping hand. That's where Shuffle's consultancy and support services come in handy. We help you build and automate your operational processes to a level you haven't seen before with the help of our usecases .
-
+ const element = React.createElement(
+ `h${props.level}`,
+ { id: `${id}` },
+ props.children,
+ );
-
APIs
-
- Learn. We're all about learning, and are continuously creating documentation and video tutorials to better understand how to get started. APIs are an extremely important part of how the internet works today, and our goal is helping every security professional learn about them.
-
+ const [hover, setHover] = useState(false);
-
Workflow building
-
- Build. Creating workflows has never been easier. Jump into things with our getting Started section and build to your hearts content. Workflows make it all come together, with an easy to use area.
-
+ var extraInfo = "";
+ if (props.level === 1) {
+ extraInfo = (
+
+
+ {mobile ? null : (
+
+
+
+ Edit
+
+
+
+ )}
+ {mobile ? null : (
+
+ )}
+
+ {selectedMeta.read_time} minute
+ {selectedMeta.read_time === 1 ? "" : "s"} to read
+
+
+
+ {mobile ||
+ selectedMeta.contributors === undefined ||
+ selectedMeta.contributors === null ? (
+ ""
+ ) : (
+
+ {selectedMeta.contributors.slice(0, 7).map((data, index) => {
+ return (
+
+
+
+
+
+ );
+ })}
+
+ )}
+
+
+ );
+ }
-
Managing Shuffle
-
- Organize. Whether an organization of 1000 or 1, management tools are necessary. In Shuffle we offer full user management, MFA and single-signon options, multi-tenancy and a lot more - for free!
-
-
-
+ 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")) {
+ extraInfo = ""
+ }
+ }
+ return (
+ {
+ setHover(true);
+ }}
+ id={id}
+ >
+ {props.level !== 1 ? (
+
+ ) : null}
+
- const markdownComponents = {
- img: Img,
- code: CodeHandler,
- h1: Heading,
- h2: Heading,
- h3: Heading,
- h4: Heading,
- h5: Heading,
- h6: Heading,
- a: OuterLink,
- }
+ {extraInfo}
+
+ )
+ }
- // PostDataBrowser Section
- const postDataBrowser =
- list === undefined || list === null ? null : (
-
-
-
-
- {list.map((data, index) => {
- const item = data.name;
- if (item === undefined) {
- return null;
+
+ const SideBar = {
+ width: "17%",
+ position: "sticky",
+ top: 50,
+ minHeight: "93vh",
+ maxHeight: "93vh",
+ overflowX: "hidden",
+ overflowY: "auto",
+ zIndex: 1000,
+ //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",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ })
+ .then((response) => response.json())
+ .then((responseJson) => {
+ if (responseJson.success) {
+ setList(responseJson.list);
+ } else {
+ setList(["# Error loading documentation. Please contact us if this persists.",]);
+ toast("Failed loading documentation. Please reload the window")
+ }
+ setListLoaded(true);
+ })
+ .catch((error) => { });
+ };
+
+ const fetchDocs = (docId) => {
+ fetch(`${globalUrl}/api/v1/docs/${docId}`, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ })
+ .then((response) => response.json())
+ .then((responseJson) => {
+ if (responseJson.success === false) {
+ //toast("Failed loading documentation. Please reload the UI")
}
- const path = "/docs/" + item;
- const newname =
- item.charAt(0).toUpperCase() +
- item.substring(1).split("_").join(" ").split("-").join(" ");
+ if (responseJson.success && responseJson.reason !== undefined) {
+ // Find tags and translate them into ![]() format
+ const imgRegex = /
- {
- setTocLines([]);
- fetchDocs(item);
- handleCollapse(index);
- }}
- >
-
- {newname}
-
- {isopen === index ? : }
-
- {itemMatching &&
- tocLines !== null &&
- tocLines !== undefined &&
- tocLines.length > 0 ? (
-
- {tocLines.map((data, index) => {
+ if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason.includes("404: Not Found")) {
+ navigate("/docs")
+ return
+ }
- return (
-
-
- {data.text}
-
-
- );
- })}
-
- ) : null}
-
- );
- })}
-
-
-
-
- {props.match.params.key === undefined ?
- mainpageInfo
- :
-
-
- {data}
-
-
- }
-
-
- );
+ if (responseJson.meta !== undefined) {
+ setSelectedMeta(responseJson.meta);
+ }
- const mobileStyle = {
- color: "white",
- marginLeft: 25,
- marginRight: 25,
- paddingBottom: 50,
- backgroundColor: "inherit",
- display: "flex",
- flexDirection: "column",
- };
+ //console.log("TOC list: ", responseJson.reason)
+ if (
+ responseJson.reason !== undefined &&
+ responseJson.reason !== null
+ ) {
+ const values = tocvalue(responseJson.reason.match(tocRegex)
+ .join()
+ .toString());
+ setTocLines(values);
+ }
+ } else {
+ setData("# Error\nThis page doesn't exist.");
+ }
+ })
+ .catch((error) => { });
+ };
-
- const postDataMobile =
- list === undefined || list === null ? null : (
-
-
- {props.match.params.key === undefined ?
- mainpageInfo
- :
-
-
- {data}
-
-
+ if (firstrequest) {
+ setFirstrequest(false);
+ if (!serverside) {
+ if (window.innerWidth < 768) {
+ setMobile(true);
+ }
}
-
-
- More docs
-
-
+
+ if (selectedDoc !== undefined) {
+ setData(selectedDoc.reason);
+ setList(selectedDoc.list);
+ setListLoaded(true);
+ } else {
+ if (!serverside) {
+ fetchDocList();
+
+ //const propkey = props.match.params.key
+ //if (propkey === undefined) {
+ // navigate("/docs/about")
+ // return null
+ //}
+ //
+ if (props.match.params.key === undefined) {
+
+ } else {
+ console.log("DOCID: ", props.match.params.key)
+ fetchDocs(props.match.params.key)
+ }
+ }
+ }
+ }
+
+ // Handles search-based changes that origin from outside this file
+ if (serverside !== true && window.location.href !== baseUrl) {
+ setBaseUrl(window.location.href);
+ fetchDocs(props.match.params.key);
+ }
+
+ // const parseElementScroll = () => {
+ // const offset = 45;
+ // var parent = document.getElementById("markdown_wrapper_outer");
+ // if (parent !== null) {
+ // //console.log("IN PARENT")
+ // var elements = parent.getElementsByTagName("h2");
+ //
+ // const name = window.location.hash
+ // .slice(1, window.location.hash.length)
+ // .toLowerCase()
+ // .split("%20")
+ // .join(" ")
+ // .split("_")
+ // .join(" ")
+ // .split("-")
+ // .join(" ")
+ // .split("?")[0]
+ //
+ // //console.log(name)
+ // var found = false;
+ // for (var key in elements) {
+ // const element = elements[key];
+ // if (element.innerHTML === undefined) {
+ // continue;
+ // }
+ //
+ // // Fix location..
+ // if (element.innerHTML.toLowerCase() === name) {
+ // //console.log(element.offsetTop)
+ // element.scrollIntoView({ behavior: "smooth" });
+ // //element.scrollTo({
+ // // top: element.offsetTop+offset,
+ // // behavior: "smooth"
+ // //})
+ // found = true;
+ // //element.scrollTo({
+ // // top: element.offsetTop-100,
+ // // behavior: "smooth"
+ // //})
+ // }
+ // }
+ //
+ // // H#
+ // if (!found) {
+ // elements = parent.getElementsByTagName("h3");
+ // //console.log("NAMe: ", name)
+ // found = false;
+ // for (key in elements) {
+ // const element = elements[key];
+ // if (element.innerHTML === undefined) {
+ // continue;
+ // }
+ //
+ // // Fix location..
+ // if (element.innerHTML.toLowerCase() === name) {
+ // element.scrollIntoView({ behavior: "smooth" });
+ // //element.scrollTo({
+ // // top: element.offsetTop-offset,
+ // // behavior: "smooth"
+ // //})
+ // found = true;
+ // //element.scrollTo({
+ // // top: element.offsetTop-100,
+ // // behavior: "smooth"
+ // //})
+ // }
+ // }
+ // }
+ // }
+ // //console.log(element)
+ //
+ // //console.log("NAME: ", name)
+ // //console.log(document.body.innerHTML)
+ // // parent = document.getElementById(parent);
+ //
+ // //var descendants = parent.getElementsByTagName(tagname);
+ //
+ // // this.scrollDiv.current.scrollIntoView({ behavior: 'smooth' });
+ //
+ // //$(".parent").find("h2:contains('Statistics')").parent();
+ // };
+
+ if (serverside !== true && window.location.hash.length > 0) {
+ scrollToHash()
+ }
+
+ const markdownStyle = {
+ color: "rgba(255, 255, 255, 0.90)",
+ overflow: "hidden",
+ paddingBottom: 100,
+ margin: "auto",
+ maxWidth: "100%",
+ minWidth: "100%",
+ overflow: "hidden",
+ fontSize: isMobile ? "1.3rem" : "1.1rem",
+ };
+
+ const CustomButton = (props) => {
+ const { title, icon, link } = props
+
+ return (
+
+ {
+ if (link === "" || link === undefined) {
+ event.preventDefault()
+ console.log("IN CLICK!")
+ if (window.drift !== undefined) {
+ window.drift.api.startInteraction({ interactionId: 340043 })
+ } else {
+ console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
+ }
+ } else {
+ console.log("Link defined: ", link)
+ }
+ }} onMouseOver={() => {
+ setHover(true)
+ }}
+ onMouseOut={() => {
+ setHover(false);
+ }}
+ >
+ {icon}
+
+ {title}
+
+
+
+ )
+ }
+
+
+ const DocumentationButton = (props) => {
+ const { item, link } = props
+
+
+ if (link === undefined || link === null) {
+ return null
+ }
+
+ return (
+
+ {
+ setHover(true)
+ }}
+ onMouseOut={() => {
+ setHover(false);
+ }}
+ >
+
+ {item}
+
+
+
+ )
+ }
+
+ const headerStyle = {
+ marginTop: 25,
+ }
+
+ const mainpageInfo =
+
+
+ Documentation
+
+
+ />
+ link="https://discord.gg/B2CBzUm" />
+
+
+
+
Tutorial
+
+ Dive in. Hands-on is the best approach to see how Shuffle can transform your security operations. Our set of tutorials and videos teach you how to build your skills. Check out the getting started section to give it a go!
+
+
+
Why Shuffle?
+
+ Security first. We incentivize trying before buying, and give you the full set of tools you need to automate your operations. What's more is we also help you find usecases that fit your unique needs. Accessibility is key, and we intend to help every SOC globally use and share their usecases.
+
+
+
Get help
+
+ Our promise is to make it easier and easier to automate your operations. In some cases however, it may be good with a helping hand. That's where Shuffle's consultancy and support services come in handy. We help you build and automate your operational processes to a level you haven't seen before with the help of our usecases .
+
+
+
APIs
+
+ Learn. We're all about learning, and are continuously creating documentation and video tutorials to better understand how to get started. APIs are an extremely important part of how the internet works today, and our goal is helping every security professional learn about them.
+
+
+
Workflow building
+
+ Build. Creating workflows has never been easier. Jump into things with our getting Started section and build to your hearts content. Workflows make it all come together, with an easy to use area.
+
+
+
Managing Shuffle
+
+ Organize. Whether an organization of 1000 or 1, management tools are necessary. In Shuffle we offer full user management, MFA and single-signon options, multi-tenancy and a lot more - for free!
+
+
+
+
+ const markdownComponents = {
+ img: Img,
+ code: CodeHandler,
+ h1: Heading,
+ h2: Heading,
+ h3: Heading,
+ h4: Heading,
+ h5: Heading,
+ h6: Heading,
+ a: OuterLink,
+ }
+
+
+ // PostDataBrowser Section
+ const postDataBrowser =
+ list === undefined || list === null ? null : (
+
+
+
+
+ {list.map((data, index) => {
+ const item = data.name;
+ if (item === undefined) {
+ return null;
+ }
+ const path = "/docs/" + item;
+ const newname =
+ item.charAt(0).toUpperCase() +
+ item.substring(1).split("_").join(" ").split("-").join(" ");
+
+ const itemMatching = props.match.params.key === undefined ? false :
+ props.match.params.key.toLowerCase() === item.toLowerCase();
+ return (
+
+
+
+ {newname}
+
+
+
+ );
+ })}
+
+
+
+
+ {props.match.params.key === undefined ?
+ mainpageInfo
+ :
+
+
+ {data}
+
+
+ }
+
+
+ {tocLines.length > 0 ?
+ (
+
Table Of Content
+
+ ) : null}
+
+ {tocLines.map((data, index) => {
+ return (
+
+ {
+ handleCollapse(index)
+ }}
+ >
+ {data.title}
+ {data.items.length > 0 ? (
+ <>{isopen == index ? : }>
+ ) : null}
+
+ {
+ data.items.length > 0 &&
+ data.items !== null &&
+ data.items !== undefined ? (
+
+ {data.items.map((d, i) => {
+ return (
+
+ {d.title}
+
+ )
+ })}
+
+ ) : null
+ }
+
+
+ )
+ })}
+
+
+
+
+ );
+
+ const mobileStyle = {
+ color: "white",
+ marginLeft: 25,
+ marginRight: 25,
+ paddingBottom: 50,
+ backgroundColor: "inherit",
+ display: "flex",
+ flexDirection: "column",
+ };
+
+ const postDataMobile =
+ list === undefined || list === null ? null : (
+
+
+
+ More docs
+
+
+
+ Table Of Contents
+
+
+
+ {props.match.params.key === undefined ?
+ mainpageInfo
+ :
+
+
+ {data}
+
+
+ }
+
+
+ More docs
+
+
+ );
+
+ // Padding and zIndex etc set because of footer in cloud.
+ const loadedCheck = (
+
+ {postDataBrowser}
+ {postDataMobile}
+
);
- // Padding and zIndex etc set because of footer in cloud.
- const loadedCheck = (
-
- {postDataBrowser}
- {postDataMobile}
-
- );
-
- return {loadedCheck}
;
+ return {loadedCheck}
;
};
export default Docs;