Code cleanup

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">

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>

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>
 					))}

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">
 
 

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 */}

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) {

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>

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>

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">

pages/index.js

@@ -18,8 +18,10 @@ 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="mb-20 flex justify-center lg:hidden">
+				<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"/> */}
 					</div>
@@ -35,6 +37,18 @@ export default function Home(props) {
 					{/* if yes events: blog posts full row */}
 					{events.length > 0 && posts && <BlogCarouselFull posts={posts} />}
 
+					{/* "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>
+								<a href="mailto:psa@wxyc.org" scroll={false}>
+									Submit a PSA!
+								</a>
+							</div>
+						</div>
+					</div>
+
+					{/* Photo gallery */}
 					<div className="mx-auto mt-16 hidden w-5/6 items-center justify-center md:visible md:flex">
 						<PhotoGallery />
 					</div>