Add svg icons support

src/back/html.tsx

@@ -12,7 +12,7 @@ const default_html_options: Partial<HTMLOptions> = {
 	showBottomNavbar: true,
 	loadHamburgerMenu: true,
 	loadSearchModal: true,
-	classes: ["grid-layout-main"],
+	bodyClasses: ["grid-layout-main"],
 };
 
 export default function html({

src/back/routes/common/footer.css

@@ -41,9 +41,31 @@ footer {
 		}
 	}
 
+	.wrapper {
+		display: flex;
+		flex-flow: row wrap;
+		align-items: center;
+		gap: 16px;
+		justify-content: space-between;
+
+		.footer__social_media_icons {
+			display: flex;
+			flex-flow: row wrap;
+			gap: 8px;
+
+			svg {
+				width: 24px;
+				height: 24px;
+
+				* {
+					fill: var(--color-brand-text-on-accent) !important;
+				}
+			}
+		}
+
 		.footer__attribution {
 			text-align: center;
-		align-self: end;
 			opacity: 0.6;
 		}
 	}
+}

src/back/routes/common/footer.tsx

@@ -1,7 +1,13 @@
 import { insert_nbsp } from "@sealcode/jdd";
 import type { Context } from "koa";
+import { icon } from "src/back/icons.js";
 import { TempstreamJSX } from "tempstream";
 
+const icons = [
+	{ name: "mastodon", url: "https://mastodon.com.pl" },
+	{ name: "peertube", url: "https://joinpeertube.org/pl" },
+];
+
 export default async function footer(ctx: Context) {
 	const { items: navbar_items } = await ctx.$app.collections["navbar-links"]
 		.list(ctx.$context)
@@ -23,10 +29,19 @@ export default async function footer(ctx: Context) {
 					</li>
 				))}
 			</ul>
+			<div class="wrapper">
+				<div class="footer__social_media_icons">
+					{icons.map((icon_data) => (
+						<a href={icon_data.url} title={icon_data.name}>
+							{icon(icon_data.name)}
+						</a>
+					))}
+				</div>
 				<div class="footer__attribution">
 					Implented using open technologies from{" "}
 					<a href="https://www.sealcode.it/">Sealcode</a>
 				</div>
+			</div>
 		</footer>
 	);
 }