Added more info to the contribution docs

frontend/src/views/Docs.jsx

@@ -5,7 +5,8 @@ import ReactMarkdown from 'react-markdown';
 import {BrowserView, MobileView} from "react-device-detect";
 import {Link} from 'react-router-dom';
 
-import {Divider, Button, Menu, MenuItem, Typography, Paper, List} from '@material-ui/core';
+import {Tooltip, Divider, Button, Menu, MenuItem, Typography, Paper, List} from '@material-ui/core';
+import {Edit as EditIcon} from '@material-ui/icons';
 
 const Body = {
   maxWidth: '1000px',
@@ -32,6 +33,8 @@ const Docs = (props) => {
 	const [list, setList] = useState([]);
 	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 [baseUrl, setBaseUrl] = React.useState(serverside === true ? "" : window.location.href)
 
   function handleClick(event) {
@@ -71,7 +74,7 @@ const Docs = (props) => {
 			if (responseJson.success) {
 				setList(responseJson.list)
 			} else {
-				setList(["error"])
+				setList(["# Error loading documentation. Please contact us if this persists."])
 			}
 			setListLoaded(true)
 		})
@@ -91,6 +94,10 @@ const Docs = (props) => {
 			if (responseJson.success) {
 				setData(responseJson.reason)
 				document.title = "Shuffle "+docId+" documentation"
+
+				if (responseJson.meta !== undefined) {
+					setSelectedMeta(responseJson.meta)
+				}
 			} else {
 				setData("# Error\nThis page doesn't exist.")
 			}
@@ -215,11 +222,48 @@ const Docs = (props) => {
 	}
 
 	function Heading(props) {
-		const element = React.createElement(`h${props.level}`, {style: {marginTop: 40}}, props.children)
+		const element = React.createElement(`h${props.level}`, {style: {marginTop: 50}}, props.children)
+
+		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",}}>
+						<Typography style={{display: "inline", marginTop: 6, }}>
+							<a rel="norefferer" target="_blank" href={selectedMeta.link} target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>
+								<Button style={{}} variant="outlined">
+									<EditIcon /> &nbsp;&nbsp;Edit
+								</Button>
+							</a>
+						</Typography>
+						<div style={{height: "100%", width: 1, backgroundColor: "white", marginLeft: 50, marginRight: 50, }} />
+						<Typography style={{display: "inline", marginTop: 9, }}>
+							{selectedMeta.read_time} minute{selectedMeta.read_time === 1 ? "" : "s"} to read
+						</Typography>
+					</div>
+					<div style={{flex: 2}}>
+						{selectedMeta.contributors === undefined || selectedMeta.contributors === null ? "" : 
+							<div style={{margin: 10, height: "100%", display: "inline",}}>
+								{selectedMeta.contributors.slice(0,7).map((data, index) => {
+									return (
+											<a rel="norefferer" 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={{height: 40, borderRadius: 40, }} />
+												</Tooltip>
+											</a>
+									)
+								})}
+								</div>
+							}
+					</div>
+				</div>
+		}
+
 		return (
 			<Typography>
 				{props.level !== 1 ? <Divider style={{width: "90%", marginTop: 40, backgroundColor: theme.palette.inputColor}} /> : null}
 				{element}
+				{extraInfo}
 			</Typography>
 		)
 	}
@@ -239,7 +283,12 @@ const Docs = (props) => {
 			<div style={SideBar}>
 				<Paper style={SidebarPaperStyle}>
 					<List style={{listStyle: "none", paddingLeft: "0", }}>
-						{list.map((item, index) => {
+						{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(" ")
 							return (
@@ -294,7 +343,8 @@ const Docs = (props) => {
 					open={Boolean(anchorEl)}
 					onClose={handleClose}
 				>
-				{list.map((item, index) => {
+				{list.map((data, index) => {
+					const item = data.name
 					const path = "/docs/"+item
 					const newname = item.charAt(0).toUpperCase()+item.substring(1).split("_").join(" ").split("-").join(" ")
 					return (