feat: header

next.config.js

@@ -1,6 +1,13 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "standalone",
-}
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.woff2$/,
+      type: "asset/resource",
+    });
+    return config;
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -8,19 +8,26 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "echo 'no tests'"
+    "test": "echo 'no tests'",
+    "predev": "only-include-used-icons",
+    "prebuild": "only-include-used-icons"
   },
   "dependencies": {
+    "@codegouvfr/react-dsfr": "^0.73.2",
+    "next": "13.4.12",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
     "@types/node": "20.4.5",
     "@types/react": "18.2.17",
     "@types/react-dom": "18.2.7",
+    "@types/codegrouvfr/react-dsfr": "18.2.7",
     "autoprefixer": "10.4.14",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.12",
-    "next": "13.4.12",
     "postcss": "8.4.27",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "sass": "^1.64.2",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
   }

src/app/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 });
+
+export function StartDsfr() {
+  //Yes, leave null here.
+  return null;
+}

src/app/components/CustomHeader.tsx

@@ -0,0 +1,86 @@
+"use client";
+import { fr } from "@codegrouvfr/react-dsfr";
+import { Header } from "@codegouvfr/react-dsfr/Header";
+
+export default function CustomHeader() {
+  return (
+    <Header
+      brandTop={
+        <>
+          LA FABRIQUE
+          <br />
+          DES MINISTÈRES SOCIAUX
+        </>
+      }
+      homeLinkProps={{
+        href: "/",
+        title: "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)",
+      }}
+      id="fr-header-header-with-quick-access-items-nav-items-and-search-engine"
+      navigation={[
+        {
+          linkProps: {
+            href: "#",
+            target: "_self",
+          },
+          text: "accès direct",
+        },
+        {
+          isActive: true,
+          linkProps: {
+            href: "#",
+            target: "_self",
+          },
+          text: "accès direct",
+        },
+        {
+          linkProps: {
+            href: "#",
+            target: "_self",
+          },
+          text: "accès direct",
+        },
+        {
+          linkProps: {
+            href: "#",
+            target: "_self",
+          },
+          text: "accès direct",
+        },
+      ]}
+      onSearchButtonClick={function noRefCheck(event) {
+        console.log("onSearchButtonClick", event);
+      }}
+      quickAccessItems={[
+        {
+          iconId: "fr-icon-add-circle-line",
+          linkProps: {
+            href: "#",
+          },
+          text: "Créer un espace",
+        },
+        {
+          iconId: "fr-icon-lock-line",
+          linkProps: {
+            href: "#",
+          },
+          text: "Se connecter",
+        },
+        {
+          iconId: "fr-icon-account-line",
+          linkProps: {
+            href: "#",
+          },
+          text: "S’enregistrer",
+        },
+      ]}
+      serviceTagline="Un incubateur betagouv 🥸"
+      serviceTitle="La Fabrique des Ministères Sociaux"
+      // operatorLogo={{
+      //   alt: "[À MODIFIER - texte alternatif de l’image]",
+      //   imgUrl: "static/media/placeholder.9x16.bb7c62f0.png",
+      //   orientation: "horizontal",
+      // }}
+    />
+  );
+}

src/app/defaultColorScheme.ts

@@ -0,0 +1,3 @@
+import type { DefaultColorScheme } from "@codegouvfr/react-dsfr/next-appdir";
+
+export const defaultColorScheme: DefaultColorScheme = "system";

src/app/layout.tsx

@@ -1,22 +1,47 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
+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 { StartDsfr } from "./StartDsfr";
+import "./globals.css";
+import { defaultColorScheme } from "./defaultColorScheme";
+import Link from "next/link";
+import type { Metadata } from "next";
+import CustomHeader from "./components/CustomHeader";
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default function RootLayout({ children }: { children: JSX.Element }) {
+  //NOTE: The lang parameter is optional and defaults to "fr"
+  const lang = "fr";
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <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}>
+          <CustomHeader />
+          {children}
+        </DsfrProvider>
+      </body>
     </html>
-  )
+  );
 }