Sidebar UI changed
This commit is contained in:
Monil Prajapati
@@ -76,10 +76,10 @@
|
|||||||
"shellwords": "^0.1.1",
|
"shellwords": "^0.1.1",
|
||||||
"simplebar": "^4.2.3",
|
"simplebar": "^4.2.3",
|
||||||
"styled-components": "^4.4.0",
|
"styled-components": "^4.4.0",
|
||||||
|
"webpack": "^5.88.2",
|
||||||
"yaml": "^1.7.2",
|
"yaml": "^1.7.2",
|
||||||
"yamljs": "^0.3.0",
|
"yamljs": "^0.3.0",
|
||||||
"zone.js": "^0.13.1",
|
"zone.js": "^0.13.1"
|
||||||
"webpack": "^5.88.2"
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "HTTPS=false&&PORT=3000 GENERATE_SOURCEMAP=false react-scripts --openssl-legacy-provider start",
|
"start": "HTTPS=false&&PORT=3000 GENERATE_SOURCEMAP=false react-scripts --openssl-legacy-provider start",
|
||||||
|
|||||||
+276
-263
@@ -6,11 +6,13 @@ import { useParams, useNavigate, Link } from "react-router-dom";
|
|||||||
import { isMobile } from "react-device-detect";
|
import { isMobile } from "react-device-detect";
|
||||||
import theme from '../theme.jsx';
|
import theme from '../theme.jsx';
|
||||||
import remarkGfm from 'remark-gfm'
|
import remarkGfm from 'remark-gfm'
|
||||||
|
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
||||||
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Grid,
|
Grid,
|
||||||
TextField,
|
TextField,
|
||||||
IconButton,
|
IconButton,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
Divider,
|
Divider,
|
||||||
Button,
|
Button,
|
||||||
@@ -19,11 +21,14 @@ import {
|
|||||||
Typography,
|
Typography,
|
||||||
Paper,
|
Paper,
|
||||||
List,
|
List,
|
||||||
|
Collapse,
|
||||||
|
ListItemButton,
|
||||||
|
ListItemText
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Link as LinkIcon,
|
Link as LinkIcon,
|
||||||
Edit as EditIcon,
|
Edit as EditIcon,
|
||||||
} from "@mui/icons-material";
|
} from "@mui/icons-material";
|
||||||
|
|
||||||
const Body = {
|
const Body = {
|
||||||
@@ -34,7 +39,7 @@ const Body = {
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
color: "white",
|
color: "white",
|
||||||
position: "relative",
|
position: "relative",
|
||||||
//textAlign: "center",
|
//textAlign: "center",
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -57,27 +62,28 @@ const innerHrefStyle = {
|
|||||||
const Docs = (defaultprops) => {
|
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
|
// Quickfix for react router 5 -> 6
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
//var props = JSON.parse(JSON.stringify(defaultprops))
|
//var props = JSON.parse(JSON.stringify(defaultprops))
|
||||||
var props = Object.assign({selected: false}, defaultprops);
|
var props = Object.assign({ selected: false }, defaultprops);
|
||||||
props.match = {}
|
props.match = {}
|
||||||
props.match.params = params
|
props.match.params = params
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
//if (params["key"] === undefined) {
|
//if (params["key"] === undefined) {
|
||||||
// navigate("/docs/about")
|
// navigate("/docs/about")
|
||||||
// return
|
// return
|
||||||
//}
|
//}
|
||||||
}, [])
|
}, [])
|
||||||
//console.log("PARAMS: ", params)
|
//console.log("PARAMS: ", params)
|
||||||
|
|
||||||
const [mobile, setMobile] = useState(serverMobile === true || isMobile === true ? true : false);
|
const [mobile, setMobile] = useState(serverMobile === true || isMobile === true ? true : false);
|
||||||
const [data, setData] = useState("");
|
const [data, setData] = useState("");
|
||||||
const [firstrequest, setFirstrequest] = useState(true);
|
const [firstrequest, setFirstrequest] = useState(true);
|
||||||
const [list, setList] = useState([]);
|
const [list, setList] = useState([]);
|
||||||
|
const [isopen, setOpen] = useState(-1);
|
||||||
const [, setListLoaded] = useState(false);
|
const [, setListLoaded] = useState(false);
|
||||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||||
const [headingSet, setHeadingSet] = React.useState(false);
|
const [headingSet, setHeadingSet] = React.useState(false);
|
||||||
@@ -98,29 +104,34 @@ const Docs = (defaultprops) => {
|
|||||||
setAnchorEl(null);
|
setAnchorEl(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleCollapse = (index) => {
|
||||||
|
setOpen(isopen === index ? -1 : index)
|
||||||
|
};
|
||||||
|
|
||||||
const SidebarPaperStyle = {
|
const SidebarPaperStyle = {
|
||||||
backgroundColor: theme.palette.surfaceColor,
|
backgroundColor: theme.palette.surfaceColor,
|
||||||
overflowX: "hidden",
|
overflowX: "hidden",
|
||||||
position: "relative",
|
position: "relative",
|
||||||
padding: 30,
|
paddingLeft: 15,
|
||||||
|
paddingRight: 15,
|
||||||
paddingTop: 15,
|
paddingTop: 15,
|
||||||
marginTop: 15,
|
marginTop: 15,
|
||||||
minHeight: "80vh",
|
minHeight: "80vh",
|
||||||
//height: "50vh",
|
//height: "50vh",
|
||||||
};
|
};
|
||||||
|
|
||||||
const SideBar = {
|
const SideBar = {
|
||||||
minWidth: 250,
|
minWidth: 300,
|
||||||
maxWidth: 300,
|
width: "20%",
|
||||||
left: 0,
|
left: 0,
|
||||||
position: "sticky",
|
position: "sticky",
|
||||||
top: 50,
|
top: 50,
|
||||||
minHeight: "90vh",
|
minHeight: "90vh",
|
||||||
maxHeight: "90vh",
|
maxHeight: "90vh",
|
||||||
overflowX: "hidden",
|
overflowX: "hidden",
|
||||||
overflowY: "auto",
|
overflowY: "auto",
|
||||||
zIndex: 1000,
|
zIndex: 1000,
|
||||||
//borderRight: "1px solid rgba(255,255,255,0.3)",
|
//borderRight: "1px solid rgba(255,255,255,0.3)",
|
||||||
};
|
};
|
||||||
|
|
||||||
const fetchDocList = () => {
|
const fetchDocList = () => {
|
||||||
@@ -142,7 +153,7 @@ const Docs = (defaultprops) => {
|
|||||||
}
|
}
|
||||||
setListLoaded(true);
|
setListLoaded(true);
|
||||||
})
|
})
|
||||||
.catch((error) => {});
|
.catch((error) => { });
|
||||||
};
|
};
|
||||||
|
|
||||||
const fetchDocs = (docId) => {
|
const fetchDocs = (docId) => {
|
||||||
@@ -157,16 +168,16 @@ const Docs = (defaultprops) => {
|
|||||||
.then((responseJson) => {
|
.then((responseJson) => {
|
||||||
if (responseJson.success) {
|
if (responseJson.success) {
|
||||||
setData(responseJson.reason);
|
setData(responseJson.reason);
|
||||||
if (docId === undefined) {
|
if (docId === undefined) {
|
||||||
document.title = "Shuffle documentation introduction";
|
document.title = "Shuffle documentation introduction";
|
||||||
} else {
|
} else {
|
||||||
document.title = "Shuffle " + docId + " documentation";
|
document.title = "Shuffle " + docId + " documentation";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason.includes("404: Not Found")) {
|
if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason.includes("404: Not Found")) {
|
||||||
navigate("/docs")
|
navigate("/docs")
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (responseJson.meta !== undefined) {
|
if (responseJson.meta !== undefined) {
|
||||||
setSelectedMeta(responseJson.meta);
|
setSelectedMeta(responseJson.meta);
|
||||||
@@ -226,7 +237,7 @@ const Docs = (defaultprops) => {
|
|||||||
setData("# Error\nThis page doesn't exist.");
|
setData("# Error\nThis page doesn't exist.");
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {});
|
.catch((error) => { });
|
||||||
};
|
};
|
||||||
|
|
||||||
if (firstrequest) {
|
if (firstrequest) {
|
||||||
@@ -245,18 +256,18 @@ const Docs = (defaultprops) => {
|
|||||||
if (!serverside) {
|
if (!serverside) {
|
||||||
fetchDocList();
|
fetchDocList();
|
||||||
|
|
||||||
//const propkey = props.match.params.key
|
//const propkey = props.match.params.key
|
||||||
//if (propkey === undefined) {
|
//if (propkey === undefined) {
|
||||||
// navigate("/docs/about")
|
// navigate("/docs/about")
|
||||||
// return null
|
// return null
|
||||||
//}
|
//}
|
||||||
//
|
//
|
||||||
if (props.match.params.key === undefined) {
|
if (props.match.params.key === undefined) {
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
console.log("DOCID: ", props.match.params.key)
|
console.log("DOCID: ", props.match.params.key)
|
||||||
fetchDocs(props.match.params.key)
|
fetchDocs(props.match.params.key)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -283,7 +294,7 @@ const Docs = (defaultprops) => {
|
|||||||
.join(" ")
|
.join(" ")
|
||||||
.split("-")
|
.split("-")
|
||||||
.join(" ")
|
.join(" ")
|
||||||
.split("?")[0]
|
.split("?")[0]
|
||||||
|
|
||||||
//console.log(name)
|
//console.log(name)
|
||||||
var found = false;
|
var found = false;
|
||||||
@@ -357,15 +368,15 @@ const Docs = (defaultprops) => {
|
|||||||
color: "rgba(255, 255, 255, 0.65)",
|
color: "rgba(255, 255, 255, 0.65)",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
paddingBottom: 100,
|
paddingBottom: 100,
|
||||||
margin: "auto",
|
margin: "auto",
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
minWidth: "100%",
|
minWidth: "100%",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
fontSize: isMobile ? "1.3rem" : "1.0rem",
|
fontSize: isMobile ? "1.3rem" : "1.0rem",
|
||||||
};
|
};
|
||||||
|
|
||||||
function OuterLink(props) {
|
function OuterLink(props) {
|
||||||
console.log("Link: ", props.href)
|
console.log("Link: ", props.href)
|
||||||
if (props.href.includes("http") || props.href.includes("mailto")) {
|
if (props.href.includes("http") || props.href.includes("mailto")) {
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
@@ -391,9 +402,9 @@ const Docs = (defaultprops) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function CodeHandler(props) {
|
function CodeHandler(props) {
|
||||||
console.log("PROPS: ", props)
|
console.log("PROPS: ", props)
|
||||||
|
|
||||||
const propvalue = props.value !== undefined && props.value !== null ? props.value : props.children !== undefined && props.children !== null && props.children.length > 0 ? props.children[0] : ""
|
const propvalue = props.value !== undefined && props.value !== null ? props.value : props.children !== undefined && props.children !== null && props.children.length > 0 ? props.children[0] : ""
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -406,12 +417,12 @@ const Docs = (defaultprops) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<code
|
<code
|
||||||
style={{
|
style={{
|
||||||
// Wrap if larger than X
|
// Wrap if larger than X
|
||||||
whiteSpace: "pre-wrap",
|
whiteSpace: "pre-wrap",
|
||||||
overflow: "auto",
|
overflow: "auto",
|
||||||
}}
|
}}
|
||||||
>{propvalue}</code>
|
>{propvalue}</code>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -436,7 +447,7 @@ const Docs = (defaultprops) => {
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ flex: 3, display: "flex", vAlign: "center", position: "sticky", top: 50, }}>
|
<div style={{ flex: 3, display: "flex", vAlign: "center", position: "sticky", top: 50, }}>
|
||||||
{mobile ? null : (
|
{mobile ? null : (
|
||||||
<Typography style={{ display: "inline", marginTop: 6 }}>
|
<Typography style={{ display: "inline", marginTop: 6 }}>
|
||||||
<a
|
<a
|
||||||
@@ -445,7 +456,7 @@ const Docs = (defaultprops) => {
|
|||||||
href={selectedMeta.link}
|
href={selectedMeta.link}
|
||||||
style={{ textDecoration: "none", color: "#f85a3e" }}
|
style={{ textDecoration: "none", color: "#f85a3e" }}
|
||||||
>
|
>
|
||||||
<Button style={{color: "white", }} variant="outlined" color="secondary">
|
<Button style={{ color: "white", }} variant="outlined" color="secondary">
|
||||||
<EditIcon /> Edit
|
<EditIcon /> Edit
|
||||||
</Button>
|
</Button>
|
||||||
</a>
|
</a>
|
||||||
@@ -469,15 +480,15 @@ const Docs = (defaultprops) => {
|
|||||||
</div>
|
</div>
|
||||||
<div style={{ flex: 2 }}>
|
<div style={{ flex: 2 }}>
|
||||||
{mobile ||
|
{mobile ||
|
||||||
selectedMeta.contributors === undefined ||
|
selectedMeta.contributors === undefined ||
|
||||||
selectedMeta.contributors === null ? (
|
selectedMeta.contributors === null ? (
|
||||||
""
|
""
|
||||||
) : (
|
) : (
|
||||||
<div style={{ margin: 10, height: "100%", display: "inline" }}>
|
<div style={{ margin: 10, height: "100%", display: "inline" }}>
|
||||||
{selectedMeta.contributors.slice(0, 7).map((data, index) => {
|
{selectedMeta.contributors.slice(0, 7).map((data, index) => {
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
key={index}
|
key={index}
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
href={data.url}
|
href={data.url}
|
||||||
@@ -545,133 +556,133 @@ const Docs = (defaultprops) => {
|
|||||||
//}
|
//}
|
||||||
|
|
||||||
|
|
||||||
const CustomButton = (props) => {
|
const CustomButton = (props) => {
|
||||||
const {title, icon, link} = props
|
const { title, icon, link } = props
|
||||||
|
|
||||||
const [hover, setHover] = useState(false)
|
const [hover, setHover] = useState(false)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
href={link}
|
href={link}
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
style={{ textDecoration: "none", color: "inherit", flex: 1, margin: 10, }}
|
style={{ textDecoration: "none", color: "inherit", flex: 1, margin: 10, }}
|
||||||
>
|
>
|
||||||
<div style={{cursor: hover ? "pointer" : "default", borderRadius: theme.palette.borderRadius, flex: 1, border: "1px solid rgba(255,255,255,0.3)", backgroundColor: hover ? theme.palette.surfaceColor : theme.palette.inputColor, padding: 25, }}
|
<div style={{ cursor: hover ? "pointer" : "default", borderRadius: theme.palette.borderRadius, flex: 1, border: "1px solid rgba(255,255,255,0.3)", backgroundColor: hover ? theme.palette.surfaceColor : theme.palette.inputColor, padding: 25, }}
|
||||||
onClick={(event) => {
|
onClick={(event) => {
|
||||||
if (link === "" || link === undefined) {
|
if (link === "" || link === undefined) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
console.log("IN CLICK!")
|
console.log("IN CLICK!")
|
||||||
if (window.drift !== undefined) {
|
if (window.drift !== undefined) {
|
||||||
window.drift.api.startInteraction({ interactionId: 340043 })
|
window.drift.api.startInteraction({ interactionId: 340043 })
|
||||||
} else {
|
} else {
|
||||||
console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
|
console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log("Link defined: ", link)
|
console.log("Link defined: ", link)
|
||||||
}
|
}
|
||||||
}} onMouseOver={() => {
|
}} onMouseOver={() => {
|
||||||
setHover(true)
|
setHover(true)
|
||||||
}}
|
}}
|
||||||
onMouseOut={() => {
|
onMouseOut={() => {
|
||||||
setHover(false);
|
setHover(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{icon}
|
{icon}
|
||||||
<Typography variant="body1" style={{}} >
|
<Typography variant="body1" style={{}} >
|
||||||
{title}
|
{title}
|
||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const DocumentationButton = (props) => {
|
const DocumentationButton = (props) => {
|
||||||
const {item, link} = props
|
const { item, link } = props
|
||||||
|
|
||||||
const [hover, setHover] = useState(false);
|
const [hover, setHover] = useState(false);
|
||||||
|
|
||||||
console.log("Link: ", link)
|
console.log("Link: ", link)
|
||||||
if (link === undefined || link === null) {
|
if (link === undefined || link === null) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to={link} style={hrefStyle}>
|
<Link to={link} style={hrefStyle}>
|
||||||
<div style={{width: "100%", height: 80, cursor: hover ? "pointer" : "default", borderRadius: theme.palette.borderRadius, border: "1px solid rgba(255,255,255,0.3)", backgroundColor: hover ? theme.palette.surfaceColor : theme.palette.inputColor, }}
|
<div style={{ width: "100%", height: 80, cursor: hover ? "pointer" : "default", borderRadius: theme.palette.borderRadius, border: "1px solid rgba(255,255,255,0.3)", backgroundColor: hover ? theme.palette.surfaceColor : theme.palette.inputColor, }}
|
||||||
onMouseOver={() => {
|
onMouseOver={() => {
|
||||||
setHover(true)
|
setHover(true)
|
||||||
}}
|
}}
|
||||||
onMouseOut={() => {
|
onMouseOut={() => {
|
||||||
setHover(false);
|
setHover(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography variant="body1" style={{}} >
|
<Typography variant="body1" style={{}} >
|
||||||
{item}
|
{item}
|
||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const headerStyle = {
|
const headerStyle = {
|
||||||
marginTop: 25,
|
marginTop: 25,
|
||||||
}
|
}
|
||||||
|
|
||||||
const mainpageInfo =
|
const mainpageInfo =
|
||||||
<div style={{
|
<div style={{
|
||||||
color: "rgba(255, 255, 255, 0.65)",
|
color: "rgba(255, 255, 255, 0.65)",
|
||||||
flex: "1",
|
flex: "1",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
paddingBottom: 100,
|
paddingBottom: 100,
|
||||||
marginLeft: mobile ? 0 : 50,
|
marginLeft: mobile ? 0 : 50,
|
||||||
marginTop: 50,
|
marginTop: 50,
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
margin: "auto",
|
margin: "auto",
|
||||||
marginTop: 50,
|
marginTop: 50,
|
||||||
}}>
|
}}>
|
||||||
<Typography variant="h4" style={{textAlign: "center",}}>
|
<Typography variant="h4" style={{ textAlign: "center", }}>
|
||||||
Documentation
|
Documentation
|
||||||
</Typography>
|
</Typography>
|
||||||
<div style={{display: "flex", marginTop: 25, }}>
|
<div style={{ display: "flex", marginTop: 25, }}>
|
||||||
<CustomButton title="Talk to Support" icon=<img src="/images/Shuffle_logo_new.png" style={{height: 35, width: 35, border: "", borderRadius: theme.palette.borderRadius, }} /> />
|
<CustomButton title="Talk to Support" icon=<img src="/images/Shuffle_logo_new.png" style={{ height: 35, width: 35, border: "", borderRadius: theme.palette.borderRadius, }} /> />
|
||||||
<CustomButton title="Ask the community" icon=<img src="/images/social/discord.png" style={{height: 35, width: 35, border: "", borderRadius: theme.palette.borderRadius, }} /> link="https://discord.gg/B2CBzUm" />
|
<CustomButton title="Ask the community" icon=<img src="/images/social/discord.png" style={{ height: 35, width: 35, border: "", borderRadius: theme.palette.borderRadius, }} /> link="https://discord.gg/B2CBzUm" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{textAlign: "left"}}>
|
<div style={{ textAlign: "left" }}>
|
||||||
<Typography variant="h6" style={headerStyle} >Tutorial</Typography>
|
<Typography variant="h6" style={headerStyle} >Tutorial</Typography>
|
||||||
<Typography variant="body1">
|
<Typography variant="body1">
|
||||||
<b>Dive in.</b> 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 <Link to="/docs/getting-started" style={hrefStyle2}>getting started</Link> section to give it a go!
|
<b>Dive in.</b> 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 <Link to="/docs/getting-started" style={hrefStyle2}>getting started</Link> section to give it a go!
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<Typography variant="h6" style={headerStyle}>Why Shuffle?</Typography>
|
<Typography variant="h6" style={headerStyle}>Why Shuffle?</Typography>
|
||||||
<Typography variant="body1">
|
<Typography variant="body1">
|
||||||
<b>Security first.</b> 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 <a href="https://shuffler.io/pricing?tag=docs" target="_blank" style={hrefStyle2}>find usecases</a> that fit your unique needs. Accessibility is key, and we intend to help every SOC globally use and share their usecases.
|
<b>Security first.</b> 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 <a href="https://shuffler.io/pricing?tag=docs" target="_blank" style={hrefStyle2}>find usecases</a> that fit your unique needs. Accessibility is key, and we intend to help every SOC globally use and share their usecases.
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<Typography variant="h6" style={headerStyle}>Get help</Typography>
|
<Typography variant="h6" style={headerStyle}>Get help</Typography>
|
||||||
<Typography variant="body1">
|
<Typography variant="body1">
|
||||||
<b>Our promise</b> 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 <a href="https://shuffler.io/pricing?tag=docs" target="_blank" style={hrefStyle2}>Shuffle's consultancy and support</a> 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 <a href="https://shuffler.io/usecases?tag=docs" target="_blank" style={hrefStyle2}>usecases</a>.
|
<b>Our promise</b> 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 <a href="https://shuffler.io/pricing?tag=docs" target="_blank" style={hrefStyle2}>Shuffle's consultancy and support</a> 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 <a href="https://shuffler.io/usecases?tag=docs" target="_blank" style={hrefStyle2}>usecases</a>.
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<Typography variant="h6" style={headerStyle}>APIs</Typography>
|
<Typography variant="h6" style={headerStyle}>APIs</Typography>
|
||||||
<Typography variant="body1">
|
<Typography variant="body1">
|
||||||
<b>Learn.</b> 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.
|
<b>Learn.</b> 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.
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<Typography variant="h6" style={headerStyle}>Workflow building</Typography>
|
<Typography variant="h6" style={headerStyle}>Workflow building</Typography>
|
||||||
<Typography variant="body1">
|
<Typography variant="body1">
|
||||||
<b>Build.</b> Creating workflows has never been easier. Jump into things with our <Link to="/getting-started" style={hrefStyle2}>getting Started</Link> section and build to your hearts content. Workflows make it all come together, with an easy to use area.
|
<b>Build.</b> Creating workflows has never been easier. Jump into things with our <Link to="/getting-started" style={hrefStyle2}>getting Started</Link> section and build to your hearts content. Workflows make it all come together, with an easy to use area.
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<Typography variant="h6" style={headerStyle}>Managing Shuffle</Typography>
|
<Typography variant="h6" style={headerStyle}>Managing Shuffle</Typography>
|
||||||
<Typography variant="body1">
|
<Typography variant="body1">
|
||||||
<b>Organize.</b> 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!
|
<b>Organize.</b> 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!
|
||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/*
|
{/*
|
||||||
<Grid container spacing={2} style={{marginTop: 50, }}>
|
<Grid container spacing={2} style={{marginTop: 50, }}>
|
||||||
{list.map((data, index) => {
|
{list.map((data, index) => {
|
||||||
const item = data.name;
|
const item = data.name;
|
||||||
@@ -696,7 +707,7 @@ const Docs = (defaultprops) => {
|
|||||||
</Grid>
|
</Grid>
|
||||||
*/}
|
*/}
|
||||||
|
|
||||||
{/*
|
{/*
|
||||||
<TextField
|
<TextField
|
||||||
required
|
required
|
||||||
style={{
|
style={{
|
||||||
@@ -722,8 +733,9 @@ const Docs = (defaultprops) => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
*/}
|
*/}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
// PostDataBrowser Section
|
||||||
const postDataBrowser =
|
const postDataBrowser =
|
||||||
list === undefined || list === null ? null : (
|
list === undefined || list === null ? null : (
|
||||||
<div style={Body}>
|
<div style={Body}>
|
||||||
@@ -741,52 +753,53 @@ const Docs = (defaultprops) => {
|
|||||||
item.charAt(0).toUpperCase() +
|
item.charAt(0).toUpperCase() +
|
||||||
item.substring(1).split("_").join(" ").split("-").join(" ");
|
item.substring(1).split("_").join(" ").split("-").join(" ");
|
||||||
|
|
||||||
const itemMatching = props.match.params.key === undefined ? false :
|
const itemMatching = props.match.params.key === undefined ? false :
|
||||||
props.match.params.key.toLowerCase() === item.toLowerCase();
|
props.match.params.key.toLowerCase() === item.toLowerCase();
|
||||||
//const [tocLines, setTocLines] = React.useState([]);
|
|
||||||
return (
|
return (
|
||||||
<li key={index} style={{ marginTop: 10 }}>
|
<li key={index}>
|
||||||
<Link
|
<ListItemButton
|
||||||
|
component={Link}
|
||||||
key={index}
|
key={index}
|
||||||
style={hrefStyle}
|
style={hrefStyle}
|
||||||
to={path}
|
to={path}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setTocLines([]);
|
setTocLines([]);
|
||||||
fetchDocs(item);
|
fetchDocs(item);
|
||||||
|
handleCollapse(index);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<ListItemText
|
||||||
style={{ color: itemMatching ? "#f86a3e" : "inherit" }}
|
style={{ color: itemMatching ? "#f86a3e" : "inherit" }}
|
||||||
variant="body1"
|
variant="body1"
|
||||||
>
|
>
|
||||||
<b>> {newname}</b>
|
{newname}
|
||||||
</Typography>
|
</ListItemText>
|
||||||
</Link>
|
{isopen === index ? <ExpandMoreIcon /> : <KeyboardArrowRightIcon />}
|
||||||
|
</ListItemButton>
|
||||||
{itemMatching &&
|
{itemMatching &&
|
||||||
tocLines !== null &&
|
tocLines !== null &&
|
||||||
tocLines !== undefined &&
|
tocLines !== undefined &&
|
||||||
tocLines.length > 0 ? (
|
tocLines.length > 0 ? (
|
||||||
<div style={{ marginLeft: 5 }}>
|
<Collapse in={isopen === index} timeout="auto" unmountOnExit>
|
||||||
{tocLines.map((data, index) => {
|
{tocLines.map((data, index) => {
|
||||||
//console.log(data)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<ListItemButton
|
||||||
|
component={Link}
|
||||||
key={index}
|
key={index}
|
||||||
style={innerHrefStyle}
|
style={innerHrefStyle}
|
||||||
to={data.link}
|
to={data.link}
|
||||||
onClick={() => {}}
|
|
||||||
>
|
>
|
||||||
<Typography
|
<ListItemText
|
||||||
variant="body2"
|
variant="body2"
|
||||||
style={{ cursor: "pointer" }}
|
style={{ cursor: "pointer" }}
|
||||||
>
|
>
|
||||||
- {data.text}
|
{data.text}
|
||||||
</Typography>
|
</ListItemText>
|
||||||
</Link>
|
</ListItemButton>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</Collapse>
|
||||||
) : null}
|
) : null}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
@@ -794,37 +807,37 @@ const Docs = (defaultprops) => {
|
|||||||
</List>
|
</List>
|
||||||
</Paper>
|
</Paper>
|
||||||
</div>
|
</div>
|
||||||
<div style={{maxWidth: 750, minWidth: 750, margin: "auto", overflow: "hidden", marginTop: 50, }}>
|
<div style={{ width: "70%", margin: "auto", overflow: "hidden", marginTop: 50, paddingRight: 50 }}>
|
||||||
{props.match.params.key === undefined ?
|
{props.match.params.key === undefined ?
|
||||||
mainpageInfo
|
mainpageInfo
|
||||||
:
|
:
|
||||||
<div id="markdown_wrapper_outer" style={markdownStyle}>
|
<div id="markdown_wrapper_outer" style={markdownStyle}>
|
||||||
<ReactMarkdown
|
<ReactMarkdown
|
||||||
components={{
|
components={{
|
||||||
img: Img,
|
img: Img,
|
||||||
code: CodeHandler,
|
code: CodeHandler,
|
||||||
h1: Heading,
|
h1: Heading,
|
||||||
h2: Heading,
|
h2: Heading,
|
||||||
h3: Heading,
|
h3: Heading,
|
||||||
h4: Heading,
|
h4: Heading,
|
||||||
h5: Heading,
|
h5: Heading,
|
||||||
h6: Heading,
|
h6: Heading,
|
||||||
a: OuterLink,
|
a: OuterLink,
|
||||||
}}
|
}}
|
||||||
id="markdown_wrapper"
|
id="markdown_wrapper"
|
||||||
escapeHtml={false}
|
escapeHtml={false}
|
||||||
style={{
|
style={{
|
||||||
maxWidth: "100%", minWidth: "100%",
|
maxWidth: "100%", minWidth: "100%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{data}
|
{data}
|
||||||
</ReactMarkdown>
|
</ReactMarkdown>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
// remarkPlugins={[remarkGfm]}
|
// remarkPlugins={[remarkGfm]}
|
||||||
|
|
||||||
const mobileStyle = {
|
const mobileStyle = {
|
||||||
color: "white",
|
color: "white",
|
||||||
@@ -882,32 +895,32 @@ const Docs = (defaultprops) => {
|
|||||||
})}
|
})}
|
||||||
</Menu>
|
</Menu>
|
||||||
</div>
|
</div>
|
||||||
{props.match.params.key === undefined ?
|
{props.match.params.key === undefined ?
|
||||||
mainpageInfo
|
mainpageInfo
|
||||||
:
|
:
|
||||||
<div id="markdown_wrapper_outer" style={markdownStyle}>
|
<div id="markdown_wrapper_outer" style={markdownStyle}>
|
||||||
<ReactMarkdown
|
<ReactMarkdown
|
||||||
components={{
|
components={{
|
||||||
img: Img,
|
img: Img,
|
||||||
code: CodeHandler,
|
code: CodeHandler,
|
||||||
h1: Heading,
|
h1: Heading,
|
||||||
h2: Heading,
|
h2: Heading,
|
||||||
h3: Heading,
|
h3: Heading,
|
||||||
h4: Heading,
|
h4: Heading,
|
||||||
h5: Heading,
|
h5: Heading,
|
||||||
h6: Heading,
|
h6: Heading,
|
||||||
a: OuterLink,
|
a: OuterLink,
|
||||||
}}
|
}}
|
||||||
id="markdown_wrapper"
|
id="markdown_wrapper"
|
||||||
escapeHtml={false}
|
escapeHtml={false}
|
||||||
style={{
|
style={{
|
||||||
maxWidth: "100%", minWidth: "100%",
|
maxWidth: "100%", minWidth: "100%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{data}
|
{data}
|
||||||
</ReactMarkdown>
|
</ReactMarkdown>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
<Divider
|
<Divider
|
||||||
style={{
|
style={{
|
||||||
marginTop: "10px",
|
marginTop: "10px",
|
||||||
@@ -934,9 +947,9 @@ const Docs = (defaultprops) => {
|
|||||||
// </Dialog>
|
// </Dialog>
|
||||||
// {imageModal}
|
// {imageModal}
|
||||||
|
|
||||||
// Padding and zIndex etc set because of footer in cloud.
|
// Padding and zIndex etc set because of footer in cloud.
|
||||||
const loadedCheck = (
|
const loadedCheck = (
|
||||||
<div style={{minHeight: 1000, paddingBottom: 100, zIndex: 50000, }}>
|
<div style={{ minHeight: 1000, paddingBottom: 100, zIndex: 50000, }}>
|
||||||
<BrowserView>{postDataBrowser}</BrowserView>
|
<BrowserView>{postDataBrowser}</BrowserView>
|
||||||
<MobileView>{postDataMobile}</MobileView>
|
<MobileView>{postDataMobile}</MobileView>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user