feat: add header

next.config.js

@@ -1,38 +1,18 @@
-// This file sets a custom webpack configuration to use your Next.js app
-// with Sentry.
-// https://nextjs.org/docs/api-reference/next.config.js/introduction
-// 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,
   sentry: {
     disableClientWebpackPlugin: true,
     disableServerWebpackPlugin: true,
   },
-};
-
-const sentryWebpackPluginOptions = {
-  // Additional config options for the Sentry Webpack plugin. Keep in mind that
-  // the following options are set automatically, and overriding them is not
-  // recommended:
-  //   release, url, org, project, authToken, configFile, stripPrefix,
-  //   urlPrefix, include, ignore
-
-  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,
+    NEXT_PUBLIC_APP_VERSION_COMMIT: process.env.GITHUB_SHA,
   },
 };
 
-// Make sure adding Sentry options is the last code to run before exporting, to
-// ensure that your source maps include changes from all other Webpack plugins
-module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);
+module.exports = withSentryConfig(moduleExports, { silent: true });

public/sitemap-0.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://template.fabrique.social.gouv.fr</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-03-04T15:45:11.208Z</lastmod></url>
+<url><loc>https://template.fabrique.social.gouv.fr</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-03-04T18:00:28.304Z</lastmod></url>
 </urlset>

src/components/footer/body.tsx

@@ -3,6 +3,7 @@ import {
   Logo,
   FooterBodyItem,
   Link,
+  //@ts-ignore
   FooterOperator,
 } from "@dataesr/react-dsfr";
 import { FooterBodySectionProps } from "./type";

src/components/footer/partner.tsx

@@ -11,7 +11,6 @@ export const Partners = (props: FooterPartnerSectionProps): JSX.Element => (
     {props.logos?.map((logo, index) => (
       <FooterPartnersLogo
         key={`${index}-${logo.src}`}
-        isMain={logo.isMain}
         href={logo.href}
         imageSrc={logo.src}
         imageAlt={logo.alt}

src/components/footer/type.ts

@@ -14,7 +14,6 @@ type Image = {
 };
 
 type Logo = Image & {
-  isMain?: boolean;
   href: string;
 };
 

src/components/header/index.tsx

@@ -1,22 +1,30 @@
 import {
   HeaderNav,
+  //@ts-ignore
   NavItem,
+  //@ts-ignore
   NavSubItem,
   Header,
+  //@ts-ignore
   ToolItem,
   Logo,
   HeaderBody,
+  //@ts-ignore
   Service,
   HeaderOperator,
+  //@ts-ignore
   ToolItemGroup,
+  //@ts-ignore
   Tool,
 } from "@dataesr/react-dsfr";
 import { MegaNav } from "./megaNav";
 import { HeaderProps } from "./type";
 import { SwitchThemeMode } from "./switch";
+import { SkipLinks } from "./skipLinks";
 
 const Index = (props: HeaderProps): JSX.Element => (
   <Header>
+    {props.skipLinksProps && <SkipLinks {...props.skipLinksProps} />}
     <HeaderBody>
       <Logo splitCharacter={props.splitTitleLength ?? 10}>
         {props.mainTitle}

src/components/header/megaNav.tsx

@@ -1,4 +1,10 @@
-import { MegaNavItem, MegaNavSubItem, Link } from "@dataesr/react-dsfr";
+import {
+  //@ts-ignore
+  MegaNavItem,
+  //@ts-ignore
+  MegaNavSubItem,
+  Link,
+} from "@dataesr/react-dsfr";
 import { MegaNavProps } from "./type";
 
 export const MegaNav = (props: MegaNavProps): JSX.Element => (

src/components/header/skipLinks.tsx

@@ -0,0 +1,15 @@
+import { SkiplinkItem, Skiplinks } from "@dataesr/react-dsfr";
+
+import { SkipLinksProps } from "./type";
+
+export const SkipLinks = (props: SkipLinksProps): JSX.Element => {
+  return (
+    <Skiplinks>
+      {props.items.map((item, index) => (
+        <SkiplinkItem key={`${index}-${item.title}`} href={item.href}>
+          {item.title}
+        </SkiplinkItem>
+      ))}
+    </Skiplinks>
+  );
+};

src/components/header/switch.tsx

@@ -1,4 +1,8 @@
-import { SwitchTheme, ToolItem } from "@dataesr/react-dsfr";
+import {
+  SwitchTheme,
+  //@ts-ignore
+  ToolItem,
+} from "@dataesr/react-dsfr";
 import { useState } from "react";
 import { SwitchProps } from "./type";
 

src/components/header/type.ts

@@ -45,8 +45,13 @@ export type HeaderProps = {
   switchProps?: SwitchProps;
   closeButtonLabel?: string;
   navItems: Array<RegularNavProps | MegaNavProps>;
+  skipLinksProps?: SkipLinksProps;
 };
 
 export type SwitchProps = {
   label: string;
 };
+
+export type SkipLinksProps = {
+  items: Array<Omit<Link, "name">>;
+};

src/components/index.ts

@@ -3,3 +3,4 @@ export { default as Footer } from "./footer";
 export { default as Layout } from "./layout";
 export * from "./header/type";
 export * from "./footer/type";
+export * from "./landing";

src/components/landing/head.tsx

@@ -0,0 +1,28 @@
+export type HeadProps = {
+  title: string;
+  textLead: string | React.ReactNode | React.ReactNode[];
+  description: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+};
+
+export const Head = (props: HeadProps): JSX.Element => {
+  return (
+    <>
+      <div className="fr-col-12 fr-col-md-6">
+        <h1>
+          {props.title}
+          <span className="fr-text--lead d-block fr-mt-3w">
+            {props.textLead}
+          </span>
+        </h1>
+        <p className="fr-mt-10w">{props.description}</p>
+      </div>
+      <div className="fr-col-12 fr-col-offset-md-1 fr-col-md-4">
+        <img className="fr-mt-2w" src={props.image.src} alt={props.image.alt} />
+      </div>
+    </>
+  );
+};

src/components/landing/index.ts

@@ -0,0 +1,3 @@
+export * from "./tile";
+export * from "./head";
+export * from "./testimonial";

src/components/landing/testimonial.tsx

@@ -0,0 +1,30 @@
+export type TestimonialProps = {
+  description: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  link: {
+    title: string;
+    href: string;
+  };
+};
+
+export const Testimonial = (props: TestimonialProps): JSX.Element => {
+  return (
+    <div className="fr-col-12 fr-col-md-4 fr-px-2w">
+      <div className="fr-centered fr-my-2w fr-py-4w">
+        <a
+          target="_blank"
+          className="fr-link"
+          title={props.link.title}
+          href={props.link.href}
+          rel="noreferrer"
+        >
+          <img src={props.image.src} alt={props.image.alt} />
+        </a>
+      </div>
+      <p>{props.description}</p>
+    </div>
+  );
+};

src/components/landing/tile.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+export type TileProps = {
+  title: string;
+  description: string;
+  href: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+};
+
+export const Tile = (props: TileProps): JSX.Element => {
+  return (
+    <div className="fr-col-12 fr-col-offset-md-1 fr-col-md-3">
+      <div className="fr-card fr-enlarge-link fr-pt-3w">
+        <div className="fr-card__body">
+          <h2 className="fr-card__title">
+            <Link href={props.href} passHref>
+              <a className="fr-card__link">{props.title}</a>
+            </Link>
+          </h2>
+          <p className="fr-card__desc">{props.description}</p>
+        </div>
+        <div className="fr-card__img">
+          <img src={props.image.src} alt={props.image.alt} />
+        </div>
+      </div>
+    </div>
+  );
+};

src/config/layout.ts

@@ -6,6 +6,17 @@ import {
   HeaderProps,
 } from "@components";
 
+const links = [
+  {
+    title: "Lien utile 1",
+    href: "/",
+  },
+  {
+    title: "Lien utile 2",
+    href: "/",
+  },
+];
+
 export const headerProps: HeaderProps = {
   mainTitle: "République Française",
   splitTitleLength: 10,
@@ -25,6 +36,9 @@ export const headerProps: HeaderProps = {
   switchProps: {
     label: "Paramètre d'affichage",
   },
+  skipLinksProps: {
+    items: links,
+  },
   navItems: [
     {
       title: "Titre 1",
@@ -76,17 +90,6 @@ export const headerProps: HeaderProps = {
   closeButtonLabel: "Fermer",
 };
 
-const links = [
-  {
-    title: "Lien utile 1",
-    href: "/",
-  },
-  {
-    title: "Lien utile 2",
-    href: "/",
-  },
-];
-
 export const footerTopSection: FooterTopSectionProps = {
   links: [
     {
@@ -127,7 +130,6 @@ export const footerPartnerSection: FooterPartnerSectionProps = {
   title: "Partenaires",
   logos: [
     {
-      isMain: true,
       href: "/",
       alt: "",
       src: "https://dummyimage.com/100x80/000/fff.png&text=logo+1",

src/pages/404.tsx

@@ -10,9 +10,9 @@ const Index: NextPage = () => {
   }, []);
 
   return (
-    <>
-      <div style={{ height: "800px" }}>404</div>
-    </>
+    <div className="fr-container fr-my-6w">
+      <h1>404 - Page non trouvée</h1>
+    </div>
   );
 };
 

src/pages/healthz.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Healthz() {
+  return (
+    <div className="fr-container fr-my-6w">
+      <h1>App is up and running</h1>
+    </div>
+  );
+}