marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fresh look for docs

Browse Source
This commit is contained in:
yashsinghcodes
2024-05-06 13:28:49 +00:00
parent ef16173ac4
commit 8a3186a8c1
3 changed files with 809 additions and 875 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/codeeditor-index.css
+14
View File
@@ -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
View File
@@ -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
+40 -138
View File
@@ -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",
@@ -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: "20%",
left: 0,
width: "17%",
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)');
setData(newdata)
const tocRegex = /^## Table of contents[\s\S]*?(?=^##\s|\Z)|^\* \[[^\]]+\]\([^)]+\)\n?(?![^\n]+\]\([^)]+\))/gm;
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