split Header, Footer and Navigation components

.gitignore

@@ -32,4 +32,4 @@ coverage
 !.yarn/sdks
 !.yarn/versions
 
-old-source
+old-source*

Dockerfile

@@ -11,12 +11,13 @@ ENV NEXT_PUBLIC_MATOMO_SITE_ID $NEXT_PUBLIC_MATOMO_SITE_ID
 ENV NEXT_TELEMETRY_DISABLED 1
 
 # install deps
-COPY yarn.lock .yarnrc.yml ./
-COPY .yarn ./.yarn
-RUN yarn fetch
+# COPY yarn.lock .yarnrc.yml ./
+# COPY .yarn ./.yarn
+# RUN yarn fetch
 
 # build
 COPY . .
+RUN yarn install --frozen-lockfile --production
 RUN yarn build
 
 # Production image, copy all the files and run next

next.config.js

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

package.json

@@ -1,8 +1,7 @@
 {
-  "name": "totototo",
+  "name": "dsfr-test",
   "version": "0.1.0",
   "private": true,
-  "packageManager": "[email protected]",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -14,20 +13,20 @@
   },
   "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/node": "20.4.6",
+    "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
-    "eslint": "8.45.0",
+    "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
+    "next": "13.4.12",
     "postcss": "8.4.27",
-    "sass": "1.64.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
+  },
+  "devDependencies": {
+    "sass": "1.64.2"
   }
 }

src/app/StartDsfr.tsx

@@ -5,14 +5,14 @@ import { defaultColorScheme } from "./defaultColorScheme";
 import Link from "next/link";
 
 declare module "@codegouvfr/react-dsfr/next-appdir" {
-  interface RegisterLink {
+  interface RegisterLink { 
     Link: typeof Link;
   }
 }
 
 startReactDsfr({ defaultColorScheme, Link });
 
-export function StartDsfr() {
+export function StartDsfr(){
   //Yes, leave null here.
   return null;
 }

src/app/components/Footer.tsx

@@ -0,0 +1,63 @@
+import { Footer as DSFRFooter, type FooterProps } from "@codegouvfr/react-dsfr/Footer";
+
+import { items as navigationItems } from "./Navigation";
+
+const otherLinks: FooterProps.LinkList.Column = {
+  categoryName: "Autres",
+  links: navigationItems.filter((item) => !item.menuLinks) as FooterProps.LinkList.Links,
+};
+
+const navigationToFooterLinkList: FooterProps.LinkList.List = [
+  ...navigationItems
+    .filter((item) => !!item.menuLinks?.length)
+    .map((item) => {
+      const listColumn: FooterProps.LinkList.Column = {
+        categoryName: item.text as string,
+        links: item.menuLinks?.map((menuLink) => {
+          const link = menuLink as FooterProps.LinkList.Link;
+          return link;
+        }) as FooterProps.LinkList.Links,
+      };
+      return listColumn;
+    }),
+  otherLinks,
+] as unknown as FooterProps.LinkList.List;
+
+export default function Footer() {
+  return (
+    <DSFRFooter
+      accessibility="fully compliant"
+      contentDescription="
+    Ce message est à remplacer par les informations de votre site.
+
+    Comme exemple de contenu, vous pouvez indiquer les informations
+    suivantes : Le site officiel d'information administrative pour les entreprises.
+    Retrouvez toutes les informations et démarches administratives nécessaires à la création,
+    à la gestion et au développement de votre entreprise.
+    "
+      partnersLogos={{
+        main: {
+          alt: "[À MODIFIER - texte alternatif de l'image]",
+          href: "#",
+          imgUrl:
+            "https://components.react-dsfr.codegouv.studio/static/media/placeholder.16x9.3d46f94c.png",
+        },
+        sub: [
+          {
+            alt: "[À MODIFIER - texte alternatif de l'image]",
+            href: "#",
+            imgUrl:
+              "https://components.react-dsfr.codegouv.studio/static/media/placeholder.16x9.3d46f94c.png",
+          },
+          {
+            alt: "[À MODIFIER - texte alternatif de l'image]",
+            href: "#",
+            imgUrl:
+              "https://components.react-dsfr.codegouv.studio/static/media/placeholder.16x9.3d46f94c.png",
+          },
+        ],
+      }}
+      linkList={navigationToFooterLinkList}
+    />
+  );
+}

src/app/components/Header.tsx

@@ -0,0 +1,33 @@
+import Navigation from "./Navigation";
+import { Header as DSFRHeader } from "@codegouvfr/react-dsfr/Header";
+
+export default function Header() {
+  return (
+    <DSFRHeader
+      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={<Navigation />}
+      quickAccessItems={[
+        {
+          iconId: "fr-icon-file-text-line",
+          linkProps: {
+            href: "/documentation",
+          },
+          text: "Documentation",
+        },
+      ]}
+      serviceTagline="Un incubateur betagouv 🥸"
+      serviceTitle="La Fabrique des Ministères Sociaux"
+    />
+  );
+}