templates/partials: start conversion to templ

Signed-off-by: Sumner Evans <me@sumnerevans.com>

internal/templates/partials/footer.templ

@@ -0,0 +1,33 @@
+package partials
+
+templ Footer(hostedByHTML string) {
+	<footer class="footer mt-4 pt-4 ps-4 pe-4">
+		<div class="row">
+			<div class="col text-center text-secondary">
+				<p>
+					Organized by
+					<a href="https://acm.mines.edu" target="_blank">
+						<img class="img-fluid acm-logo" src="/static/acm.png" alt="Mines ACM"/>
+					</a>
+					<span class="hosted-at">and hosted at</span>
+					<a href="https://www.mines.edu" target="_blank">
+						<img class="img-fluid mines-logo" src="/static/mines.png" alt="Colorado School of Mines"/>
+					</a>
+				</p>
+				<p class="small">
+					Need help? You can always <a href="mailto:support@mineshspc.com">email support</a> with any
+					questions you have.
+				</p>
+				<p class="small">
+					&copy; 2023 Mines ACM.
+					View the
+					<a href="https://github.com/ColoradoSchoolOfMines/mineshspc.com" target="_blank">
+						source
+						code
+					</a>.
+					@templ.Raw(hostedByHTML)
+				</p>
+			</div>
+		</div>
+	</footer>
+}

internal/templates/partials/navbar.templ

@@ -0,0 +1,97 @@
+package partials
+
+func getNavLinkClasses(activePageName, pageName string) []string {
+	classes := []string{"nav-link"}
+	if activePageName == pageName {
+		classes = append(classes, pageName+"-link-active")
+	}
+	return classes
+}
+
+templ Navbar(pageName string, registrationEnabled bool, username string) {
+	<nav class="navbar sticky-top navbar-expand-lg navbar-light shadow">
+		<div class="container-fluid">
+			<button
+				class="navbar-toggler"
+				type="button"
+				data-bs-toggle="collapse"
+				data-bs-target="#navbarSupportedContent"
+				aria-controls="navbarSupportedContent"
+				aria-expanded="false"
+				aria-label="Toggle navigation"
+			>
+				<img src="/static/list.svg"/>
+			</button>
+			<div class="collapse navbar-collapse" id="navbarSupportedContent">
+				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
+					<a class="navbar-brand" href="/">
+						<img
+							src="/static/hspc_transparent.png"
+							width="90"
+							height="90"
+							class="d-inline-block align-top"
+							alt="HSPC"
+						/>
+					</a>
+					<li class="nav-item">
+						<a class={ getNavLinkClasses(pageName, "home") } id="home-link" aria-current="page" href="/">
+							<img src="/static/csmines.svg" width="140" height="auto" alt="CS@Mines"/>
+							HSPC
+						</a>
+					</li>
+					<li class="nav-item">
+						<a
+							class={ getNavLinkClasses(pageName, "info") }
+							id="info-link"
+							aria-current="page"
+							href="/info"
+						>Info</a>
+					</li>
+					<li class="nav-item">
+						<a
+							class={ getNavLinkClasses(pageName, "rules") }
+							id="rules-link"
+							aria-current="page"
+							href="/rules"
+						>Rules</a>
+					</li>
+					if registrationEnabled {
+						<li class="nav-item">
+							<a
+								class={ getNavLinkClasses(pageName, "register") }
+								id="register-link"
+								aria-current="page"
+								href="/register"
+							>Register</a>
+						</li>
+					}
+					<li class="nav-item">
+						<a
+							class={ getNavLinkClasses(pageName, "faq") }
+							id="faq-link"
+							aria-current="page"
+							href="/faq"
+						>FAQ</a>
+					</li>
+					<li class="nav-item">
+						<a
+							class={ getNavLinkClasses(pageName, "archive") }
+							id="archive-link"
+							aria-current="page"
+							href="/archive"
+						>Archive</a>
+					</li>
+				</ul>
+				<div class="logged-in-user nav-link small text-secondary me-4">
+					if username != "" {
+						Welcome <a href="/register/teacher/teams">{ username }</a>
+						<span class="mx-2">|</span>
+						<a href="/register/teacher/logout">Logout</a>
+					} else {
+						<a href="/register/teacher/login">Teacher Login</a>
+					}
+				</div>
+			</div>
+		</div>
+	</nav>
+}

website/static/index.css

@@ -89,12 +89,12 @@ a.btn:hover {
   border-bottom: 5px solid #B44A88;
 }
 
-.navbar #registration-link:hover {
+.navbar #register-link:hover {
   color: #008234;
   border-bottom: 5px solid #008234;
 }
 
-.navbar .registration-link-active {
+.navbar .register-link-active {
   color: #008234 !important;
   border-bottom: 5px solid #008234;
 }

website/templates/partials/navbar.html

@@ -23,7 +23,7 @@
         </li>
         {{ if .RegistrationEnabled }}
           <li class="nav-item">
-            <a class='nav-link {{ if eq .PageName "register"}}registration-link-active{{ end }}' id="registration-link" aria-current="page" href="/register">Register</a>
+            <a class='nav-link {{ if eq .PageName "register"}}register-link-active{{ end }}' id="register-link" aria-current="page" href="/register">Register</a>
           </li>
         {{ end }}
         <li class="nav-item">