Merge pull request #5 from fedyna-k/PMPR-3

Auto navbar and dynamic partial content

defaults/interfaces.ts

@@ -0,0 +1,8 @@
+export interface AppProperties {
+  name: string;
+  icon: string;
+  pages: Record<string, string>;
+  adminOnly: string[];
+}
+
+export type EmptyObject = Record<string | number | symbol, never>;

defaults/makeIndex.ts

@@ -0,0 +1,10 @@
+import { EmptyObject } from "$root/defaults/interfaces.ts";
+
+export default function makeIndex<
+  IndexProps = EmptyObject,
+>(basePath: string) {
+  return async function Index(props: IndexProps) {
+    const index = (await import(`${basePath}/partials/index.tsx`)).Index;
+    return index(props);
+  };
+}

defaults/makePartials.tsx

@@ -0,0 +1,23 @@
+import { JSX } from "preact";
+import { Partial } from "$fresh/runtime.ts";
+import { RouteConfig } from "$fresh/server.ts";
+
+export function getConfig(): RouteConfig {
+  return {
+    skipAppWrapper: true,
+    skipInheritedLayouts: true,
+  };
+}
+
+// deno-lint-ignore no-explicit-any
+export function makePartials<Props extends any>(
+  page: (props: Props) => JSX.Element,
+) {
+  return function WrappedElements(props: Props): JSX.Element {
+    return (
+      <Partial name="body">
+        {page(props)}
+      </Partial>
+    );
+  };
+}

deno.json

@@ -28,7 +28,8 @@
     "preact/": "https://esm.sh/preact@10.22.0/",
     "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
     "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
-    "$std/": "https://deno.land/std@0.216.0/"
+    "$std/": "https://deno.land/std@0.216.0/",
+    "$root/": "./"
   },
   "compilerOptions": {
     "jsx": "react-jsx",

fresh.config.ts

@@ -4,6 +4,6 @@ export default defineConfig({
   server: {
     cert: await Deno.readTextFile("certs/cert.pem"),
     key: await Deno.readTextFile("certs/key.pem"),
-    port: 443
+    port: 443,
-  }
+  },
 });

fresh.gen.ts

@@ -2,8 +2,13 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
+import * as $_apps_layout from "./routes/(apps)/_layout.tsx";
 import * as $_apps_mobility_index from "./routes/(apps)/mobility/index.tsx";
 import * as $_apps_notes_index from "./routes/(apps)/notes/index.tsx";
+import * as $_apps_notes_partials_admin_courses from "./routes/(apps)/notes/partials/(admin)/courses.tsx";
+import * as $_apps_notes_partials_admin_students from "./routes/(apps)/notes/partials/(admin)/students.tsx";
+import * as $_apps_notes_partials_index from "./routes/(apps)/notes/partials/index.tsx";
+import * as $_apps_notes_partials_notes from "./routes/(apps)/notes/partials/notes.tsx";
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $_middleware from "./routes/_middleware.ts";
@@ -14,12 +19,20 @@ import * as $login from "./routes/login.tsx";
 import * as $logout from "./routes/logout.tsx";
 import * as $Counter from "./islands/Counter.tsx";
 import * as $_islands_AppNavigator from "./routes/(_islands)/AppNavigator.tsx";
+import * as $_islands_Navbar from "./routes/(_islands)/Navbar.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
+    "./routes/(apps)/_layout.tsx": $_apps_layout,
     "./routes/(apps)/mobility/index.tsx": $_apps_mobility_index,
     "./routes/(apps)/notes/index.tsx": $_apps_notes_index,
+    "./routes/(apps)/notes/partials/(admin)/courses.tsx":
+      $_apps_notes_partials_admin_courses,
+    "./routes/(apps)/notes/partials/(admin)/students.tsx":
+      $_apps_notes_partials_admin_students,
+    "./routes/(apps)/notes/partials/index.tsx": $_apps_notes_partials_index,
+    "./routes/(apps)/notes/partials/notes.tsx": $_apps_notes_partials_notes,
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
     "./routes/_middleware.ts": $_middleware,
@@ -32,6 +45,7 @@ const manifest = {
   islands: {
     "./islands/Counter.tsx": $Counter,
     "./routes/(_islands)/AppNavigator.tsx": $_islands_AppNavigator,
+    "./routes/(_islands)/Navbar.tsx": $_islands_Navbar,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;

readme.md

@@ -1,3 +1,4 @@
 # ✨ PolyMPR ✨
 
-The ✨ Poly Module de Pilotage des Ressources ✨ is the ultimate tool to handle various HR task in the INFO department.
+The ✨ Poly Module de Pilotage des Ressources ✨ is the ultimate tool to handle
+various HR task in the INFO department.

routes/(_components)/Footer.tsx

@@ -1,11 +1,12 @@
-type FooterProps = Record<string | number | symbol, never>;
+import { EmptyObject } from "$root/defaults/interfaces.ts";
+
+type FooterProps = EmptyObject;
 
 export default function Footer(_props: FooterProps) {
   return (
     <footer>
       <p>
-        &copy; 2025 PolyMPR -{" "}
+        &copy; 2025 PolyMPR - <a href="/about" f-client-nav={false}>About</a>
-        <a href="/about" f-client-nav={false}>About</a>
       </p>
     </footer>
   );

routes/(_components)/PartialLink.tsx

@@ -0,0 +1,13 @@
+interface PartialLinkProps {
+  link: string;
+  partial: string;
+  display: string;
+}
+
+export default function PartialLink(props: PartialLinkProps) {
+  return (
+    <a href={props.link} f-partial={props.partial}>
+      {props.display}
+    </a>
+  );
+}

routes/(_islands)/AppNavigator.tsx

@@ -1,8 +1,4 @@
-export interface AppProperties {
+import { AppProperties } from "$root/defaults/interfaces.ts";
-  name: string;
-  icon: string;
-  hint: string;
-}
 
 type AppNavigatorProps = {
   apps: Record<string, AppProperties>;

routes/(_islands)/Navbar.tsx

@@ -0,0 +1,29 @@
+import PartialLink from "$root/routes/(_components)/PartialLink.tsx";
+import { JSX } from "preact/jsx-runtime";
+
+type NavbarProps = {
+  currentApp: string;
+  pages: Record<string, string>;
+};
+
+export default function Navbar(props: NavbarProps) {
+  const links: JSX.Element[] = [];
+
+  for (const page in props.pages) {
+    links.push(
+      <PartialLink
+        link={`/${props.currentApp}${page === "index" ? "" : `/${page}`}`}
+        partial={`/${props.currentApp}/partials${
+          page === "index" ? "" : `/${page}`
+        }`}
+        display={props.pages[page]}
+      />,
+    );
+  }
+
+  return (
+    <nav>
+      {links}
+    </nav>
+  );
+}

routes/(apps)/_layout.tsx

@@ -0,0 +1,25 @@
+import { FreshContext } from "$fresh/server.ts";
+import { Partial } from "$fresh/runtime.ts";
+import { State } from "$root/routes/_middleware.ts";
+import { AppProperties } from "$root/defaults/interfaces.ts";
+import Navbar from "$root/routes/(_islands)/Navbar.tsx";
+
+export default async function AppLayout(
+  request: Request,
+  context: FreshContext<State>,
+) {
+  const pathname = new URL(request.url).pathname;
+  const currentApp = pathname.split("/")[1];
+  const properties: AppProperties = (await import(
+    `./${currentApp}/(_props)/props.ts`
+  )).default;
+
+  return (
+    <section id="app">
+      <Navbar currentApp={currentApp} pages={properties.pages} />
+      <Partial name="body">
+        <context.Component />
+      </Partial>
+    </section>
+  );
+}

routes/(apps)/notes/(_props)/props.ts

@@ -1,9 +1,16 @@
-import { AppProperties } from "../../../(_islands)/AppNavigator.tsx";
+import { AppProperties } from "$root/defaults/interfaces.ts";
 
 const properties: AppProperties = {
   name: "PolyNotes",
   icon: "school",
+  pages: {
+    index: "Homepage",
+    notes: "Notes",
+    courses: "Courses management",
+    students: "Students management",
+  },
+  adminOnly: ["courses", "students"],
   hint: "Gestionnaire de note"
 };
 
-export default properties;
+export default properties;

routes/(apps)/notes/index.tsx

@@ -1,12 +1,2 @@
-type ModulesProps = Record<string | number | symbol, never>;
+import makeIndex from "$root/defaults/makeIndex.ts";
-
+export default makeIndex(import.meta.dirname!);
-export default function Modules(_props: ModulesProps) {
-  return (
-    <>
-      <h2>All PolyMPR modules</h2>
-      <nav>
-        
-      </nav>
-    </>
-  );
-}

routes/(apps)/notes/partials/(admin)/courses.tsx

@@ -0,0 +1,17 @@
+import { Partial } from "$fresh/runtime.ts";
+import { RouteConfig } from "$fresh/server.ts";
+
+type ModulesProps = Record<string | number | symbol, never>;
+
+export const config: RouteConfig = {
+  skipAppWrapper: true,
+  skipInheritedLayouts: true,
+};
+
+export default function Modules(_props: ModulesProps) {
+  return (
+    <Partial name="body">
+      <a href="notes" f-partial={"notes/partials"}>notes</a>
+    </Partial>
+  );
+}

routes/(apps)/notes/partials/(admin)/students.tsx

@@ -0,0 +1,17 @@
+import { Partial } from "$fresh/runtime.ts";
+import { RouteConfig } from "$fresh/server.ts";
+
+type ModulesProps = Record<string | number | symbol, never>;
+
+export const config: RouteConfig = {
+  skipAppWrapper: true,
+  skipInheritedLayouts: true,
+};
+
+export default function Modules(_props: ModulesProps) {
+  return (
+    <Partial name="body">
+      <a href="notes" f-partial={"notes/partials"}>notes</a>
+    </Partial>
+  );
+}

routes/(apps)/notes/partials/index.tsx

@@ -0,0 +1,10 @@
+import { getConfig, makePartials } from "$root/defaults/makePartials.tsx";
+
+type NotesIndexProps = Record<string | number | symbol, never>;
+
+export function Index(_props: NotesIndexProps) {
+  return <a href="notes" f-partial={"notes/partials"}>bip boup</a>;
+}
+
+export const config = getConfig();
+export default makePartials(Index);

routes/(apps)/notes/partials/notes.tsx

@@ -0,0 +1,17 @@
+import { Partial } from "$fresh/runtime.ts";
+import { RouteConfig } from "$fresh/server.ts";
+
+type ModulesProps = Record<string | number | symbol, never>;
+
+export const config: RouteConfig = {
+  skipAppWrapper: true,
+  skipInheritedLayouts: true,
+};
+
+export default function Modules(_props: ModulesProps) {
+  return (
+    <Partial name="body">
+      <a href="notes" f-partial={"notes/partials"}>notes</a>
+    </Partial>
+  );
+}

routes/_app.tsx

@@ -1,8 +1,7 @@
 import { FreshContext } from "$fresh/server.ts";
-import { Partial } from "$fresh/runtime.ts";
+import { State } from "$root/routes/_middleware.ts";
-import { State } from "./_middleware.ts";
+import Header from "$root/routes/(_components)/Header.tsx";
-import Header from "./(_components)/Header.tsx";
+import Footer from "$root/routes/(_components)/Footer.tsx";
-import Footer from "./(_components)/Footer.tsx";
 
 // deno-lint-ignore require-await
 export default async function App(
@@ -20,13 +19,12 @@ export default async function App(
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
         <link rel="stylesheet" href="/styles/main.css" />
+        <link rel="stylesheet" href="/styles/app.css" />
       </head>
       <body f-client-nav>
         <Header link={link} />
         <section>
-          <Partial name="body">
+          <context.Component />
-            <context.Component />
-          </Partial>
         </section>
         <Footer />
       </body>

routes/_middleware.ts

@@ -1,52 +1,52 @@
-import { FreshContext } from "$fresh/server.ts";
+import { FreshContext } from "$fresh/server.ts";
-import { getCookies } from "$std/http/cookie.ts";
+import { getCookies } from "$std/http/cookie.ts";
-import { isJwtValid } from "@popov/jwt";
+import { isJwtValid } from "@popov/jwt";
-
+
-const PUBLIC_ROUTES = [
+const PUBLIC_ROUTES = [
-  "/",
+  "/",
-  "/login",
+  "/login",
-  "/logout",
+  "/logout",
-  "/about",
+  "/about",
-  "/partials/about",
+  "/partials/about",
-  "/contact",
+  "/contact",
-];
+];
-
+
-export interface State {
+export interface State {
-  isAuthenticated: boolean;
+  isAuthenticated: boolean;
-}
+}
-
+
-function isRoutePublic(route: string) {
+function isRoutePublic(route: string) {
-  return PUBLIC_ROUTES.includes(route) || route.match(/\..+$/);
+  return PUBLIC_ROUTES.includes(route) || route.match(/\..+$/);
-}
+}
-
+
-export const handler = [
+export const handler = [
-  async function checkAuthentication(
+  async function checkAuthentication(
-    request: Request,
+    request: Request,
-    context: FreshContext<State>,
+    context: FreshContext<State>,
-  ) {
+  ) {
-    const cookies = getCookies(request.headers);
+    const cookies = getCookies(request.headers);
-    context.state.isAuthenticated = await isJwtValid(
+    context.state.isAuthenticated = await isJwtValid(
-      cookies["sessionToken"] ?? "",
+      cookies["sessionToken"] ?? "",
-      "NEED TO CHANGE THIS KEY FURTHER IN DEV",
+      "NEED TO CHANGE THIS KEY FURTHER IN DEV",
-    );
+    );
-
+
-    return await context.next();
+    return await context.next();
-  },
+  },
-  async function ensureAuthentication(
+  async function ensureAuthentication(
-    request: Request,
+    request: Request,
-    context: FreshContext<State>,
+    context: FreshContext<State>,
-  ) {
+  ) {
-    const url = new URL(request.url);
+    const url = new URL(request.url);
-
+
-    if (!isRoutePublic(url.pathname) && !context.state.isAuthenticated) {
+    if (!isRoutePublic(url.pathname) && !context.state.isAuthenticated) {
-      return new Response(null, {
+      return new Response(null, {
-        status: 302,
+        status: 302,
-        headers: {
+        headers: {
-          Location: "/login",
+          Location: "/login",
-        },
+        },
-      });
+      });
-    }
+    }
-
+
-    return await context.next();
+    return await context.next();
-  },
+  },
-];
+];

routes/apps.tsx

@@ -1,11 +1,16 @@
 import { FreshContext, Handlers } from "$fresh/server.ts";
-import AppNavigator, { AppProperties } from "./(_islands)/AppNavigator.tsx";
+import { AppProperties } from "$root/defaults/interfaces.ts";
+import AppNavigator from "$root/routes/(_islands)/AppNavigator.tsx";
 
 export const handler: Handlers = {
   async GET(_request, context) {
     const apps: Record<string, AppProperties> = {};
 
     for await (const appDir of Deno.readDir("routes/(apps)")) {
+      if (appDir.isFile) {
+        continue;
+      }
+
       try {
         const properties: AppProperties = (await import(
           `./(apps)/${appDir.name}/(_props)/props.ts`

routes/login.tsx

@@ -1,114 +1,114 @@
-import { Handlers } from "$fresh/server.ts";
+import { Handlers } from "$fresh/server.ts";
-import { State } from "./_middleware.ts";
+import { State } from "$root/routes/_middleware.ts";
-import {
+import {
-  parse,
+  parse,
-  type RegularTagNode,
+  type RegularTagNode,
-  type TextNode,
+  type TextNode,
-} from "@melvdouc/xml-parser";
+} from "@melvdouc/xml-parser";
-import { createJwt } from "@popov/jwt";
+import { createJwt } from "@popov/jwt";
-import { setCookie } from "$std/http/cookie.ts";
+import { setCookie } from "$std/http/cookie.ts";
-
+
-const SERVICE = "https://localhost/login";
+const SERVICE = "https://localhost/login";
-const CAS = "https://ident.univ-amu.fr/cas";
+const CAS = "https://ident.univ-amu.fr/cas";
-
+
-interface CasTagNode extends RegularTagNode {
+interface CasTagNode extends RegularTagNode {
-  children: [TextNode];
+  children: [TextNode];
-}
+}
-
+
-interface CasGroupNode extends RegularTagNode {
+interface CasGroupNode extends RegularTagNode {
-  children: CasTagNode[];
+  children: CasTagNode[];
-}
+}
-
+
-interface CasResponse extends RegularTagNode {
+interface CasResponse extends RegularTagNode {
-  children: [TextNode, CasGroupNode];
+  children: [TextNode, CasGroupNode];
-}
+}
-
+
-function getTag(tag: CasTagNode): [string, string] {
+function getTag(tag: CasTagNode): [string, string] {
-  return [
+  return [
-    tag.tagName.replace("cas:", ""),
+    tag.tagName.replace("cas:", ""),
-    tag.children[0].value,
+    tag.children[0].value,
-  ];
+  ];
-}
+}
-
+
-function createUserJWT(casResponse: CasResponse): Promise<string> {
+function createUserJWT(casResponse: CasResponse): Promise<string> {
-  const nodes = casResponse.children[1].children.map(getTag);
+  const nodes = casResponse.children[1].children.map(getTag);
-  const fullUserInfos: Record<string, string | string[]> = {};
+  const fullUserInfos: Record<string, string | string[]> = {};
-
+
-  nodes.forEach(([key, value]) => {
+  nodes.forEach(([key, value]) => {
-    if (fullUserInfos[key] && Array.isArray(fullUserInfos[key])) {
+    if (fullUserInfos[key] && Array.isArray(fullUserInfos[key])) {
-      fullUserInfos[key].push(value);
+      fullUserInfos[key].push(value);
-    } else if (fullUserInfos[key]) {
+    } else if (fullUserInfos[key]) {
-      fullUserInfos[key] = [fullUserInfos[key], value];
+      fullUserInfos[key] = [fullUserInfos[key], value];
-    } else {
+    } else {
-      fullUserInfos[key] = value;
+      fullUserInfos[key] = value;
-    }
+    }
-  });
+  });
-
+
-  const now = Math.floor(Date.now() / 1000);
+  const now = Math.floor(Date.now() / 1000);
-  const oneHour = 60 * 60;
+  const oneHour = 60 * 60;
-
+
-  const payload = {
+  const payload = {
-    iss: "PolyMPR",
+    iss: "PolyMPR",
-    iat: now,
+    iat: now,
-    exp: now + oneHour,
+    exp: now + oneHour,
-    aud: "PolyMPR",
+    aud: "PolyMPR",
-    user: fullUserInfos,
+    user: fullUserInfos,
-  };
+  };
-
+
-  const key = "NEED TO CHANGE THIS KEY FURTHER IN DEV";
+  const key = "NEED TO CHANGE THIS KEY FURTHER IN DEV";
-  return createJwt(payload, key);
+  return createJwt(payload, key);
-}
+}
-
+
-// deno-lint-ignore no-explicit-any
+// deno-lint-ignore no-explicit-any
-export const handler: Handlers<any, State> = {
+export const handler: Handlers<any, State> = {
-  async GET(request, context) {
+  async GET(request, context) {
-    const url = new URL(request.url);
+    const url = new URL(request.url);
-    const ticket = url.searchParams.get("ticket");
+    const ticket = url.searchParams.get("ticket");
-
+
-    if (ticket) {
+    if (ticket) {
-      const response = await fetch(
+      const response = await fetch(
-        `${CAS}/serviceValidate?service=${SERVICE}&ticket=${ticket}`,
+        `${CAS}/serviceValidate?service=${SERVICE}&ticket=${ticket}`,
-      );
+      );
-      const body = parse(await response.text()) as [RegularTagNode];
+      const body = parse(await response.text()) as [RegularTagNode];
-      const casResponse = body[0].children[0] as CasResponse;
+      const casResponse = body[0].children[0] as CasResponse;
-
+
-      if (casResponse.tagName != "cas:authenticationSuccess") {
+      if (casResponse.tagName != "cas:authenticationSuccess") {
-        return new Response(null, {
+        return new Response(null, {
-          status: 302,
+          status: 302,
-          headers: {
+          headers: {
-            Location: `${CAS}/login?service=${SERVICE}`,
+            Location: `${CAS}/login?service=${SERVICE}`,
-          },
+          },
-        });
+        });
-      }
+      }
-
+
-      const headers = new Headers();
+      const headers = new Headers();
-
+
-      setCookie(headers, {
+      setCookie(headers, {
-        name: "sessionToken",
+        name: "sessionToken",
-        value: await createUserJWT(casResponse),
+        value: await createUserJWT(casResponse),
-      });
+      });
-      headers.set("Location", "/apps");
+      headers.set("Location", "/apps");
-
+
-      return new Response(null, {
+      return new Response(null, {
-        status: 302,
+        status: 302,
-        headers,
+        headers,
-      });
+      });
-    }
+    }
-
+
-    if (context.state.isAuthenticated) {
+    if (context.state.isAuthenticated) {
-      return new Response(null, {
+      return new Response(null, {
-        status: 302,
+        status: 302,
-        headers: {
+        headers: {
-          Location: "/apps",
+          Location: "/apps",
-        },
+        },
-      });
+      });
-    } else {
+    } else {
-      return new Response(null, {
+      return new Response(null, {
-        status: 302,
+        status: 302,
-        headers: {
+        headers: {
-          Location: `${CAS}/login?service=${SERVICE}`,
+          Location: `${CAS}/login?service=${SERVICE}`,
-        },
+        },
-      });
+      });
-    }
+    }
-  },
+  },
-};
+};

routes/logout.tsx

@@ -1,30 +1,30 @@
-import { Handlers } from "$fresh/server.ts";
+import { Handlers } from "$fresh/server.ts";
-import { State } from "./_middleware.ts";
+import { State } from "$root/routes/_middleware.ts";
-import { deleteCookie } from "$std/http/cookie.ts";
+import { deleteCookie } from "$std/http/cookie.ts";
-
+
-const SERVICE = "https://localhost/";
+const SERVICE = "https://localhost/";
-const CAS = "https://ident.univ-amu.fr/cas";
+const CAS = "https://ident.univ-amu.fr/cas";
-
+
-// deno-lint-ignore no-explicit-any
+// deno-lint-ignore no-explicit-any
-export const handler: Handlers<any, State> = {
+export const handler: Handlers<any, State> = {
-  GET(_request, context) {
+  GET(_request, context) {
-    if (context.state.isAuthenticated) {
+    if (context.state.isAuthenticated) {
-      const headers = new Headers();
+      const headers = new Headers();
-
+
-      deleteCookie(headers, "sessionToken", { path: "/" });
+      deleteCookie(headers, "sessionToken", { path: "/" });
-      headers.set("Location", `${CAS}/logout?service=${SERVICE}`);
+      headers.set("Location", `${CAS}/logout?service=${SERVICE}`);
-
+
-      return new Response(null, {
+      return new Response(null, {
-        status: 302,
+        status: 302,
-        headers,
+        headers,
-      });
+      });
-    } else {
+    } else {
-      return new Response(null, {
+      return new Response(null, {
-        status: 302,
+        status: 302,
-        headers: {
+        headers: {
-          Location: "/",
+          Location: "/",
-        },
+        },
-      });
+      });
-    }
+    }
-  },
+  },
-};
+};

static/styles/app.css

@@ -0,0 +1,48 @@
+#app {
+  margin: 0;
+  padding: 1em 0;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1em;
+}
+
+#app > nav {
+  display: flex;
+  flex-direction: column;
+}
+
+#app > nav > a {
+  padding: 0.25em 0.5em;
+}
+
+#app > nav > a::before {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  height: auto;
+  right: unset;
+  transform: scaleY(0);
+  transform-origin: bottom;
+}
+
+#app > nav > a:focus::before, #app > nav > a:hover::before {
+  transform: scaleY(1);
+  transform-origin: top;
+}
+
+#app > nav > a[data-current="true"] {
+  background-color: color-mix(
+    in srgb,
+    light-dark(
+      var(--light-accent-color),
+      var(--dark-accent-color)
+    ) 10%,
+    transparent
+  );
+}
+
+#app > nav > a[data-current="true"]::before {
+  transform: scaleY(1);
+  transform-origin: top;
+}

static/styles/main.css

@@ -1,87 +1,96 @@
-:root {
+:root {
-  color-scheme: dark;  
+  color-scheme: light;
-  
+
-  --dark-background-color: rgb(30, 30, 42);
+  --dark-background-color: rgb(30, 30, 42);
-  --dark-background-color-ui: rgb(50, 50, 62);
+  --dark-background-color-ui: rgb(50, 50, 62);
-  --dark-foreground: rgb(241, 241, 255);
+  --dark-foreground: rgb(241, 241, 255);
-  --dark-foreground-dim: rgb(171, 171, 179);
+  --dark-foreground-dim: rgb(171, 171, 179);
-
+
-  --light-background-color: rgb(225, 225, 237);
+  --light-background-color: rgb(225, 225, 237);
-  --light-background-color-ui: rgb(241, 241, 255);
+  --light-background-color-ui: rgb(241, 241, 255);
-  --light-foreground: rgb(30, 30, 42);
+  --light-foreground: rgb(30, 30, 42);
-  --light-foreground-dim: rgb(105, 105, 110);
+  --light-foreground-dim: rgb(105, 105, 110);
-
+
-  --dark-accent-color: rgb(84, 174, 219);
+  --dark-accent-color: rgb(84, 174, 219);
-  --light-accent-color: rgb(0, 109, 163);
+  --light-accent-color: rgb(0, 109, 163);
-
+
-  --loader-size: 0.5em;
+  --loader-size: 0.5em;
-}
+}
-
+
-* {
+* {
-  box-sizing: border-box;
+  box-sizing: border-box;
-  font-family: "Jetbrains Mono";
+  font-family: "Jetbrains Mono";
-}
+}
-
+
-html, body {
+html, body {
-  margin: 0;
+  margin: 0;
-  padding: 0;
+  padding: 0;
-}
+}
-
+
-body {
+body {
-  min-height: 100dvh;
+  min-height: 100dvh;
-  display: grid;
+  display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto 1fr auto;
-  background-color: light-dark(var(--light-background-color), var(--dark-background-color));
+  background-color: light-dark(
-  color: light-dark(var(--light-foreground), var(--dark-foreground));
+    var(--light-background-color),
-}
+    var(--dark-background-color)
-
+  );
-header {
+  color: light-dark(var(--light-foreground), var(--dark-foreground));
-  padding: 0.5em 2em;
+}
-  display: flex;
+
-  justify-content: space-between;
+header {
-  align-items: center;
+  padding: 0.5em 2em;
-}
+  display: flex;
-
+  justify-content: space-between;
-header > nav {
+  align-items: center;
-  display: flex;
+}
-  gap: 1em;
+
-}
+header > nav {
-
+  display: flex;
-footer {
+  gap: 1em;
-  padding: 0.5em;
+}
-  display: flex;
+
-  justify-content: center;
+footer {
-  color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
+  padding: 0.5em;
-  font-style: italic;
+  display: flex;
-}
+  justify-content: center;
-
+  color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
-section {
+  font-style: italic;
-  margin: 0 1.5em;
+}
-  padding: 0.5em 1.5em;
+
-  background-color: light-dark(var(--light-background-color-ui), var(--dark-background-color-ui));
+section {
-  border-radius: 0.5em;
+  margin: 0 1.5em;
-}
+  padding: 0.5em 1.5em;
-
+  background-color: light-dark(
-a {
+    var(--light-background-color-ui),
-  position: relative;
+    var(--dark-background-color-ui)
-  text-decoration: none;
+  );
-  color: light-dark(var(--light-accent-color), var(--dark-accent-color));
+  border-radius: 0.5em;
-}
+}
-
+
-a::before {
+a {
-  content: "";
+  position: relative;
-  position: absolute;
+  text-decoration: none;
-  left: 0;
+  color: light-dark(var(--light-accent-color), var(--dark-accent-color));
-  right: 0;
+}
-  bottom: 0;
+
-  height: 2px;
+a::before {
-  background-color: light-dark(var(--light-accent-color), var(--dark-accent-color));
+  content: "";
-  transform-origin: right;
+  position: absolute;
-  transform: scaleX(0);
+  left: 0;
-  transition: transform 100ms ease-in-out;
+  right: 0;
-}
+  bottom: 0;
-
+  height: 2px;
-a:focus::before, a:hover::before {
+  background-color: light-dark(
-  transform-origin: left;
+    var(--light-accent-color),
-  transform: scaleX(1);
+    var(--dark-accent-color)
-}
+  );
+  transform-origin: right;
+  transform: scaleX(0);
+  transition: transform 100ms ease-in-out;
+}
+
+a:focus::before, a:hover::before {
+  transform-origin: left;
+  transform: scaleX(1);
+}