Merge pull request #30 from SocialGouv/maxgfr/azerty

.gitignore

@@ -41,4 +41,7 @@ yarn-error.log*
 
 # Cypress
 cypress/videos
-cypress/screenshots
+cypress/screenshots
+
+# Robots.txt
+robots.txt

.socialgouv/chart/values.project.yaml

@@ -0,0 +1,3 @@
+# here you can customize your deployment according to : https://github.com/SocialGouv/actions/blob/master/autodevops-helm-deploy/chart/values.yaml
+app:
+  probesPath: /healthz

Dockerfile

@@ -30,11 +30,7 @@ RUN if [ -z "$PRODUCTION" ]; then \
       echo "Overriding .env for staging"; \
       cp .env.staging .env.production; \
     fi && \
-    yarn build:export \
-    && if [ -z "$PRODUCTION" ]; then \
-      echo "Overriding robots.txt for staging"; \
-      mv ./out/robots.staging.txt ./out/robots.txt; \
-    fi
+    yarn build:export 
 
 # Production image, copy all the files and run next
 FROM ghcr.io/socialgouv/docker/nginx:6.70.1 AS runner

README.md

@@ -1,4 +1,66 @@
 # template
 
-Storybook URL : <https://socialgouv.github.io/template/>
-Production URL : <https://template.fabrique.social.gouv.fr/>
+Template est une application [next](https://nextjs.org/) développée par la [Fabrique des ministères sociaux](https://www.fabrique.social.gouv.fr/).
+
+Version en production du projet : <https://template.social.gouv.fr/>.
+
+Storybook liés à la branche principale du projet : <https://socialgouv.github.io/template/>.
+
+## Description
+
+### D'un point de vue fonctionnel
+
+Ce template est composé de page :
+
+- Page principale
+- Politique de confidentialité
+- Mention légale avec une référence à l'accessibilité
+- Conditions générales d'utilisation
+- Statistiques d'utilisation (fonctionnant avec matomo)
+- Healthz
+- Page 404
+
+### D'un point de vue technique
+
+- [react-dsfr](https://dataesr.github.io/react-dsfr/) pour l'utilisation du [design système de l'état](https://www.systeme-de-design.gouv.fr/)
+- [next-seo](https://github.com/garmeeh/next-seo) pour gérer les balises meta au sein de l'application
+- [storybook](https://storybook.js.org/) permettant de réaliser des stories pour les composants
+- [@testing-library](https://testing-library.com/) pour tester de manière unitaire les composants
+- [jest](https://jestjs.io/) pour tester de manière unitaire le code
+- [cypress](https://www.cypress.io/) pour tester en e2e le frontend
+- [matomo](https://matomo.org/) pour sauvegarder de manière anonyme les statistiques d'utilisation
+- [sentry](https://sentry.io/) pour gérer les erreurs
+
+#### Gestion des environnements
+
+Les variables issues des docker build-args, sont à utiliser dans `next.config.js`, pour les autres, il faut les définir dans les différents [`.env.*`](https://nextjs.org/docs/basic-features/environment-variables#environment-variable-load-order).
+
+Le fichier `.env.staging` est utilisé pour les environnements de review et de pré-production.
+
+:warning: Les variables d'environnement sont publiques (utilisée durant le build), ne commitez donc pas de variables privées dans ces fichiers.
+
+## Lancer le code
+
+Après avoir cloné le projet :
+
+### Développement
+
+```bash
+yarn
+yarn dev
+```
+
+### Production
+
+```bash
+yarn
+yarn build
+yarn export
+```
+
+## Todo
+
+- Ajouter des CSP
+- Husky pour avant de commit faire des verifications
+- Finir la documentation, en mode si vous créez un fichier faut le mettre là, etc.
+- Rajouter une config sur <https://github.com/SocialGouv/linters> un linter pour next 12 et accessibilité plugin

next.config.js

@@ -12,6 +12,7 @@ const moduleExports = {
   env: {
     NEXT_PUBLIC_APP_VERSION: version,
     NEXT_PUBLIC_APP_VERSION_COMMIT: process.env.GITHUB_SHA,
+    NEXT_PUBLIC_IS_PRODUCTION_DEPLOYMENT: process.env.PRODUCTION,
   },
 };
 

package.json

@@ -4,8 +4,8 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "prebuild": "node -r @swc-node/register scripts/prebuild.ts",
     "build": "next build",
-    "postbuild": "next-sitemap",
     "start": "next start",
     "lint": "next lint",
     "export": "next export",
@@ -41,6 +41,7 @@
     "@storybook/addon-links": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
+    "@swc-node/register": "^1.4.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@types/node": "17.0.13",
@@ -51,7 +52,6 @@
     "eslint-plugin-storybook": "^0.5.7",
     "gh-pages": "^3.2.3",
     "jest": "^27.5.1",
-    "next-sitemap": "^2.1.14",
     "start-server-and-test": "^1.14.0",
     "typescript": "4.6.2"
   }

public/sitemap.xml

@@ -1,4 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-<sitemap><loc>https://template.fabrique.social.gouv.fr/sitemap-0.xml</loc></sitemap>
-</sitemapindex>
+<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>1</priority>
+    <lastmod>2021-12-25T10:22:17.507Z</lastmod>
+  </url>
+</urlset>

scripts/__tests__/prebuild.test.ts

@@ -0,0 +1,27 @@
+import { filePath, generateRobotsTxt } from "../prebuild";
+import fs from "fs";
+
+jest.mock("fs");
+
+describe("robots.txt", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it("should generate production robots.txt", () => {
+    const host = "localhost";
+    const robotsProd = [
+      "User-agent: *",
+      "Allow: /",
+      "",
+      `Sitemap: https://${host}/sitemap.xml`,
+    ].join("\n");
+    generateRobotsTxt(true, host);
+    expect(fs.writeFileSync).toHaveBeenCalledWith(filePath, robotsProd);
+  });
+  it("should generate development robots.txt", () => {
+    const host = "localhost";
+    const robotsDev = ["User-agent: *", "Disallow: /"].join("\n");
+    generateRobotsTxt(false, host);
+    expect(fs.writeFileSync).toHaveBeenCalledWith(filePath, robotsDev);
+  });
+});

scripts/prebuild.ts

@@ -0,0 +1,28 @@
+import path from "path";
+import fs from "fs";
+
+export const filePath = path.join(__dirname, "../public/robots.txt");
+
+export const generateRobotsTxt = (isOnProduction: boolean, host: string) => {
+  const robotsDev = ["User-agent: *", "Disallow: /"].join("\n");
+  const robotsProd = [
+    "User-agent: *",
+    "Allow: /",
+    "",
+    `Sitemap: https://${host}/sitemap.xml`,
+  ].join("\n");
+
+  const robot = isOnProduction ? robotsProd : robotsDev;
+
+  fs.writeFileSync(filePath, robot);
+};
+
+const run = () => {
+  generateRobotsTxt(
+    process.env.NEXT_PUBLIC_IS_PRODUCTION_DEPLOYMENT ? true : false,
+    process.env.NEXT_PUBLIC_SITE_URL ?? "localhost"
+  );
+  console.log("Robots.txt generated.");
+};
+
+run();

src/components/footer/body.tsx

@@ -17,7 +17,9 @@ export const Body = (props: FooterBodySectionProps): JSX.Element => (
     )}
     {props.links?.map((link, index) => (
       <FooterBodyItem key={`${index}-${link.title}`}>
-        <Link href={link.href}>{link.title}</Link>
+        <Link href={link.href} target="_blank">
+          {link.title}
+        </Link>
       </FooterBodyItem>
     ))}
   </FooterBody>

src/components/index.ts

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

src/components/mention/index.ts

@@ -0,0 +1 @@
+export * from "./part";

src/components/mention/part.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { MentionPart } from "./part";
+
+export default {
+  title: "MentionPart",
+  component: MentionPart,
+} as ComponentMeta<typeof MentionPart>;
+
+const Template: ComponentStory<typeof MentionPart> = args => (
+  <MentionPart {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Random title",
+  description:
+    "Non id incididunt labore enim amet cupidatat et quis in tempor ipsum ad velit cillum.",
+};
+
+export const WithChildren = Template.bind({});
+WithChildren.args = {
+  title: "Random title",
+  description:
+    "Non id incididunt labore enim amet cupidatat et quis in tempor ipsum ad velit cillum.",
+  children: <div>Hello world</div>,
+};

src/components/mention/part.tsx

@@ -0,0 +1,16 @@
+export type MentionPartProps = {
+  title: string;
+  description: string;
+  children?: React.ReactNode | React.ReactNode[];
+  divProps?: React.HTMLAttributes<HTMLDivElement>;
+};
+
+export const MentionPart = (props: MentionPartProps): JSX.Element => {
+  return (
+    <div className="fr-mt-3w" {...props.divProps}>
+      <h2>{props.title}</h2>
+      <p className="fr-mb-2w">{props.description}</p>
+      {props.children}
+    </div>
+  );
+};

src/components/stats/index.ts

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

src/components/stats/tile.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { StatsTile } from "./tile";
+
+export default {
+  title: "StatsTile",
+  component: StatsTile,
+} as ComponentMeta<typeof StatsTile>;
+
+const Template: ComponentStory<typeof StatsTile> = args => (
+  <StatsTile {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Nombre de visites",
+  stats: "1.000.000",
+  description: "C'est le nombre d'utilisateur unique ayant visité le site",
+};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  title: "Nombre de visites",
+  stats: "1.000.000",
+  description: "C'est le nombre d'utilisateur unique ayant visité le site",
+};

src/components/stats/tile.tsx

@@ -0,0 +1,23 @@
+export type StatsTileProps = {
+  title: string;
+  stats: string | number;
+  description?: string | React.ReactNode;
+};
+
+export const StatsTile = (props: StatsTileProps): JSX.Element => {
+  return (
+    <div className="fr-col-12 fr-col-md-3">
+      <div className="fr-card fr-centered fr-card--no-arrow">
+        <div className="fr-card__body">
+          <strong className="fr-display-xs">{props.stats}</strong>
+          <h2 className="fr-card__title fr-mb-4w">{props.title}</h2>
+          {props.description && (
+            <div className="fr-card__desc">
+              <p>{props.description}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};