diff --git a/package-lock.json b/package-lock.json index 73728f3..77d7896 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.27.0", "react-scripts": "5.0.1", "styled-components": "^6.1.13", "web-vitals": "^2.1.4" @@ -3266,6 +3267,15 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", + "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14974,6 +14984,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz", + "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.20.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz", + "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.20.0", + "react-router": "6.27.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index d991395..df9aceb 100644 --- a/package.json +++ b/package.json @@ -2,12 +2,14 @@ "name": "hoco-2024", "version": "0.1.0", "private": true, + "homepage": "https://homecoming2024.columbiaspectator.com", "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.27.0", "react-scripts": "5.0.1", "styled-components": "^6.1.13", "web-vitals": "^2.1.4" diff --git a/public/404.html b/public/404.html new file mode 100644 index 0000000..c0af67d --- /dev/null +++ b/public/404.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index aa069f2..0590ca3 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,41 @@ - - - - - - - - + + + - - - React App - - - -
- - - + + + + \ No newline at end of file diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..ed539ae 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,20 +1,20 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "Homecoming 2024", + "name": "Columbia Daily Spectator Homecoming 2024 Issue", "icons": [ { - "src": "favicon.ico", + "src": "https://s3.amazonaws.com/year-in-review-assets/CDS_Favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { - "src": "logo192.png", - "type": "image/png", + "src": "https://s3.amazonaws.com/year-in-review-assets/CDS_Favicon.ico", + "type": "image/x-icon", "sizes": "192x192" }, { - "src": "logo512.png", - "type": "image/png", + "src": "https://s3.amazonaws.com/year-in-review-assets/CDS_Favicon.ico", + "type": "image/x-icon", "sizes": "512x512" } ], diff --git a/src/App.js b/src/App.js index acf2c74..f5cd779 100644 --- a/src/App.js +++ b/src/App.js @@ -1,87 +1,16 @@ -import styled from 'styled-components'; +import React from 'react'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; - -import Section from './components/Section'; -import StaffCredits from './components/StaffCredits'; -import WelcomeHeader from './components/WelcomeHeader'; -import homecomingImage from './homecoming.jpg'; -import { device } from './device'; - -const FirstFold = styled.div` - display: flex; - margin-top: -3rem; - flex-direction: column-reverse; - - @media ${device.tablet} { - flex-direction: row; - align-items: flex-start; - } -`; - -const MainImage = styled.iframe` - display: none; - - @media ${device.tablet} { - display: block; - width: 60%; - height: 35rem; - } -`; - -const MobileMainImage = styled.img` - width: 100%; - height: 20rem; - display: block; - - @media ${device.tablet} { - display: none; - } -`; - -const Ad = styled.img` - margin: 0 2rem; - display: none; - - @media ${device.tablet} { - display: block; - } -`; - -const MobileAd = styled.img` - margin: 0 2rem; - display: block; - - @media ${device.tablet} { - display: none; - } -`; +import Home from './Home'; function App() { - const sectionNames = ["Sports", "City", "Audio", "Crosswords"]; - return ( -
- - {/* - - - - - - - */} - - - - {sectionNames.map((sectionName, index) => ( -
- ))} - -
+ + + }/> + + ); } -export default App; +export default App; \ No newline at end of file diff --git a/src/Home.js b/src/Home.js new file mode 100644 index 0000000..681db04 --- /dev/null +++ b/src/Home.js @@ -0,0 +1,76 @@ +import styled from 'styled-components'; + + +import Section from './components/Section'; +import StaffCredits from './components/StaffCredits'; +import WelcomeHeader from './components/WelcomeHeader'; +import homecomingImage from './homecoming.jpg'; +import { device } from './device'; + +const FirstFold = styled.div` + display: flex; + margin-top: -3rem; + flex-direction: column-reverse; + + @media ${device.tablet} { + flex-direction: row; + align-items: flex-start; + } +`; + +const MainImage = styled.iframe` + display: none; + + @media ${device.tablet} { + display: block; + width: 60%; + height: 35rem; + } +`; + +const MobileMainImage = styled.img` + width: 100%; + height: 20rem; + display: block; + + @media ${device.tablet} { + display: none; + } +`; + +const Ad = styled.img` + margin: 0 2rem; + display: none; + + @media ${device.tablet} { + display: block; + } +`; + +const MobileAd = styled.img` + margin: 0 2rem; + display: block; + + @media ${device.tablet} { + display: none; + } +`; + +const Home = () => { + const sectionNames = ["Sports", "City", "Audio", "Crosswords"]; + + return ( +
+ + {sectionNames.map((sectionName, index) => ( +
+ ))} + +
+ ); +} + +export default Home;