fix: Ajuste some CSS rules and next config for images

apps/website/components/blog-search/blog-search.tsx

@@ -55,7 +55,7 @@ export function BlogSearch(props: BlogSearchProps) {
   const onSearchChange = (e) => subject.next(e.target.value);
 
   return (
-    <div className={styles['container'] + " rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm" +
+    <div className={styles['container'] + " rounded-lg mx-2 md:mx-0 mt-5 md:mt-0 p-5 mb-5 shadow-sm" +
       " bg-white" +
       " dark:bg-gray-800"}>
       <form>

apps/website/components/card-blog-details/card-blog-details.tsx

@@ -14,7 +14,7 @@ import {
 } from "react-share";
 
 import styles from './card-blog-details.module.scss';
-import {getCategoryUrl, getPostUrl, getStrapiImage} from "../../libs/utils";
+import {contentfulImageLoader, getCategoryUrl, getPostUrl, getStrapiImage} from "../../libs/utils";
 
 /* eslint-disable-next-line */
 export interface CardBlogDetailsProps {
@@ -26,7 +26,7 @@ export function CardBlogDetails({item = {}}: CardBlogDetailsProps) {
   const {title} = item;
   const shareUrl = getPostUrl(item);
   return (
-    <div className={styles['container'] + " rounded-l p-8 overflow-hidden shadow-sm" +
+    <div className={styles['container'] + " rounded-l p-4 md:p-8 overflow-hidden shadow-sm" +
       " bg-white" +
       " dark:bg-gray-800"}>
       <header className="md:flex flex-col">
@@ -59,14 +59,13 @@ export function CardBlogDetails({item = {}}: CardBlogDetailsProps) {
             text-gray-600
             dark:text-gray-300"
                dangerouslySetInnerHTML={{__html: delve(item, 'description', 'N/A')}} />
-          <NextImage
+          {<NextImage
-            layout="responsive"
+            loader={contentfulImageLoader}
             width={width}
             height={height}
-            objectFit="contain"
             className="rounded-lg my-5"
             src={getStrapiImage(item, "default")}
-            alt={delve(item, 'title', 'N/A')} />
+            alt={delve(item, 'title', 'N/A')} />}
         </section>
         <section className="whitespace-pre-wrap text-lg text-slate-400"
                  dangerouslySetInnerHTML={{__html: delve(item, 'content', 'N/A')}} />

apps/website/components/card-blog/card-blog.tsx

@@ -11,16 +11,16 @@ export interface CardBlogProps {
 
 export function CardBlog({item}: CardBlogProps) {
   return (
-    <div className={styles['card-blog-container'] + " rounded-l overflow-hidden shadow-sm" +
+    <div className={styles['card-blog-container'] + " rounded-lg overflow-hidden shadow-sm" +
       " bg-white" +
       " dark:bg-gray-800"}>
       <div className="md:flex">
         <div className="md:shrink-0">
-          <img className="h-48 w-full object-cover md:h-full md:w-48"
+          <img className="h-48 w-full object-cover md:h-full md:w-48 rounded-t-lg"
                src={getStrapiImage(item, 'medium')}
                alt="Modern building architecture" />
         </div>
-        <div className="p-8 w-full">
+        <div className="p-4 md:p-8 w-full">
           <div className="flex justify-between items-center">
             <span
               className="font-light text-sm

apps/website/components/categories/categories.tsx

@@ -15,7 +15,7 @@ export interface CategoriesProps {
 export function Categories({items = []}: CategoriesProps) {
   return (
     <div
-      className={styles['container'] + " rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm" +
+      className={styles['container'] + " rounded-lg mx-2 md:mx-0 mt-5 md:mt-0 p-5 mb-5 shadow-sm" +
         " bg-white" +
         " dark:bg-gray-800"}>
       <div className="flex items-center justify-between mb-4">

apps/website/components/footer/footer.tsx

@@ -6,7 +6,7 @@ export function Footer({items = []}) {
     const value = delve(item, 'attributes', {});
 
     return (
-      <li key={value.title + index}>
+      <li key={value.title + index} className="my-1">
         <a href={value.url} target={value.target} className="mr-4 hover:underline md:mr-6 ">
           {value.title}
         </a>

apps/website/components/home-section-blog-une/home-section-blog-une.module.scss

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

apps/website/components/home-section-blog-une/home-section-blog-une.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import HomeSectionBlogUne from './home-section-blog-une';
+
+describe('HomeSectionBlogUne', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<HomeSectionBlogUne />);
+    expect(baseElement).toBeTruthy();
+  });
+});

apps/website/components/home-section-blog-une/home-section-blog-une.tsx

@@ -0,0 +1,75 @@
+import {format} from "date-fns";
+import NextImage from "next/image";
+import delve from 'dlv';
+
+import {contentfulImageLoader, getCategoryUrl, getPostUrl, getStrapiImage, getStrapiImageSize} from "../../libs/utils";
+
+/* eslint-disable-next-line */
+export interface HomeSectionBlogUneProps {
+  item: object;
+}
+
+export function HomeSectionBlogUne({item}: HomeSectionBlogUneProps) {
+  const [width, height] = getStrapiImageSize(item);
+
+  return (
+    <>
+      <div className="rounded-lg overflow-hidden shadow-sm
+      bg-white
+      dark:bg-gray-800">
+        <div className="flex justify-between items-center absolute left-5 top-5">
+            <span
+              className="font-bold shadow text-white text-sm">{format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}</span>
+        </div>
+        <div className="flex justify-between items-center absolute right-5 top-5">
+          <a href={getCategoryUrl(item)}
+             className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
+            {delve(item, 'attributes.category.data.attributes.name', 'N/A')}
+          </a>
+        </div>
+
+        {<NextImage
+          loader={contentfulImageLoader}
+          width={width}
+          height={height}
+          className="rounded-t-lg"
+          src={getStrapiImage(item)}
+          alt={delve(item, '0.title', 'N/A')} />}
+
+        <main className="p-5">
+          <div className="mt-2">
+            <a
+              href={getPostUrl(item)}
+              className="text-xl font-bold hover:underline
+                  text-gray-700
+                  dark:text-gray-200">
+              {delve(item, 'attributes.title', 'N/A')}
+            </a>
+            <p className="mt-2 font-light text-sm
+                text-gray-600
+                dark:text-gray-300">{delve(item, 'attributes.description', 'N/A')}</p>
+          </div>
+
+          <div className="flex justify-between items-center mt-4">
+            <a href={getPostUrl(item)}
+               className="text-blue-500 text-sm hover:underline">Lire l'article</a>
+            <div>
+              <a href="#"
+                 className="flex items-center">
+                <img
+                  src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
+                  alt="avatar"
+                  className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
+                <h3 className="text-normal font-bold hover:underline
+                    text-gray-700
+                    dark:text-gray-300">Alex John</h3>
+              </a>
+            </div>
+          </div>
+        </main>
+      </div>
+    </>
+  );
+}
+
+export default HomeSectionBlogUne;

apps/website/components/home-section-blog/home-section-blog.tsx

@@ -1,10 +1,7 @@
 /* eslint-disable-next-line */
-import NextImage from "next/image";
+import {getStrapiImageSize} from "../../libs/utils";
-import delve from 'dlv';
-
-import {getCategoryUrl, getPostUrl, getStrapiImage, getStrapiImageSize} from "../../libs/utils";
 import CardBlog from "../card-blog/card-blog";
-import {format} from "date-fns";
+import HomeSectionBlogUne from "../home-section-blog-une/home-section-blog-une";
 
 export interface HomeSectionBlogProps {
   posts: object[];
@@ -13,66 +10,11 @@ export interface HomeSectionBlogProps {
 export function HomeSectionBlog({posts = []}: HomeSectionBlogProps) {
   const firstArticle = posts.length > 0 ? posts.slice(0, 1) : [];
   const otherArticles = posts.length > 0 ? posts.slice(1, posts.length) : [];
-  const [width, height] = getStrapiImageSize(firstArticle[0]);
   return (
     <>
       <section className="container max-w-6xl relative mx-auto relative flex flex-col md:flex-row mb-10 h-auto">
         <div className="w-12/12 md:w-6/12 px-4 mb-4 md:mb-0 md:px-0 md:pr-2">
-          <div className="block border rounded-lg shadow-sm h-full my-2 mx-2 sm:my-0 sm:mx-0 relative
+          <HomeSectionBlogUne item={firstArticle[0]} />
-          bg-white border-gray-200
-          dark:bg-gray-800 dark:border-gray-800 dark:hover:bg-gray-800">
-            <div className="flex justify-between items-center absolute left-5 top-5">
-            <span
-              className="font-bold shadow text-white text-sm">{format(new Date(delve(firstArticle[0], 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}</span>
-            </div>
-            <div className="flex justify-between items-center absolute right-5 top-5">
-              <a href={getCategoryUrl(firstArticle[0])}
-                 className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
-                {delve(firstArticle[0], 'attributes.category.data.attributes.name', 'N/A')}
-              </a>
-            </div>
-
-            <NextImage
-              layout="responsive"
-              width={width}
-              height={height}
-              objectFit="contain"
-              className="rounded-t"
-              src={getStrapiImage(firstArticle[0])}
-              alt={delve(firstArticle, '0.title', 'N/A')} />
-
-            <main className="p-5">
-              <div className="mt-2">
-                <a
-                  href={getPostUrl(firstArticle[0])}
-                  className="text-xl font-bold hover:underline
-                  text-gray-700
-                  dark:text-gray-200">
-                  {delve(firstArticle[0], 'attributes.title', 'N/A')}
-                </a>
-                <p className="mt-2 font-light text-sm
-                text-gray-600
-                dark:text-gray-300">{delve(firstArticle[0], 'attributes.description', 'N/A')}</p>
-              </div>
-
-              <div className="flex justify-between items-center mt-4">
-                <a href={getPostUrl(firstArticle[0])}
-                   className="text-blue-500 text-sm hover:underline">Lire l'article</a>
-                <div>
-                  <a href="#"
-                     className="flex items-center">
-                    <img
-                      src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
-                      alt="avatar"
-                      className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
-                    <h3 className="text-normal font-bold hover:underline
-                    text-gray-700
-                    dark:text-gray-300">Alex John</h3>
-                  </a>
-                </div>
-              </div>
-            </main>
-          </div>
         </div>
         <div className="w-12/12 md:w-6/12 px-4 md:px-0 md:pl-2">
           {otherArticles.map((item: object, index: number) => (<CardBlog key={"home-card-blog-" + index}

apps/website/components/home-section-cards-header/home-section-cards-header.tsx

@@ -33,7 +33,7 @@ export function HomeSectionCardsHeader(props: HomeSectionCardsHeaderProps) {
         </section>
 
         <section className="relative w-full">
-          <h2 className="font-bold w-full text-center my-5 text-2xl mx-auto text-teal-800">MeCP fournit tout les outils nécessaire pour un apprentissage de qualité</h2>
+          <h2 className="font-bold w-full text-center my-5 text-2xl px-4 md:px-0 mx-2 mx-auto text-teal-800">MeCP fournit tout les outils nécessaire pour un apprentissage de qualité</h2>
 
           <div className="grid grid-cols-3 gap-2 md:gap-4 max-w-4xl mx-auto px-2 md:px-0">
             <div className="text-center flex flex-col transition scale-75

apps/website/components/home-section-video/home-section-video.tsx

@@ -10,7 +10,7 @@ export function HomeSectionVideo(props: HomeSectionVideoProps) {
         <h2 className="font-bold w-full text-center mt-5 text-2xl mx-auto text-blue-800">
           Démonstration en vidéo
         </h2>
-        <p className="text-lg text-gray-500 mb-10 text-center">Rien ne vaut une démonstration pour convaincre !</p>
+        <p className="text-lg text-gray-500 mb-10 text-center px-4 md:px-0">Rien ne vaut une démonstration pour convaincre !</p>
 
         <iframe src="https://embed.api.video/vod/vi2JpEFEClejM7A4hhn6i7fU"
                 width="90%"

apps/website/components/last-articles/last-articles.tsx

@@ -12,7 +12,7 @@ export interface LastArticlesProps {
 export function LastArticles({items = []}: LastArticlesProps) {
   return (
     <div
-      className={styles['container'] + "rounded-lg mx-2 lg:mx-0 mt-5 lg:mt-0 p-5 mb-5 shadow-sm" +
+      className={styles['container'] + " rounded-lg mx-2 md:mx-0 mt-5 md:mt-0 p-5 mb-5 shadow-sm" +
         " bg-white" +
         " dark:bg-gray-800"}>
       <div className="flex items-center justify-between mb-4">
@@ -21,14 +21,14 @@ export function LastArticles({items = []}: LastArticlesProps) {
       <div className="flow-root">
         <ul role="list" className="divide-y divide-gray-200 dark:divide-gray-700">
           {items.map((item: object, index: number) => (<li key={'last-articles-' + index} className="py-3 sm:py-4">
-            <div className="flex items-center space-x-4">
+            <div className="flex items-start space-x-4">
-              <div className="flex-shrink-0">
+              <div className="flex-shrink-0 relative">
-                <img className="w-[85px] h-[75px] rounded-lg"
+                <img className="w-[85px] h-[75px] rounded-lg relative top-1"
                      src={environment.strapiUrl + delve(item, 'attributes.image.data.attributes.formats.medium.url', '')}
                      alt="Neil image"/>
               </div>
               <div className="flex-1 min-w-0">
-                <p className="text-xl font-medium text-gray-900 dark:text-white">
+                <p className="sm:text-normal lg:text-xl font-medium text-gray-900 dark:text-white">
                   {delve(item, 'attributes.title', 'N/A')}
                 </p>
                 <p className="text-sm text-gray-500 dark:text-gray-400">

apps/website/libs/utils.ts

@@ -1,9 +1,13 @@
 import delve from 'dlv';
+import {ImageLoader, ImageLoaderProps} from "next/image";
 
 import {environment} from "../environments/environment";
 
 export type ImageFormatType = "default" | "thumbnail" | "medium" | "small";
 
+export const contentfulImageLoader: ImageLoader = ({ src, width }: ImageLoaderProps) => {
+  return `${src}?w=${width}`
+}
 export const getCategoryUrl = (item): string => {
   const categorySlug = !delve(item, 'attributes', null) ? delve(item, 'category.data.attributes.slug', '') : delve(item, 'attributes.category.data.attributes.slug', '');
   return '/blog/' + categorySlug;
@@ -16,7 +20,6 @@ export const getPostUrl = (item): string => {
 
 export const getStrapiImage = (item, format: ImageFormatType = 'default') => {
   const image = !delve(item, 'attributes', null) ? delve(item, 'image.data.attributes', {}) : delve(item, 'attributes.image.data.attributes', {});
-  console.log(item, image);
   switch (format) {
     case "default":
       return environment.strapiUrl + delve(image, "url", "/images/default.png");

apps/website/next.config.js

@@ -26,8 +26,8 @@ const nextConfig = {
         hostname: 'admin.mcep.nasercloud.fr',
       }
     ],
-    domains: ["localhost", "127.0.0.1"],
+    domains: ["localhost", "127.0.0.1", "admin.mcep.nasercloud.fr", "mcep.nasercloud.fr"],
-  },
+  }
 };
 
 module.exports = withNx(nextConfig);

apps/website/pages/blog/[category_slug]/[post_slug].tsx

@@ -36,12 +36,12 @@ export function PostBlog({menuHeader, menuFooter, seo, categories, post, lastPub
     <>
       <SeoConfig {...seo}/>
       <Layout menuHeader={menuHeader} menuFooter={menuFooter} headerTransparent={true}>
-        <main className={styles['blog-container'] + " w-full lg:my-10"}>
+        <main className={styles['blog-container'] + " w-full my-4 px-2 lg:px-0"}>
-          <section className="container max-w-screen-xl mx-auto relative flex flex-col lg:flex-row">
+          <section className="container max-w-screen-xl mx-auto relative flex flex-col md:flex-row">
-            <section className="grow lg:basis-4/6 mx-2 lg:mx-0 lg:pr-5">
+            <section className="grow md:basis-4/6 mx-2 lg:mx-0 lg:pr-5">
               <CardBlogDetails item={post}/>
             </section>
-            <aside className="grow lg:basis-2/6">
+            <aside className="grow md:basis-2/6">
               <BlogSearch/>
               <Categories items={categories}/>
               <LastArticles items={lastPublished}/>

apps/website/pages/blog/[category_slug]/index.tsx

@@ -46,9 +46,9 @@ export function CategoryBlog({menuHeader, menuFooter, seo, categories, category,
     <>
       <SeoConfig {...seo}/>
       <Layout menuHeader={menuHeader} menuFooter={menuFooter} headerTransparent={true}>
-        <main className={styles['blog-container'] + " w-full lg:my-10"}>
+        <main className={styles['blog-container'] + " w-full my-4 px-2 lg:px-0"}>
-          <section className="container max-w-screen-xl mx-auto relative flex">
+          <section className="container max-w-screen-xl mx-auto relative flex flex-col md:flex-row">
-            <section className="grow lg:basis-4/6 mx-2 lg:mx-0 lg:pr-5">
+            <section className="grow md:basis-4/6 mx-2 lg:mx-0 lg:pr-5">
               <h3 className="text-2xl font-bold mb-5">{category.name}</h3>
               {posts.length === 0 && (
                 <p>Aucun article n'a été posté dans cette catégorie pour l'instant</p>
@@ -62,7 +62,7 @@ export function CategoryBlog({menuHeader, menuFooter, seo, categories, category,
                 <BlogPagination paginator={paginator}/>
               </footer>)}
             </section>
-            <aside className="grow lg:basis-2/6">
+            <aside className="grow md:basis-2/6">
               <BlogSearch/>
               <Categories items={categories}/>
               <LastArticles items={lastPublished}/>

apps/website/pages/blog/index.tsx

@@ -35,9 +35,9 @@ export function Blog({menuHeader, menuFooter, seo, categories, lastPublished, pa
     <>
       <SeoConfig {...seo}/>
       <Layout menuHeader={menuHeader} menuFooter={menuFooter} headerTransparent={true}>
-        <main className={styles['blog-container'] + " w-full lg:my-10"}>
+        <main className={styles['blog-container'] + " w-full my-4 px-2 lg:px-0"}>
-          <section className="container max-w-screen-xl mx-auto relative flex">
+          <section className="container max-w-screen-xl mx-auto relative flex flex-col md:flex-row">
-            <section className="grow lg:basis-4/6 mx-2 lg:mx-0 lg:pr-5">
+            <section className="grow md:basis-4/6 mx-2 md:mx-0 md:pr-5">
               {lastPublished.map((post, index: number) => (
                 <CardBlog key={'card-blog-' + post.id + index} item={post}/>))
               }
@@ -46,7 +46,7 @@ export function Blog({menuHeader, menuFooter, seo, categories, lastPublished, pa
                 <BlogPagination paginator={paginator}/>
               </footer>)}
             </section>
-            <aside className="grow lg:basis-2/6">
+            <aside className="grow md:basis-2/6">
               <BlogSearch/>
               <Categories items={categories}/>
             </aside>