From f3ddbc8cede5d625f906340c21795971f392cfba Mon Sep 17 00:00:00 2001
From: camillacrane <102168879+camillacrane@users.noreply.github.com>
Date: Sun, 25 Aug 2024 12:20:51 -0400
Subject: [PATCH 1/9] Comments, mobile PSA button

Added comments to archivecarousel.js and added "Submit a PSA" to mobile site
---
 components/homepage/ArchiveCarousel.js | 21 ++++++++++++++-------
 pages/index.js                         | 13 ++++++++++++-
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/components/homepage/ArchiveCarousel.js b/components/homepage/ArchiveCarousel.js
index f6076c48..20ab0317 100644
--- a/components/homepage/ArchiveCarousel.js
+++ b/components/homepage/ArchiveCarousel.js
@@ -5,7 +5,9 @@ import EventPreview from '../EventPreview'
 const ArchiveCarousel = (props) => {
 	return (
 		<div>
+			{/* Div below is container for entire archive section, including audio player and PSA button on desktop */}
 			<div className="flex w-full flex-col lg:flex-row">
+			   {/* Div below is container for archive carousel only on desktop */}
 				<div className="-mt-5 flex flex-col justify-center md:-mt-10 md:mr-10 lg:mt-5 lg:w-4/6 lg:max-w-screen-lg">
 					<p className="kallisto mx-auto mb-2 whitespace-nowrap text-3xl text-white md:mx-0 md:mb-4 lg:text-5xl">
 						This Week on WXYC
@@ -14,7 +16,7 @@ const ArchiveCarousel = (props) => {
 					<div className="mx-auto md:mx-0">
 						<div className=" scrollbar mx-auto mb-10 mt-6 flex snap-mandatory flex-col gap-6 md:mt-0 md:flex-row md:gap-4 md:overflow-x-auto">
 							{props.events.map((event) => (
-								//Event previews
+								//Content is formatted in EventPreview.js
 								<div key={event.node.id}>
 									<EventPreview
 										id={event.node.id}
@@ -28,6 +30,8 @@ const ArchiveCarousel = (props) => {
 							))}
 						</div>
 					</div>
+
+					{/* Link to /archive on mobile */}
 					<div className="w-1/8 mx-auto mb-16 rounded-3xl bg-neutral-800 px-3 py-2 md:hidden">
 						<Link href="/archive">
 							<p className="my-1 cursor-pointer hover:underline">
@@ -37,17 +41,19 @@ const ArchiveCarousel = (props) => {
 					</div>
 				</div>
 
-				{/* player */}
-				<div className="ml-0 mr-3 mt-12 hidden items-start px-3 lg:flex lg:flex-col">
+				{/* Desktop audio player and "Submit a PSA button" lives here, formatted with the Archive section of the homepage. Mobile player is in index.js. */}
+				<div className="ml-0 mr-3 mt-12 hidden items-start px-3 lg:flex lg:flex-col"> 
 					<p className="kallisto text-left text-3xl">Listen Live</p>
 					{/* <iframe src={`https://dj.wxyc.org/#/NowPlaying?theme=dark`} className="border-0 w-full h-[17.6rem] mt-5 mb-12 flex items-center overflow-hidden"/> */}
-
+					
+					{/* Player itself */}
 					<div className="pt-7">
 						<AudioPlayerStream />
 					</div>
 
-					<div className="flex w-full justify-center">
-						<div className="mx-auto mt-10 flex h-16 w-4/6 flex-col items-center justify-center rounded-3xl bg-gradient-to-b from-neutral-200 to-neutral-400 text-xl text-black hover:text-neutral-700 lg:mx-0 ">
+					{/* "Submit a PSA button" */}
+					<div className="flex w-full justify-center"> 
+						<div className="mx-auto mt-10 flex h-16 w-3/6 flex-col items-center justify-center rounded-3xl bg-gradient-to-b from-neutral-200 to-neutral-400 text-xl text-black hover:text-neutral-700 lg:mx-0 ">
 							<div>
 								<Link href="mailto:psa@wxyc.org" scroll={false}>
 									Submit a PSA!
@@ -58,7 +64,8 @@ const ArchiveCarousel = (props) => {
 				</div>
 			</div>
 
-			<div className="w-1/8 mx-auto mb-16 hidden rounded-3xl bg-neutral-800 px-3 py-2 md:mx-0 md:ml-auto md:flex md:h-full md:w-full md:items-start md:justify-start md:bg-transparent md:px-0 md:py-0">
+		   {/* Link to /archive on desktop */}
+			<div className="w-1/8 mx-auto mb-16 hidden bg-neutral-800 px-3 py-2 md:mx-0 md:ml-auto md:flex md:h-full md:w-full md:items-start md:justify-start md:bg-transparent md:px-0 md:py-0">
 				<Link href="/archive">
 					<p className="my-1 cursor-pointer hover:underline">Archive {'>'}</p>
 				</Link>
diff --git a/pages/index.js b/pages/index.js
index d81cced9..6228e063 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -19,7 +19,7 @@ export default function Home(props) {
 
 			<div className="mx-auto flex w-5/6 flex-col gap-4">
 				<div className="-mt-5 flex w-full flex-col justify-center md:-mt-10 md:mr-10 lg:mt-5 ">
-					<div className="mb-20 flex justify-center lg:hidden">
+					<div className="mb-20 flex justify-center lg:hidden"> 
 						<AudioPlayerStream />
 						{/* <iframe src={`https://dj.wxyc.org/#/NowPlaying?theme=dark`} className="border-0 w-full h-[17.6rem] overflow-hidden mb-12 mt-16"/> */}
 					</div>
@@ -35,6 +35,17 @@ export default function Home(props) {
 					{/* if yes events: blog posts full row */}
 					{events.length > 0 && posts && <BlogCarouselFull posts={posts} />}
 
+					{/* "Submit a PSA" button on moblie */}
+					<div className="lg:hidden flex w-full justify-center"> 
+						<div className="mx-auto mt-10 flex h-16 w-4/6 md:w-2/6 flex-col items-center justify-center rounded-3xl bg-gradient-to-b from-neutral-200 to-neutral-400 text-xl text-black hover:text-neutral-700 lg:mx-0 ">
+							<div>
+								<a href="mailto:psa@wxyc.org" scroll={false}>
+									Submit a PSA!
+								</a>
+							</div>
+						</div>
+					</div>
+
 					<div className="mx-auto mt-16 hidden w-5/6 items-center justify-center md:visible md:flex">
 						<PhotoGallery />
 					</div>

From ea27c521c892af33b487b53074f13c402af8e502 Mon Sep 17 00:00:00 2001
From: camillacrane <102168879+camillacrane@users.noreply.github.com>
Date: Sun, 25 Aug 2024 12:24:39 -0400
Subject: [PATCH 2/9] Index.js comments

Added descriptive comments to index.js
---
 pages/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 6228e063..167363e5 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -18,7 +18,9 @@ export default function Home(props) {
 			</div>
 
 			<div className="mx-auto flex w-5/6 flex-col gap-4">
-				<div className="-mt-5 flex w-full flex-col justify-center md:-mt-10 md:mr-10 lg:mt-5 ">
+				<div className="-mt-5 flex w-full flex-col justify-center md:-mt-10 md:mr-10 lg:mt-5">
+					
+					{/* Audio player on mobile site */}
 					<div className="mb-20 flex justify-center lg:hidden"> 
 						<AudioPlayerStream />
 						{/* <iframe src={`https://dj.wxyc.org/#/NowPlaying?theme=dark`} className="border-0 w-full h-[17.6rem] overflow-hidden mb-12 mt-16"/> */}
@@ -35,7 +37,7 @@ export default function Home(props) {
 					{/* if yes events: blog posts full row */}
 					{events.length > 0 && posts && <BlogCarouselFull posts={posts} />}
 
-					{/* "Submit a PSA" button on moblie */}
+					{/* "Submit a PSA" button on mobile */}
 					<div className="lg:hidden flex w-full justify-center"> 
 						<div className="mx-auto mt-10 flex h-16 w-4/6 md:w-2/6 flex-col items-center justify-center rounded-3xl bg-gradient-to-b from-neutral-200 to-neutral-400 text-xl text-black hover:text-neutral-700 lg:mx-0 ">
 							<div>
@@ -46,6 +48,7 @@ export default function Home(props) {
 						</div>
 					</div>
 
+					{/* Photo gallery */}
 					<div className="mx-auto mt-16 hidden w-5/6 items-center justify-center md:visible md:flex">
 						<PhotoGallery />
 					</div>

From 46af0d0d8e201881a06066658e130d505196dd46 Mon Sep 17 00:00:00 2001
From: camillacrane <102168879+camillacrane@users.noreply.github.com>
Date: Sun, 25 Aug 2024 12:31:52 -0400
Subject: [PATCH 3/9] EventPreview.js comments

Added descriptive comments to EventPreview.js
---
 components/EventPreview.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/EventPreview.js b/components/EventPreview.js
index cd19ced5..2ea05ed7 100644
--- a/components/EventPreview.js
+++ b/components/EventPreview.js
@@ -2,7 +2,7 @@ import Link from 'next/link'
 import {AiFillTag} from 'react-icons/ai'
 
 const EventPreview = (props) => {
-	// rendered on the archive tabs
+	// Formatting for individual events in /archive
 	if (!props.published) {
 		return (
 			<div className=" flex w-full" key={props.id}>
@@ -27,7 +27,7 @@ const EventPreview = (props) => {
 	const displayDate = `${arr[1]}/${arrTime[0]}`
 
 	let displayCategories = props.categories.filter(category => category.category._sys.filename !== 'specialty-show');
-	// rendered on home page with "xx/xx" before title
+	// Formatting for individual events rendered on home page with "xx/xx" before title
 	return (
 		<div key={props.id}>
 			<Link href={`/archive/${props.slug}`}>
@@ -42,6 +42,7 @@ const EventPreview = (props) => {
 					{displayCategories.map((category) => (
 						<div key={category.category._sys.filename} className="my-2 flex cursor-pointer justify-start whitespace-nowrap">
 							
+							{/* Tag formatting */}
 							<div className="flex rounded-full border border-slate-400 pl-1 pr-3 py-1 text-sm text-slate-100"><AiFillTag size={18} className="mr-2" /> {category.category.title}</div>
 						</div>
 					))}

From 1efeea8ac81b76c7d337277b1cd0e2e63e7d3cb7 Mon Sep 17 00:00:00 2001
From: camillacrane <102168879+camillacrane@users.noreply.github.com>
Date: Sun, 25 Aug 2024 12:41:41 -0400
Subject: [PATCH 4/9] BlogLayout.js comments

Added a clarifying comment
---
 components/BlogLayout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/BlogLayout.js b/components/BlogLayout.js
index 45a1fdbc..27b3fab1 100644
--- a/components/BlogLayout.js
+++ b/components/BlogLayout.js
@@ -1,6 +1,6 @@
 import BlogBreadcrumbs from './BlogBreadcrumbs'
 
-// imported into every page in "blog" pages directory
+// imported into every page in "blog" pages directory; adds blog breadcrumb navigation
 const BlogLayout = ({children}) => {
 	return (
 		<div>

From 3221b82f7c17ab7d2d497337b676307495fabb9e Mon Sep 17 00:00:00 2001
From: camillacrane <102168879+camillacrane@users.noreply.github.com>
Date: Sun, 25 Aug 2024 12:42:53 -0400
Subject: [PATCH 5/9] ArchiveLayout.js comments

Added clarifying comment
---
 components/ArchiveLayout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ArchiveLayout.js b/components/ArchiveLayout.js
index 753af713..4e7a0fe6 100644
--- a/components/ArchiveLayout.js
+++ b/components/ArchiveLayout.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import ArchiveBreadcrumbs from './ArchiveBreadcrumbs'
 
-// imported into every page in "archive" pages directory
+// imported into every page in "archive" pages directory; adds archive breadcrumbs navigation
 const ArchiveLayout = (props) => {
 	return (
 		<div className="mx-auto w-5/6 overflow-hidden pb-10 text-white">

From 33f7a29a11c17157c9a64b31fb379d0adb4ff96f Mon Sep 17 00:00:00 2001
From: camillacrane <102168879+camillacrane@users.noreply.github.com>
Date: Sun, 25 Aug 2024 12:45:40 -0400
Subject: [PATCH 6/9] Footer.js comments

Added clarifying comment
---
 components/Footer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Footer.js b/components/Footer.js
index f23e1def..ad961b24 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -11,7 +11,7 @@ const Footer = () => {
 	return (
 		
 		
-
+		// Footer is formatted as a column on phone screen and as a row on tablet+desktop screens
 		<div className="flex flex-col px-2 mb-3 md:flex-row md:justify-around mt-10 mx-auto lg:mt-36 lg:px-24">
 		
 		

From 5d830102223e5580025d6201f3a4804830303bd4 Mon Sep 17 00:00:00 2001
From: camillacrane <102168879+camillacrane@users.noreply.github.com>
Date: Sun, 25 Aug 2024 12:47:39 -0400
Subject: [PATCH 7/9] Header.js comments

Improved comments
---
 components/Header.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/Header.js b/components/Header.js
index 5d69f710..cd6e3f64 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -17,7 +17,9 @@ const Header = () => {
 	return (
 		//Parent Container
 		<div className="h-full">
-			{/* Mobile header */}
+
+
+			{/* MOBILE HEADER STARTS HERE */}
 			<div className="fixed top-0 z-50 flex h-16 w-full bg-gradient-to-b from-neutral-600 to-neutral-800 md:h-24 lg:hidden">
 				{/* Hamburger icon */}
 				<button onClick={toggleMenu} className="hamburger-icon h-full">
@@ -170,7 +172,11 @@ const Header = () => {
 
 			{/* Makes the mobile header overlap the rest of the header content */}
 			<div className="relative z-20">
-				{/* Parent container of entire desktop header  */}
+			{/* END MOBILE HEADER */}
+		
+
+				
+				{/* DESKTOP HEADER STARTS HERE */}
 				<div className="mx-auto flex w-5/6 flex-col items-start justify-center pt-10 md:mb-10 md:pt-2 ">
 					<Link href="/">
 						{/* Header text parent container */}

From 93327f748155dd14f0a2f91ce6416ccba79a8227 Mon Sep 17 00:00:00 2001
From: camillacrane <102168879+camillacrane@users.noreply.github.com>
Date: Sun, 25 Aug 2024 12:51:44 -0400
Subject: [PATCH 8/9] PostPreview.js comments

Added clarifying comments
---
 components/PostPreview.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/PostPreview.js b/components/PostPreview.js
index c97b469e..2eacf1e8 100644
--- a/components/PostPreview.js
+++ b/components/PostPreview.js
@@ -2,7 +2,7 @@ import Link from 'next/link'
 import {useRouter} from 'next/router'
 import {AiFillTag} from 'react-icons/ai'
 
-// used for any pages of lists of blog posts
+// Formats individual blog post previews in /blog
 const PostPreview = (props) => {
 	const currentRoute = useRouter().asPath
 
@@ -16,7 +16,7 @@ const PostPreview = (props) => {
 			<Link href={`/blog/${props.slug}`}>
 				<div
 					key={props.id}
-					className="mb-5 flex w-72 cursor-pointer flex-col gap-2 lg:w-[23.5rem]"
+					className="mb-5 flex w-72 cursor-pointer flex-col gap-2 lg:w-[23.5rem] "
 				>
 					<img
 						src={props.cover}
@@ -29,7 +29,7 @@ const PostPreview = (props) => {
 			</Link>
 		)
 	} else {
-		// home page
+		// Formats individual blog post previews on the homepage
 
 		let displayCategories 
 		if (props.categories) {

From f423c1661f3a1b648f8e3af173d84bf0a48132b2 Mon Sep 17 00:00:00 2001
From: camillacrane <102168879+camillacrane@users.noreply.github.com>
Date: Sun, 8 Sep 2024 13:04:08 -0400
Subject: [PATCH 9/9] Blog carousel comments

Added comments clarifying the difference between BlogCarouselFull.js and BlogCarouselCropped.js
---
 components/homepage/BlogCarouselCropped.js | 2 ++
 components/homepage/BlogCarouselFull.js    | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/components/homepage/BlogCarouselCropped.js b/components/homepage/BlogCarouselCropped.js
index 1c5a2c25..4142bf23 100644
--- a/components/homepage/BlogCarouselCropped.js
+++ b/components/homepage/BlogCarouselCropped.js
@@ -2,6 +2,8 @@ import Link from 'next/link'
 import AudioPlayerStream from '../audioplayers/AudioPlayerStream'
 import PostPreview from '../PostPreview'
 
+// There are two BlogCarousel components. On desktop, if there is content in the "WXYC This Week" section, the blog post carousel renders underneath "WXYC This Week" and the audio player at full-screen (BlogCarouselFull.js) However, if there is no content in "WXYC This Week", BlogCarouselCropped.js is called, and is aligned with the audio player.
+
 const BlogCarouselCropped = (props) => {
 	return (
 		<div>
diff --git a/components/homepage/BlogCarouselFull.js b/components/homepage/BlogCarouselFull.js
index 7f009a7f..95182c16 100644
--- a/components/homepage/BlogCarouselFull.js
+++ b/components/homepage/BlogCarouselFull.js
@@ -1,6 +1,8 @@
 import PostPreview from '../PostPreview'
 import Link from 'next/link'
 
+// There are two BlogCarousel components. On desktop, if there is content in the "WXYC This Week" section, the blog post carousel renders underneath "WXYC This Week" and the audio player at full-screen (BlogCarouselFull.js) However, if there is no content in "WXYC This Week", BlogCarouselCropped.js is called, and is aligned with the audio player.
+
 const BlogCarouselFull = (props) => {
 	return (
 		<div className="-mt-5 flex flex-col md:-mt-10 md:mr-10 lg:mt-5 lg:w-full lg:max-w-screen-xl">