Initial documentation page and some fixes.

nthnn · Sep 21, 2023 · e73eb0f · e73eb0f
1 parent e700b6e
commit e73eb0f
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 12 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -4,8 +4,8 @@
   "description": "Brillo-8 Official Documentation",
   "source": "src/index.html",
   "scripts": {
-    "build": "parcel build src/index.html",
-    "docs": "parcel src/index.html --open",
+    "build": "parcel build src/*.html",
+    "docs": "parcel src/index.html src/documentation.html --open",
     "clean": "rimraf .parcel-cache dist",
     "deploy": "cd .. && npx vercel deploy --prod && cd docs"
   },

diff --git a/docs/src/documentation.html b/docs/src/documentation.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<head>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>Brillo-8 Documentation</title>
+
+    <link href="styles/index.css" rel="stylesheet" />
+</head>
+<body>
+    <div id="root"></div>
+    <script src="./scripts/documentation.tsx" type="module"></script>
+</body>
+</html>
diff --git a/docs/src/index.html b/docs/src/index.html
@@ -11,6 +11,6 @@
 </head>
 <body>
     <div id="root"></div>
-    <script src="./scripts/main.tsx" type="module"></script>
+    <script src="./scripts/homepage.tsx" type="module"></script>
 </body>
 </html>
diff --git a/docs/src/scripts/components/navigationbar.tsx b/docs/src/scripts/components/navigationbar.tsx
@@ -7,8 +7,7 @@ import {
 } from "@heroicons/react/24/outline";
 
 export default class NavigationBar extends React.Component<{
-    currentPage: string,
-    onPageout: ()=> void
+    currentPage: string
 }, {}> {
     render() {
         return (
@@ -25,13 +24,13 @@ export default class NavigationBar extends React.Component<{
                         <div className="collapse navbar-collapse justify-content-end" id="nav-bar">
                             <ul className="navbar-nav">
                                 <li className="nav-item">
-                                    <a href="#" className={(this.props.currentPage == "home" ? "active ": "") + "nav-link"} onClick={()=> this.props.currentPage !== "home" ? this.props.onPageout() : ()=> {}}>
+                                    <a href={this.props.currentPage === "home" ? "#" : "/"} className={(this.props.currentPage == "home" ? "active ": "") + "nav-link"}>
                                         <HomeModernIcon className="icon-24"/>
                                         Home
                                     </a>
                                 </li>
                                 <li className="nav-item">
-                                    <a href="#" className={(this.props.currentPage == "docs" ? "active ": "") + "nav-link"} onClick={()=> this.props.currentPage !== "docs" ? this.props.onPageout() : ()=> {}}>
+                                    <a href={this.props.currentPage === "docs" ? "#" : "documentation.html"} className={(this.props.currentPage == "docs" ? "active ": "") + "nav-link"}>
                                         <DocumentIcon className="icon-24"/>
                                         Documentations
                                     </a>

diff --git a/docs/src/scripts/documentation.tsx b/docs/src/scripts/documentation.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import * as ReactDOMClient from "react-dom/client";
+import React from "react";
+import Docs from "./pages/docs";
+
+import "bootstrap/dist/js/bootstrap.bundle";
+import "../../node_modules/bootswatch/dist/darkly/bootstrap.min.css";
+
+let appRoot: ReactDOMClient.Root | null = null;
+let docRoot: HTMLElement | null = document.getElementById('root');
+
+if(docRoot != null) {
+    appRoot = ReactDOMClient.createRoot(docRoot);
+    appRoot.render(<Docs />);
+}
+
+export default appRoot;
diff --git a/docs/src/scripts/main.tsx → docs/src/scripts/homepage.tsx b/docs/src/scripts/main.tsx → docs/src/scripts/homepage.tsx
@@ -4,7 +4,7 @@ import * as ReactDOMClient from "react-dom/client";
 import React from "react";
 import Home from "./pages/home";
 
-import "../../node_modules/bootstrap/dist/js/bootstrap.bundle";
+import "bootstrap/dist/js/bootstrap.bundle";
 import "../../node_modules/bootswatch/dist/darkly/bootstrap.min.css";
 
 let appRoot: ReactDOMClient.Root | null = null;

diff --git a/docs/src/scripts/pages/docs.tsx b/docs/src/scripts/pages/docs.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import NavigationBar from "../components/navigationbar";
+
+export default class Docs extends React.Component {
+    render() {
+        return (
+            <NavigationBar currentPage="docs" />
+        );
+    }
+}
diff --git a/docs/src/scripts/pages/home.tsx b/docs/src/scripts/pages/home.tsx
@@ -29,9 +29,6 @@ import HomePageCard from "../components/homepagecard";
 import Footer from "../components/footer";
 
 export default class Home extends React.Component {
-    onPageout(): void {
-    }
-
     render() {
         return (
             <>
@@ -84,7 +81,7 @@ export default class Home extends React.Component {
                 <div className="desktop-only"><br/><br/></div>
                 <br/>
 
-                <NavigationBar currentPage="home" onPageout={this.onPageout} />
+                <NavigationBar currentPage="home" />
 
                 <br id="main-section"/><br/><br/><br/><br/><br/>
                 <div className="desktop-only"><br/></div>