From 9427cb7b5d8f6ec0fc8da9df6d883cfa94c7e59f Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Sun, 13 Apr 2025 20:03:10 +0200 Subject: [PATCH] feat: Add download attribute based on file extension --- app/components/common/Link.tsx | 4 +- app/components/syntax/Navigation.tsx | 147 +++++++++++++++--- app/data/certifications/dwwm/at1/cp1/page.md | 63 ++++++++ app/data/certifications/dwwm/at1/page.md | 23 +++ app/data/certifications/dwwm/page.md | 59 +++++++ app/lib/navigation.ts | 46 +++++- .../downloads/dwwm/REAC_DWWM_V04_02072024.pdf | Bin 0 -> 285722 bytes .../downloads/dwwm/REV2_DWWM_V04_02072024.pdf | Bin 0 -> 259387 bytes 8 files changed, 312 insertions(+), 30 deletions(-) create mode 100644 app/data/certifications/dwwm/at1/cp1/page.md create mode 100644 app/data/certifications/dwwm/at1/page.md create mode 100644 app/data/certifications/dwwm/page.md create mode 100644 app/public/downloads/dwwm/REAC_DWWM_V04_02072024.pdf create mode 100644 app/public/downloads/dwwm/REV2_DWWM_V04_02072024.pdf diff --git a/app/components/common/Link.tsx b/app/components/common/Link.tsx index a01dbbc..1dc34f5 100644 --- a/app/components/common/Link.tsx +++ b/app/components/common/Link.tsx @@ -5,13 +5,15 @@ export function Link(props: React.AnchorHTMLAttributes & { hr const { urlPathname } = usePageContext(); const isActive = props.href === "/" ? urlPathname === props.href : urlPathname.startsWith(props.href); const isSameDomain = !(props.href.startsWith("http") || props.href.startsWith("mailto")); + const isDownload = props.href.endsWith(".pdf") || props.href.endsWith(".zip"); return ( {props.children} diff --git a/app/components/syntax/Navigation.tsx b/app/components/syntax/Navigation.tsx index 3f70ec5..64b41dc 100644 --- a/app/components/syntax/Navigation.tsx +++ b/app/components/syntax/Navigation.tsx @@ -1,8 +1,105 @@ +import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/solid"; import { usePageContext } from "vike-react/usePageContext"; import { Link } from "@/components/common/Link"; import { navigation } from "@/lib/navigation"; +import { useState } from "react"; import clsx from "clsx"; +type NavigationItemProps = { + section: (typeof navigation)[number]; + onLinkClick?: React.MouseEventHandler; +}; + +function NavigationItem(props: NavigationItemProps) { + const { urlPathname } = usePageContext(); + + const [isOpened, setIsOpened] = useState(() => { + return props.section.links.some( + (link) => link.href === urlPathname || link.subitems?.some((subitem) => subitem.href === urlPathname), + ); + }); + + return ( + <> +

{ + if (e.key === "Enter" || e.key === " ") { + setIsOpened((prev) => !prev); + e.preventDefault(); + } + }} + className={clsx( + "font-display font-medium cursor-pointer", + isOpened ? "text-violet-600 dark:text-violet-200" : "text-slate-900 dark:text-white ", + )} + onClick={() => setIsOpened((prev) => !prev)} + > + {isOpened ? ( + + ) : ( + + )} + {isOpened ? "Masquer" : "Afficher"} + + {props.section.title} + + ({props.section.links.length}) +

+ {isOpened && ( +
    + {props.section.links.map((link) => ( +
  • + subitem.href === urlPathname) + ? "font-semibold text-violet-500 before:bg-violet-500" + : "text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300", + )} + > + {link.title} + {link.subitems && ({link.subitems.length})} + + {link.subitems && ( +
      + {link.subitems.map((subitem) => ( +
    • + + {subitem.title} + +
      • + ))} +
    + )} +
    • + ))} +
+ )} + + ); +} + export function Navigation({ className, onLinkClick, @@ -10,35 +107,35 @@ export function Navigation({ className?: string; onLinkClick?: React.MouseEventHandler; }) { - const { urlPathname } = usePageContext(); + const firstSections = navigation.filter((section) => section.position === "start"); + + const filteredSections = navigation + .filter((section) => section.position === "auto" || section.position === undefined) + .reduce( + (acc, section) => { + if (!acc[section.type]) { + acc[section.type] = []; + } + acc[section.type].push(section); + return acc; + }, + {} as Record, + ); return (