Updated docs routing

frontend/src/Apps.js

@@ -338,11 +338,11 @@ const Apps = (props) => {
 			<div>
 				<Paper square style={uploadViewPaperStyle}>
 					<div style={{width: "100%", margin: 25}}>
-						<h2>App creation</h2>
-						<Link to="/docs/apps" style={{textDecoration: "none", color: "#f85a3e"}}>What are apps?</Link>
-						&nbsp;- <a href="https://swagger.io/specification/" style={{textDecoration: "none", color: "#f85a3e"}}>OpenAPI specification</a>
+						<h2>App Creator</h2>
+						<a href="https://github.com/frikky/OpenAPI-security-definitions" style={{textDecoration: "none", color: "#f85a3e"}} target="_blank">Security API's</a>
+						&nbsp;- <a href="https://apis.guru/browse-apis/" style={{textDecoration: "none", color: "#f85a3e"}} target="_blank">OpenAPI directory</a>
 						<div/>
-						Apps are how you interact with workflows, and are used to execute workflows. They are created with the app creator, using OpenAPI specification or manually in python.
+						Apps interact with eachother in workflows. They are created with the app creator, using OpenAPI specification or manually in python. Use the links above to find potential apps you're looking for using OpenAPI or make one from scratch. There's 1000+ available.
 						<div/>
 						<div style={{marginTop: 20}}>
 							<Button

frontend/src/Docs.js

@@ -32,7 +32,7 @@ const hrefStyle = {
 }
 
 const Docs = (props) => {
-  	const { isLoaded, globalUrl } = props;
+  const { isLoaded, globalUrl } = props;
 
 	const [data, setData] = useState("");
 	const [firstrequest, setFirstrequest] = useState(true);
@@ -55,16 +55,81 @@ const Docs = (props) => {
 			fetchDocs()
 			return
 		}
+
+		// Continue this, and find the h2 with the data in it lol
+		if (window.location.hash.length > 0) {
+			console.log("HELLO")
+
+			var parent = document.getElementById("markdown_wrapper")
+			if (parent !== null) {
+				var elements = parent.getElementsByTagName('h2')
+
+				const name = window.location.hash.slice(1, window.location.hash.lenth).toLowerCase().split("%20").join(" ")
+
+				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) {
+						element.scrollIntoView({behavior: "smooth"})
+						found = true
+						//element.scrollTo({
+						//	top: element.offsetTop-100,
+						//	behavior: "smooth"
+						//})
+					}
+				}
+
+				// H#
+				if (!found) {
+					var elements = parent.getElementsByTagName('h3')
+					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) {
+							element.scrollIntoView({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();
+		}
 	})
 
 	const fetchDocList = () => {
 		fetch(globalUrl+"/api/v1/docs", {
-    	  	method: 'GET',
-				headers: {
-					'Content-Type': 'application/json',
-					'Accept': 'application/json',
-				},
-    		})
+    	method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+			},
+    })
 		.then((response) => response.json())
     	.then((responseJson) => {
 			if (responseJson.success) {
@@ -101,8 +166,8 @@ const Docs = (props) => {
 		flex: "1",
 	}
 
-	function Link(props) {
-		return <a href={props.href} style={{color: "#f85a3e", textDecoration: "none"}}>{props.children}</a>
+	function OuterLink(props) {
+		return <Link to={props.href} style={{color: "#f85a3e", textDecoration: "none"}}>{props.children}</Link>
 	}
 
 	function Img(props) {
@@ -117,7 +182,7 @@ const Docs = (props) => {
 	//	);
 	//}
 
-  	const postDataBrowser = 
+  const postDataBrowser = 
 		<div style={Body}>
 			<div style={SideBar}>
 				<ul style={{listStyle: "none", paddingLeft: "0"}}>
@@ -139,11 +204,12 @@ const Docs = (props) => {
 					})}
 				</ul>
 			</div>
-			<div style={markdownStyle}>
+			<div id="markdown_wrapper" style={markdownStyle}>
 				<ReactMarkdown 
+					id="markdown_wrapper" 
 					escapeHtml={false}
 					source={data} 
-	 				renderers={{link: Link, image: Img}}
+	 				renderers={{link: OuterLink, image: Img}}
 				/>
 			</div>
 		</div>
@@ -180,9 +246,10 @@ const Docs = (props) => {
 			</Menu>
 			<div style={markdownStyle}>
 				<ReactMarkdown 
+					id="markdown_wrapper" 
 					escapeHtml={false}
 					source={data} 
-	 				renderers={{link: Link, image: Img}}
+	 				renderers={{link: OuterLink, image: Img}}
 				/>
 			</div>
 			<Divider style={{marginTop: "10px", marginBottom: "10px", backgroundColor: dividerColor}}/>