first commit

Paul404notfound · Jun 26, 2019 · 53a6e79 · 53a6e79
1 parent dd19eb4
commit 53a6e79
Show file tree

Hide file tree

Showing 13 changed files with 1,014 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,9 +8,14 @@
     "react-scripts": "3.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o ../css",
+    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src/styles --include-path ./node_modules src/ -o ./src/css --watch --recursive",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "lint": "esw webpack.config.* src --ext .js,.jsx tools --color",
+    "build": "npm-run-all build-css build-js",
+    "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -27,5 +32,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "enzyme": "^3.5.0",
+    "enzyme-adapter-react-16": "^1.3.1",
+    "enzyme-to-json": "^3.3.4",
+    "node-sass-chokidar": "^1.3.3",
+    "npm-run-all": "^4.1.3"
   }
 }
diff --git a/public/images/anu-logo.png b/public/images/anu-logo.png
diff --git a/public/images/[email protected] b/public/images/[email protected]
diff --git a/public/images/header-back.png b/public/images/header-back.png
diff --git a/public/images/hero.png b/public/images/hero.png
diff --git a/public/images/[email protected] b/public/images/[email protected]
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Crawford School of Public Policy</title>
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer','GTM-M9MCPC4');</script>
+    <!-- End Google Tag Manager -->
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,26 +1,42 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, { Component } from 'react';
+import Header from './components/Header'
 import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+// function App() {
+//   return (
+//     <div className="App">
+//       <header className="App-header">
+//         <img src={logo} className="App-logo" alt="logo" />
+//         <p>
+//           Edit <code>src/App.js</code> and save to reload.
+//         </p>
+//         <a
+//           className="App-link"
+//           href="https://reactjs.org"
+//           target="_blank"
+//           rel="noopener noreferrer"
+//         >
+//           Learn React
+//         </a>
+//       </header>
+//     </div>
+//   );
+// }
+
+class App extends Component{
+  render(){
+    return (
+      <div className="Container">
+        <Header />
+
+      </div>
+    );
+  }
 }
 
+
+
+
+
+
 export default App;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import ResponsiveImage from './ResponsiveImage';
+import '../css/styles/sass/header.css';
+
+class Header extends Component {
+    render(){
+        return (
+            <header className="anu-header">
+            <div className="wrapper">
+              <div className="top">
+                <div className="tagline">
+                  Crawford School <br />of Public Policy
+                </div>
+                <ResponsiveImage imageName="anu-logo" class="anu-logo" />
+              </div>
+              <div className="bottom">
+                <div><p><strong>Scott Thomson</strong> is currently completing a Master of Environmental and Resource Economics</p></div>
+                <p><strong>Are you ready to apply your knowledge of economics to tackle broader issues such as climate change mitigation, poverty reduction, and international trade?</strong></p>
+              </div>
+              <ResponsiveImage imageName="hero"/>
+            </div>
+          </header> 
+        )
+    }
+}
+
+export default Header;
diff --git a/src/components/ResponsiveImage.js b/src/components/ResponsiveImage.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+const PATH = 'images/';
+
+class Feature extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      small: PATH + props.imageName + '.' + props.fileType,
+      medium: PATH + props.imageName + '@2x.' + props.fileType,
+    }
+  }
+
+  render() {
+    return (
+      <img
+        src={this.state.small}
+        srcSet={`${this.state.small} 700w, ${this.state.medium} 1000w`}
+        alt={this.props.alt}
+        className={this.props.class}
+      />
+    );
+  }
+}
+
+Feature.propTypes = {
+  alt: PropTypes.string,
+  class: PropTypes.string,
+  imageName: PropTypes.string,
+  fileType: PropTypes.string,
+}
+
+Feature.defaultProps = {
+  alt: '',
+  class: 'image',
+  imageName: 'flexible',
+  fileType: 'png',
+}
+
+export default Feature;
diff --git a/src/css/styles/sass/header.css b/src/css/styles/sass/header.css
@@ -0,0 +1,4 @@
+header.anu-header {
+    position: relative;
+    background: url(../../../../public/images/header-back.png);
+}
diff --git a/src/index.js b/src/index.js
@@ -9,4 +9,6 @@ ReactDOM.render(<App />, document.getElementById('root'));
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
+
+//registerServiceWorker();
 serviceWorker.unregister();