From b6a74871a6f1773ffec5b95e2ff553a1534b1264 Mon Sep 17 00:00:00 2001 From: Michael DeMarco Date: Sun, 14 Jul 2024 11:34:00 -0700 Subject: [PATCH 1/2] feat: stub music page --- package-lock.json | 14 +++ package.json | 1 + src/components/Links/Links.tsx | 30 +++--- src/pages/about.tsx | 182 ++++++++++++++++++++++++--------- src/pages/music.tsx | 66 ++++++++++++ 5 files changed, 230 insertions(+), 63 deletions(-) create mode 100644 src/pages/music.tsx diff --git a/package-lock.json b/package-lock.json index d1ddcd81..d12af9de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@fortawesome/free-brands-svg-icons": "^6.3.0", "@fortawesome/free-solid-svg-icons": "^6.3.0", "@fortawesome/react-fontawesome": "^0.2.0", + "@notionhq/client": "^2.2.15", "dotenv": "^16.0.3", "gatsby": "^5.11.0", "gatsby-plugin-dark-mode": "^1.1.2", @@ -3374,6 +3375,19 @@ "node": ">= 8" } }, + "node_modules/@notionhq/client": { + "version": "2.2.15", + "resolved": "https://registry.npmjs.org/@notionhq/client/-/client-2.2.15.tgz", + "integrity": "sha512-XhdSY/4B1D34tSco/GION+23GMjaS9S2zszcqYkMHo8RcWInymF6L1x+Gk7EmHdrSxNFva2WM8orhC4BwQCwgw==", + "license": "MIT", + "dependencies": { + "@types/node-fetch": "^2.5.10", + "node-fetch": "^2.6.1" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@parcel/bundler-default": { "version": "2.8.3", "resolved": "https://registry.npmjs.org/@parcel/bundler-default/-/bundler-default-2.8.3.tgz", diff --git a/package.json b/package.json index 3bb329b2..f9a13b02 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@fortawesome/free-brands-svg-icons": "^6.3.0", "@fortawesome/free-solid-svg-icons": "^6.3.0", "@fortawesome/react-fontawesome": "^0.2.0", + "@notionhq/client": "^2.2.15", "dotenv": "^16.0.3", "gatsby": "^5.11.0", "gatsby-plugin-dark-mode": "^1.1.2", diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx index 99427fc5..ee662687 100644 --- a/src/components/Links/Links.tsx +++ b/src/components/Links/Links.tsx @@ -23,6 +23,9 @@ export const Destinations = [ { name: "travel", }, + { + name: "music", + }, { name: "about", }, @@ -36,25 +39,28 @@ const InnerLinks = (props: InnerLinksProps): ReactElement => { const { location } = props; const prefix = location === Locations.HOMEPAGE ? "homepage" : ""; - const EMOJIS = ["🤠", "🐢", "👾", "🤖", "⚡", "🦅", "🦕", "🐧"] + const EMOJIS = ["🤠", "🐢", "👾", "🤖", "⚡", "🦅", "🦕", "🐧"]; const emoji = EMOJIS[Math.floor(Math.random() * EMOJIS.length)]; return (
-

{emoji}michaeldemar.co

+

+ {emoji} + michaeldemar.co +

{Destinations.map((d, index) => { - return ( - - [{d.name}] - - ); + return ( + + [{d.name}] + + ); })} {location !== Locations.HOMEPAGE &&
}
@@ -68,7 +74,7 @@ interface LinksProps { } const Links = (props: LinksProps): ReactElement => { - const { location } = props; + const { location } = props; switch (location) { case Locations.HOMEPAGE: return ( diff --git a/src/pages/about.tsx b/src/pages/about.tsx index 0f3541f4..b6d5238e 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -9,74 +9,141 @@ import SEO from "../components/SEO/SEO"; import { UNIVERSITY_YEAR_AS_STRING } from "../data/Constants"; interface AboutBioProps { - universityYear: string + universityYear: string; } const AboutBio = ({ universityYear }: AboutBioProps): ReactElement => { return ( <>

- Hey there! {`I'm`} Michael, a {universityYear} Honours Computer Science student from the University of British Columbia (UBC) in Vancouver, Canada. - I am originally from Edmonton, Alberta; I made the leap one province over to pursue my undergraduate studies in the fall of 2019. - Alongside my major, I am working towards a minor in Data Science and am a participant in the co-op program. I also am completing a study abroad at the National University of Singapore. + Hey there! {`I'm`} Michael, a {universityYear} Honours Computer + Science student from the{" "} + + University of British Columbia (UBC) + {" "} + in Vancouver, Canada. I am originally from Edmonton, Alberta; I + made the leap one province over to pursue my undergraduate + studies in the fall of 2019. Alongside my major, I am working + towards a{" "} + + minor in Data Science + {" "} + and am a participant in the{" "} + + co-op program + + . I also am completing a study abroad at the{" "} + + National University of Singapore + + .

- In the past, {`I've`} worked at General Genomics, Samsung Electronics in business-to-business (B2B) software, Amazon in {`"Supply Chain Optimization Technologies"`} or SCOT, Tesla in Supercharging, and as an Undergraduate Teaching Assistant (UTA). - To date, {`I've`} taught seven separate courses, including introductory programming in Python, introductory data science, computer systems, computer networking, and data structures and algorithms. + In the past, {`I've`} worked at{" "} + + General Genomics + + ,{" "} + + Samsung Electronics + {" "} + in business-to-business (B2B) software,{" "} + + Amazon + {" "} + in {`"Supply Chain Optimization Technologies"`} or SCOT,{" "} + + Tesla + {" "} + in Supercharging, and as an{" "} + + Undergraduate Teaching Assistant (UTA) + + . To date, {`I've`} taught seven separate courses, including + introductory programming in Python, introductory data science, + computer systems, computer networking, and data structures and + algorithms. +

+

+ This blog is my sandbox on the Internet. It has been a passion + project for a number of years. It showcases my writing, + projects, design, and travel expereinces. +

+

+ I hope you enjoy your stay. To wrap up, here are some photos I + particularly enjoy.

-

This blog is my sandbox on the Internet. It has been a passion project for a number of years. It showcases my writing, projects, design, and travel expereinces.

-

I hope you enjoy your stay. To wrap up, here are some photos I particularly enjoy.

- ) -} + ); +}; interface AboutProps { location: string; } const About = ({ location }: AboutProps): ReactElement => { - // Fetch bio, photos - const data = useStaticQuery(graphql`query AboutQuery { - site { - siteMetadata { - title - } - } - leo1: file(relativePath: {eq: "images/leo1.png" }) { - childImageSharp { - gatsbyImageData( - width: 600 - layout: CONSTRAINED - ) - } - } - collision: file(relativePath: {eq: "images/collision.jpg" }) { - childImageSharp { - gatsbyImageData( - width: 600 - layout: CONSTRAINED - ) - } - } - amazon3: file(relativePath: {eq: "images/amazon3.jpg" }) { - childImageSharp { - gatsbyImageData( - width: 600 - layout: CONSTRAINED - ) - } - } -} -`); + const query = graphql` + query AboutQuery { + site { + siteMetadata { + title + } + } + leo1: file(relativePath: { eq: "images/leo1.png" }) { + childImageSharp { + gatsbyImageData(width: 600, layout: CONSTRAINED) + } + } + collision: file(relativePath: { eq: "images/collision.jpg" }) { + childImageSharp { + gatsbyImageData(width: 600, layout: CONSTRAINED) + } + } + amazon3: file(relativePath: { eq: "images/amazon3.jpg" }) { + childImageSharp { + gatsbyImageData(width: 600, layout: CONSTRAINED) + } + } + } + `; + const data = useStaticQuery(query); const { title } = data.site.siteMetadata; - const leoImage = getImage(data.leo1.childImageSharp) - const collisionImage = getImage(data.collision.childImageSharp) - const amazonImage = getImage(data.amazon3.childImageSharp) + const leoImage = getImage(data.leo1.childImageSharp); + const collisionImage = getImage(data.collision.childImageSharp); + const amazonImage = getImage(data.amazon3.childImageSharp); - if (leoImage === undefined || collisionImage === undefined || amazonImage === undefined) { - throw new Error("Could not find image for /about page!") + if ( + leoImage === undefined || + collisionImage === undefined || + amazonImage === undefined + ) { + throw new Error("Could not find image for /about page!"); } return ( @@ -94,11 +161,24 @@ const About = ({ location }: AboutProps): ReactElement => { justifyContent: "center", }} > - +

My pet tortoise Leo! (Jun 2020)

- +

Volunteering at Collision 2022. (June 2022)

- +

Interning in Toronto, Ontario for the summer. (July 2022)

diff --git a/src/pages/music.tsx b/src/pages/music.tsx new file mode 100644 index 00000000..4a42c003 --- /dev/null +++ b/src/pages/music.tsx @@ -0,0 +1,66 @@ +import React, { ReactElement } from "react"; +import Format from "../components/Format/Format"; +import SEO from "../components/SEO/SEO"; +import { graphql, useStaticQuery } from "gatsby"; + +const NOTION_COLLECTION_UUID = "d4aa82bc984a4236a5b2c6e11ce3da8b"; + +interface MusicProps { + location: string; + serverData: any; +} + +const Music = ({ location, serverData }: MusicProps): ReactElement => { + const query = graphql` + query MusicQuery { + site { + siteMetadata { + title + } + } + } + `; + const data = useStaticQuery(query); + + const { title } = data.site.siteMetadata; + + return ( + + +
+ {`Hello, world`} + Happy dog +
+ + ); +}; + +export async function getServerData() { + try { + const res = await fetch(`https://dog.ceo/api/breeds/image/random`); + + if (!res.ok) { + throw new Error(`Response failed`); + } + + return { + props: await res.json(), + }; + } catch (error) { + return { + status: 500, + headers: {}, + props: {}, + }; + } +} + +export default Music; From f8ed2167e2fd0c663bdacdd479c2a88f2e925379 Mon Sep 17 00:00:00 2001 From: Michael DeMarco Date: Sun, 14 Jul 2024 16:16:52 -0700 Subject: [PATCH 2/2] feat: added music --- src/pages/music.tsx | 98 +++++++++++++++++++++++++++++++++++++------ src/styles/music.scss | 65 ++++++++++++++++++++++++++++ 2 files changed, 150 insertions(+), 13 deletions(-) create mode 100644 src/styles/music.scss diff --git a/src/pages/music.tsx b/src/pages/music.tsx index 4a42c003..235878d6 100644 --- a/src/pages/music.tsx +++ b/src/pages/music.tsx @@ -2,12 +2,34 @@ import React, { ReactElement } from "react"; import Format from "../components/Format/Format"; import SEO from "../components/SEO/SEO"; import { graphql, useStaticQuery } from "gatsby"; +import { Client } from "@notionhq/client"; + +import "../styles/music.scss"; const NOTION_COLLECTION_UUID = "d4aa82bc984a4236a5b2c6e11ce3da8b"; +const notion = new Client(); + +interface Cover { + name: string; + url: string; + rawUrl: string; +} + +interface Album { + id: string; + Review: string; + Cover: Cover[]; + Rating: string; + URL: string; + Arist: string; + "Release Date": string; + Album: string; +} + interface MusicProps { location: string; - serverData: any; + serverData: Album[]; } const Music = ({ location, serverData }: MusicProps): ReactElement => { @@ -24,20 +46,68 @@ const Music = ({ location, serverData }: MusicProps): ReactElement => { const { title } = data.site.siteMetadata; + const getPages = async () => { + try { + const response = await notion.databases.query({ + database_id: NOTION_COLLECTION_UUID, + }); + console.log(response); + } catch (error) { + console.error(error); + } + }; + + getPages(); + return ( -
- {`Hello, world`} - Happy dog +

+ View these reivews on my Notion site{" "} + + here + + ! +

+
+ {serverData.map(album => { + const formattedDate = new Date( + album["Release Date"] + ).toLocaleDateString("en-US", { + year: "numeric", + month: "long", + day: "numeric", + }); + + return ( +
+ {album.Cover[0].name} +
+

{album.Album}

+

{album.Arist}

+

+ {formattedDate} +

+

{album.Rating}

+

{album.Review}

+ + Listen + +
+ ); + })}
); @@ -45,7 +115,9 @@ const Music = ({ location, serverData }: MusicProps): ReactElement => { export async function getServerData() { try { - const res = await fetch(`https://dog.ceo/api/breeds/image/random`); + const res = await fetch( + `https://notion-api.splitbee.io/v1/table/${NOTION_COLLECTION_UUID}` + ); if (!res.ok) { throw new Error(`Response failed`); diff --git a/src/styles/music.scss b/src/styles/music.scss new file mode 100644 index 00000000..3054dae9 --- /dev/null +++ b/src/styles/music.scss @@ -0,0 +1,65 @@ +.album-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 1rem; + padding: 1rem; + background-color: var(--background); +} + +.album-card { + background-color: var(--text-background); + border: 2px solid var(--hr); + border-radius: 8px; + overflow: hidden; + text-align: center; + box-shadow: 0 2px 4px var(--shadow); + transition: transform 0.3s ease; + + &:hover { + transform: translateY(-5px); + } +} + +.album-cover { + width: 100%; + height: auto; + + margin-bottom: 0.5rem; +} + +.album-title { + font-size: 1.2rem; + margin-bottom: 0.5rem; + color: var(--text-title); +} + +.album-artist, +.album-release-date, +.album-rating { + font-size: 0.9rem; + color: var(--text-normal); + margin: 0.25rem 0; +} + +.album-review { + margin: 0.5rem 1rem; + font-style: italic; + font-size: smaller; +} + +.album-link { + display: inline-block; + margin-top: 0.5rem; + margin-bottom: 2rem; + padding: 0.5rem 1rem; + background-color: var(--text-link); + color: var(--background); + text-decoration: none; + border-radius: 4px; + transition: background-color 0.3s ease, color 0.3s ease; + + &:hover { + background-color: var(--text-link-hover); + color: var(--background); + } +}