Huge update

.eslintrc

@@ -1,5 +1,8 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": ["next/core-web-vitals", "plugin:mdx/recommended"],
+  "settings": {
+    "mdx/code-blocks": true,
+  },
   "rules": {
     "react-hooks/rules-of-hooks": "warn",
   },

.md.eslintrc

@@ -0,0 +1,10 @@
+{
+  "extends": ["next/core-web-vitals", "plugin:mdx/recommended"],
+  "settings": {
+    "mdx/code-blocks": true,
+  },
+  "rules": {
+    "react-hooks/rules-of-hooks": "warn",
+    "react/jsx-no-undef": "warn",
+  },
+}

.remarkrc.mjs

@@ -0,0 +1,27 @@
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkLintFrontmatterSchema from 'remark-lint-frontmatter-schema';
+
+const remarkConfig = {
+  plugins: [
+    remarkFrontmatter,
+    [
+      remarkLintFrontmatterSchema,
+      {
+        schemas: {
+          './content/fiche.schema.yaml': ['./src/content/fiches/**/*.{md,mdx}'],
+          './content/lexique.schema.yaml': [
+            './src/content/lexique/**/*.{md,mdx}',
+          ],
+          './content/personas.schema.yaml': [
+            './src/content/personas/**/*.{md,mdx}',
+          ],
+          './content/home.schema.yaml': ['./src/content/home/**/*.{md,mdx}'],
+          './content/default.schema.yaml': [
+            './src/content/mentionsLegales/**/*.{md,mdx}',
+          ],
+        },
+      },
+    ],
+  ],
+};
+export default remarkConfig;

app/globals.css

@@ -127,20 +127,43 @@
 
   /**** LIST ****/
   .content ul,
-  .markdown-content ul {
+  .markdown-content ul,
+  .content ol,
+  .markdown-content ol {
     @apply list-none break-words;
     -webkit-hyphens: auto;
     hyphens: auto;
   }
+  .content ul,
+  .content ol,
+  .markdown-content ul,
+  .markdown-content ol {
+    @apply ml-8;
+  }
+  /* ONLY FOR THE FIRST UL */
+  .content > ul,
+  .markdown-content > ul {
+    @apply ml-0;
+  }
+  .content > ol,
+  .markdown-content > ol {
+    @apply ml-10;
+  }
   .content li,
   .markdown-content li {
     @apply mb-2 list-none before:relative before:top-[0.4rem] before:float-left before:mr-2 before:inline-block before:h-3.5 before:w-3.5 before:rounded-full before:rounded-tr-3xl before:bg-primary before:content-[''];
-    ul {
-      @apply ml-8;
-      li {
-        @apply mb-2 list-none before:relative before:top-[0.4rem] before:float-left before:mr-2 before:inline-block before:h-3.5 before:w-3.5 before:rounded-full before:rounded-tr-3xl before:border-2 before:border-primary before:bg-transparent before:content-[''];
-      }
-    }
+  }
+  .content li li,
+  .markdown-content li li {
+    @apply before:border-2 before:border-primary before:bg-transparent;
+  }
+  .content ol,
+  .markdown-content ol {
+    @apply list-decimal break-words;
+  }
+  .content ol li,
+  .markdown-content ol li {
+    @apply list-decimal before:-left-10 before:-mr-5;
   }
   main .noliststyle li {
     @apply ml-0 list-none;

components/pages/fiche/Card.tsx

@@ -53,23 +53,142 @@ export const FicheCard: FunctionComponent<FicheCardProps> = ({
     return fiche[`${meta}`]?.replace(regexp, ' ') || 'TBD';
   }
 
-  const getScope = () => {
-    if (getRefConfig().featuresEnabled.scope === true) {
-      return { 'data-scope': slugify(fiche.scope || '') };
+  const getDataFilters = () => {
+    let filters = {};
+    if (getRefConfig().featuresEnabled.lifecycle) {
+      filters = {
+        ...filters,
+        'data-lifecycle': slugify(fiche.lifecycle),
+      };
     }
+    if (getRefConfig().featuresEnabled.scope) {
+      filters = {
+        ...filters,
+        'data-scope': fiche.scope.map((scope) => slugify(scope)).join(', '),
+      };
+    }
+    if (getRefConfig().featuresEnabled.tiers) {
+      filters = {
+        ...filters,
+        'data-tiers': slugify(fiche.tiers),
+      };
+    }
+    if (getRefConfig().featuresEnabled.lifecycle) {
+      filters = {
+        ...filters,
+        'data-saved_resources': fiche.saved_resources
+          .map((saved_resources) => slugify(saved_resources))
+          .join(', '),
+      };
+    }
+    if (getRefConfig().featuresEnabled.moe) {
+      filters = {
+        ...filters,
+        'data-moe': fiche.moe,
+      };
+    }
+    if (getRefConfig().featuresEnabled.priority_implementation) {
+      filters = {
+        ...filters,
+        'data-priority_implementation': fiche.priority_implementation,
+      };
+    }
+    if (getRefConfig().featuresEnabled.environmental_impact) {
+      filters = {
+        ...filters,
+        'data-environmental_impact': fiche.environmental_impact,
+      };
+    }
+    return filters;
+  };
+  const getMetas = () => {
+    const metas: string[] = [];
+    if (
+      getRefConfig().featuresEnabled.priority_implementation === MESURE_ON_5
+    ) {
+      metas.push(
+        t("Priorité d'implémentation") + ': ' + fiche[`priority_implementation`]
+      );
+    }
+    if (
+      getRefConfig().featuresEnabled.priority_implementation === MESURE_ON_3
+    ) {
+      metas.push(
+        t("Priorité d'implémentation") +
+          ': ' +
+          t(fiche[`priority_implementation`])
+      );
+    }
+    if (getRefConfig().featuresEnabled.environmental_impact === MESURE_ON_5) {
+      metas.push(
+        t('Impact environnemental') + ': ' + fiche[`environmental_impact`]
+      );
+    }
+    if (getRefConfig().featuresEnabled.environmental_impact === MESURE_ON_3) {
+      metas.push(
+        t('Impact environnemental') +
+          ': ' +
+          t(cleanImpact('environmental_impact'))
+      );
+    }
+    if (getRefConfig().featuresEnabled.lifecycle) {
+      metas.push(t('lifecycle') + ': ' + t(fiche.lifecycle));
+    }
+    if (getRefConfig().featuresEnabled.tiers) {
+      metas.push(t('tiers') + ': ' + t(fiche.tiers));
+    }
+    if (getRefConfig().featuresEnabled.rgesnField) {
+      metas.push(t('Correspondance RGESN') + ': ' + fiche.rgesn || `-`);
+    }
+    if (getRefConfig().featuresEnabled.moe) {
+      metas.push(t('moe') + ': ' + fiche.moe);
+    }
+    if (getRefConfig().featuresEnabled.saved_resources) {
+      metas.push(
+        t('saved_resources') +
+          ': ' +
+          fiche.saved_resources
+            .map((saved_resources) => t(saved_resources))
+            .join(`, `)
+      );
+    }
+    if (getRefConfig().featuresEnabled.scope) {
+      metas.push(
+        t('scope') + ': ' + fiche.scope.map((scope) => t(scope)).join(`, `)
+      );
+    }
+    return metas.join(`\n`);
   };
   return (
     <div
       className="mb-0 mt-0 flex h-full flex-col justify-between gap-8 text-lg font-bold text-neutral"
-      data-lifecycle={slugify(fiche.lifecycle)}
-      {...getScope()}
-      data-saved_resources={slugify(fiche.saved_resources.join(' '))}>
+      {...getDataFilters()}>
       <h2 className="m-0 flex flex-col items-start gap-2 text-lg font-bold text-neutral md:col-span-1 md:row-span-2 lg:flex-row">
-        <span className="badge mr-2 whitespace-nowrap border-primary bg-primary">
+        <span className="badge mr-2 flex-none whitespace-nowrap border-primary bg-primary">
           {REF_NAME}
           {fiche.refID}
         </span>
-        <span>{fiche.title}</span>
+        <span className="flex-auto">{fiche.title}</span>
+        <button
+          role="img"
+          title={getMetas()}
+          className="size-6 flex-none text-primary">
+          <svg
+            stroke="currentColor"
+            fill="none"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+            height="200px"
+            width="200px"
+            xmlns="http://www.w3.org/2000/svg"
+            className="size-6">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+        </button>
       </h2>
       <div className="flex w-full flex-col gap-2">
         <div className="flex flex-row items-center justify-start gap-2">
@@ -114,7 +233,7 @@ export const FicheCard: FunctionComponent<FicheCardProps> = ({
                 fiche[`environmental_impact`]
               )}`}
               className="text-base">
-              {`${t('Impact environnemental')} : ${
+              {`${t('Impact environnemental')}: ${
                 fiche[`environmental_impact`]
               }`}
             </span>
@@ -124,21 +243,40 @@ export const FicheCard: FunctionComponent<FicheCardProps> = ({
           <span
             title={t('lifecycle')}
             className="badge border-primary text-xs text-neutral">
+            {t('lifecycle')}:{' '}
             {isStringInUi(lang, fiche.lifecycle) && t(fiche.lifecycle)}
           </span>
           {getRefConfig().featuresEnabled.scope === true && (
-            <span
-              title={t('scope')}
-              className="badge border-primary text-xs text-neutral">
-              {isStringInUi(lang, fiche.scope) && t(fiche.scope)}
-            </span>
+            <>
+              {fiche.scope.map((scope) => (
+                <span
+                  title={t('scope')}
+                  className="badge border-primary text-xs text-neutral"
+                  key={scope}>
+                  {t('scope')}: {isStringInUi(lang, scope) && t(scope)}
+                </span>
+              ))}
+            </>
+          )}
+          {getRefConfig().featuresEnabled.tiers === true && (
+            <>
+              <span
+                title={t('tiers')}
+                className="badge border-primary text-xs text-neutral"
+                key={fiche.tiers}>
+                {t('tiers')}:{' '}
+                {isStringInUi(lang, fiche.tiers) && t(fiche.tiers)}
+              </span>
+            </>
           )}
         </div>
-        <div className="flex flex-row items-center justify-start gap-2 text-base text-primary">
-          <span className="">
-            {t('Correspondance RGESN')}: {fiche.rgesn || `-`}
-          </span>
-        </div>
+        {getRefConfig().featuresEnabled.rgesnField === true && (
+          <div className="flex flex-row items-center justify-start gap-2 text-base text-primary">
+            <span className="">
+              {t('Correspondance RGESN')}: {fiche.rgesn || `-`}
+            </span>
+          </div>
+        )}
       </div>
     </div>
   );