Merge pull request spectatorpublishing#12 from spectatorpublishing/ed…

…iting Editing
spectatorpublishing · Oct 26, 2024 · 586d90c · 586d90c
2 parents eefd3c2 + 8ca8e0b
commit 586d90c
Show file tree

Hide file tree

Showing 17 changed files with 12,210 additions and 42,620 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
-# Getting Started with Create React App
+# hoco-2024
+## Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
@@ -68,4 +69,3 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
 ### `yarn build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
-# nsop2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,26 +1,22 @@
 {
-  "name": "nsop-2021",
+  "name": "hoco-2024",
   "version": "0.1.0",
-  "homepage": "https://spectatorpublishing.github.io/nsop2021/",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "d3": "^7.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "styled-components": "^5.3.1",
-    "web-vitals": "^1.0.1"
+    "@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-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
@@ -39,8 +35,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "gh-pages": "^3.2.3"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="https://s3.amazonaws.com/year-in-review-assets/CDS_Favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Columbia Daily Spectator NSOP 2021 Edition"
+      content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="https://s3.amazonaws.com/year-in-review-assets/CDS_Favicon.ico" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,18 +24,7 @@
       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`.
     -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Amiko:wght@400;600;700&family=Noto+Sans&display=swap" rel="stylesheet">
-    <meta
-      property="og:image"
-      content="https://cds-static-hosting.s3.amazonaws.com/NSOP-ILLO.jpg"
-    />
-    <script src='https://www.googletagservices.com/dcm/dcmads.js'></script>
-    <title>NSOP 2021</title>
+    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -50,6 +39,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,20 +1,20 @@
 {
-  "short_name": "NSOP 2021",
-  "name": "Columbia Daily Spectator NSOP 2021 Edition",
+  "short_name": "React App",
+  "name": "Create React App Sample",
   "icons": [
     {
-      "src": "https://s3.amazonaws.com/year-in-review-assets/CDS_Favicon.ico",
+      "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "https://s3.amazonaws.com/year-in-review-assets/CDS_Favicon.ico",
-      "type": "image/x-icon",
+      "src": "logo192.png",
+      "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "https://s3.amazonaws.com/year-in-review-assets/CDS_Favicon.ico",
-      "type": "image/x-icon",
+      "src": "logo512.png",
+      "type": "image/png",
       "sizes": "512x512"
     }
   ],

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/App.js b/src/App.js
@@ -1,13 +1,10 @@
 import styled from 'styled-components';
 
-import NavBar from './components/NavBar';
-import LikeWhatYouSee2 from './components/LikeWhatYouSee2';
-import NavTabs from './components/NavTabs';
-import LikeWhatYouSee1 from './components/LikeWhatYouSee1';
+
 import Section from './components/Section';
-import CoursesWeLoved from './components/Highlights';
-import ExploreClubs from './components/ExploreClubs';
 import StaffCredits from './components/StaffCredits';
+import WelcomeHeader from './components/WelcomeHeader';
+import homecomingImage from './homecoming.jpg';
 import { device } from './device';
 
 const FirstFold = styled.div`
@@ -60,29 +57,29 @@ const MobileAd = styled.img`
 `;
 
 function App() {
+  const sectionNames = ["Sports", "City", "Audio", "Crosswords"];
+
   return (
     <div className="App">
-        <NavBar />
-        <FirstFold>
+        <WelcomeHeader
+          title="HOMECOMING 2024" 
+          imageSrc={homecomingImage}
+        />
+        {/* <FirstFold>
           <NavTabs />
           <MainImage src="https://spectatorpublishing.github.io/nsopCampusMap/" frameBorder="0" scrolling="no" />
           <MobileMainImage src="https://cds-static-hosting.s3.amazonaws.com/NSOP-ILLO.jpg" />
           <a href="https://212west72.com/the-building?utm_source=ColumbiaSpectator&utm_medium=columbiaspectator&utm_campaign=Columbia%20Spectator%20Banners" target="_blank">
             <Ad src="https://s0.2mdn.net/10483125/212W72_061521_300x600.gif"></Ad>
         </a>
-        </FirstFold>
+        </FirstFold> */}
         <a href="https://212west72.com/the-building?utm_source=ColumbiaSpectator&utm_medium=columbiaspectator&utm_campaign=Columbia%20Spectator%20Banners" target="_blank">
             <MobileAd src="https://s0.2mdn.net/10483125/212W72_061521_300x600.gif"></MobileAd>
         </a>
-        <LikeWhatYouSee1 />
-        <Section sectionName="COVID-19" />
-        <Section sectionName="Student Life" />
-        <CoursesWeLoved />
-        <Section sectionName="Academics" />
-        <Section sectionName="City" />
-        <ExploreClubs />
-        <LikeWhatYouSee2/>
-        <StaffCredits />
+        {sectionNames.map((sectionName, index) => (
+            <Section key={sectionName} sectionName={sectionName} index={index} />
+        ))}
+        <StaffCredits></StaffCredits>
     </div>
   );
 }

diff --git a/src/components/ArticleBox.js b/src/components/ArticleBox.js
@@ -3,11 +3,12 @@ import { device } from '../device';
 
 const Wrap = styled.a`
     background-color: white;
-    width: 40rem;
-    border-radius: 5px;
-    margin: 1rem;
+    align-items: center;
+    width:40rem;
+    border-radius: 10px;
     color: black;
     text-decoration: none;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 
     @media ${device.tablet} {
         width: 27.5%;
@@ -17,6 +18,8 @@ const Wrap = styled.a`
 
 const Image = styled.img`
     width: 100%;
+    border-top-left-radius: 10px; 
+    border-top-right-radius: 10px;
     max-height: 15rem;
     overflow: hidden;
     object-fit: cover;
@@ -25,14 +28,21 @@ const Image = styled.img`
 const Title = styled.div`
     padding: 1rem;
     padding-bottom: 0;
-    font-family: 'Noto Sans', sans-serif;
-    font-weight: 600;
+    color: #000;
+    font-family: Bitter;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;    
 `;
 
 const Authors = styled.div`
-    font-family: 'Amiko', sans-serif;
     font-size: 0.75rem;
     padding: 1rem;
+    color: #000;
+    font-family: Bitter;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
 `;
 
 const ArticleBox = ({imgLink, link, title, author}) => {