diff --git a/package.json b/package.json index 73cef324..d0553649 100644 --- a/package.json +++ b/package.json @@ -5,10 +5,10 @@ "license": "AGPL-3.0", "author": "Daily Bruin Online ", "scripts": { - "start": "gatsby develop --open -p 1234", - "build": "gatsby build", - "serve": "gatsby serve", - "build:prefix-paths": "gatsby build --prefix-paths", + "start": "NODE_OPTIONS=--openssl-legacy-provider gatsby develop --open -p 1234", + "build": "NODE_OPTIONS=--openssl-legacy-provider gatsby build", + "serve": "NODE_OPTIONS=--openssl-legacy-provider gatsby serve", + "build:prefix-paths": "NODE_OPTIONS=--openssl-legacy-provider gatsby build --prefix-paths", "deploy": "docker build -t dailybruin/prilusby:latest . && docker push dailybruin/prilusby" }, "keywords": [ @@ -17,9 +17,11 @@ "daily bruin" ], "dependencies": { + "@babel/core": "7.14.6", "@babel/plugin-transform-spread": "^7.12.1", "@dailybruin/gatsby-source-kerckhoff": "1.1.1", "@dailybruin/lux": "1.15.0", + "@fortawesome/fontawesome-svg-core": "^1.2.20", "@fortawesome/react-fontawesome": "^0.1.4", "@types/react": "16.9.2", "crypto": "^1.0.1", @@ -44,10 +46,14 @@ "react-rectangle": "^1.3.3", "react-social-icons": "^4.1.0", "react-typography": "0.16.19", + "sharp": "^0.33.5", "slugify": "1.3.5", "typography": "0.16.19" }, "devDependencies": { "prettier": "1.18.2" + }, + "resolutions": { + "sharp": "0.33.5" } } diff --git a/src/images/Kate_Green_Photo.png b/src/images/Kate_Green_Photo.png deleted file mode 100644 index 6e37e00d..00000000 Binary files a/src/images/Kate_Green_Photo.png and /dev/null differ diff --git a/src/images/Kate_Green_Signature.png b/src/images/Kate_Green_Signature.png deleted file mode 100644 index df839b40..00000000 Binary files a/src/images/Kate_Green_Signature.png and /dev/null differ diff --git a/src/images/Martin_Sevcik_Photo.jpg b/src/images/Martin_Sevcik_Photo.jpg deleted file mode 100644 index 509b70f2..00000000 Binary files a/src/images/Martin_Sevcik_Photo.jpg and /dev/null differ diff --git a/src/images/Martin_Sevcik_Signature.png b/src/images/Martin_Sevcik_Signature.png deleted file mode 100644 index 0f4da8aa..00000000 Binary files a/src/images/Martin_Sevcik_Signature.png and /dev/null differ diff --git a/src/images/Maya_O_Kelly_Photo.png b/src/images/Maya_O_Kelly_Photo.png deleted file mode 100644 index 9edf68cb..00000000 Binary files a/src/images/Maya_O_Kelly_Photo.png and /dev/null differ diff --git a/src/images/Maya_O_Kelly_Signature.png b/src/images/Maya_O_Kelly_Signature.png deleted file mode 100644 index 89387212..00000000 Binary files a/src/images/Maya_O_Kelly_Signature.png and /dev/null differ diff --git a/src/pages/about.tsx b/src/pages/about.tsx index efc0238b..b8538bc7 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -5,13 +5,7 @@ import CustomHead from '../components/CustomHead' import CustomHeader from '../components/CustomHeader' import { Footer } from '../components/Footer' -import KatePhoto from '../images/Kate_Green_Photo.png' -import MartinPhoto from '../images/Martin_Sevcik_Photo.jpg' -import MayaPhoto from '../images/Maya_O_Kelly_Photo.png' - -import KateSign from '../images/Kate_Green_Signature.png' -import MartinSign from '../images/Martin_Sevcik_Signature.png' -import MayaSign from '../images/Maya_O_Kelly_Signature.png' +import { useEffect, useState } from 'react' interface AboutInfo { headshot?: string @@ -22,10 +16,71 @@ interface AboutInfo { email?: string } -export function AboutFrame(props: AboutInfo) { - if (typeof document == 'undefined') { - return ( +interface AboutData { + pageName: string; + url: string; + description: string; + image: string; + missionStatement: { type: string; content: string }[]; + directors: { + title: string; + name: string; + bio: string; + email: string; + signature: string; + headshot: string; + }[]; +} + +export function AboutFrame(props) { + const [data, setData] = useState(null); + + useEffect(() => { + // Fetch data from the API + fetch("https://kerckhoff.dailybruin.com/api/packages/prime/prime.about") + .then(res => res.json()) + .then(res => setData(res.data['article.aml'] as AboutData)) // Type assertion + .catch(error => console.error('Error fetching data:', error)); + }, []); + + // Log the fetched data to debug + console.log(data); + + // Check if the document is undefined (i.e., during server-side rendering) + if (typeof document === 'undefined') { + // Render only if data is available during SSR + return data ? ( <> + + + ) : null; // Render nothing if data is not yet available during SSR + } + + // Render the component for client-side with dynamic data + return ( + <> + {data ? ( + + ) : ( + // Loading state while fetching the data - - ) - } - return ( - <> - + )}
+ {/* Update image styling to preserve aspect ratio */} +
@@ -124,134 +174,92 @@ export const query = graphql` } } ` -const About = ({ data }) => ( - <> - -
- mission -
-
-

Dear reader,

- -

- Here at PRIME, we strive to shine a light on issues affecting the UCLA - community and give them a human voice. As a magazine, we aim to uplift - narratives that might otherwise be overlooked at a big, ever-buzzing - institution like UCLA. -

+const About = () => { + const [data, setData] = useState(null); -

- When lecturers protested against unfair labor practices, PRIME covered - the daily struggles they endure as faculty. We also reported on the - evolution of COVID-19 testing technology as our community returned to - campus. PRIME investigates the questions that matter most, from - transgender inclusion in student life to the ethics of animal - experimentation. -

+ useEffect(() => { + // Fetch data from the API + fetch("https://kerckhoff.dailybruin.com/api/packages/prime/prime.about") + .then(res => res.json()) + .then(res => setData(res.data['article.aml'] as AboutData)) // Type assertion + .catch(error => console.error('Error fetching data:', error)); + }, []); -

- PRIME writers delve into every element of the Bruin experience. Even - while investigating predatory landlords in Westwood, we make time for - exploring the history of Bruins' love for boba. Personal columns also - have a home in PRIME. From discussing the imposter syndrome of being a - nontraditional student to reflecting on identity as a child of - immigrants, PRIME platforms reporters to honestly share their diverse - stories. -

- -

- Our quarterly magazine exists at the intersection of reporting, writing, - design and art and is made possible by the Daily Bruin staff and our - very own PRIME reporters. As PRIME pushes the boundaries of narrative - journalism, embracing multimedia formats and immersive first-person - reporting, we will continue to tell the stories that need to be told. -

- -

Thank you for reading PRIME. We hope you enjoy it.

+ if (!data) { + return
Loading...
; + } -

With love,

+ return ( + <> + +
+ mission +
+
+ {data.missionStatement.map((paragraph, index) => ( +

{paragraph.content}

+ ))} +
+
+ staff +
-

The PRIME editors

-
-
- staff -
-
- - - -
-