Hotfix: Nom des dossiers + Ajout /functions/slug
Divlo
0
backend/.gitignore → api/.gitignore
vendored
BIN
api/assets/images/functions/calculateAge.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
api/assets/images/functions/convertCurrency.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
api/assets/images/functions/randomNumber.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
api/assets/images/functions/weatherRequest.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 140 KiB |
|
Before Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 91 KiB |
@ -12,10 +12,15 @@ const FunctionCard = forwardRef((props, ref) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link href={`/functions/${props.slug}`}>
|
<Link
|
||||||
{/* Elément à une hauteur pendant chargement */}
|
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"}>
|
<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" />}
|
{isLoading && <Loader width="125px" height="125px" />}
|
||||||
|
|
||||||
<div className={`FunctionCard__container ${isLoading ? "d-none" : ""}`}>
|
<div className={`FunctionCard__container ${isLoading ? "d-none" : ""}`}>
|
||||||
<div className="FunctionCard__top">
|
<div className="FunctionCard__top">
|
||||||
<img onLoad={handleLoad} className="FunctionCard__image" alt={props.title} src={props.image} />
|
<img onLoad={handleLoad} className="FunctionCard__image" alt={props.title} src={props.image} />
|
||||||
@ -2,7 +2,7 @@ import Head from 'next/head';
|
|||||||
|
|
||||||
const HeadTag = ({ title, image, description }) => (
|
const HeadTag = ({ title, image, description }) => (
|
||||||
<Head>
|
<Head>
|
||||||
<title>{title}</title>
|
<title>{title || ""}</title>
|
||||||
<link rel="icon" type="image/png" href={image} />
|
<link rel="icon" type="image/png" href={image} />
|
||||||
|
|
||||||
{/* Meta Tag */}
|
{/* Meta Tag */}
|
||||||
26
website/pages/functions/[slug].js
Normal file
@ -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;
|
||||||
@ -1,11 +1,11 @@
|
|||||||
import { Fragment, useState, useEffect, useRef, useCallback } from 'react';
|
import { Fragment, useState, useEffect, useRef, useCallback } from 'react';
|
||||||
import HeadTag from '../components/HeadTag';
|
import HeadTag from '../../components/HeadTag';
|
||||||
import FunctionCard from '../components/FunctionCard/FunctionCard';
|
import FunctionCard from '../../components/FunctionCard/FunctionCard';
|
||||||
import Loader from '../components/Loader';
|
import Loader from '../../components/Loader';
|
||||||
import '../public/css/pages/functions.css';
|
import '../../public/css/pages/functions.css';
|
||||||
import { API_URL } from '../config/config';
|
import { API_URL } from '../../config/config';
|
||||||
import api from '../config/api';
|
import api from '../../config/api';
|
||||||
import useAPI from '../hooks/useAPI';
|
import useAPI from '../../hooks/useAPI';
|
||||||
|
|
||||||
const Functions = () => {
|
const Functions = () => {
|
||||||
|
|
||||||