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/.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+yarn-error.log
+vscode-project.hxml
+www/
+*.hxproj
+.haxelib/

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,15 +1,72 @@
-body {
-    font-family: Arial;
+*{
+    font-family: Helvetica, sans-serif;
+}
+html, body{
 	margin: 0;
+	padding: 0;
+    background-color: black;
+    color: white;
+	min-height: 100vh;
+	height:100%;
+	width:100%;
 }
 
-h1 {
-	/* margin: 10px; */
+
+/* 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 */
+
+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{
-	margin: 20px;
-	background-color: #eee;
-	min-height: 300px;
-	padding: 10px;
+    background-color: #233;
+    padding: 16px;
+    color: #eee;
+    min-width: 40vw;
+	max-width: 800px;
+}
+
+main h1{
+    margin: 0px;
+}
+main p{
+    margin-top: 0px;
+}
+
+.active
+{
+    color: #444
 }

app/src/Root.hx

@@ -2,12 +2,16 @@ 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;
 import react.React.CreateElementType;
 import react.router.ReactRouter;
 import react.router.Route.RouteRenderProps;
 import react.router.Route;
+import react.router.Redirect;
+import react.router.NavLink;
 
 
 private typedef RootState = {
@@ -44,23 +48,36 @@ class Root extends react.ReactComponentOf<RootProps,RootState> {
 
     override function render() {
         return jsx('
-            <div>
+            <div id="pagewrapper">
                 <Header/>
                 <!--Current path is ${props.location.pathname} and component is ${state.route}-->
                 <!--${renderContent()}-->
+                <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">
-                        <h1>Projects</h1>
-                    </$Route>
-                    <$Route path="/links">
-                        <h1>Links</h1>
-                    </$Route>
-                    <$Route path="/gameservers">
-                        <h1>Game Servers</h1>
-                        <p></p>
+                        <ProjectsContent/>
                     </$Route>
                 </main>
             </div>

app/src/components/Header.css

@@ -1,14 +1,6 @@
-header {
-    margin: 10px;
-    padding: 10px;
-    background: #eee;
+header{
+    font-size: 48pt;
+    font-weight: 600;
+    font-style: oblique;
+    /* text-size-adjust: auto; */
 }
-header nav a{
-    margin-right: 10px;
-}
-.selected{
-    color:red;
-}
-.logo{
-    font-size: 3vw;
-}

app/src/components/Header.hx

@@ -12,25 +12,9 @@ class Header extends ReactComponent{
     }
     override function render() {
         return jsx('
-            <header>
-                <div className="logo">
-                    subsonics
-                </div>
-                <nav>
-                    <$NavLink exact="true" to="/" 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,22 +1,91 @@
 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 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('
-            <p onClick=${yeet}>
-                kak
-            </p>
+            <div>     
+                <article>
+                    <h1>WELCOME TO DRIVEBY!</h1>
+                    <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.
+                    </p>
+                    <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

@@ -0,0 +1,36 @@
+package components.blog;
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import js.Browser;
+import Webpack.*;
+import react.router.NavLink;
+
+class Overview extends ReactComponent {
+
+    //static var STYLES = require('./HomeContent.css');
+
+    public function yeet(){
+        trace(state);
+    }
+
+    public static var items:Array<String> = [
+        'yeetus',
+        'deletus'
+    ];
+    private static function printList(){
+        var result = [];
+        for (item in items){
+            result.push(jsx('<li key="$item">$item</li>'));
+        }
+        return result;
+    }
+
+    override public function render() {
+        var _print = printList();
+        return jsx('
+        <ul>
+            ${_print}
+        </ul>
+        ');
+    }
+}

app/src/components/sidebar/SBHome.hx

@@ -0,0 +1,28 @@
+package components.sidebar;
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import js.Browser;
+import Webpack.*;
+import react.router.NavLink;
+
+class SBHome extends ReactComponent {
+
+    //static var STYLES = require('./HomeContent.css');
+
+    public function yeet(){
+        trace(state);
+    }
+
+    override public function render() {
+        return jsx('
+        <ul>
+            <li>
+                <$NavLink to="/home/about" activeClassName="selected">About</$NavLink>
+            </li>
+            <li>
+                <$NavLink to="/home/news" activeClassName="selected">News</$NavLink>
+            </li>
+        </ul>
+        ');
+    }
+}

app/src/components/sidebar/Sidebar.hx

@@ -0,0 +1,40 @@
+package components.sidebar;
+import react.ReactMacro.jsx;
+import react.ReactComponent;
+import js.Browser;
+import Webpack.*;
+import components.sidebar.SBHome;
+import react.router.ReactRouter;
+import react.router.Route.RouteRenderProps;
+import react.router.Route;
+
+class Sidebar extends ReactComponent {
+
+    static var STYLES = require('./Sidebar.css');
+
+    public function yeet(){
+        trace(state);
+    }
+
+    override public function render() {
+        return jsx('
+            <nav id="sidebar">
+                <$Route path={["/home"]} component={SBHome}>
+                    
+                </$Route>
+                <$Route path="/projects">
+                    
+                </$Route>
+                <$Route path="/links">
+                    
+                </$Route>
+                <$Route path="/gameservers">
+                    Tes3MP<br/>
+                    Minecraft<br/>
+                    CS:GO<br/>
+                    Source Arena<br/>
+                </$Route>
+            </nav>
+        ');
+    }
+}

app/webpack.config.js

@@ -111,7 +111,7 @@ module.exports = {
 
         // Like generating the HTML page with links the generated JS files
         new HtmlWebpackPlugin({
-            title: 'Webpack + Haxe example'
+            title: 'DRIVEBY!'
         })
         // You may want to also:
         // - finer control of minify/uglify process using UglifyJSPlugin,