Remove bootstrap & jquery deps + Refactor app files & config

app/app/package.json

@@ -21,23 +21,21 @@
   },
   "homepage": "https://github.com/matiboux/matiboux.me#readme",
   "dependencies": {
-    "@astrojs/check": "^0.5.8",
-    "@astrojs/tailwind": "^5.1.0",
-    "@fontsource/roboto": "^5.0.12",
-    "@iconify-json/fa-brands": "^1.1.8",
-    "@iconify-json/fa6-solid": "^1.1.20",
-    "@iconify/tailwind": "^0.1.4",
-    "@popperjs/core": "^2.11.8",
-    "astro": "^4.16.9",
-    "bootstrap": "^4.6.2",
-    "jquery": "^3.7.1",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/tailwind": "^5.1.2",
+    "@fontsource/roboto": "^5.1.0",
+    "@iconify-json/fa-brands": "^1.2.0",
+    "@iconify-json/fa6-solid": "^1.2.1",
+    "@iconify-json/mdi": "^1.2.1",
+    "@iconify/tailwind": "^1.1.3",
+    "astro": "^4.16.10",
     "js-yaml": "^4.1.0",
-    "sass": "^1.71.1",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.2"
+    "sass": "^1.80.6",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^20.11.26"
+    "@types/node": "^20.14.8"
   }
 }

app/app/src/components/Footer.astro

@@ -0,0 +1,56 @@
+---
+import { githubRepositoryUrl } from '~/config'
+---
+
+<div id="footer" class="footer">
+	<div class="container-fluid">
+		<p>
+			Made with <span class="icon icon-[fa6-solid--heart] icon-fw icon-red"></span> by EPITA students.
+			<a href={`${githubRepositoryUrl}#license`}>
+				<img alt="CC BY-NC 4.0" src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-nc.svg" />
+			</a> <br />
+			We use cookies for analytics purposes.
+		</p>
+		<ul>
+			<li><a href={githubRepositoryUrl} class="btn btn-primary btn-sm">Contribuez sur Github</a></li>
+			<li><a href="https://epidocs.eu/" class="btn btn-info btn-sm">Géré par Epidocs</a></li>
+			<!-- <li><a href="/tos" class="btn btn-primary btn-sm">Conditions générales</a></li> -->
+		</ul>
+	</div>
+</div>
+
+<style lang="scss">
+.footer {
+	@apply flex-shrink-0 bg-black bg-opacity-10 pt-6 pb-8;
+
+	> .container-fluid {
+		@apply w-full max-w-screen-lg mx-auto px-4;
+	}
+
+	.icon-red {
+		@apply text-red-600;
+	}
+
+	p {
+		@apply mb-2;
+
+		img {
+			@apply inline-block h-4;
+		}
+	}
+
+	ul {
+		li {
+			@apply inline-block;
+
+			+ li {
+				@apply ml-1;
+
+				&::before {
+					@apply content-["|"] mr-2;
+				}
+			}
+		}
+	}
+}
+</style>

app/app/src/components/Head.astro

@@ -0,0 +1,9 @@
+---
+import { build } from '~/config'
+---
+
+<link rel="icon" sizes="48x48" href={`/assets/icon-48.png?v=${build}`} />
+<link rel="icon" sizes="192x192" href={`/assets/icon-192.png?v=${build}`} />
+<link rel="icon" sizes="512x512" href={`/assets/icon-512.png?v=${build}`} />
+<link rel="apple-touch-icon" href={`/assets/apple-icon.png?v=${build}`} />
+<link rel="manifest" href="/manifest.json" />

app/app/src/components/Modal.astro

@@ -0,0 +1,118 @@
+---
+---
+
+<div id="warn-invalid-modal" class="modal">
+	<div class="modal-wrapper">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title">
+					<span class="icon icon-[fa6-solid--triangle-exclamation] icon-fw"></span>
+					The link to <b id="warn-invalid-brand"></b> is invalid
+				</h5>
+				<button type="button" class="modal-close" data-dismiss="modal">
+					<span class="icon icon-[mdi--times] icon-fw"></span>
+				</button>
+			</div>
+			<div class="modal-body">
+				<p>Beware! This link has been tagged as invalid. This could mean:</p>
+				<ul>
+					<li>the link is dead or broken</li>
+					<li>the link has been taken over</li>
+					<li>the link points to now irrelevant information</li>
+				</ul>
+				<p>Do you really want to continue to <code id="warn-invalid-href"></code>?</p>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary" data-dismiss="modal">
+					Close
+				</button>
+				<a href="#" id="warn-invalid-link" class="btn btn-primary" target="_blank">
+					Yes, continue anyway
+				</a>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+:global(body):has(.modal.show) {
+	@apply overflow-hidden;
+
+	&:global(.has-scrollbar) {
+		&, .modal {
+			padding-right: var(--scrollbar-width, 0);
+		}
+	}
+}
+
+.modal {
+	@apply fixed inset-0 hidden z-[1050] overflow-hidden;
+	@apply bg-black bg-opacity-50;
+	@apply w-full h-full outline-none;
+
+	&.show {
+		@apply block;
+	}
+
+	.modal-wrapper {
+		@apply relative;
+		@apply m-2 sm:mx-auto sm:my-6;
+		@apply w-auto max-w-screen-md;
+		@apply pointer-events-none;
+	}
+
+	.modal-content {
+		@apply relative flex flex-col w-full;
+		@apply bg-white bg-clip-padding;
+		@apply border border-black border-opacity-20 rounded-md;
+		@apply pointer-events-auto outline-0 overflow-hidden;
+
+		.modal-header {
+			@apply flex items-start justify-between p-4 font-medium;
+			@apply border-b border-black border-opacity-10;
+
+			.modal-close {
+				@apply -m-4 p-4;
+			}
+		}
+
+		.modal-title {
+			@apply m-0 text-xl;
+		}
+
+		.modal-body {
+			@apply relative flex-1 basis-auto p-4;
+		}
+
+		.modal-footer {
+			@apply flex flex-wrap items-center justify-end p-3;
+			@apply border-t border-black border-opacity-10;
+
+			> * {
+				@apply m-1;
+			}
+		}
+	}
+}
+
+.modal-header {
+	@apply text-black;
+}
+
+.modal-body {
+	@apply text-gray-800;
+}
+</style>
+
+<script lang="ts">
+const modalDismissers = document.querySelectorAll('.modal [data-dismiss="modal"]')
+for (const modalDismisser of modalDismissers)
+{
+	modalDismisser.addEventListener('click', (event) =>
+	{
+		event.preventDefault()
+		const modal = modalDismisser.closest('.modal')
+		modal.classList.toggle('show')
+	})
+}
+</script>