fix: header

.env.development

@@ -4,3 +4,4 @@ NEXT_PUBLIC_SENTRY_DSN=""
 NEXT_PUBLIC_SENTRY_ENV=""
 NEXT_PUBLIC_MATOMO_URL=""
 NEXT_PUBLIC_MATOMO_SITE_ID=""
+NEXT_PUBLIC_APP_REPOSITORY_URL="https://github.com/SocialGouv/template"

.env.production

@@ -3,4 +3,5 @@ NEXT_PUBLIC_SITE_URL="https://template.fabrique.social.gouv.fr/"
 NEXT_PUBLIC_SENTRY_DSN="https://67a92c8c0f70486d9f36f2352eff1d19@sentry.fabrique.social.gouv.fr/68"
 NEXT_PUBLIC_SENTRY_ENV="production"
 NEXT_PUBLIC_MATOMO_URL="https://matomo.fabrique.social.gouv.fr"
-NEXT_PUBLIC_MATOMO_SITE_ID=63
+NEXT_PUBLIC_MATOMO_SITE_ID=63
+NEXT_PUBLIC_APP_REPOSITORY_URL="https://github.com/SocialGouv/template"

.env.staging

@@ -4,3 +4,4 @@ NEXT_PUBLIC_SENTRY_DSN="https://67a92c8c0f70486d9f36f2352eff1d19@sentry.fabrique
 NEXT_PUBLIC_SENTRY_ENV="development"
 NEXT_PUBLIC_MATOMO_URL=""
 NEXT_PUBLIC_MATOMO_SITE_ID=""
+NEXT_PUBLIC_APP_REPOSITORY_URL="https://github.com/SocialGouv/template"

.github/workflows/preproduction.yml

@@ -16,7 +16,9 @@ jobs:
       - name: Get project name
         run: |
           echo "project=${GITHUB_REPOSITORY#*/}" >> $GITHUB_ENV
-
+      - name: Get commit sha
+        run: |
+          echo "GITHUB_SHA=${GITHUB_SHA}" >> $GITHUB_ENV
       - name: Use autodevops to deploy review branch
         uses: SocialGouv/actions/autodevops-helm@v1
         with:
@@ -28,3 +30,5 @@ jobs:
           rancherId: ${{ secrets.RANCHER_PROJECT_ID }}
           rancherProjectName: ${{ secrets.RANCHER_PROJECT_NAME }}
           socialgouvBaseDomain: ${{ secrets.SOCIALGOUV_BASE_DOMAIN }}
+          dockerbuildargs: |
+            GITHUB_SHA=${{ env.GITHUB_SHA }}

.github/workflows/production.yml

@@ -20,6 +20,9 @@ jobs:
       - name: Get project name
         run: |
           echo "project=${GITHUB_REPOSITORY#*/}" >> $GITHUB_ENV
+      - name: Get commit sha
+        run: |
+          echo "GITHUB_SHA=${GITHUB_SHA}" >> $GITHUB_ENV
       - name: Use autodevops to deploy production
         uses: SocialGouv/actions/autodevops-helm@v1
         id: autodevops
@@ -33,3 +36,4 @@ jobs:
           socialgouvBaseDomain: ${{ secrets.SOCIALGOUV_BASE_DOMAIN }}
           dockerbuildargs: |
             PRODUCTION=true
+            GITHUB_SHA=${{ env.GITHUB_SHA }}

.github/workflows/review.yml

@@ -19,7 +19,9 @@ jobs:
       - name: Get project name
         run: |
           echo "project=${GITHUB_REPOSITORY#*/}" >> $GITHUB_ENV
-
+      - name: Get commit sha
+        run: |
+          echo "GITHUB_SHA=${GITHUB_SHA}" >> $GITHUB_ENV
       - name: Use autodevops to deploy review branch
         uses: SocialGouv/actions/autodevops-helm@v1
         with:

Dockerfile

@@ -19,8 +19,10 @@ RUN yarn install --frozen-lockfile
 
 # Rebuild the source code only when needed
 FROM node:$NODE_VERSION AS builder
-ENV NODE_ENV production
 ARG PRODUCTION
+ENV NODE_ENV production
+ARG GITHUB_SHA
+ENV GITHUB_SHA $GITHUB_SHA
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .

next.config.js

@@ -4,6 +4,10 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 const { withSentryConfig } = require("@sentry/nextjs");
 
+const { version } = require("./package.json");
+
+const commitSha = process.env.GITHUB_SHA || "dev";
+
 /** @type {import('next').NextConfig} */
 const moduleExports = {
   reactStrictMode: true,
@@ -23,6 +27,10 @@ const sentryWebpackPluginOptions = {
   silent: true, // Suppresses all logs
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options.
+  env: {
+    NEXT_PUBLIC_APP_VERSION: version,
+    NEXT_PUBLIC_APP_VERSION_COMMIT: commitSha,
+  },
 };
 
 // Make sure adding Sentry options is the last code to run before exporting, to

src/components/footer/bottom.tsx

@@ -8,6 +8,28 @@ export const Bottom = (props: FooterBottomSectionProps): JSX.Element => (
         {link.title}
       </FooterLink>
     ))}
-    <FooterCopy>{props.copyright}</FooterCopy>
+    <FooterCopy>
+      <p>
+        Sauf mention contraire, tous les contenus de ce site sont sous{" "}
+        <a
+          href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
+          rel="noreferrer"
+          target="_blank"
+        >
+          licence etalab-2.0
+        </a>
+      </p>
+      <p>
+        Version {props.version} (
+        <a
+          target="_blank"
+          href={`${props.repositoryUrl}/tree/${props.commitHash}`}
+          rel="noreferrer"
+        >
+          {props.commitHash.substring(0, 8)}
+        </a>
+        )
+      </p>
+    </FooterCopy>
   </FooterBottom>
 );

src/components/footer/type.ts

@@ -25,7 +25,9 @@ export type FooterPartnerSectionProps = {
 
 export type FooterBottomSectionProps = {
   links: Array<Link>;
-  copyright: string;
+  version: string;
+  repositoryUrl: string;
+  commitHash: string;
 };
 
 export type FooterTopSectionProps = {

src/components/header/index.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import Header from ".";
-import { headerBody, headerNav } from "@config";
+import { headerProps } from "@config";
 
 export default {
   title: "Header",
@@ -13,16 +13,5 @@ const Template: ComponentStory<typeof Header> = args => <Header {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  bodySection: headerBody,
-  navSection: headerNav,
-};
-
-export const Body = Template.bind({});
-Body.args = {
-  bodySection: headerBody,
-};
-
-export const Nav = Template.bind({});
-Nav.args = {
-  navSection: headerNav,
+  ...headerProps,
 };

src/components/header/index.tsx

@@ -1,12 +1,78 @@
-import { Header } from "@dataesr/react-dsfr";
-import { Body } from "./body";
-import { Nav } from "./nav";
+import {
+  HeaderNav,
+  NavItem,
+  NavSubItem,
+  Header,
+  ToolItem,
+  Logo,
+  HeaderBody,
+  Service,
+  HeaderOperator,
+  ToolItemGroup,
+  Tool,
+} from "@dataesr/react-dsfr";
+import { MegaNav } from "./megaNav";
 import { HeaderProps } from "./type";
+import { SwitchThemeMode } from "./switch";
 
 const Index = (props: HeaderProps): JSX.Element => (
   <Header>
-    {props.bodySection && <Body {...props.bodySection} />}
-    {props.navSection && <Nav {...props.navSection} />}
+    <HeaderBody>
+      <Logo splitCharacter={props.splitTitleLength ?? 10}>
+        {props.mainTitle}
+      </Logo>
+      {props.image && (
+        <HeaderOperator>
+          <img
+            src={props.image.src}
+            alt={props.image.alt}
+            style={{ height: props.image.height, width: props.image.width }}
+          />
+        </HeaderOperator>
+      )}
+      <Service
+        title={props.serviceTitle}
+        description={props.serviceDescription}
+      />
+      <Tool {...props.closeButtonLabel}>
+        <ToolItemGroup>
+          {props.bodyItems?.map((item, index) => (
+            <ToolItem key={`${index}-${item.title}`} link={item.href}>
+              {item.title}
+            </ToolItem>
+          ))}
+          {props.switchProps && <SwitchThemeMode {...props.switchProps} />}
+        </ToolItemGroup>
+      </Tool>
+    </HeaderBody>
+    <HeaderNav>
+      {props.navItems.map((item, index) => {
+        if ("headingLevel" in item) {
+          return <MegaNav key={`${index}-${item.title}`} {...item} />;
+        } else if ("items" in item) {
+          return (
+            <NavItem key={`${index}-${item.title}`} title={item.title}>
+              {item.items?.map((subItem, index) => (
+                <NavSubItem
+                  key={`${index}-${subItem.title}`}
+                  title={subItem.title}
+                  link={subItem.href}
+                  current={subItem.current}
+                />
+              ))}
+            </NavItem>
+          );
+        } else {
+          return (
+            <NavItem
+              key={`${index}-${item.title}`}
+              title={item.title}
+              link={item.href}
+            />
+          );
+        }
+      })}
+    </HeaderNav>
   </Header>
 );
 

src/components/header/type.ts

@@ -35,23 +35,16 @@ export type MegaNavProps = {
   items: Array<NavItem>;
 };
 
-export type HeaderNavProps = {
-  items: Array<RegularNavProps | MegaNavProps>;
-};
-
-export type HeaderBodyProps = {
+export type HeaderProps = {
   mainTitle: string;
   splitTitleLength?: number;
   image?: Image;
   serviceTitle: string;
   serviceDescription: string;
-  items?: Array<Omit<Link, "name">>;
+  bodyItems?: Array<Omit<Link, "name">>;
   switchProps?: SwitchProps;
-};
-
-export type HeaderProps = {
-  navSection?: HeaderNavProps;
-  bodySection: HeaderBodyProps;
+  closeButtonLabel?: string;
+  navItems: Array<RegularNavProps | MegaNavProps>;
 };
 
 export type SwitchProps = {