feat: Add footer to base layout (#30)

G4brym · google-labs-jules[bot] · web-flow · commit c5a50bfa1c12 · 2025-06-20T16:58:14.000+01:00
* feat: Add footer to base layout Added a footer to the `Layout` component in `src/templates/layout.tsx`. The footer includes: - The project name: "workers-research" - A link to the GitHub repository (https://github.com/G4brym/workers-research) - A GitHub SVG icon next to the link. Styling was done using Tailwind CSS classes directly in the component, ensuring the footer is positioned at the bottom of the page and visually consistent with the existing design. * feat: Update footer based on feedback Updated the footer in `src/templates/layout.tsx`: - Made the project name "workers-research" a hyperlink to the GitHub repository. - Adjusted the GitHub icon size to be slightly smaller (w-4 h-4). --------- Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
diff --git a/src/templates/layout.tsx b/src/templates/layout.tsx
@@ -100,7 +100,41 @@ export const Layout: FC = (props) => {
 				<script src="https://unpkg.com/htmx.org@2.0.0"></script>
 				<script src="/core.js"></script>
 			</head>
-			<body class="bg-gray-50 min-h-screen">{props.children}</body>
+			<body class="bg-gray-50 min-h-screen flex flex-col">
+				<div class="flex-grow">{props.children}</div>
+				<footer class="bg-gray-100 border-t border-gray-200 py-4 text-center text-sm text-gray-600">
+					<div class="max-w-6xl mx-auto px-4 flex items-center justify-center">
+						<a
+							href="https://github.com/G4brym/workers-research"
+							target="_blank"
+							rel="noopener noreferrer"
+							class="hover:text-gray-900 hover:underline"
+						>
+							workers-research
+						</a>
+						<a
+							href="https://github.com/G4brym/workers-research"
+							target="_blank"
+							rel="noopener noreferrer"
+							class="ml-2 hover:text-gray-900"
+							aria-label="GitHub Repository"
+						>
+							<svg
+								class="w-4 h-4 inline-block"
+								fill="currentColor"
+								viewBox="0 0 20 20"
+								aria-hidden="true"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.483 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.031-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.378.201 2.397.098 2.65.64.7 1.03 1.595 1.03 2.688 0 3.848-2.338 4.695-4.566 4.942.359.309.678.92.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0020 10c0-5.523-4.477-10-10-10z"
+									clip-rule="evenodd"
+								></path>
+							</svg>
+						</a>
+					</div>
+				</footer>
+			</body>
 		</html>
 	);
 };
