Add FichePermaLink component

src/components/MarkdownDisplay.astro

@@ -3,6 +3,7 @@ import { getLangFromUrl, useTranslations } from "@i18n/utils";
 import { formatDate } from "@js/utils";
 import type { CollectionEntry } from "astro:content";
 import Card from "./Card";
+import FichePermaLink from "./fiches/FichePermaLink.astro";
 import FicheVersionDisplay from "./fiches/FicheVersionDisplay.astro";
 import FichesMetasDisplay from "./fiches/FichesMetasDisplay.astro";
 import FichesTableValidation from "./fiches/FichesTableValidation.astro";
@@ -24,13 +25,14 @@ const t = useTranslations(lang);
   {
     type === Card.FICHES && (
       <>
-        <i>
-          Mise à jour le{" "}
+        <i class="flex items-center">
+          {t("Mise à jour le")}{" "}
           {formatDate(entry.data.updatedAt || entry.data.updatedAt)}
         </i>
         <span class="hidden" data-pagefind-filter="type">
           {t("Bonnes pratiques")}
         </span>
+        <FichePermaLink entry={entry} />
         <h1 class="flex flex-col items-start gap-2 lg:col-span-2 lg:flex-row lg:items-center lg:gap-0">
           <span class="badge mr-2 whitespace-nowrap border-primary bg-primary">
             {REF_NAME} {entry.data["refID"]}
@@ -85,6 +87,7 @@ const t = useTranslations(lang);
         <FicheVersionDisplay versions={entry.data["versions"]} />
       )
     }
+    {/* CONTENT */}
     <slot />
     {
       type === Card.FICHES && (

src/components/fiches/FichePermaLink.astro

@@ -0,0 +1,40 @@
+---
+import { getLangFromUrl, useTranslations } from "@i18n/utils";
+import { Icon } from "astro-icon/components";
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+const alertMessage = t("Lien copié");
+---
+
+<div class="z-50 mt-4 lg:mt-0 lg:text-right">
+  <a
+    target="_blank"
+    class="copyLink btn btn-responsive btn-outline relative inline-flex items-center justify-end gap-4 font-normal no-underline"
+  >
+    <Icon name="tabler:share" size={20} />
+    <span>{t("Permalien")}</span>
+  </a>
+</div>
+<script define:vars={{ alertMessage: alertMessage }}>
+  const buttons = document.querySelectorAll("a.copyLink");
+  buttons.forEach((button) => {
+    button.addEventListener("click", (e) => {
+      copyLink(e);
+    });
+  });
+  const copyLink = (e) => {
+    navigator.clipboard.writeText(window.location.href);
+    e.target.insertAdjacentHTML(
+      "afterend",
+      "<div class='linktooltips-container font-bold'>" +
+        alertMessage +
+        "</div>",
+    );
+    setTimeout(() => {
+      document
+        .querySelectorAll(".linktooltips-container")
+        .forEach((el) => el.remove());
+    }, 3000);
+  };
+</script>

src/i18n/ui.ts

@@ -395,13 +395,18 @@ export const ui = {
     Fort: "Fort",
     Moyen: "Moyen",
     Faible: "Faible",
+    "Mise à jour le": "Mise à jour le",
 
     // src/components/fiches/FichesFilter.astro
     Afficher: "Afficher",
     Masquer: "Masquer",
     "les filtres": "les filtres",
     Catégories: "Catégories",
 
+    // src/components/fiches/FichePermaLink.astro
+    Permalien: "Permalien",
+    "Lien copié": "Lien copié",
+
     // src/components/fiches/FichesTableValidation.astro
     "Principe de validation": "Principe de validation",
     "Le nombre": "Le nombre",

src/styles/global.css

@@ -154,6 +154,9 @@
   .btn {
     @apply cursor-pointer rounded-lg p-3 px-4 normal-case no-underline duration-100 hover:drop-shadow-lg;
   }
+  .btn-responsive {
+    @apply rounded-md p-1 px-2 hover:drop-shadow-md lg:rounded-lg lg:p-3 lg:px-4 hover:lg:drop-shadow-lg;
+  }
   .btn-bg {
     @apply bg-primary text-primary-content hover:bg-primary-focus;
   }