feat: blank pages, folder structure and active links

SocialGouv · Aug 4, 2023 · aa8fe6a · aa8fe6a
1 parent 8abe6b3
commit aa8fe6a
Show file tree

Hide file tree

Showing 20 changed files with 178 additions and 60 deletions.
diff --git a/next.config.js b/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"
-    });
-    return config;
-  }
+      type: "asset/resource",
+    })
+    return config
+  },
 }
 
 module.exports = nextConfig
diff --git a/src/app/(la-fabrique)/about/page.tsx b/src/app/(la-fabrique)/about/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr"
+
+export default function About() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>À propos de la Fabrique</h1>
+    </section>
+  )
+}
diff --git a/src/app/(la-fabrique)/equipe/page.tsx b/src/app/(la-fabrique)/equipe/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr"
+
+export default function Team() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>L'équipe</h1>
+    </section>
+  )
+}
diff --git a/src/app/(la-fabrique)/notre-offre/page.tsx b/src/app/(la-fabrique)/notre-offre/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr"
+
+export default function NotreOffre() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>Ce que vous offre de la Fabrique</h1>
+    </section>
+  )
+}
diff --git a/src/app/documentation/page.tsx b/src/app/documentation/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr"
+
+export default function Documentation() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>Documentation</h1>
+    </section>
+  )
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,19 +1,20 @@
-import "./globals.css"
+import "../styles/globals.css"
 import type { Metadata } from "next"
 
-import { defaultColorScheme } from "./defaultColorScheme"
+import { defaultColorScheme } from "../styles/defaultColorScheme"
 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 { StartDsfr } from "../components/StartDsfr"
 
 import Link from "next/link"
-import Header from "./components/Header"
-import Footer from "./components/Footer"
+import Header from "../components/Header"
+import Footer from "../components/Footer"
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "La Fabrique des Ministères Sociaux",
+  description:
+    "La fabrique numérique des ministères sociaux reprend la démarche et les grands principes de beta.gouv, à savoir : Un leitmotiv : la résolution d'irritants...",
 }
 
 export default function RootLayout({
@@ -22,6 +23,7 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   const lang = "fr"
+
   return (
     <html {...getHtmlAttributes({ defaultColorScheme, lang })}>
       <head>
@@ -45,7 +47,12 @@ export default function RootLayout({
       <body>
         <DsfrProvider lang={lang}>
           <Header />
-          {children}
+          <main
+            id="contenu"
+            className="flex min-h-screen flex-col items-center justify-between p-24"
+          >
+            {children}
+          </main>
           <Footer />
         </DsfrProvider>
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,13 +2,12 @@ import { fr } from "@codegouvfr/react-dsfr"
 
 export default function Home() {
   return (
-    <main
-      id="contenu"
-      className="flex min-h-screen flex-col items-center justify-between p-24"
-    >
-      <section className={fr.cx("fr-h1")}>
-        <h1>Santé, Solidarité, Travail: nos startups à votre service</h1>
+    <>
+      <section>
+        <h1 className={fr.cx("fr-h1")}>
+          Santé, Solidarité, Travail: nos startups à votre service
+        </h1>
       </section>
-    </main>
+    </>
   )
 }
diff --git a/src/app/proposez-vous-idees/page.tsx b/src/app/proposez-vous-idees/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr"
+
+export default function ProposezVosIdees() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>Proposez vos idées</h1>
+    </section>
+  )
+}
diff --git a/src/app/recrutement/page.tsx b/src/app/recrutement/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr"
+
+export default function Recrutement() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>Recrutement</h1>
+    </section>
+  )
+}
diff --git a/src/app/startups/page.tsx b/src/app/startups/page.tsx
@@ -0,0 +1,9 @@
+import { fr } from "@codegouvfr/react-dsfr"
+
+export default function Startups() {
+  return (
+    <section>
+      <h1 className={fr.cx("fr-h1")}>Nos startups</h1>
+    </section>
+  )
+}
diff --git a/src/app/components/Footer.tsx → src/components/Footer.tsx b/src/app/components/Footer.tsx → src/components/Footer.tsx
@@ -3,13 +3,16 @@ import {
   type FooterProps,
 } from "@codegouvfr/react-dsfr/Footer"
 
-import { items as navigationItems } from "./Navigation"
+import { navigationItems, quickAccessItems } from "../utils/navigationItems"
 
 const otherLinks: FooterProps.LinkList.Column = {
   categoryName: "Autres",
-  links: navigationItems.filter(
-    (item) => !item.menuLinks
-  ) as FooterProps.LinkList.Links,
+  links: [
+    ...(navigationItems.filter(
+      (item) => !item.menuLinks
+    ) as FooterProps.LinkList.Links),
+    ...(quickAccessItems as unknown as FooterProps.LinkList.Link[]),
+  ].slice(0, 8) as FooterProps.LinkList.Links,
 }
 
 const navigationToFooterLinkList: FooterProps.LinkList.List = [

diff --git a/src/app/components/Header.tsx → src/components/Header.tsx b/src/app/components/Header.tsx → src/components/Header.tsx
@@ -1,5 +1,6 @@
-import Navigation from "./Navigation"
 import { Header as DSFRHeader } from "@codegouvfr/react-dsfr/Header"
+import { quickAccessItems } from "@/utils/navigationItems"
+import Navigation from "./Navigation"
 
 export default function Header() {
   return (
@@ -18,15 +19,7 @@ export default function Header() {
       }}
       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",
-        },
-      ]}
+      quickAccessItems={quickAccessItems}
       serviceTagline="Un incubateur betagouv 🥸"
       serviceTitle="La Fabrique des Ministères Sociaux"
     />

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -0,0 +1,43 @@
+"use client"
+import { useMemo } from "react"
+import { usePathname, useSearchParams } from "next/navigation"
+import {
+  MainNavigation,
+  type MainNavigationProps,
+} from "@codegouvfr/react-dsfr/MainNavigation"
+import { navigationItems } from "../utils/navigationItems"
+
+export default function Navigation() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams().toString()
+
+  const activeNavigationItems = useMemo(() => {
+    const currentUrl = `${pathname}${searchParams ? `?${searchParams}` : ""}`
+    const activeNavigationItems = navigationItems.map(
+      (item: MainNavigationProps.Item) => {
+        if (item.menuLinks?.length) {
+          let isActive = false
+          const activeMenuLinks = item.menuLinks.map((menuLink) => {
+            const menuLinkIsActive =
+              currentUrl === (menuLink.linkProps.href as string)
+            if (menuLinkIsActive) isActive = true
+            return { ...menuLink, isActive: menuLinkIsActive }
+          })
+
+          return { ...item, isActive, menuLinks: activeMenuLinks }
+        }
+        if (!item.linkProps) return item
+        return {
+          ...item,
+          isActive: pathname.startsWith(item.linkProps.href as string),
+        }
+      }
+    )
+    return activeNavigationItems
+  }, [pathname, searchParams])
+
+  // Warning: Prop `id` did not match. Server: "main-navigation-:Rt6cq:-button-0" Client: "main-navigation-:R3kpj9:-button-0"
+  // https://github.com/vercel/next.js/issues/53110
+
+  return <MainNavigation items={activeNavigationItems} />
+}
diff --git a/src/app/StartDsfr.tsx → src/components/StartDsfr.tsx b/src/app/StartDsfr.tsx → src/components/StartDsfr.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir"
-import { defaultColorScheme } from "./defaultColorScheme"
+import { defaultColorScheme } from "../styles/defaultColorScheme"
 import Link from "next/link"
 
 declare module "@codegouvfr/react-dsfr/next-appdir" {

diff --git a/src/app/defaultColorScheme.ts → src/styles/defaultColorScheme.ts b/src/app/defaultColorScheme.ts → src/styles/defaultColorScheme.ts
diff --git a/src/app/globals.css → src/styles/globals.css b/src/app/globals.css → src/styles/globals.css
@@ -18,6 +18,10 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
     rgb(var(--background-start-rgb));
 }
diff --git a/src/app/components/Navigation.tsx → src/utils/navigationItems.ts b/src/app/components/Navigation.tsx → src/utils/navigationItems.ts
@@ -1,35 +1,33 @@
-import {
-  MainNavigation,
-  type MainNavigationProps,
-} from "@codegouvfr/react-dsfr/MainNavigation"
+import { type MainNavigationProps } from "@codegouvfr/react-dsfr/MainNavigation"
+import { type HeaderProps } from "@codegouvfr/react-dsfr/Header"
 
-export const items: MainNavigationProps.Item[] = [
+const navigationItems: MainNavigationProps.Item[] = [
   {
     menuLinks: [
       {
         linkProps: {
-          href: "#",
+          href: "/startups?categorie=travail",
           target: "_self",
         },
         text: "Travail",
       },
       {
         linkProps: {
-          href: "#",
+          href: "/startups?categorie=solidarites",
           target: "_self",
         },
         text: "Solidarités",
       },
       {
         linkProps: {
-          href: "#",
+          href: "/startups?categorie=sante",
           target: "_self",
         },
         text: "Santé",
       },
       {
         linkProps: {
-          href: "#",
+          href: "/startups",
           target: "_self",
         },
         text: "Tout voir",
@@ -41,21 +39,21 @@ export const items: MainNavigationProps.Item[] = [
     menuLinks: [
       {
         linkProps: {
-          href: "#",
+          href: "/about",
           target: "_self",
         },
         text: "À propos",
       },
       {
         linkProps: {
-          href: "#",
+          href: "/notre-offre",
           target: "_self",
         },
         text: "Notre offre",
       },
       {
         linkProps: {
-          href: "#",
+          href: "/equipe",
           target: "_self",
         },
         text: "L'équipe",
@@ -65,20 +63,28 @@ export const items: MainNavigationProps.Item[] = [
   },
   {
     linkProps: {
-      href: "#",
+      href: "/proposez-vous-idees",
       target: "_self",
     },
     text: "Proposez vos idées",
   },
   {
     linkProps: {
-      href: "#",
+      href: "/recrutement",
       target: "_self",
     },
     text: "Recrutement",
   },
 ]
 
-export default function Navigation() {
-  return <MainNavigation items={items} />
-}
+const quickAccessItems: HeaderProps.QuickAccessItem[] = [
+  {
+    iconId: "fr-icon-file-text-line",
+    linkProps: {
+      href: "/documentation",
+    },
+    text: "Documentation",
+  },
+]
+
+export { navigationItems, quickAccessItems }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,16 +1,16 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },