Add footer

src/back/html.tsx

@@ -5,6 +5,7 @@ import { tempstreamAsync } from "tempstream";
 import { DEFAULT_HTML_LANG } from "./config.js";
 import { defaultHead } from "./defaultHead.js";
 import { default_navbar } from "./routes/common/navbar.js";
+import footer from "./routes/common/footer.js";
 
 const default_html_options: Partial<HTMLOptions> = {
 	showFooter: true,
@@ -64,7 +65,7 @@ export default function html({
 				${classes ? `class="${classes}"` : ""}
 			>
 				${!hideNavigation ? (htmlOptions?.navbar || default_navbar)(ctx) : ""}
-				${body}
+				${body} ${footer(ctx)}
 			</body>
 		</html>`;
 }

src/back/routes/common/footer.css

@@ -0,0 +1,44 @@
+footer {
+	background-color: var(--color-brand-accent2);
+	color: var(--color-brand-text-on-accent2);
+	grid-column: screen !important;
+	align-self: end;
+	display: grid;
+	grid-template-columns: subgrid;
+	padding: 16px 0;
+	gap: 16px;
+
+	& > * {
+		grid-column: content;
+	}
+
+	ul {
+		margin: 0;
+		padding: 0;
+		display: flex;
+		gap: 16px;
+		justify-content: center;
+		align-items: center;
+
+		li {
+			list-style: none;
+
+			a {
+				text-decoration: none;
+				color: var(--color-brand-text-on-accent2);
+				font-weight: bold;
+				padding: 16px 8px;
+
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+
+	.footer__attribution {
+		text-align: center;
+		align-self: end;
+		opacity: 0.6;
+	}
+}

src/back/routes/common/footer.tsx

@@ -0,0 +1,31 @@
+import type { Context } from "koa";
+import { TempstreamJSX } from "tempstream";
+
+export default async function footer(ctx: Context) {
+	const { items: navbar_items } = await ctx.$app.collections["navbar-links"]
+		.list(ctx.$context)
+		.fetch();
+	const linkData = navbar_items.map((e) => ({
+		text: e.get("label"),
+		url: e.get("href"),
+	}));
+
+	return (
+		<footer>
+			<ul class="footer__navlinks">
+				<li>
+					<a href="/">{ctx.$app.manifest.name}</a>
+				</li>
+				{linkData.map((link) => (
+					<li>
+						<a href={link.url}>{link.text}</a>
+					</li>
+				))}
+			</ul>
+			<div class="footer__attribution">
+				Implented using open technologies from{" "}
+				<a href="https://www.sealcode.it/">Sealcode</a>
+			</div>
+		</footer>
+	);
+}

src/main.css

@@ -6,6 +6,12 @@ html {
 	background: var(--color-brand-canvas);
 	font-family: var(--font-sans-serif);
 	font-size: 14px;
+	container-type: inline-size;
+}
+
+body {
+	grid-auto-rows: min-content min-content min-content auto;
+	min-height: 100vh;
 }
 
 .grid-layout-main {