Hotfix: Nom des dossiers + Ajout /functions/slug

website/components/FunctionCard/FunctionCard.js

@@ -12,10 +12,15 @@ const FunctionCard = forwardRef((props, ref) => {
     }
 
     return (
-        <Link href={`/functions/${props.slug}`}>
-            {/* Elément à une hauteur pendant chargement */}
+        <Link 
+            href={"/functions/[slug]"} 
+            as={`/functions/${props.slug}`}
+        >
+            {/* FunctionCard a une hauteur pendant chargement */}
             <div ref={ref} style={isLoading ? { height: "360px", justifyContent: "center" } : null} className={"FunctionCard col-sm-24 col-md-10 col-xl-7"}>
+
                 {isLoading && <Loader width="125px" height="125px" />} 
+
                 <div className={`FunctionCard__container ${isLoading ? "d-none" : ""}`}>
                     <div className="FunctionCard__top">
                         <img onLoad={handleLoad} className="FunctionCard__image" alt={props.title} src={props.image} />

website/components/HeadTag.js

@@ -2,7 +2,7 @@ import Head from 'next/head';
 
 const HeadTag = ({ title, image, description }) => (
     <Head>
-        <title>{title}</title>
+        <title>{title || ""}</title>
         <link rel="icon" type="image/png" href={image} />
 
         {/* Meta Tag */}

website/pages/functions/[slug].js

@@ -0,0 +1,26 @@
+import { Fragment } from 'react';
+import { useRouter } from 'next/router';
+import HeadTag from '../../components/HeadTag';
+import { API_URL } from '../../config/config';
+
+const FunctionComponent = () => {
+
+    const router = useRouter();
+
+    return (
+        <Fragment>
+            <HeadTag 
+                title={router.query.slug}
+                description={router.query.slug}
+                image={`${API_URL}/images/functions/${router.query.slug}.png`} 
+            />
+            <div className="container text-center">
+                <div className="row justify-content-center">
+                    <h1>{router.query.slug}</h1>
+                </div>
+            </div>
+        </Fragment>
+    );
+}
+
+export default FunctionComponent;

website/pages/functions/index.js

@@ -1,11 +1,11 @@
 import { Fragment, useState, useEffect, useRef, useCallback } from 'react';
-import HeadTag from '../components/HeadTag';
-import FunctionCard from '../components/FunctionCard/FunctionCard';
-import Loader from '../components/Loader';
-import '../public/css/pages/functions.css';
-import { API_URL } from '../config/config';
-import api from '../config/api';
-import useAPI from '../hooks/useAPI';
+import HeadTag from '../../components/HeadTag';
+import FunctionCard from '../../components/FunctionCard/FunctionCard';
+import Loader from '../../components/Loader';
+import '../../public/css/pages/functions.css';
+import { API_URL } from '../../config/config';
+import api from '../../config/api';
+import useAPI from '../../hooks/useAPI';
 
 const Functions = () => {