SocialGouv · m-maillot · Oct 15, 2024 · Aug 22, 2024 · Aug 22, 2024 · Aug 22, 2024
diff --git a/packages/code-du-travail-frontend/app/[...not-found]/page.tsx b/packages/code-du-travail-frontend/app/[...not-found]/page.tsx
@@ -0,0 +1,5 @@
+function Index() {
+  return <div>Erreur 404 todo</div>;
+}
+
+export default Index;
diff --git a/packages/code-du-travail-frontend/app/layout.tsx b/packages/code-du-travail-frontend/app/layout.tsx
@@ -0,0 +1,46 @@
+import { DsfrHead } from "@codegouvfr/react-dsfr/next-appdir/DsfrHead";
+import { DsfrProvider } from "@codegouvfr/react-dsfr/next-appdir/DsfrProvider";
+import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAttributes";
+import Link from "next/link";
+import { defaultColorScheme } from "../src/dsfr/config/defaultColorScheme";
+import { StartDsfr } from "../src/dsfr/config/StartDsfr";
+
+export const metadata = {
+  title: "Code du travail numérique - Ministère du Travail",
+  description:
+    "Posez votre question sur le droit du travail et obtenez une réponse personnalisée à vos questions (contrat de travail, congés payés, formation, démission, indemnités).",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const lang = "fr";
+
+  return (
+    <html {...getHtmlAttributes({ defaultColorScheme, lang })}>
+      <head>
+        <StartDsfr />
+        <DsfrHead
+          Link={Link}
+          preloadFonts={[
+            //"Marianne-Light",
+            //"Marianne-Light_Italic",
+            "Marianne-Regular",
+            //"Marianne-Regular_Italic",
+            "Marianne-Medium",
+            //"Marianne-Medium_Italic",
+            "Marianne-Bold",
+            //"Marianne-Bold_Italic",
+            //"Spectral-Regular",
+            //"Spectral-ExtraBold"
+          ]}
+        />
+      </head>
+      <body>
+        <DsfrProvider lang={lang}>{children}</DsfrProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/packages/code-du-travail-frontend/app/test-header/page.tsx b/packages/code-du-travail-frontend/app/test-header/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { fr } from "@codegouvfr/react-dsfr";
+import { DsfrLayout } from "../../src/dsfr/layout";
+
+function Index() {
+  const router = useRouter();
+  return (
+    <DsfrLayout>
+      <section>
+        <Link href="/">Accueil with link</Link>
+        <button
+          onClick={() => {
+            console.log("ok");
+            router.push("/");
+          }}
+        >
+          Accueil with router
+        </button>
+        <br />
+        <a href="/">Accueil without router</a>
+      </section>
+      <section>
+        example icon :<i className={fr.cx("fr-icon-account-pin-circle-line")} />
+      </section>
+    </DsfrLayout>
+  );
+}
+
+export default Index;
diff --git a/packages/code-du-travail-frontend/next-env.d.ts b/packages/code-du-travail-frontend/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/code-du-travail-frontend/next.config.mjs b/packages/code-du-travail-frontend/next.config.mjs
@@ -2,8 +2,8 @@ import { withSentryConfig } from "@sentry/nextjs";
 import MappingReplacement from "./redirects.json" assert { type: "json" };
 
 const ContentSecurityPolicy = `
-img-src 'self' https://travail-emploi.gouv.fr https://www.service-public.fr https://cdtn-prod-public.s3.gra.io.cloud.ovh.net https://matomo.fabrique.social.gouv.fr;
-script-src 'self' https://mon-entreprise.urssaf.fr https://matomo.fabrique.social.gouv.fr ${
+img-src 'self' https://travail-emploi.gouv.fr https://www.service-public.fr https://cdtn-prod-public.s3.gra.io.cloud.ovh.net https://matomo.fabrique.social.gouv.fr data:;
+script-src 'self' https://mon-entreprise.urssaf.fr https://matomo.fabrique.social.gouv.fr 'unsafe-inline' ${
   process.env.NEXT_PUBLIC_APP_ENV !== "production" && "'unsafe-eval'"
 };
 frame-src 'self' https://mon-entreprise.urssaf.fr https://matomo.fabrique.social.gouv.fr *.dailymotion.com;
@@ -50,6 +50,13 @@ const nextConfig = {
   },
   staticPageGenerationTimeout: 60 * 5, // 5 minutes
   experimental: { instrumentationHook: true },
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.woff2$/,
+      type: "asset/resource",
+    });
+    return config;
+  },
 };
 
 const moduleExports = {

diff --git a/packages/code-du-travail-frontend/package.json b/packages/code-du-travail-frontend/package.json
@@ -7,13 +7,14 @@
   "keywords": [],
   "main": "src/index.js",
   "scripts": {
-    "dev": "next dev",
+    "dev": "yarn predev && next dev",
+    "predev": "react-dsfr update-icons",
     "lint:js": "next lint --quiet",
     "lint:css": "stylelint './{src,pages}/**/*.{js,ts,tsx,jsx,css}' --quiet",
     "lint": "yarn lint:css && next lint",
     "precommit": "lint-staged",
     "start": "next start",
-    "prebuild": "node -r @swc-node/register scripts/prebuild.ts",
+    "prebuild": "node -r @swc-node/register scripts/prebuild.ts && react-dsfr update-icons",
     "build": "yarn prebuild && next build",
     "build:analyze": "yarn prebuild && ANALYZE=true next build",
     "pretest:api": "NEXT_PUBLIC_ES_INDEX_PREFIX=cdtn_test NEXT_PUBLIC_APP_ENV=test NODE_ENV=test node -r @swc-node/register scripts/generate-data.ts",
@@ -30,6 +31,7 @@
     "type-check:watch": "npm run type-check -- --watch"
   },
   "dependencies": {
+    "@codegouvfr/react-dsfr": "^1.11.4",
     "@elastic/elasticsearch": "^8.13.1",
     "@matejmazur/react-katex": "^3.1.3",
     "@opentelemetry/instrumentation-generic-pool": "^0.37.0",
@@ -101,6 +103,7 @@
     "mockdate": "^3.0.5",
     "nextjs-http-supertest": "^1.0.6",
     "postcss": "^8.4.19",
+    "sass": "^1.77.8",
     "stylelint": "^14.16.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard-scss": "^6.1.0",

diff --git a/packages/code-du-travail-frontend/pages/_app.tsx b/packages/code-du-travail-frontend/pages/_app.tsx
@@ -3,12 +3,10 @@ import "react-image-lightbox/style.css";
 import "../public/static/modeles.css";
 
 import * as Sentry from "@sentry/nextjs";
-import { GlobalStyles, ThemeProvider } from "@socialgouv/cdtn-ui";
 import { AppProps } from "next/app";
 import { init, push } from "@socialgouv/matomo-next";
 import React, { useEffect } from "react";
 
-import { A11y } from "../src/a11y";
 import { getSourceUrlFromPath } from "../src/lib";
 import { useRouter } from "next/router";
 import { PIWIK_SITE_ID, PIWIK_URL, SITE_URL } from "../src/config";
@@ -40,6 +38,7 @@ const WIDGETS_PATH = /\/widgets\/.*/;
 
 function MyApp({ Component, pageProps }: AppProps) {
   const router = useRouter();
+
   useEffect(() => {
     init({
       siteId: PIWIK_SITE_ID,
@@ -60,11 +59,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <React.StrictMode>
-      <ThemeProvider>
-        <GlobalStyles />
-        <A11y />
-        <Component {...pageProps} />
-      </ThemeProvider>
+      <Component {...pageProps} />
     </React.StrictMode>
   );
 }

diff --git a/packages/code-du-travail-frontend/pages/_document.tsx b/packages/code-du-travail-frontend/pages/_document.tsx
@@ -10,6 +10,7 @@ process.on("unhandledRejection", (err) => {
 process.on("uncaughtException", (err) => {
   Sentry.captureException(err);
 });
+
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
     const sheet = new ServerStyleSheet();
@@ -39,7 +40,7 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <Html lang="fr" prefix="og: http://ogp.me/ns#">
+      <Html>
         <Head>
           <link
             key="rel-stylesheet"

diff --git a/packages/code-du-travail-frontend/pages/index.tsx b/packages/code-du-travail-frontend/pages/index.tsx
@@ -108,7 +108,8 @@ export async function getStaticProps() {
       tools: data?.tools.map(({ _id, _source }) => ({ ..._source, _id })) ?? [],
       contributions: data?.contributions ?? [],
       modeles: data?.modeles ?? [],
-      agreements: data?.agreements.map((v) => ({ ...v, title: v.shortTitle })) ?? [],
+      agreements:
+        data?.agreements.map((v) => ({ ...v, title: v.shortTitle })) ?? [],
     },
     revalidate: REVALIDATE_TIME,
   };

diff --git a/packages/code-du-travail-frontend/public/static/assets/img/logo.svg b/packages/code-du-travail-frontend/public/static/assets/img/logo.svg
diff --git a/packages/code-du-travail-frontend/src/dsfr/config/StartDsfr.tsx b/packages/code-du-travail-frontend/src/dsfr/config/StartDsfr.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
+import { defaultColorScheme } from "./defaultColorScheme";
+import Link from "next/link";
+
+declare module "@codegouvfr/react-dsfr/next-appdir" {
+  interface RegisterLink {
+    Link: typeof Link;
+  }
+}
+
+startReactDsfr({ defaultColorScheme, Link, doCheckNonce: true });
+
+export function StartDsfr() {
+  //Yes, leave null here.
+  return null;
+}
diff --git a/packages/code-du-travail-frontend/src/dsfr/config/defaultColorScheme.ts b/packages/code-du-travail-frontend/src/dsfr/config/defaultColorScheme.ts
@@ -0,0 +1,3 @@
+import type { DefaultColorScheme } from "@codegouvfr/react-dsfr/next-appdir";
+
+export const defaultColorScheme: DefaultColorScheme = "system";
diff --git a/packages/code-du-travail-frontend/src/dsfr/layout/Header.tsx b/packages/code-du-travail-frontend/src/dsfr/layout/Header.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { Header as HeaderDsfr } from "@codegouvfr/react-dsfr/Header";
+import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
+import { usePathname, useRouter } from "next/navigation";
+import { SearchInput } from "./SearchInput";
+import { useState } from "react";
+
+export const Header = () => {
+  const currentPath = usePathname();
+  const router = useRouter();
+
+  const [search, onSearchChange] = useState("");
+
+  const onSearchSubmit = () => {
+    router.push(`/recherche?q=${encodeURIComponent(search)}`);
+  };
+
+  return (
+    <HeaderDsfr
+      serviceTitle="Code du travail numérique"
+      serviceTagline="Toutes les réponses à vos questions sur le droit du travail"
+      brandTop={
+        <>
+          RÉPUBLIQUE
+          <br />
+          FRANÇAISE
+        </>
+      }
+      homeLinkProps={{
+        href: "/",
+        title: "Accueil - Code du travail numérique, Ministère du Travail",
+      }}
+      navigation={[
+        {
+          text: "Boîte à outils",
+          linkProps: {
+            href: "/outils",
+          },
+          isActive: currentPath === "/outils",
+        },
+        {
+          text: "Modèles de documents",
+          linkProps: {
+            href: "/modeles-de-courriers",
+          },
+          isActive: currentPath === "/modeles-de-courriers",
+        },
+        {
+          text: "Vos fiches pratiques",
+          linkProps: {
+            href: "/contribution",
+          },
+          isActive: currentPath === "/contribution",
+        },
+        {
+          text: "Votre convention collective",
+          linkProps: {
+            href: "/convention-collective",
+          },
+          isActive: currentPath === "/convention-collective",
+        },
+        {
+          text: "Thèmes",
+          linkProps: {
+            href: "/themes",
+          },
+          isActive: currentPath === "/themes",
+        },
+      ]}
+      quickAccessItems={[headerFooterDisplayItem]}
+      renderSearchInput={({ className, id, placeholder, type }) => (
+        <SearchInput
+          className={className}
+          id={id}
+          placeholder={placeholder}
+          type={type}
+          search={search}
+          onSearchChange={onSearchChange}
+          onSearchSubmit={onSearchSubmit}
+        />
+      )}
+    />
+  );
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import type { DefaultColorScheme } from "@codegouvfr/react-dsfr/next-appdir";

		export const defaultColorScheme: DefaultColorScheme = "system";