Partials OK, auto navbar and 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>
+    );
+  };
+}

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,
-  }
+  },
 });

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,9 +1,4 @@
-export interface AppProperties {
+import { AppProperties } from "$root/defaults/interfaces.ts";
-  name: string;
-  icon: string;
-  pages: Record<string, string>;
-  adminOnly: string[];
-}
 
 type AppNavigatorProps = {
   apps: Record<string, AppProperties>;

routes/(_islands)/Navbar.tsx

@@ -1,11 +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>
-      <p>{JSON.stringify(props.pages)}</p>
+      {links}
-    </>
+    </nav>
   );
 }

routes/(apps)/_layout.tsx

@@ -1,24 +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";
-import { AppProperties } from "$root/routes/(_islands)/AppNavigator.tsx";
 
 export default async function AppLayout(
   request: Request,
   context: FreshContext<State>,
 ) {
-  const currentApp = new URL(request.url).pathname;
+  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 pages={properties.pages} />
+      <Navbar currentApp={currentApp} pages={properties.pages} />
       <Partial name="body">
         <context.Component />
       </Partial>
-    </>
+    </section>
   );
 }

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

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

routes/(apps)/notes/index.tsx

@@ -1,9 +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 (
-    <>
-      <a href="notes/test" f-partial={"notes/partial/test"}>click</a>
-    </>
-  );
-}

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

@@ -16,9 +16,16 @@ export default async function App(
         <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
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=school" />
+          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" />
+        <link rel="stylesheet" href="/styles/app.css" />
       </head>
       <body f-client-nav>
         <Header link={link} />

routes/apps.tsx

@@ -1,5 +1,6 @@
 import { FreshContext, Handlers } from "$fresh/server.ts";
-import AppNavigator, { AppProperties } from "$root/routes/(_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) {

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,5 +1,5 @@
 :root {
-  color-scheme: dark;  
+  color-scheme: light;
 
   --dark-background-color: rgb(30, 30, 42);
   --dark-background-color-ui: rgb(50, 50, 62);
@@ -31,7 +31,10 @@ body {
   min-height: 100dvh;
   display: grid;
   grid-template-rows: auto 1fr auto;
-  background-color: light-dark(var(--light-background-color), var(--dark-background-color));
+  background-color: light-dark(
+    var(--light-background-color),
+    var(--dark-background-color)
+  );
   color: light-dark(var(--light-foreground), var(--dark-foreground));
 }
 
@@ -58,7 +61,10 @@ footer {
 section {
   margin: 0 1.5em;
   padding: 0.5em 1.5em;
-  background-color: light-dark(var(--light-background-color-ui), var(--dark-background-color-ui));
+  background-color: light-dark(
+    var(--light-background-color-ui),
+    var(--dark-background-color-ui)
+  );
   border-radius: 0.5em;
 }
 
@@ -75,7 +81,10 @@ a::before {
   right: 0;
   bottom: 0;
   height: 2px;
-  background-color: light-dark(var(--light-accent-color), var(--dark-accent-color));
+  background-color: light-dark(
+    var(--light-accent-color),
+    var(--dark-accent-color)
+  );
   transform-origin: right;
   transform: scaleX(0);
   transition: transform 100ms ease-in-out;