add 2 subject & add matomo analytics

2026-06-03 15:07:30 +02:00 · 2026-04-26 20:49:12 +02:00
parent 8cd17b0aec
commit 3b56eea776
7 changed files with 264 additions and 102 deletions
@@ -1,11 +1,9 @@
 services:
-  web:
+  nextjs:
    build: .
+    container_name: learn-app
    ports:
-      - "3000:3000"
-    volumes:
-      - ./:/app
-      - /app/node_modules
+      - "${WEB_PORT}:3000"
    environment:
-      - NODE_ENV=development
-    command: npm run dev
+      - NODE_ENV=${NODE_ENV}
+    restart: unless-stopped
@@ -67,12 +67,6 @@ export default async function SujetPage({ params }: { params: { slug: string } }
                <ReactMarkdown>{section.content}</ReactMarkdown>
              </div>
            </section>
-            {/* Emplacement pub entre sections (après la première section) */}
-            {idx === 0 && (
-              <div className="ad-inpage my-8 flex justify-center">
-                <div className="bg-zinc-100 rounded p-2 text-xs text-zinc-500">[Publicité In-Page 336x280]</div>
-              </div>
-            )}
          </React.Fragment>
        ))}
      </main>
@@ -1,9 +1,58 @@
 export default function Contact() {
  return (
-    <main className="max-w-2xl mx-auto py-12 px-4">
-      <h1 className="text-3xl font-bold mb-4 text-black">Contact</h1>
-      <p className="mb-4 text-zinc-700">Pour toute question ou demande, contactez-nous à l’adresse suivante :</p>
-      <a href="mailto:contact@sujets-populaires.fr" className="text-blue-700 underline">contact@sujets-populaires.fr</a>
+    <main className="max-w-2xl mx-auto py-16 px-6">
+      <h1 className="text-4xl font-bold mb-6 text-zinc-900">
+        Contact
+      </h1>
+
+      <p className="text-zinc-600 mb-10 leading-relaxed">
+        Une question, une suggestion ou une demande professionnelle ?
+        Vous pouvez nous contacter facilement via les options ci-dessous.
+        Nous faisons de notre mieux pour répondre rapidement.
+      </p>
+
+      <div className="space-y-6">
+        {/* Email */}
+        <div className="p-6 rounded-xl border border-zinc-200 bg-white shadow-sm hover:shadow-md transition">
+          <h2 className="text-lg font-semibold mb-2 text-zinc-900">
+            Par email
+          </h2>
+          <p className="text-zinc-600 mb-3">
+            Contactez-nous directement par email :
+          </p>
+          <a
+            href="mailto:contact@arthurp.fr"
+            className="text-blue-600 font-medium hover:underline break-all"
+          >
+            contact@arthurp.fr
+          </a>
+        </div>
+
+        {/* Formulaire externe */}
+        <div className="p-6 rounded-xl border border-zinc-200 bg-white shadow-sm hover:shadow-md transition">
+          <h2 className="text-lg font-semibold mb-2 text-zinc-900">
+            Formulaire de contact
+          </h2>
+          <p className="text-zinc-600 mb-3">
+            Utilisez notre formulaire pour une demande plus détaillée :
+          </p>
+          <a
+            href="https://contact.arthurp.fr"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-block text-blue-600 font-medium hover:underline"
+          >
+            Accéder au formulaire →
+          </a>
+        </div>
+      </div>
+
+      {/* Footer note */}
+      <div className="mt-12 text-sm text-zinc-500">
+        <p>
+          Merci de ne pas envoyer de spam. Les messages non pertinents peuvent être ignorés.
+        </p>
+      </div>
    </main>
  );
 }
@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
+import Script from "next/script";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import Link from 'next/link';
-import sujets from '@/data/sujets.json';
+import Link from "next/link";
+import sujets from "@/data/sujets.json";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -21,49 +22,74 @@ export const metadata: Metadata = {

 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
    <html lang="fr">
+      <head>
+        <Script id="matomo" strategy="afterInteractive">
+          {`
+            var _paq = window._paq = window._paq || [];
+
+            _paq.push(['setCustomUrl', window.location.href]);
+            _paq.push(['trackPageView']);
+            _paq.push(['enableLinkTracking']);
+
+            (function() {
+              var u="https://analytics.arthurp.fr/";
+              _paq.push(['setTrackerUrl', u+'matomo.php']);
+              _paq.push(['setSiteId', '5']);
+              var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+              g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+            })();
+          `}
+        </Script>
+      </head>
+
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased bg-zinc-50`}>
-        <header className="w-full bg-white shadow mb-8 relative">
-          {/* Emplacement pub header */}
-          <div className="w-full flex justify-center bg-zinc-100 py-2">
-            {/* AdSense : remplacer par le script réel */}
-            <div className="ad-header text-xs text-zinc-500">[Publicité Header 728x90]</div>
-          </div>
+        <header className="w-full bg-white shadow mb-8">
          <nav className="max-w-5xl mx-auto flex flex-wrap items-center justify-between py-4 px-6">
-            <Link href="/" className="text-2xl font-bold text-blue-700">Sujets Populaires</Link>
+            <Link href="/" className="text-2xl font-bold text-blue-700">
+              Sujets Populaires
+            </Link>
+
            <ul className="flex flex-wrap gap-4">
              {sujets.map((s) => (
                <li key={s.slug}>
-                  <Link href={`/${s.slug}`} className="text-zinc-700 hover:underline">
-                    {s.title.split(':')[0]}
+                  <Link
+                    href={`/${s.slug}`}
+                    className="text-zinc-700 hover:underline"
+                  >
+                    {s.title.split(":")[0]}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </header>
-        <div className="flex max-w-5xl mx-auto w-full">
-          {/* Sidebar pub desktop */}
-          <aside className="hidden lg:block w-56 shrink-0 mt-4">
-            <div className="sticky top-24">
-              <div className="ad-sidebar bg-zinc-100 rounded p-2 text-xs text-zinc-500 mb-4">[Publicité Sidebar 300x600]</div>
-            </div>
-          </aside>
-          <main className="min-h-[70vh] flex-1">{children}</main>
-        </div>
+
+        <main className="max-w-5xl mx-auto w-full min-h-[70vh] px-4">
+          {children}
+        </main>
+
        <footer className="w-full bg-zinc-100 py-6 mt-12 border-t border-zinc-200">
          <div className="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center px-6 gap-2">
-            <div className="text-zinc-600 text-sm">© {new Date().getFullYear()} Sujets Populaires. Tous droits réservés.</div>
-            <div className="flex gap-4 text-sm">
-              <Link href="/contact" className="hover:underline text-zinc-700">Contact</Link>
-              <Link href="/politique-confidentialite" className="hover:underline text-zinc-700">Politique de confidentialité</Link>
+            <div className="text-zinc-600 text-sm">
+              © {new Date().getFullYear()} Sujets Populaires. Tous droits réservés.
+            </div>
+
+            <div className="flex gap-4 text-sm">
+              <Link href="/contact" className="hover:underline text-zinc-700">
+                Contact
+              </Link>
+              <Link
+                href="/politique-confidentialite"
+                className="hover:underline text-zinc-700"
+              >
+                Politique de confidentialité
+              </Link>
            </div>
-            {/* Emplacement pub footer */}
-            <div className="ad-footer text-xs text-zinc-500 mt-4">[Publicité Footer 728x90]</div>
          </div>
        </footer>
      </body>
@@ -197,8 +197,14 @@
    "slug": "cryptomonnaies-avenir",
    "title": "Cryptomonnaies : Révolution, Risques, Applications et Futur de la Finance",
    "description": "Analyse complète et approfondie des cryptomonnaies : définition, fonctionnement, avantages, risques, adoption mondiale, régulation, impact sur l’économie et la société, et perspectives futures.",
-  "image1": { "src": "/images/crypto-bitcoin.webp", "alt": "Pièce de Bitcoin sur fond numérique représentant les cryptomonnaies" },
-  "image2": { "src": "/images/crypto-blockchain.webp", "alt": "Chaîne de blocs blockchain stylisée symbolisant la technologie des cryptomonnaies" },
+    "image1": {
+      "src": "/images/crypto-bitcoin.webp",
+      "alt": "Pièce de Bitcoin sur fond numérique représentant les cryptomonnaies"
+    },
+    "image2": {
+      "src": "/images/crypto-blockchain.webp",
+      "alt": "Chaîne de blocs blockchain stylisée symbolisant la technologie des cryptomonnaies"
+    },
    "sections": [
      {
        "h2": "Qu’est-ce qu’une cryptomonnaie ?",
@@ -251,6 +257,95 @@
        "content": "Peut-on perdre tout son argent ? Oui, le risque est élevé.\nFaut-il être expert en informatique ? Non, mais comprendre les bases et sécuriser ses wallets est crucial.\nLes cryptos remplaceront-elles les monnaies traditionnelles ? Probablement pas à court terme, mais elles coexisteront comme alternative.\nQuelle crypto acheter ? Bitcoin reste la référence, Ethereum et certains altcoins présentent de l’innovation.\nPeut-on utiliser les cryptos pour les paiements quotidiens ? Oui, de plus en plus de commerçants et services acceptent BTC et stablecoins."
      }
    ]
-}
-
+  },
+  {
+    "slug": "seo-referencement-google",
+    "title": "SEO : Guide Complet pour Être Premier sur Google en 2026",
+    "description": "Guide ultra complet sur le SEO : fonctionnement de Google, optimisation technique, contenu, backlinks et stratégies pour améliorer son référencement naturel.",
+    "image1": {
+      "src": "/images/seo.webp",
+      "alt": "Graphique de croissance du trafic SEO sur Google"
+    },
+    "sections": [
+      {
+        "h2": "Qu’est-ce que le SEO ?",
+        "content": "Le SEO, ou Search Engine Optimization, désigne l’ensemble des techniques visant à améliorer la visibilité d’un site web sur les moteurs de recherche comme Google. Contrairement à la publicité payante, le SEO repose sur un trafic organique durable. Il s’agit d’optimiser un site pour qu’il apparaisse dans les premiers résultats lorsque les utilisateurs recherchent des informations. Le SEO est aujourd’hui un levier essentiel pour toute présence en ligne, qu’il s’agisse d’un blog, d’un site e-commerce ou d’une application web."
+      },
+      {
+        "h2": "Comment fonctionne Google",
+        "content": "Google utilise des robots appelés crawlers pour explorer le web. Ces robots analysent les pages, les indexent puis les classent en fonction de centaines de critères. Parmi ces critères figurent la pertinence du contenu, la qualité des liens, la vitesse du site et l’expérience utilisateur. L’algorithme de Google évolue constamment, intégrant des technologies comme l’intelligence artificielle pour mieux comprendre l’intention de recherche des utilisateurs."
+      },
+      {
+        "h2": "Le SEO technique",
+        "content": "Le SEO technique concerne l’optimisation de la structure du site. Cela inclut la vitesse de chargement, l’accessibilité mobile, la structure des URLs, le sitemap, le fichier robots.txt et la sécurité HTTPS. Un site rapide et bien structuré facilite le travail des moteurs de recherche et améliore l’expérience utilisateur."
+      },
+      {
+        "h2": "Le contenu SEO",
+        "content": "Le contenu est au cœur du SEO. Google privilégie les contenus utiles, pertinents et bien structurés. Il est important d’utiliser des mots-clés stratégiques, mais aussi de répondre réellement aux questions des utilisateurs. Les articles longs, détaillés et bien organisés ont généralement de meilleures performances."
+      },
+      {
+        "h2": "Les backlinks",
+        "content": "Les backlinks sont des liens provenant d’autres sites vers le vôtre. Ils sont considérés comme des votes de confiance par Google. Plus un site reçoit de liens de qualité, plus il gagne en crédibilité. Cependant, tous les liens ne se valent pas : la qualité prime sur la quantité."
+      },
+      {
+        "h2": "L’expérience utilisateur",
+        "content": "Google prend de plus en plus en compte l’expérience utilisateur. Un site agréable, rapide et facile à naviguer a plus de chances d’être bien classé. Les Core Web Vitals sont des indicateurs clés pour mesurer cette expérience."
+      },
+      {
+        "h2": "Stratégies avancées SEO",
+        "content": "Les stratégies avancées incluent le maillage interne, l’optimisation sémantique, la création de clusters de contenu et l’analyse des concurrents. Ces techniques permettent de renforcer l’autorité globale du site."
+      },
+      {
+        "h2": "Erreurs à éviter",
+        "content": "Le duplicate content, le keyword stuffing et les liens de mauvaise qualité peuvent pénaliser un site. Il est important de respecter les bonnes pratiques pour éviter les sanctions de Google."
+      },
+      {
+        "h2": "L’avenir du SEO",
+        "content": "Le SEO évolue avec l’intelligence artificielle et la recherche vocale. Les contenus devront être encore plus qualitatifs et centrés sur l’utilisateur."
+      }
+    ]
+  },
+  {
+    "slug": "auto-hebergement",
+    "title": "Auto-hébergement : Guide Ultime pour Héberger ses Services chez soi",
+    "description": "Apprenez à auto-héberger vos services : serveur personnel, Docker, sécurité, avantages et limites.",
+    "image1": {
+      "src": "/images/selfhost.webp",
+      "alt": "Serveur domestique auto-hébergé avec plusieurs services"
+    },
+    "sections": [
+      {
+        "h2": "Qu’est-ce que l’auto-hébergement",
+        "content": "L’auto-hébergement consiste à héberger soi-même ses services numériques plutôt que de dépendre d’entreprises comme Google ou Amazon. Cela inclut le stockage de fichiers, le streaming, les emails ou encore les applications web. Cette approche permet un contrôle total des données et une meilleure confidentialité."
+      },
+      {
+        "h2": "Pourquoi auto-héberger",
+        "content": "Les motivations principales sont la confidentialité, l’indépendance et la personnalisation. L’utilisateur garde le contrôle de ses données et peut adapter ses services à ses besoins."
+      },
+      {
+        "h2": "Le matériel nécessaire",
+        "content": "Un serveur peut être un simple PC, un NAS ou une machine dédiée. Les performances dépendent des usages : streaming, virtualisation ou simple stockage."
+      },
+      {
+        "h2": "Docker et virtualisation",
+        "content": "Docker permet de déployer facilement des applications dans des conteneurs isolés. C’est aujourd’hui l’outil de référence pour l’auto-hébergement."
+      },
+      {
+        "h2": "Sécurité",
+        "content": "L’auto-hébergement nécessite de sécuriser son réseau : firewall, VPN, mises à jour régulières et surveillance des accès."
+      },
+      {
+        "h2": "Services populaires",
+        "content": "Nextcloud pour le cloud, Jellyfin pour le streaming, Pi-hole pour le blocage des pubs, et WireGuard pour le VPN."
+      },
+      {
+        "h2": "Limites",
+        "content": "L’auto-hébergement demande du temps, des compétences techniques et une maintenance régulière."
+      },
+      {
+        "h2": "Conclusion",
+        "content": "L’auto-hébergement est une solution puissante pour reprendre le contrôle de son numérique, mais nécessite un investissement personnel."
+      }
+    ]
+  }
 ]