front/src/pages/ArticlePage.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import NavBar from '../components/NavBar';
+import Footer from '../components/Footer';
 
 interface Article {
     id: string;
@@ -7,6 +9,7 @@ interface Article {
     content: string;
     author: string;
     publishedAt: string;
+    editedAt: string;
 }
 
 const ArticlePage: React.FC = () => {
@@ -36,17 +39,38 @@ const ArticlePage: React.FC = () => {
     }
 
     return (
-        <div>
-            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages8.alphacoders.com%2F438%2F438396.jpg&f=1&nofb=1&ipt=14796576c139b58db62d2d2098392ef2fbaee77911040f7c0d98ab65a69c4644&ipo=images" alt="Article preview" style={{
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100vh'
+        }}>
+            <NavBar/>
+            <div style={{
                 borderRadius: '8px',
-                width: '100%',
-                height: 'auto',
-                marginBottom: '10px',
-            }} />
-            <h1>{article.title}</h1>
-            <p>{article.content}</p>
-            <p>By {article.author}</p>
-            <p>Published on {new Date(article.publishedAt).toLocaleDateString()}</p>
+                color: 'var(--color-black)',
+                fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
+                fontSize: '14px',
+                lineHeight: '20px',
+                padding: '1.25em',
+                paddingBottom: '1em',
+                textAlign: 'left',
+                maxWidth: '60rem',
+                margin: 'auto',
+            }}>
+                <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages8.alphacoders.com%2F438%2F438396.jpg&f=1&nofb=1&ipt=14796576c139b58db62d2d2098392ef2fbaee77911040f7c0d98ab65a69c4644&ipo=images" alt="Article preview" style={{
+                    borderRadius: '8px',
+                    width: '100%',
+                    height: 'auto',
+                    marginBottom: '10px',
+                }} />
+                <div>
+                    <h1>{article.title}</h1>
+                    <p>écrit par {article.author} le {new Date(article.publishedAt).toLocaleDateString()} (Dernière modification le : {new Date(article.editedAt || article.publishedAt).toLocaleDateString()})</p>
+                    <hr/>
+                    <p>{article.content}</p>
+                </div>
+            </div>
+            <Footer bgcolor='lightblue'/>
         </div>
     );
 };

front/src/pages/MainPage.tsx

@@ -11,7 +11,6 @@ export default function MainPage() {
                 txtbt1="Un" 
                 txtbt2="Deux" 
                 image="url('/pictures/sea.gif')"/>
-            <div style={{height:"30px"}} />
             <ArticlesSection />
             <Footer bgcolor="lightblue"/>
         </div>

front/vite.config.ts

@@ -4,4 +4,13 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:2486',
+        changeOrigin: true,
+        rewrite: path => path.replace(/^\/api/, '')
+      }
+    }
+  }
 })