feat: add version display in footer

betagouv · Oct 7, 2024 · ecc0487 · ecc0487
1 parent d18720c
commit ecc0487
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 17 deletions.
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -5,12 +5,12 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "pnpm icons && vite build",
-    "build:only": "vite build",
+    "build": "pnpm icons && pnpm build:only",
+    "build:only": "vite build && pnpm version:gen",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "pnpm env:gen && vite preview --host",
     "env:gen": "vite-node ./scripts/createEnvFile.ts",
-    "version": "vite-node ./scripts/setVersion.ts",
+    "version:gen": "vite-node ./scripts/setVersion.ts",
     "prepare": "pnpm dsfr && panda codegen",
     "dsfr": "copy-dsfr-to-public && pnpm panda-ds",
     "icons": "only-include-used-icons",

diff --git a/packages/frontend/public/version.js b/packages/frontend/public/version.js
@@ -0,0 +1 @@
+window.APP_VERSION = "0.0.0.dev";
diff --git a/packages/frontend/scripts/setVersion.ts b/packages/frontend/scripts/setVersion.ts
@@ -1,11 +1,12 @@
-import pjson from '../package.json';
-import fs from "node:fs/promises";
+import pjson from "../package.json";
+import fs from "node:fs";
 
 const version = pjson.version + "." + Math.floor(Date.now() / 1000).toString(16);
 
-const setVersion = async () => {
-    const contentJs = `window.APP_VERSION = "${version}";`;
-    await fs.writeFile("./dist/version.js", contentJs);
-}
+const setVersion = () => {
+  console.log("Setting version to", version);
+  const contentJs = `window.APP_VERSION = "${version}";`;
+  fs.writeFileSync("./dist/version.js", contentJs);
+};
 
-setVersion();
+setVersion();
diff --git a/packages/frontend/src/routes/__root.tsx b/packages/frontend/src/routes/__root.tsx
@@ -1,17 +1,16 @@
 import { ReportSearch } from "#components/ReportSearch.js";
 import { css } from "#styled-system/css";
-import { Box, Flex, Stack, styled } from "#styled-system/jsx";
+import { Box, Flex, styled } from "#styled-system/jsx";
 import Badge from "@codegouvfr/react-dsfr/Badge";
 import Button from "@codegouvfr/react-dsfr/Button";
-import Footer from "@codegouvfr/react-dsfr/Footer";
 import Header from "@codegouvfr/react-dsfr/Header/Header";
 import MuiDsfrThemeProvider from "@codegouvfr/react-dsfr/mui";
 import { createRootRouteWithContext, Outlet, useRouter } from "@tanstack/react-router";
 import { useRef, type PropsWithChildren } from "react";
 import type { RouterOutputs } from "../api";
 import { useIsLoggedIn } from "../contexts/AuthContext";
-import { useIsDesktop } from "../hooks/useIsDesktop";
 import { MenuButton } from "../features/menu/MenuButton";
+import { useIsDesktop } from "../hooks/useIsDesktop";
 
 export const Route = createRootRouteWithContext<Partial<RouterOutputs<"/api/login">>>()({
   beforeLoad: (ctx) => {
@@ -135,15 +134,107 @@ const Layout = ({ children }: PropsWithChildren) => {
 
       <Box flex="1">{children}</Box>
       {/* <TanStackRouterDevtools /> */}
-      <Footer accessibility="partially compliant" />
+
+      <AppFooter />
+      {/* <VersionDisplay /> */}
     </Flex>
   );
 };
 
-const VersionDisplay = () => {
+const AppFooter = () => {
+  return (
+    <footer id="fr-footer" className="fr-footer" role="contentinfo" style={{ border: "none", borderBottomWidth: 0 }}>
+      <div className="fr-container">
+        <div className="fr-footer__body">
+          <div className="fr-footer__brand fr-enlarge-link">
+            <a className="active" title="Compte rendu vif" href="/" data-status="active">
+              <p className="fr-logo">
+                Ministère
+                <br /> de la culture
+              </p>
+            </a>
+          </div>
+          <div className="fr-footer__content">
+            <ul className="fr-footer__content-list">
+              <li className="fr-footer__content-item">
+                <a
+                  className="fr-footer__content-link"
+                  target="_blank"
+                  href="https://legifrance.gouv.fr"
+                  title="legifrance.gouv.fr - ouvre une nouvelle fenêtre"
+                >
+                  legifrance.gouv.fr
+                </a>
+              </li>
+              <li className="fr-footer__content-item">
+                <a
+                  className="fr-footer__content-link"
+                  target="_blank"
+                  href="https://gouvernement.fr"
+                  title="gouvernement.fr - ouvre une nouvelle fenêtre"
+                >
+                  gouvernement.fr
+                </a>
+              </li>
+              <li className="fr-footer__content-item">
+                <a
+                  className="fr-footer__content-link"
+                  target="_blank"
+                  href="https://service-public.fr"
+                  title="service-public.fr - ouvre une nouvelle fenêtre"
+                >
+                  service-public.fr
+                </a>
+              </li>
+              <li className="fr-footer__content-item">
+                <a
+                  className="fr-footer__content-link"
+                  target="_blank"
+                  href="https://data.gouv.fr"
+                  title="data.gouv.fr - ouvre une nouvelle fenêtre"
+                >
+                  data.gouv.fr
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className="fr-footer__bottom">
+          <ul className="fr-footer__bottom-list">
+            <li className="fr-footer__bottom-item">
+              <span className="fr-footer__bottom-link">Accessibilité: partiellement conforme</span>
+            </li>
+          </ul>
+
+          <Flex flexDir="column">
+            <VersionDisplay />
+            <div className="fr-footer__bottom-copy">
+              <p>
+                Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont
+                proposés sous{" "}
+                <a
+                  href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
+                  target="_blank"
+                  title="licence etalab-2.0 - ouvre une nouvelle fenêtre"
+                >
+                  licence etalab-2.0
+                </a>
+              </p>
+            </div>
+          </Flex>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export const VersionDisplay = () => {
   const version = window.APP_VERSION;
 
   if (!version) return null;
-
-  return <styled.div>Version {version}</styled.div>;
+  return (
+    <div className="fr-footer__bottom-copy">
+      <styled.p mb="10px">Version {version}</styled.p>
+    </div>
+  );
 };
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
@@ -20,6 +20,7 @@ export default defineConfig({
         scope: "/",
         start_url: "/",
         lang: "fr",
+        theme_color: "#FFFFFF",
       },
       workbox: {
         maximumFileSizeToCacheInBytes: 2097152 * 3,