feat: Add quiz (#734)

* feat: Add quiz

* feat: fiches

* fix: texts

* add contenu

* track matomo

* fix: sizes

* change meta image

.github/workflows/e2e.yml

@@ -52,7 +52,7 @@ jobs:
         id: lighthouseCheck
         with:
           device: all
-          urls: 'http://localhost:3000,http://localhost:3000/outils/comparateur,http://localhost:3000/outils/usagenumerique,http://localhost:3000/outils/livraison,http://localhost:3000/outils/chauffage,http://localhost:3000/outils/transport,http://localhost:3000/outils/fruitsetlegumes,http://localhost:3000/outils/chauffage/pompeachaleur,http://localhost:3000/outils/usagenumerique/visioconference'
+          urls: 'http://localhost:3000,http://localhost:3000/outils/comparateur,http://localhost:3000/outils/usagenumerique,http://localhost:3000/outils/livraison,http://localhost:3000/outils/chauffage,http://localhost:3000/outils/transport,http://localhost:3000/outils/fruitsetlegumes,http://localhost:3000/outils/chauffage/pompeachaleur,http://localhost:3000/outils/usagenumerique/visioconference,http://localhost:3000/outils/quiz'
           outputDirectory: ${{ github.workspace }}/tmp/artifacts
       - name: Verify Lighthouse Check results
         uses: foo-software/lighthouse-check-status-action@master

.gitignore

@@ -72,3 +72,5 @@ npm/react/dist/index.js.LICENSE.txt
 dist/
 
 public/webcomponents/
+
+public/pdf/

app/(iframes)/iframes/quiz/page.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import Quiz from 'components/outils/quiz/Quiz'
+
+const page = () => {
+  return <Quiz />
+}
+
+export default page

app/(public)/contenu/quiz-carbone/page.tsx

@@ -0,0 +1,31 @@
+import { Metadata } from 'next'
+import React from 'react'
+import Notion from 'components/Notion/Notion'
+import { getNotionContentProps, getNotionRevalidate } from 'components/Notion/utils'
+import Suggestion from 'components/layout/Suggestion'
+
+export const revalidate = getNotionRevalidate()
+
+const title = 'Quiz carbone : le nouveau jeu de cartes de l’ADEME est en ligne !'
+
+export const metadata: Metadata = {
+  title: `${title} | Impact CO₂`,
+  description:
+    'Quelle activité humaine a le moins d’impact sur l’environnement ? Découvrez le Quiz carbone pour y voir plus clair !',
+  openGraph: {
+    creators: 'ADEME',
+    images: `${process.env.NEXT_PUBLIC_URL}/meta/quiz-carbone.png`,
+  },
+}
+const QuizCarbone = async () => {
+  const recordMap = await getNotionContentProps('1126523d57d780fb926be79164a403b8')
+
+  return (
+    <>
+      <Notion title={title} recordMap={recordMap} />
+      <Suggestion from={title} fromLabel={title} simulatorName='du quiz carbone' />
+    </>
+  )
+}
+
+export default QuizCarbone

app/(public)/outils/quiz/page.tsx

@@ -0,0 +1,32 @@
+import { Metadata } from 'next'
+import React from 'react'
+import QuizPage from 'components/outils/quiz/QuizPage'
+import { metaDescriptions, metaTitles } from 'utils/meta'
+import Suggestion from 'components/layout/Suggestion'
+
+export async function generateMetadata({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined }
+}): Promise<Metadata> {
+  const language = (searchParams.language as string) || 'fr'
+  return {
+    title: `${metaTitles.quiz[language]} | Impact CO₂`,
+    description: metaDescriptions.quiz[language],
+    openGraph: {
+      creators: 'ADEME',
+      images: 'meta/quiz.png',
+    },
+  }
+}
+
+const page = () => {
+  return (
+    <>
+      <QuizPage />
+      <Suggestion from='/outils/quiz' fromLabel='Quiz carbone' simulatorName='du quiz carbone' />
+    </>
+  )
+}
+
+export default page

app/pdf/[tool]/[equivalent]/recto/page.tsx

@@ -0,0 +1,20 @@
+import { notFound } from 'next/navigation'
+import React from 'react'
+import { categories } from 'data/categories'
+import Recto from 'components/outils/equivalents/pdf/Recto'
+import 'components/outils/equivalents/pdf/pdf.css'
+
+const EquivalentPage = ({ params }: { params: { tool: string; equivalent: string } }) => {
+  const category = categories.find((category) => category.slug === params.tool)
+  if (!category || !category.equivalents) {
+    return notFound()
+  }
+  const [slug] = decodeURIComponent(params.equivalent).split('+')
+  const equivalent = category.equivalents.find((equivalent) => equivalent.slug === slug)
+  if (!equivalent) {
+    return notFound()
+  }
+  return <Recto equivalent={equivalent} />
+}
+
+export default EquivalentPage

app/pdf/[tool]/[equivalent]/verso/page.tsx

@@ -0,0 +1,28 @@
+import { notFound } from 'next/navigation'
+import React from 'react'
+import { ParamProvider } from 'src/providers/ParamProvider'
+import TranslationProvider from 'src/providers/TranslationProvider'
+import { categories } from 'data/categories'
+import Verso from 'components/outils/equivalents/pdf/Verso'
+import 'components/outils/equivalents/pdf/pdf.css'
+
+const EquivalentPage = ({ params }: { params: { tool: string; equivalent: string } }) => {
+  const category = categories.find((category) => category.slug === params.tool)
+  if (!category || !category.equivalents) {
+    return notFound()
+  }
+  const [slug] = decodeURIComponent(params.equivalent).split('+')
+  const equivalent = category.equivalents.find((equivalent) => equivalent.slug === slug)
+  if (!equivalent) {
+    return notFound()
+  }
+  return (
+    <ParamProvider>
+      <TranslationProvider>
+        <Verso equivalent={equivalent} category={category} />
+      </TranslationProvider>
+    </ParamProvider>
+  )
+}
+
+export default EquivalentPage

docker-compose.yml

@@ -1,4 +1,3 @@
-version: '3'
 services:
   db:
     image: postgres:16

npm/react/README.md

@@ -262,12 +262,12 @@ Liste des équivalents à comparer parmis la liste suivante :
   - visioconference : Heure de visioconférence
   - telechargement : go de donnée
 - Cas pratique
-  - avionpny : A/R paris - New-York en avion
-  - tgvparis-berlin" : A/R Paris - Berlin en tgv
-  - tgvparis-marseille" : A/R Paris - Marseille en tgv
-  - voiturelille-nimes" : A/R Lille - Nîmes en voiture
+  - avion-pny : A/R paris - New-York en avion
+  - tgv-paris-berlin" : A/R Paris - Berlin en tgv
+  - tgv-paris-marseille" : A/R Paris - Marseille en tgv
+  - voiture-lille-nimes" : A/R Lille - Nîmes en voiture
   - francais : % de l'empreinte carbone d'un citoyen français
-  - gameof-thrones : épisode de game of thrones en streaming
+  - game-of-thrones : épisode de game of thrones en streaming
   - friends : intégrale de friends en streaming
   - ski : journée au ski
   - piscine : remplissage de piscine

package.json

@@ -71,21 +71,15 @@
     "postcss-preset-env": "^10.0.5",
     "preact": "^10.24.0",
     "publicodes": "1.4.0",
+    "qrcode": "^1.5.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-flip-toolkit": "^7.2.4",
-    "react-highlight-words": "^0.20.0",
     "react-notion-x": "^6.16.0",
-    "react-range": "^1.10.0",
-    "react-responsive-carousel": "^3.2.23",
     "react-share": "^5.1.0",
-    "react-slick": "^0.30.2",
-    "react-switch": "^7.0.0",
     "sharp": "^0.33.5",
     "swagger-jsdoc": "^6.2.8",
     "swagger-ui-react": "^5.17.14",
     "ts-node": "^10.9.2",
-    "use-query-params": "^2.2.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -110,6 +104,8 @@
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/jest": "^29.5.13",
+    "@types/node-pdftk": "^2.1.9",
+    "@types/qrcode": "^1.5.5",
     "@types/react-highlight-words": "^0.20.0",
     "@types/react-slick": "^0.23.13",
     "@types/swagger-jsdoc": "^6.0.4",
@@ -134,7 +130,9 @@
     "next-test-api-route-handler": "^4.0.11",
     "nock": "^13.5.5",
     "node-mocks-http": "^1.16.0",
+    "node-pdftk": "^2.1.3",
     "nyc": "^17.1.0",
+    "pdf-merger-js": "^5.1.2",
     "playwright": "^1.47.1",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.3.3",

public/iframe.js.LICENSE.txt

@@ -1,7 +1,7 @@
 /*!
  *  @preserve
  *  
- *  @module      iframe-resizer/parent 5.2.6 (umd) - 2024-08-22
+ *  @module      iframe-resizer/parent 5.3.1 (umd) - 2024-09-12
  *
  *  @license     GPL-3.0 for non-commercial use only.
  *               For commercial use, you must purchase a license from