Documented parts of the website!

athenahacks · Sep 4, 2024 · 5cba1fb · 5cba1fb
1 parent 6cdde70
commit 5cba1fb
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 7 deletions.
diff --git a/src/lib/components/FaqDetails.svelte b/src/lib/components/FaqDetails.svelte
@@ -1,3 +1,4 @@
+<!-- Individual dropdown component used in Faqs.svelte -->
 <script lang="ts">
 	export let question: string;
 	export let answer: string;

diff --git a/src/lib/components/DesktopNavbar.svelte → src/lib/components/NavbarDesktop.svelte b/src/lib/components/DesktopNavbar.svelte → src/lib/components/NavbarDesktop.svelte
@@ -5,6 +5,10 @@
 	let navList: HTMLUListElement;
 	$: activeSection;
 
+	/** 
+	 * Activated when user taps on a navbar item. Toggles the active styling 
+	 * on that item and scrolls to the corresponding section. 
+	 */
 	function toggleActive(event: any) {
 		event.preventDefault();
 

diff --git a/src/lib/components/MobileNavbar.svelte → src/lib/components/NavbarMobile.svelte b/src/lib/components/MobileNavbar.svelte → src/lib/components/NavbarMobile.svelte
@@ -8,6 +8,10 @@
 	$: activeSection;
 	$: isOpen;
 
+	/** 
+	 * Activated when user taps on a navbar item. Toggles the active styling 
+	 * on that item and scrolls to the corresponding section. 
+	 */
 	function toggleActive(event: any) {
 		event.preventDefault();
 		isOpen = false;

diff --git a/src/lib/components/sections/HeroSection.svelte b/src/lib/components/sections/HeroSection.svelte
@@ -9,6 +9,11 @@
 		<img src="/images/hero-section-chocobar.png" alt="AthenaHacks chocolate keyboard. March 2-3" />
 	</div>
 	<div class="content">
+		<!-- [BEGIN] Organizer application links -->
+		 <!-- TODO: Add application links -->
+		<!-- [END] Organizer application links -->
+
+		<!-- [BEGIN] Hackathon application links -->
 		<!-- <Button
 			tilt="left"
 			backgroundColor="blue"
@@ -27,6 +32,7 @@
 			href="https://airtable.com/appC2yvmYQ33jcGYT/shrhXDTWiI3Th8VT0"
 			target="_blank">AthenaHacks 2024 Volunteer Application</Button
 		> -->
+		<!-- [END] application links -->
 		<Socials />
 		<div class="tech-together">
 			<p><small><i>AthenaHacks powered by </i></small></p>

diff --git a/src/lib/components/sections/Team.svelte b/src/lib/components/sections/Team.svelte
@@ -12,21 +12,30 @@
 		['Programs', import.meta.glob('$lib/images/people/programs/*.jpg')]
 	]);
 
+	/** Info from data/team.yml.*/
 	const teamData: { [key: string]: any } = data;
 
+	/** 
+	 * Given a folder location, iterate and retrieve all images.
+	 *   - Parse images for src string.
+	 *   - Parse filename for organizer's first/last name.
+	 *   - Look up organizer in teamData to get any additional data.  
+	 */
 	async function loadProfilePhotosFromModule(module: any) {
 		const iterableModule = Object.entries(module);
 		const images = await Promise.all(
 			iterableModule.map(async ([filepath, resolver]: any) => {
-				// Resolve image src from file system
 				const imageData: any = await resolver().then(({ default: imageUrl }: any) => {
+					// Parse organizer name from image filename.
 					let name: string = filepath.split('\\').pop()!.split('/').pop()!;
 					name = name
 						.replace(/\.[^/.]+$/, '')
 						.replace('_', ' ')
 						.replace(/\w\S*/g, function (txt: string) {
 							return txt.charAt(0).toUpperCase() + txt.substring(1).toLowerCase();
 						});
+						
+					// Join image data with any additional teamData.
 					return {
 						name: name,
 						data: teamData[name] ?? null,
@@ -36,15 +45,15 @@
 				return imageData;
 			})
 		);
-		// console.log(images);
 		return images;
 	}
 </script>
 
 <section id="team">
 	<Header>Our Team</Header>
 	<div class="team-gallery">
-		{#each [...modules] as [dept, module]}
+		<!-- Iterate through each folder containing images from each team. -->
+		{#each [...modules] as [team, module]}
 			{#await loadProfilePhotosFromModule(module) then images}
 				{#each images as { name, data, src }}
 					<div class="profile-item">
@@ -61,7 +70,7 @@
 								<p class="name">{name}</p>
 								<p>
 									<small><i>({data?.pronouns ?? 'she/her'})</i></small><br />
-									<small>{dept}</small>
+									<small>{team}</small>
 								</p>
 							</figcaption>
 						</figure>

diff --git a/src/lib/scss/_globals.scss b/src/lib/scss/_globals.scss
@@ -1,3 +1,4 @@
+/** Global styles for the entire website. */
 @import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Open+Sans:wght@500;700&display=swap');
 
 html {

diff --git a/src/lib/scss/_mixins.scss b/src/lib/scss/_mixins.scss
@@ -1,4 +1,7 @@
-// Adapted from https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/
+/** 
+ * Used to easily create responsive styles based on viewport width.
+ * Adapted from https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/ 
+ */
 
 $breakpoints: (
     'small': (max-width: 767px),

diff --git a/src/lib/scss/_variables.scss b/src/lib/scss/_variables.scss
@@ -1,3 +1,4 @@
+/** Any global constants. */
 $background-color: #FCF7F0;
 $blue: #BFE2FF;
 $dark-blue: #93DDFC;

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import '$lib/scss/_globals.scss';
-	import DesktopNavbar from '$lib/components/DesktopNavbar.svelte';
+	import DesktopNavbar from '$lib/components/NavbarDesktop.svelte';
 	import Footer from '$lib/components/Footer.svelte';
 	import HeroSection from '$lib/components/sections/HeroSection.svelte';
 	import About from '$lib/components/sections/About.svelte';
@@ -9,7 +9,7 @@
 	import Faqs from '$lib/components/sections/Faqs.svelte';
 	import Sponsors from '$lib/components/sections/Sponsors.svelte';
 	import Team from '$lib/components/sections/Team.svelte';
-	import MobileNavbar from '$lib/components/MobileNavbar.svelte';
+	import MobileNavbar from '$lib/components/NavbarMobile.svelte';
 	import Schedule from '$lib/components/sections/Schedule.svelte';
 	import MemoryLane from '$lib/components/sections/MemoryLane.svelte';
 </script>
@@ -39,6 +39,7 @@
 <Sponsors />
 <Keynote />
 <Team />
+
 <Footer />
 
 <style lang="scss">