Added catalog generation, need to bug fix

fresh.gen.ts

@@ -2,32 +2,34 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import * as $_modules_notes_index from "./routes/(modules)/notes/index.tsx";
+import * as $_apps_notes_index from "./routes/(apps)/notes/index.tsx";
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $_middleware from "./routes/_middleware.ts";
+import * as $about from "./routes/about.tsx";
+import * as $apps from "./routes/apps.tsx";
 import * as $index from "./routes/index.tsx";
 import * as $login from "./routes/login.tsx";
 import * as $logout from "./routes/logout.tsx";
-import * as $partials_about from "./routes/partials/about.tsx";
-import * as $partials_modules from "./routes/partials/modules.tsx";
 import * as $Counter from "./islands/Counter.tsx";
+import * as $_islands_AppNavigator from "./routes/(_islands)/AppNavigator.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
-    "./routes/(modules)/notes/index.tsx": $_modules_notes_index,
+    "./routes/(apps)/notes/index.tsx": $_apps_notes_index,
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
     "./routes/_middleware.ts": $_middleware,
+    "./routes/about.tsx": $about,
+    "./routes/apps.tsx": $apps,
     "./routes/index.tsx": $index,
     "./routes/login.tsx": $login,
     "./routes/logout.tsx": $logout,
-    "./routes/partials/about.tsx": $partials_about,
-    "./routes/partials/modules.tsx": $partials_modules,
   },
   islands: {
     "./islands/Counter.tsx": $Counter,
+    "./routes/(_islands)/AppNavigator.tsx": $_islands_AppNavigator,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;

routes/(_components)/Footer.tsx

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

routes/(_components)/Header.tsx

@@ -0,0 +1,17 @@
+type HeaderProps = {
+  link: string;
+};
+
+export default function Header(props: HeaderProps) {
+  return (
+    <header>
+      <h1>
+        <a href="/" f-client-nav={false}>PolyMPR</a>
+      </h1>
+      <nav>
+        <a href="/apps" f-client-nav={false}>Catalog</a>
+        <a href={`/log${props.link}`} f-client-nav={false}>Log {props.link}</a>
+      </nav>
+    </header>
+  );
+}

routes/(_islands)/AppNavigator.tsx

@@ -0,0 +1,27 @@
+export interface AppProperties {
+  name: string;
+  icon: string;
+}
+
+type AppNavigatorProps = Record<string | number | symbol, never>;
+
+export default async function AppNavigator(_props: AppNavigatorProps) {
+  
+  const apps: Record<string, AppProperties> = {};
+
+  for await (const appDir of Deno.readDir("../(apps)")) {
+    try {
+      const properties: AppProperties = await import(`../(apps)/${appDir.name}/(_props)/props.ts`);
+      apps[appDir.name] = properties;
+    }
+    catch (error) {
+      console.error(`Couldn't import app "${appDir.name}": ${error}`);
+    }
+  }
+
+  return (
+    <>
+      <p>{JSON.stringify(apps)}</p>
+    </>
+  );
+}

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

@@ -0,0 +1,8 @@
+import { AppProperties } from "../../../(_islands)/AppNavigator.tsx";
+
+const properties: AppProperties = {
+  name: "PolyNotes",
+  icon: "school"
+};
+
+export default properties;

routes/(apps)/notes/index.tsx

@@ -0,0 +1,12 @@
+type ModulesProps = Record<string | number | symbol, never>;
+
+export default function Modules(_props: ModulesProps) {
+  return (
+    <>
+      <h2>All PolyMPR modules</h2>
+      <nav>
+        
+      </nav>
+    </>
+  );
+}

routes/_app.tsx

@@ -1,8 +1,14 @@
 import { FreshContext } from "$fresh/server.ts";
 import { Partial } from "$fresh/runtime.ts";
+import { State } from "./_middleware.ts";
+import Header from "./(_components)/Header.tsx";
+import Footer from "./(_components)/Footer.tsx";
 
-
-export default async function App(request: Request, context: FreshContext) {
+// deno-lint-ignore require-await
+export default async function App(
+  _request: Request,
+  context: FreshContext<State>,
+) {
   const link = context.state.isAuthenticated ? "out" : "in";
 
   return (
@@ -11,22 +17,18 @@ export default async function App(request: Request, context: FreshContext) {
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>PolyMPR</title>
+        <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&icon_names=school" />
         <link rel="stylesheet" href="/styles/main.css" />
       </head>
       <body f-client-nav>
-        <header>
-          <h1>PolyMPR</h1>
-          <nav>
-            <a href="/modules" f-partial="/partials/modules">Modules</a>
-            <a href={`/log${link}`} f-client-nav={false}>Log {link}</a>
-          </nav>
-        </header>
-        <Partial name="body">
-          <context.Component />
-        </Partial>
-        <footer>
-          <p>&copy; 2025 PolyMPR - <a href="/about" f-partial="/partials/about">About</a></p>
-        </footer>
+        <Header link={link} />
+        <section>
+          <Partial name="body">
+            <context.Component />
+          </Partial>
+        </section>
+        <Footer />
       </body>
     </html>
   );

routes/_middleware.ts

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

routes/about.tsx

@@ -0,0 +1,15 @@
+import { FreshContext } from "$fresh/server.ts";
+
+// deno-lint-ignore require-await
+export default async function About(_request: Request, _context: FreshContext) {
+  return (
+    <>
+      <h2>About PolyMPR</h2>
+      <p>
+        PolyMPR is born from the will to enhance Polytech INFO department's HR
+        infrastructure.
+      </p>
+      <h3>Terms of Use</h3>
+    </>
+  );
+}

routes/apps.tsx

@@ -0,0 +1,13 @@
+import { FreshContext } from "$fresh/server.ts";
+import AppNavigator from "./(_islands)/AppNavigator.tsx";
+
+// deno-lint-ignore require-await
+export default async function About(_request: Request, _context: FreshContext) {
+  return (
+    <>
+      {
+        //<AppNavigator />
+      }
+    </>
+  );
+}

routes/index.tsx

@@ -1,8 +1,10 @@
-import { useSignal } from "@preact/signals";
-import Counter from "../islands/Counter.tsx";
+import { FreshContext } from "$fresh/server.ts";
 
-export default function Home() {
+// deno-lint-ignore require-await
+export default async function Home(_request: Request, _context: FreshContext) {
   return (
-    <h1>PolyMPR</h1>
+    <>
+      <h2>Welcome to PolyMPR!</h2>
+    </>
   );
 }

routes/login.tsx

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

routes/logout.tsx

@@ -2,13 +2,12 @@ import { Handlers } from "$fresh/server.ts";
 import { State } from "./_middleware.ts";
 import { deleteCookie } from "$std/http/cookie.ts";
 
-
 const SERVICE = "https://localhost/";
 const CAS = "https://ident.univ-amu.fr/cas";
 
-
+// deno-lint-ignore no-explicit-any
 export const handler: Handlers<any, State> = {
-  async GET(request, context) {
+  GET(_request, context) {
     if (context.state.isAuthenticated) {
       const headers = new Headers();
 
@@ -17,16 +16,15 @@ export const handler: Handlers<any, State> = {
 
       return new Response(null, {
         status: 302,
-        headers
+        headers,
       });
-    }
-    else {
+    } else {
       return new Response(null, {
         status: 302,
         headers: {
-          Location: "/"
-        }
+          Location: "/",
+        },
       });
     }
-  }
+  },
 };

routes/partials/about.tsx

@@ -1,15 +0,0 @@
-import { RouteConfig } from "$fresh/server.ts";
-import { Partial } from "$fresh/runtime.ts";
-
-export const config: RouteConfig = {
-  skipAppWrapper: true,
-  skipInheritedLayouts: true,
-};
-
-export default async function About(request, context) {
-  return (
-    <Partial name="body">
-      <p>C'est nous wsh</p>
-    </Partial>
-  );
-};

static/styles/main.css

@@ -1,7 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
-
 :root {
-  color-scheme: light dark;  
+  color-scheme: dark;  
   
   --dark-background-color: rgb(30, 30, 42);
   --dark-background-color-ui: rgb(50, 50, 62);
@@ -11,9 +9,10 @@
   --light-background-color: rgb(225, 225, 237);
   --light-background-color-ui: rgb(241, 241, 255);
   --light-foreground: rgb(30, 30, 42);
-  --light-foreground-dim: rgb(171, 171, 179);
+  --light-foreground-dim: rgb(105, 105, 110);
 
-  --accent-color: rgb(38, 157, 217);
+  --dark-accent-color: rgb(84, 174, 219);
+  --light-accent-color: rgb(0, 109, 163);
 
   --loader-size: 0.5em;
 }
@@ -53,4 +52,36 @@ footer {
   display: flex;
   justify-content: center;
   color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
+  font-style: italic;
+}
+
+section {
+  margin: 0 1.5em;
+  padding: 0.5em 1.5em;
+  background-color: light-dark(var(--light-background-color-ui), var(--dark-background-color-ui));
+  border-radius: 0.5em;
+}
+
+a {
+  position: relative;
+  text-decoration: none;
+  color: light-dark(var(--light-accent-color), var(--dark-accent-color));
+}
+
+a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background-color: light-dark(var(--light-accent-color), 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);
 }