chore(front)add books

tangos974 · Dec 5, 2024 · 4298e94 · 4298e94
1 parent 1b95b47
commit 4298e94
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 20 deletions.
diff --git a/frontend/src/lib/components/ResourceList.svelte b/frontend/src/lib/components/ResourceList.svelte
@@ -6,43 +6,138 @@
 	export let tag: string;
 	export let resources: Resource[];
 
-	console.log(`ResourceList Component - Tag: ${tag}`, resources); // Debugging line
+	// State for toggling additional resources
+	let expandedResourceIndex: number | null = null;
+
+	function toggleAdditionalResources(index: number) {
+		expandedResourceIndex = expandedResourceIndex === index ? null : index;
+	}
 </script>
 
 <div id={encodeURIComponent(tag)} class="resource-group">
 	<h2>{tag}</h2>
-	<ul>
-		{#each resources as resource}
-			<li>
-				<BoopableLink href={resource.link} boopParams={{ isBooped: true, y: 3, timing: 150 }}>
-					<strong>{resource.title}</strong>
-				</BoopableLink>
-				<p><em>By {resource.author}</em></p>
-				<p>{resource.Description}</p>
-				<p>
-					Tags:
-					{#each resource.tags as resourceTag}
-						<span class="tag">{resourceTag}</span>
-					{/each}
-				</p>
-			</li>
+	<div class="resource-list">
+		{#each resources as resource, index}
+			<div class="resource-item">
+				<div class="resource-main">
+					<BoopableLink href={resource.link} boopParams={{ isBooped: true, y: 3, timing: 150 }}>
+						<strong>{resource.title}</strong>
+					</BoopableLink>
+					<p><em>By {resource.author}</em></p>
+					<p>{resource.Description}</p>
+					<p>
+						Tags:
+						{#each resource.tags as resourceTag}
+							<span class="tag">{resourceTag}</span>
+						{/each}
+					</p>
+				</div>
+
+				<div class="resource-extra">
+					{#if resource.additional_resources}
+						<button on:click={() => toggleAdditionalResources(index)}>
+							{expandedResourceIndex === index
+								? 'Hide Additional Resources'
+								: 'Show Additional Resources'}
+						</button>
+						{#if expandedResourceIndex === index}
+							<ul class="additional-resources">
+								{#each Object.entries(resource.additional_resources) as [title, link]}
+									<li>
+										<a href={link} target="_blank" rel="noopener noreferrer">{title}</a>
+									</li>
+								{/each}
+							</ul>
+						{/if}
+					{/if}
+				</div>
+			</div>
 		{/each}
-	</ul>
+	</div>
 </div>
 
 <style>
+	.resource-group {
+		margin-top: 4rem;
+	}
+
 	.resource-group h2 {
 		margin-bottom: 1rem;
-		margin-top: 4rem;
 		text-transform: capitalize;
 		text-align: center;
 	}
 
+	.resource-list {
+		display: grid;
+		grid-template-columns: 1fr 300px; /* Fixed width for the extra column */
+		gap: 2rem; /* Space between the main content and the extra column */
+	}
+
+	.resource-main p {
+		margin: 0rem 0;
+		margin-left: 1rem;
+	}
+
+	.resource-item {
+		display: contents;
+	}
+
+	.resource-main {
+		flex: 1; /* Take up available space */
+	}
+
+	.resource-extra {
+		flex-basis: 250px; /* Fixed width for the additional resources */
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start; /* Align button and list at the top */
+	}
+
 	.tag {
 		display: inline-block;
 		background-color: #f0f0f0;
 		padding: 0.25rem 0.5rem;
 		margin-right: 0.5rem;
 		border-radius: 5px;
 	}
+
+	button {
+		margin-top: 1rem;
+		background-color: #007acc;
+		color: white;
+		border: none;
+		border-radius: 5px;
+		padding: 0.5rem 1rem;
+		font-size: 0.9rem;
+		cursor: pointer;
+		transition: all 0.3s ease;
+	}
+
+	button:hover {
+		background-color: #005fa3;
+		transform: scale(1.05);
+	}
+
+	button:focus {
+		outline: none;
+		box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.5);
+	}
+
+	.additional-resources {
+		margin-top: 1rem;
+		padding-left: 1.5rem;
+	}
+
+	.additional-resources li {
+		margin-bottom: 0.5rem;
+	}
+
+	.additional-resources a {
+		color: #007acc;
+		text-decoration: none;
+	}
+
+	.additional-resources a:hover {
+		text-decoration: underline;
+	}
 </style>
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
@@ -154,7 +154,7 @@ a.boopable-link:hover::after {
 	margin-left: 200px; /* Same as the width of .nav-panel */
 	margin-top: 2.5rem; /* Same as the height of the top header */
 	padding: 1rem;
-	max-width: 1200px;
+	max-width: 80vw; /* 80% of the viewport */
 }
 
 /* Resource Group Styles */

diff --git a/frontend/static/resources.json b/frontend/static/resources.json
@@ -43,7 +43,10 @@
 		"author": "H. G. Wells",
 		"link": "https://www.nand2tetris.org/",
 		"Description": "Ever wondered how ones and zeroes are put together to make a computer? This is the book that will answer all your questions",
-		"tags": ["computer architecture", "boolean logic", "assembly language", "VHDL", "book"]
+		"tags": ["computer architecture", "boolean logic", "assembly language", "VHDL", "book"],
+		"additional_resources": {
+			"Free online pdf of the book 'Elements of computing systems'": "https://cmls-global.com/wp-content/uploads/2021/08/The-elements-of-computing-systems-building-a-modern-computer.pdf"
+		}
 	},
 	{
 		"title": "Building an 8-bit breadboard computer",
@@ -79,5 +82,12 @@
 		"link": "/Machine_Learning_with_PyTorch_and_Scikit-Learn.pdf",
 		"Description": "Not finished yet",
 		"tags": ["python", "machine learning", "book"]
+	},
+	{
+		"title": "Learn Git Branching",
+		"author": "Git",
+		"link": "https://learngitbranching.js.org/",
+		"Description": "A fun little game to learn about branching and merging",
+		"tags": ["git", "game"]
 	}
 ]