feat: display startups grid + add own data to startups

CONTRIBUTING.md

@@ -0,0 +1,67 @@
+# Améliorer le site public de la Fabrique des Ministères Sociaux
+
+## Startups
+
+Ce site regroupe
+
+- des données affichées sur beta.gouv.fr, et modifiables [dans le code source de beta.gouv.fr dans le dossier `content/_startups`](https://github.com/betagouv/beta.gouv.fr/tree/master/content/_startups)
+- des données supplémentaires affichées seulement sur fabrique.social.gouv.fr et modifiables [dans ce code source dans le dossier `content/_startups`](https://github.com/SocialGouv/www/tree/master/content/_startups)
+
+Nous gardons la dépendance au site de beta.gouv.fr afin que les données soient le plus à jour sur les deux sites.
+
+### Ajouter une Startup
+
+Il faut rajouter un fichier sur chaque repository
+
+1. en premier sur beta.gouv.fr
+2. puis sur fabrique.social.gouv.fr [TODO: récupérer les infos du fichier précédent]
+
+#### 1. Ajout du fichier dans le code source de beta.gouv.fr
+
+##### [en un clic par l'interface web de GitHub](https://beta.gouv.fr/trampoline.html?what=startups&where=content/_startups/nom-startup.md)
+
+Les illustrations doivent être en 16:9, au format 1280 ⨉ 720 pixels, optimisées au préalable avec un outil du type [ImageOptim](https://imageoptim.com/mac) - choisir des réglages "lossy" donnant en général plus de 50% de gains à la compression, mais ne pas supprimer les métadonnées d'images.
+
+> Sinon, offline : dupliquer un fichier de description dans le dossier [`/content/_startups`](https://github.com/betagouv/beta.gouv.fr/tree/master/content/_startups) et suivre les instructions ci-dessous sur l'édition.
+
+Pour le titre de la startup, s'en tenir aux [règles usuelles](https://fr.wikipedia.org/wiki/Usage_des_majuscules_en_fran%C3%A7ais#R.C3.A8gles_traditionnelles), c'est-à-dire sauf cas particuliers : le premier mot prend une majuscule, les autres non. (Ce n'est pas grave de se tromper, mais il faut s'attendre à ce que ça soit corrigé plus tard.)
+
+Pour l'énoncé de mission, utiliser une phrase à l'infinitif, qui complète « En investissant dans ce produit, l'État cherche à… » ou « l'État cherche à rendre plus facile de… ».
+
+#### 1. Ajout du fichier dans ce code source
+
+Dupliquer un fichier de description dans le dossier [`/content/_startups`](https://github.com/SocialGouv/www/tree/master/content/_startups).
+
+### Éditer la description d'une Startup existante
+
+Modifier le fichier `$id_startup.md` de description de la Startup dans le dossier [`content/_startups`](https://github.com/betagouv/beta.gouv.fr/tree/master/content/_startups).
+
+La documentation des différentes propriétés à renseigner est accessible en cliquant sur le lien de création d'une nouvelle Startup dans la section précédente.
+
+### Ajouter ou modifier l'image d'illustration d'une Startup existante
+
+Ajouter un image `$id_startup.jpg`ou .png dans le dossier [img/startups](https://github.com/betagouv/beta.gouv.fr/tree/master/img/startups)
+
+## Modifier le contenu éditorial
+
+[Rechercher le contenu à modifier](https://github.com/SocialGouv/www/search?q=contenu+à+modifier&type=Code) et éditer le fichier correspondant.
+
+## Relire les changements
+
+Pour encourager les contributions, éviter les erreurs d'inattention, et se mettre d'accord collectivement sur le contenu publié au nom de l'incubateur, chaque modification doit être relue et approuvée par une autre personne que l'auteur avant d’être intégrée.
+
+### Conseils pour demander une relecture
+
+Pour les relectures de code, il vaut mieux choisir une personne ayant un peu l'habitude de Jekyll, de Ruby ou du développement web. En revanche, en cas d'urgence sur une relecture éditoriale, toute personne de l'incubateur est légitime à approuver les modifications.
+
+**L'auteur d'une modification est responsable de pousser pour obtenir une relecture**, en relançant les gens périodiquement. Pour demander une relecture :
+
+1. **Ouvrir une <abbr title="Demande de modification sur GitHub">pull request</abbr>**, sans mentionner de relecteur explicitement. Les relecteurs potentiels vont recevoir une notification, et peuvent s'auto-assigner la relecture.
+2. **Si plusieurs jours s'écoulent sans relecture** (entre 2 et 5 jours, à la louche), ajouter un commentaire à la pull request, en demandant explicitement une relecture à un relecteur potentiel.
+3. **Si plusieurs jours s'écoulent à nouveau**, contacter directement un relecteur potentiel (par exemple par message privé ou public sur le [Mattermost de l'incubateur](https://mattermost.fabrique.social.gouv.fr/default/channels/town-square), ou en présentiel dans les locaux de _La Fabrique_).
+
+### Conseils pour les relecteurs
+
+- **Commentez le code ou le texte – pas l'auteur** : on ne cherche pas à assigner de responsabilités ou à critiquer l'auteur ; mais juste à voir comment un bout de code ou de texte pourrait être plus pertinent.
+- **Si vous critiquez, proposez** : si quelque chose ne vous plait pas, expliquez comment vous proposeriez de l'améliorer.
+- **Soyez souple** : si vous avez une remarque mineure, ne bloquez pas la pull request avec une revue négative. Il vaut mieux approuver la pull request, en laissant l'auteur responsable de prendre en compte (ou pas) vos remarques.

content/_startups/1000.jours.md

@@ -0,0 +1,4 @@
+---
+name: 1000 premiers jours - l'app
+ministere: santé
+---

content/_startups/1000.premiers.jours.blues.md

@@ -0,0 +1,4 @@
+---
+name: 1000 premiers jours Blues
+ministere: santé
+---

content/_startups/aides.jeunes.md

@@ -0,0 +1,4 @@
+---
+name: Aides Jeunes
+ministere: solidarité
+---

content/_startups/archifiltre.md

@@ -0,0 +1,4 @@
+---
+name: Archifiltre
+ministere: santé
+---

content/_startups/bpco.md

@@ -0,0 +1,4 @@
+---
+name: BPCO
+ministere: santé
+---

content/_startups/codedutravail.md

@@ -0,0 +1,4 @@
+---
+name: Code du travail numérique
+ministere: travail
+---

content/_startups/conventionnement.iae.md

@@ -0,0 +1,4 @@
+---
+name: Conventionnement IAE
+ministere: travail
+---

content/_startups/didoc.md

@@ -0,0 +1,4 @@
+---
+name: DIDOC
+ministere: santé
+---

content/_startups/domifa.md

@@ -0,0 +1,4 @@
+---
+name: DomiFa
+ministere: solidarité
+---

content/_startups/e-mjpm.md

@@ -0,0 +1,4 @@
+---
+name: e-MJPM
+ministere: solidarité
+---

content/_startups/egalite.professionnelle.md

@@ -0,0 +1,4 @@
+---
+name: Egalité professionnelle
+ministere: travail
+---

content/_startups/enfants-du-spectacle.md

@@ -0,0 +1,4 @@
+---
+name: Enfants Du Spectacle
+ministere: travail
+---

content/_startups/ethique.en.sante.numerique.md

@@ -0,0 +1,4 @@
+---
+name: Ethique en santé numérique
+ministere: santé
+---

content/_startups/fiche.commune.entreprise.fce.md

@@ -0,0 +1,4 @@
+---
+name: Fiche Commune Entreprise
+ministere: travail
+---

content/_startups/l-application-du-cej.md

@@ -0,0 +1,4 @@
+---
+name: L'application du CEJ
+ministere: travail
+---

content/_startups/maison.de.lautisme.md

@@ -0,0 +1,4 @@
+---
+name: Maison de l'autisme
+ministere: solidarité
+---

content/_startups/mano.md

@@ -0,0 +1,4 @@
+---
+name: MANO
+ministere: solidarité
+---

content/_startups/maraudes.md

@@ -0,0 +1,4 @@
+---
+name: maraudes
+ministere: solidarité
+---

content/_startups/medle.md

@@ -0,0 +1,4 @@
+---
+name: Medlé
+ministere: santé
+---

content/_startups/monpsy.md

@@ -0,0 +1,4 @@
+---
+name: MonParcoursPsy
+ministere: santé
+---

content/_startups/monsuivipsy.md

@@ -0,0 +1,4 @@
+---
+name: Jardin mental
+ministere: santé
+---

content/_startups/nata.md

@@ -0,0 +1,4 @@
+---
+name: NATA
+ministere: solidarité
+---

content/_startups/ozensemble.md

@@ -0,0 +1,4 @@
+---
+name: Oz Ensemble
+ministere: santé
+---

content/_startups/pmi.md

@@ -0,0 +1,4 @@
+---
+name: PMI
+ministere: solidarité
+---

content/_startups/psyenfantado.md

@@ -0,0 +1,4 @@
+---
+name: PsyEnfantAdo
+ministere: santé
+---

content/_startups/qualite-eau.md

@@ -0,0 +1,4 @@
+---
+name: Qualité de l'eau
+ministere: santé
+---

content/_startups/recosante.md

@@ -0,0 +1,4 @@
+---
+name: Recosanté
+ministere: santé
+---

content/_startups/reva.md

@@ -0,0 +1,4 @@
+---
+name: REVA
+ministere: travail
+---

content/_startups/tremplin.md

@@ -0,0 +1,4 @@
+---
+name: Tremplin
+ministere: santé
+---

content/_startups/tumeplay.md

@@ -0,0 +1,4 @@
+---
+name: TuMePlay
+ministere: santé
+---

content/_startups/workinfrance.md

@@ -0,0 +1,4 @@
+---
+name: Work in France
+ministere: travail
+---

mdx-components.tsx

@@ -0,0 +1,15 @@
+import type { MDXComponents } from "mdx/types"
+
+// This file allows you to provide custom React components
+// to be used in MDX files. You can import and use any
+// React component you want, including components from
+// other libraries.
+
+// This file is required to use MDX in `app` directory.
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    // Allows customizing built-in components, e.g. to add styling.
+    // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
+    ...components,
+  }
+}

next.config.js

@@ -8,6 +8,9 @@ const nextConfig = {
     })
     return config
   },
+  experimental: {
+    mdxRs: true,
+  },
 }
-
-module.exports = nextConfig
+const withMDX = require("@next/mdx")()
+module.exports = withMDX(nextConfig)

package.json

@@ -13,12 +13,19 @@
   },
   "dependencies": {
     "@codegouvfr/react-dsfr": "0.73.2",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/mdx": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@next/mdx": "^13.4.13",
+    "@types/mdx": "^2.0.5",
     "@types/node": "20.4.6",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
+    "clsx": "^2.0.0",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
+    "gray-matter": "^4.0.3",
     "next": "13.4.12",
     "postcss": "8.4.27",
     "react": "18.2.0",

src/app/api/startups/route.ts

@@ -1,19 +1,27 @@
 import { NextResponse } from "next/server"
 import type { Incubator } from "@/types/incubator"
-import type { Startup } from "@/types/startup"
+import type { StartupBetaGouv, StartupLocal, Startup } from "@/types/startup"
+import fs from "fs"
+import path from "path"
+import matter from "gray-matter"
+
+const startupsDirectory = path.join(process.cwd(), "content/_startups")
 
 interface BetaGouvStartupsData {
   links: {
     self: string
   }
-  data: Startup[]
+  data: StartupBetaGouv[]
   included: Incubator[]
 }
 
 export async function GET() {
-  const res = await fetch("https://beta.gouv.fr/api/v2.5/startups.json", {
-    cache: "no-store",
-  })
+  // we can't fetch the data from beta.gouv.fr directly in /app/startups/page.tsx
+  // because the json is too big to be cached
+  // we have to fetch the data from beta.gouv.fr through a server-side API call
+  // then filter out the data we need, then the request will be cached
+
+  const res = await fetch("https://beta.gouv.fr/api/v2.5/startups.json")
 
   const betaGouvData: BetaGouvStartupsData = await res.json()
 
@@ -22,9 +30,6 @@ export async function GET() {
       return startup.relationships.incubator.data.id === "sgmas"
     })
     .map((startup) => {
-      // remove the incubator relationship
-      // delete startup.relationships
-      // delete startup.attributes?.content_url_encoded_markdown
       const { relationships, attributes, ...rest } = startup
       const { content_url_encoded_markdown, ...restAttributes } = attributes
       return {
@@ -33,5 +38,43 @@ export async function GET() {
       }
     })
 
-  return NextResponse.json({ data: ourStartups })
+  const localMDXFiles = fs.readdirSync(startupsDirectory)
+
+  const localStartupsData: Record<string, StartupLocal> = {}
+  function isStartupLocal(data: any): data is StartupLocal {
+    return (
+      typeof data.name === "string" &&
+      ["travail", "solidarité", "santé"].includes(data.ministere)
+    )
+  }
+
+  for (const filename of localMDXFiles) {
+    const content = fs.readFileSync(
+      path.join(startupsDirectory, filename),
+      "utf8"
+    )
+
+    let { data } = matter(content)
+    data = data as StartupLocal
+
+    if (isStartupLocal(data)) {
+      localStartupsData[data.name] = data
+    }
+  }
+
+  // TODO: merge localStartupsData and ourStartups
+  const mergedData: Startup[] = ourStartups.map((startup) => {
+    const localData = localStartupsData[startup.attributes.name]
+    return {
+      ...startup,
+      attributes: {
+        ...startup.attributes,
+        ...localData,
+      },
+    }
+  })
+
+  console.log("mergedData", mergedData)
+
+  return NextResponse.json(mergedData)
 }

src/app/layout.tsx

@@ -4,7 +4,7 @@ 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 "@/styles/globals.css"
+import "@/styles/global.css"
 import { defaultColorScheme } from "@/styles/defaultColorScheme"
 import { StartDsfr } from "@/components/StartDsfr"
 import Header from "@/components/Header"