peepe poopoo

Dockerfile

@@ -0,0 +1,33 @@
+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

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

app/haxe_libraries/haxe-loader.hxml

@@ -0,0 +1,3 @@
+# @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

@@ -0,0 +1,3 @@
+# @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

@@ -0,0 +1,3 @@
+# @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

@@ -0,0 +1,7 @@
+# @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

@@ -0,0 +1,6 @@
+# @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

@@ -0,0 +1,4 @@
+# @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,60 +1,72 @@
 *{
-	/* margin: 0; */
-	/* padding: 0; */
+    font-family: Helvetica, sans-serif;
 }
-
-html, body, #pagewrapper, #root{
-	height: 100vh;
-	margin: 0 0 0 0;
-	padding: 0 0 0 0;
-	overflow: auto;
-}
-
-
-.flex-column{
-	display: flex;
-	flex-direction: column;
-}
-.flex-row{
-	display: flex;
-	flex-direction: row;
-}
-
-#flex{
-	display: flex;
+html, body{
+	margin: 0;
+	padding: 0;
+    background-color: black;
+    color: white;
+	min-height: 100vh;
 	height:100%;
+	width:100%;
 }
 
 
-body {
-    font-family: 'Terminus', sans-serif;
-	background-color: #000;
+/* SET UP GRID */
+#pagewrapper{
+    display:grid;
+    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 */
 
-h1 {
-	/* margin: 10px; */
+nav{
+    color: white;
+    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{
-	display: block;
-	/* margin-left: 100px; */
-	/* margin-right:100px; */
-	background-color: #333;
-	color: lime;
-	box-sizing: border-box;
-	padding: 10px;
-	width: 100%;
-	height:100%;
-}
-ul{
-	align-self: left;
+    background-color: #233;
+    padding: 16px;
+    color: #eee;
+    min-width: 40vw;
+	max-width: 800px;
 }
 
-a, a:visited, a:hover {
-    /* text-decoration: none; */
-    color: inherit;
+main h1{
+    margin: 0px;
 }
-a.selected, a.selected:visited{
-	color:red;
+main p{
+    margin-top: 0px;
+}
+
+.active
+{
+    color: #444
 }

app/src/Root.hx

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

app/src/components/Header.css

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

app/src/components/Header.hx

@@ -12,25 +12,9 @@ class Header extends ReactComponent{
     }
     override function render() {
         return jsx('
-            <header>
-                <div className="logo">
-                   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>
+        <header>
+            DRIVEBY, OK?
+        </header>
         ');
     }
 }

app/src/components/HomeContent.hx

@@ -1,4 +1,5 @@
 package components;
+import js.html.XMLHttpRequest;
 import react.ReactMacro.jsx;
 import react.ReactComponent;
 import js.Browser;
@@ -7,38 +8,83 @@ 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>     
-            <$Route exact="true" path={["/home","/home/about"]}>
-                <div>
-                    <h2>Welcome to DRIVEBY!</h2>
+                <article>
+                    <h1>WELCOME TO DRIVEBY!</h1>
                     <p>
-                        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/>
-
+                        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.
                     </p>
-                </div>
-            </$Route>
-            <$Route exact="true" path={["/home","/home/news"]}>
-                <div>
-                    <h2>News</h2>
-                    <$Overview/>
-                </div>
-            </$Route>
+                    <p>
+                        ${lorem[0]} 
+                        ${lorem[1]} 
+                        ${lorem[2]} 
+                    </p>
+                </article>
             </div>
         ');
     }

app/src/components/ProjectsContent.hx

@@ -0,0 +1,95 @@
+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>$item</li>'));
+            result.push(jsx('<li key="$item">$item</li>'));
         }
         return result;
     }

app/src/components/sidebar/Sidebar.css

@@ -1,13 +0,0 @@
-#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('
-            <div id="sidebar">
+            <nav id="sidebar">
                 <$Route path={["/home"]} component={SBHome}>
                     
                 </$Route>
@@ -34,7 +34,7 @@ class Sidebar extends ReactComponent {
                     CS:GO<br/>
                     Source Arena<br/>
                 </$Route>
-            </div>
+            </nav>
         ');
     }
 }