Dockerfile

@@ -1,33 +0,0 @@
-FROM node:latest AS Build
-
-RUN npm install haxe --global
-RUN npm install lix --global --force
-# RUN haxelib --global install hmm
-# RUN haxelib --global run hmm setup
-
-
-COPY ./app /app
-
-WORKDIR /app
-
-# RUN hmm install
-RUN lix scope
-RUN lix download
-RUN lix use haxe stable
-RUN lix install haxelib:hxnodejs
-RUN lix install haxelib:haxe-loader
-RUN lix install haxelib:react
-RUN lix install haxelib:react-router-4
-# RUN lix install --global hmm
-RUN yarn install
-
-
-
-WORKDIR /app/
-
-EXPOSE 9000
-ENV NODE_OPTIONS="--openssl-legacy-provider"
-
-
-CMD ["yarn", "start"]
-# CMD ["/bin/bash"]

app/.haxerc

@@ -1,4 +0,0 @@
-{
-  "version": "4.2.5",
-  "resolveLibs": "scoped"
-}

app/haxe_libraries/haxe-loader.hxml

@@ -1,3 +0,0 @@
-# @install: lix --silent download "haxelib:/haxe-loader#0.9.0" into haxe-loader/0.9.0/haxelib
--cp ${HAXE_LIBCACHE}/haxe-loader/0.9.0/haxelib/haxelib/
--D haxe-loader=0.9.0

app/haxe_libraries/history.hxml

@@ -1,3 +0,0 @@
-# @install: lix --silent download "haxelib:/history#0.0.1" into history/0.0.1/haxelib
--cp ${HAXE_LIBCACHE}/history/0.0.1/haxelib/src
--D history=0.0.1

app/haxe_libraries/html-entities.hxml

@@ -1,3 +0,0 @@
-# @install: lix --silent download "haxelib:/html-entities#1.0.0" into html-entities/1.0.0/haxelib
--cp ${HAXE_LIBCACHE}/html-entities/1.0.0/haxelib/src
--D html-entities=1.0.0

app/haxe_libraries/hxnodejs.hxml

@@ -1,7 +0,0 @@
-# @install: lix --silent download "haxelib:/hxnodejs#12.1.0" into hxnodejs/12.1.0/haxelib
--cp ${HAXE_LIBCACHE}/hxnodejs/12.1.0/haxelib/src
--D hxnodejs=12.1.0
---macro allowPackage('sys')
-# should behave like other target defines and not be defined in macro context
---macro define('nodejs')
---macro _internal.SuppressDeprecated.run()

app/haxe_libraries/react-router-4.hxml

@@ -1,6 +0,0 @@
-# @install: lix --silent download "haxelib:/react-router-4#0.2.8" into react-router-4/0.2.8/haxelib
--lib history
--cp ${HAXE_LIBCACHE}/react-router-4/0.2.8/haxelib/src
--D react-router-4=0.2.8
---macro react.router.bundle.Bundle.addHook()
-

app/haxe_libraries/react.hxml

@@ -1,4 +0,0 @@
-# @install: lix --silent download "haxelib:/react#1.12.0" into react/1.12.0/haxelib
--lib html-entities
--cp ${HAXE_LIBCACHE}/react/1.12.0/haxelib/src/lib
--D react=1.12.0

app/src/App.css

@@ -1,72 +1,60 @@
 *{
-    font-family: Helvetica, sans-serif;
+	/* margin: 0; */
+	/* padding: 0; */
 }
-html, body{
+
-	margin: 0;
+html, body, #pagewrapper, #root{
-	padding: 0;
+	height: 100vh;
-    background-color: black;
+	margin: 0 0 0 0;
-    color: white;
+	padding: 0 0 0 0;
-	min-height: 100vh;
+	overflow: auto;
+}
+
+
+.flex-column{
+	display: flex;
+	flex-direction: column;
+}
+.flex-row{
+	display: flex;
+	flex-direction: row;
+}
+
+#flex{
+	display: flex;
 	height:100%;
-	width:100%;
 }
 
 
-/* SET UP GRID */
+body {
-#pagewrapper{
+    font-family: 'Terminus', sans-serif;
-    display:grid;
+	background-color: #000;
-    grid-template-columns: 1fr auto 1fr;
-    grid-template-rows: auto auto;
-}
-header{
-    grid-column: 2;
-    grid-row: 1;
-}
-nav{
-    grid-column: 1;
-    grid-row: 2;
-}
-main{
-    grid-column: 2;
-    grid-row: 2;
 }
 
-/* Now do other shit */
 
-nav{
+h1 {
-    color: white;
+	/* margin: 10px; */
-    font-size: 32pt;
-    font-weight: bold;
-    font-style: oblique;
-    text-align: right;
-    margin-right: 8pt;
-    margin: 0px 8px 0px 0px;
-    line-height: 30pt;
-}
-nav .active{
-    font-style: oblique;
-}
-nav a{
-	text-decoration: none;
-	color: white;
 }
 
 main{
-    background-color: #233;
+	display: block;
-    padding: 16px;
+	/* margin-left: 100px; */
-    color: #eee;
+	/* margin-right:100px; */
-    min-width: 40vw;
+	background-color: #333;
-	max-width: 800px;
+	color: lime;
+	box-sizing: border-box;
+	padding: 10px;
+	width: 100%;
+	height:100%;
+}
+ul{
+	align-self: left;
 }
 
-main h1{
+a, a:visited, a:hover {
-    margin: 0px;
+    /* text-decoration: none; */
+    color: inherit;
 }
-main p{
+a.selected, a.selected:visited{
-    margin-top: 0px;
+	color:red;
-}
-
-.active
-{
-    color: #444
 }

app/src/Root.hx

@@ -2,7 +2,6 @@ import com.Foo;
 import com.Foo2;
 import components.Header;
 import components.HomeContent;
-import components.ProjectsContent;
 import components.sidebar.Sidebar;
 import react.ReactMacro.jsx;
 import react.ReactComponent;
@@ -11,7 +10,6 @@ import react.router.ReactRouter;
 import react.router.Route.RouteRenderProps;
 import react.router.Route;
 import react.router.Redirect;
-import react.router.NavLink;
 
 
 private typedef RootState = {
@@ -48,38 +46,31 @@ class Root extends react.ReactComponentOf<RootProps,RootState> {
 
     override function render() {
         return jsx('
-            <div id="pagewrapper">
+            <div id="pagewrapper" class="flex-column">
                 <Header/>
                 <!--Current path is ${props.location.pathname} and component is ${state.route}-->
                 <!--${renderContent()}-->
-                <nav id="sidebar">
+                <div id="flex" class="flex-row">
-                    <$NavLink to="/home" activeClassName="active">
+                    <$Sidebar/>
-                        Home
+                    <main>
-                    </NavLink><br/>
+                        <$Route exact="true" path="/">
-                    <$NavLink to="/news" activeClassName="active">
+                            <$Redirect to="/home" />
-                        News
+                        </$Route>
-                    </NavLink><br/>
+                        <$Route path="/home">
-                    <$NavLink to="/projects" activeClassName="active">
+                            <HomeContent/>
-                        Projects
+                        </$Route>
-                    </NavLink><br/>
+                        <$Route path="/projects">
-                    <$NavLink to="/partners" activeClassName="active">
+                            <h1>Projects</h1>
-                        Partners
+                        </$Route>
-                    </NavLink><br/>
+                        <$Route path="/links">
-                    <$NavLink to="/about" activeClassName="active">
+                            <h1>Links</h1>
-                        About
+                        </$Route>
-                    </NavLink><br/>
+                        <$Route path="/gameservers">
-                </nav>
+                            <h1>Game Servers</h1>
-                <main>
+                            <p></p>
-                    <$Route exact="true" path="/">
+                        </$Route>
-                    <$Redirect to="/home" />
+                    </main>
-                    </$Route>
+                </div>
-                    <$Route path="/home">
-                        <HomeContent/>
-                    </$Route>
-                    <$Route path="/projects">
-                        <ProjectsContent/>
-                    </$Route>
-                </main>
             </div>
         ');
     }

app/src/components/Header.css

@@ -1,6 +1,18 @@
-header{
+header {
-    font-size: 48pt;
+    box-sizing: border-box;
-    font-weight: 600;
+    /* width:fit-content; */
-    font-style: oblique;
+    width:100%;
-    /* text-size-adjust: auto; */
+    /* margin: 10px; */
+    padding: 10px;
+    background: #eee;
+    /* color: white; */
+    /* margin-left: auto;
+    margin-right: auto; */
+}
+header nav a{
+    margin-right: 10px;
+}
+.logo{
+    font-size: 3vw;
+    width:fit-content;
 }

app/src/components/Header.hx

@@ -12,9 +12,25 @@ class Header extends ReactComponent{
     }
     override function render() {
         return jsx('
-        <header>
+            <header>
-            DRIVEBY, OK?
+                <div className="logo">
-        </header>
+                   DRIVEBY!
+                </div>
+                <nav>
+                    <$NavLink to="/home" activeClassName="selected">
+                        >Home
+                    </NavLink>
+                    <$NavLink to="/links" activeClassName="selected">
+                        >Links
+                    </NavLink>
+                    <$NavLink to="/projects" activeClassName="selected">
+                        >Projects
+                    </NavLink>
+                    <$NavLink to="/gameservers" activeClassName="selected">
+                        >Game Servers
+                    </NavLink>
+                </nav>
+            </header>
         ');
     }
 }

app/src/components/HomeContent.hx

@@ -1,5 +1,4 @@
 package components;
-import js.html.XMLHttpRequest;
 import react.ReactMacro.jsx;
 import react.ReactComponent;
 import js.Browser;
@@ -8,83 +7,38 @@ import react.router.ReactRouter;
 import react.router.Route.RouteRenderProps;
 import react.router.Route;
 import components.blog.Overview;
-import js.lib.Promise;
 
 class HomeContent extends ReactComponent {
 
-    public function new(){
-        super();
-        state = { response: ["LOADING"], loaded: false } 
-    }
     static var STYLES = require('./HomeContent.css');
 
     public function yeet(){
         trace(state);
     }
 
-   
-    //function sendRequest( image : Dynamic ) {
-    function sendRequest() {
-
-
-		return new js.lib.Promise( 
-			function( resolve : Dynamic -> Void, reject )
-			{
-				var request = new XMLHttpRequest();
-	  			request.responseType = js.html.XMLHttpRequestResponseType.JSON;
-				
-	  			request.onreadystatechange = function () {
-					if (request.readyState == 4) {
-					  	switch (request.status) {
-						case 200:
-                            setState( { response: request.response } );
-                            trace(request.response);
-			  			case 204:
-							resolve(true);
-					  	default:
-							trace( "Wrong response status" );
-						  	reject( request.response);
-		  				}
-					}
-	  			}
-
-	  			// var data = new js.html.FormData();
-	   			// // If we had a real file, we could use `file.name` as third argument
-	  			// data.append(props.formFieldName != null ? props.formFieldName : "file", image);
-	  			request.open("GET", "https://baconipsum.com/api/?type=meat-and-filler");
-	  			// request.send(data);
-                request.send();
-		});
-  	}
-    
-
-
     override public function render() {
-        //var _yeet = yayeet();
-        var lorem = ["LOADING"];
-        if(state.loaded){
-            if(state.response != null)
-            lorem = state.response;
-        }
-        else{
-            setState({
-                loaded: "false"
-            });
-            sendRequest();
-        }
         return jsx('
             <div>     
-                <article>
+            <$Route exact="true" path={["/home","/home/about"]}>
-                    <h1>WELCOME TO DRIVEBY!</h1>
+                <div>
+                    <h2>Welcome to DRIVEBY!</h2>
                     <p>
-                        DRIVEBY! is an entity that creates software and entertainment, but also serves as a community revolving around DRIVEBY!\'s founder Hion-V and his pals.
+                        DRIVEBY! is the home of my personal projects. This includes but is not limited to:<br/>
+                        - Gamedev<br/>
+                        - Software<br/>
+                        - Music<br/>
+                        - Art<br/>
+                        DRIVEBY! is run and operated by Hion-V. I am comitted to bringing you best-in-class entertainment and software.<br/>
+
                     </p>
-                    <p>
+                </div>
-                        ${lorem[0]} 
+            </$Route>
-                        ${lorem[1]} 
+            <$Route exact="true" path={["/home","/home/news"]}>
-                        ${lorem[2]} 
+                <div>
-                    </p>
+                    <h2>News</h2>
-                </article>
+                    <$Overview/>
+                </div>
+            </$Route>
             </div>
         ');
     }

app/src/components/ProjectsContent.hx

@@ -1,95 +0,0 @@
-package components;
-import js.html.XMLHttpRequest;
-import react.ReactMacro.jsx;
-import react.ReactComponent;
-import js.Browser;
-import Webpack.*;
-import react.router.ReactRouter;
-import react.router.Route.RouteRenderProps;
-import react.router.Route;
-import components.blog.Overview;
-import js.lib.Promise;
-
-class ProjectsContent extends ReactComponent {
-
-    public function new(){
-        super();
-        state = { response: ["LOADING"], loaded: false } 
-    }
-    static var STYLES = require('./HomeContent.css');
-
-    public function yeet(){
-        trace(state);
-    }
-
-   
-    //function sendRequest( image : Dynamic ) {
-    function sendRequest() {
-
-
-		return new js.lib.Promise( 
-			function( resolve : Dynamic -> Void, reject )
-			{
-				var request = new XMLHttpRequest();
-	  			request.responseType = js.html.XMLHttpRequestResponseType.JSON;
-				
-	  			request.onreadystatechange = function () {
-					if (request.readyState == 4) {
-					  	switch (request.status) {
-						case 200:
-                            setState( { response: request.response } );
-                            trace(request.response);
-			  			case 204:
-							resolve(true);
-					  	default:
-							trace( "Wrong response status" );
-						  	reject( request.response);
-		  				}
-					}
-	  			}
-
-	  			// var data = new js.html.FormData();
-	   			// // If we had a real file, we could use `file.name` as third argument
-	  			// data.append(props.formFieldName != null ? props.formFieldName : "file", image);
-	  			request.open("GET", "https://baconipsum.com/api/?type=meat-and-filler");
-	  			// request.send(data);
-                request.send();
-		});
-  	}
-    
-
-
-    override public function render() {
-        //var _yeet = yayeet();
-        var lorem = ["LOADING"];
-        if(state.loaded){
-            if(state.response != null)
-            lorem = state.response;
-        }
-        else{
-            setState({
-                loaded: "false"
-            });
-            sendRequest();
-        }
-        return jsx('
-            <div>     
-                <article>
-                    <h1>Projects</h1>
-                    <h2>Project 1</h2>
-                    <p>
-                        ${lorem[0]} 
-                        ${lorem[1]} 
-                        ${lorem[2]} 
-                    </p>
-                    <h2>Project 2</h2>
-                    <p>
-                        ${lorem[3]} 
-                        ${lorem[4]} 
-                        ${lorem[5]} 
-                    </p>
-                </article>
-            </div>
-        ');
-    }
-}

app/src/components/blog/Overview.hx

@@ -20,7 +20,7 @@ class Overview extends ReactComponent {
     private static function printList(){
         var result = [];
         for (item in items){
-            result.push(jsx('<li key="$item">$item</li>'));
+            result.push(jsx('<li>$item</li>'));
         }
         return result;
     }

app/src/components/sidebar/Sidebar.css

@@ -0,0 +1,13 @@
+#sidebar{
+	display: block;
+	padding: 10px;
+	//padding-left:10px;
+	width: 150px;
+	background-color: #888;
+	height:100%
+}
+#sidebar ul, #sidebar li{
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+}

app/src/components/sidebar/Sidebar.hx

@@ -18,7 +18,7 @@ class Sidebar extends ReactComponent {
 
     override public function render() {
         return jsx('
-            <nav id="sidebar">
+            <div id="sidebar">
                 <$Route path={["/home"]} component={SBHome}>
                     
                 </$Route>
@@ -34,7 +34,7 @@ class Sidebar extends ReactComponent {
                     CS:GO<br/>
                     Source Arena<br/>
                 </$Route>
-            </nav>
+            </div>
         ');
     }
 }