Merge pull request #26 from SIGGraph-UIUC/master

PR Fall 2021 Updates

Author: sahilshahpatel

README.md

@@ -1,3 +1,18 @@
 # [siggraph website](https://acm-uiuc.github.io/siggraph/)
+The ACM-UIUC SIGGraph Website
 
-Create-react-app + Bootstrap v4
+(Create-react-app + Bootstrap v4)
+
+## Contributing
+To contribute to the site, you must be a part of SIGGraph UIUC:
+1. Make changes to https://github.com/SIGGraph-UIUC/siggraph, a fork of the original acm-uiuc repository
+2. Test those changes via `$ yarn run start` which creates a local development server
+3. Use a Pull Request to merge those changes to the master branch
+4. Upon approval, have someone run
+    ```
+    $ git checkout master
+    $ git pull
+    $ yarn run deploy
+    ```
+    They should then check that the deployment at https://siggraph-uiuc.github.io/siggraph looks correct.
+5. Finally, you can make a PR from the fork to the original repository

package.json

@@ -13,7 +13,7 @@
     "react-dom": "^16.8.6",
     "react-feather": "^2.0.9",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "^3.0.1",
+    "react-scripts": "^4.0.3",
     "react-stack-grid": "^0.7.1",
     "react-youtube": "^7.9.0",
     "three": "^0.106.2"

public/assets/hi_tea.png

@@ -40,4 +40,4 @@
     -->
 </body>
 
-</html>
+</html>

public/index.html

@@ -1,15 +1,9 @@
 import React, { Component } from "react";
 
-import Background from "./Background";
-
 class App extends Component {
   render() {
-    const { width, height } = this.props.size;
     return (
-      <div className="App">
-        <Background width={width} height={height} />
-        <h1 className="center w-100">SIGGRAPH @ UIUC</h1>
-      </div>
+        <img className="poster" style ={{width: '100%'}} src={process.env.PUBLIC_URL + '/assets/hi_tea.png'} alt="hi tea poster" />
     );
   }
 }

public/models/teapot.fbx

@@ -27,13 +27,16 @@ class Background extends Component {
     // ADD CUBE
     let that = this;
     const loader = new FBXLoader();
-    loader.load("models/index.fbx", function(object) {
+    //switched to teapot for now
+    loader.load("models/teapot.fbx", function(object) {
       object.traverse(function(child) {
         if (child.isMesh) {
           child.castShadow = true;
           child.receiveShadow = true;
         }
       });
+
+
       that.scene.add(object);
       that.cube = object;
       that.start();

src/App.js

@@ -34,7 +34,12 @@ class Navigation extends Component {
     return (
       <Router basename="/"> {/* When using HashRouter, we don't need the public URL as a basename */}
         <Switch>
-          <DefaultLayout exact path="/" component={App} size={this.state} />
+          {/* 
+              PosterLayout is like DefaultLayout but without a Container component. This allows the poster to stretch
+              the full length of the screen. When the front page has a poster, use PosterLayout for App. Otherwise
+              use DefaultLayout.
+          */}
+          <PosterLayout exact path="/" component={App} size={this.state} />
           <DefaultLayout
             path="/projects"
             component={Projects}
@@ -72,6 +77,23 @@ const DefaultLayout = ({ component: Component, size, ...rest }) => {
   );
 };
 
+const PosterLayout = ({ component: Component, size, ...rest }) => {
+  return (
+    <Route
+      {...rest}
+      render={matchProps => (
+        <>
+          <div className="main-container">
+            <Header />
+              <Component {...matchProps} size={size} />
+            <Footer />
+          </div>
+        </>
+      )}
+    />
+  );
+};
+
 const Construction = () => <h1>This page is under construction</h1>;
 
 const NotFound = () => (

src/Background.js

@@ -65,5 +65,5 @@ export const about = {
     },
   ],
   meeting:
-      "Join us for meetings on Discord Mondays 5-6PM CST!"
-};
+      "Join us for meetings Monday in Siebel CS Center Rm 1103 4pm - 5pm CST!"
+};