feat: blog

components/BlogCard.js

@@ -0,0 +1,29 @@
+import Link from "next/link"
+
+const BlogCard = ({ imageUrl, title, articleUrl, date }) => {
+  return (
+    <Link href={articleUrl} passHref>
+      <div className="flex flex-col rounded-3xl bg-gray-100 shadow-lg mt-0 h-full">
+        <div className="flex-shrink-0 w-full h-56 rounded-3xl overflow-hidden shadow-xl">
+          <img
+            src={imageUrl}
+            alt={title}
+            className="object-cover w-full h-full"
+          />
+        </div>
+        <div className="flex flex-col flex-grow p-4">
+          <h3 className="lg:text-xl font-bold text-black text-left overflow-hidden">
+            {title}
+          </h3>
+          <div className="mt-auto">
+            <p className="text-xs lg:text-base text-gray-400 text-left">
+              {date}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+export default BlogCard

components/Footer.js

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { FaPhoneAlt } from "react-icons/fa"
 import {
   ANDROID_URL,
@@ -12,7 +12,13 @@ import ContactPopup from "./ContactPopup"
 
 export default function Footer() {
   const [showContactPopup, setShowContactPopup] = useState(false)
+  const [baseUrl, setBaseUrl] = useState("")
 
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setBaseUrl(window.location.origin)
+    }
+  }, [])
   return (
     <>
       {/* Popup and overlay on top of the page */}
@@ -85,7 +91,7 @@ export default function Footer() {
             />
             <ArrowList text="Statistiques" link="/stats" />
             <p className="mt-5 text-sm font-light">
-              Accessibilité : non conforme
+              Accessibilité : partiellement conforme
             </p>
           </div>
           <div className="max-w-md col-span-4 mb-8 lg:col-span-3">
@@ -97,14 +103,14 @@ export default function Footer() {
               <a href={ANDROID_URL}>
                 <img
                   className="object-contain"
-                  src="images/other/google-play-fr.png"
+                  src={`${baseUrl}/images/other/google-play-fr.png`}
                   alt="Disponible sur Google Play"
                 />
               </a>
               <a href={IOS_URL}>
                 <img
                   className="object-contain"
-                  src="images/other/app-store-fr.png"
+                  src={`${baseUrl}/images/other/app-store-fr.png`}
                   alt="Télécharger dans l'App Store"
                 />
               </a>
@@ -117,28 +123,28 @@ export default function Footer() {
               <a href={INSTAGRAM_URL}>
                 <img
                   className="object-contain w-[40px]"
-                  src="images/icon/instagram.svg"
+                  src={`${baseUrl}/images/icon/instagram.svg`}
                   alt="Vers profil instagram"
                 />
               </a>
               <a href={FACEBOOK_URL}>
                 <img
                   className="object-contain w-[40px]"
-                  src="images/icon/facebook.svg"
+                  src={`${baseUrl}/images/icon/facebook.svg`}
                   alt="Vers profil facebook"
                 />
               </a>
               <a href={TWITTER_URL}>
                 <img
                   className="object-contain w-[40px]"
-                  src="images/icon/X.svg"
+                  src={`${baseUrl}/images/icon/X.svg`}
                   alt="Vers profil twitter"
                 />
               </a>
               <a href={LINKEDIN_URL}>
                 <img
                   className="object-contain w-[40px]"
-                  src="images/icon/linkedin.svg"
+                  src={`${baseUrl}/images/icon/linkedin.svg`}
                   alt="Vers profil linkedin"
                 />
               </a>

components/Navigation.js

@@ -65,6 +65,7 @@ export default function Navigation({ showPopup, setShowPopup }) {
               setIsOpen={setIsOpen}
               onClick={() => setShowContactPopup(true)}
             /> */}
+            <Link name="Blog" target="/blog" setIsOpen={setIsOpen} />
             <ContactPopupTrigger setShowPopup={setShowContactPopup} />
             <DownloadPopupTrigger setShowPopup={setShowPopup} />
           </div>

content/reussir-son-dry-january-avec-oz-ensemble.mdx

@@ -0,0 +1,58 @@
+---
+title: "Réussir son Dry January avec Oz Ensemble"
+slug: "reussir-son-dry-january-avec-oz-ensemble"
+order: 1
+category: "Santé et bien-être"
+image: ../images/articles/dry-january-wiki.png
+date: Decembre 13, 2023
+description: "Le Dry January est une campagne de santé publique qui consiste à s'abstenir de boire de l'alcool pendant tout le mois de janvier. Pour réussir ce défi personnel, il est important de comprendre ses motivations. Il est aussi utile d'identifier les déclencheurs de sa consommation et de trouver des alternatives saines. Planifier des activités sans alcool et obtenir le soutien social de ses proches peuvent aider. L'application Oz Ensemble est un outil précieux pour gérer sa consommation, fixer des objectifs réalistes, recevoir des récompenses, trouver du soutien dans une communauté et accéder à des ressources informatives. Le Dry January est une occasion de repenser sa relation avec l'alcool, d'améliorer sa santé et de découvrir de nouvelles activités enrichissantes."
+---
+
+## Prendre le contrôle : Comprendre le Dry January
+
+Le Dry January, ou Défi de janvier, est un mouvement qui a commencé au Royaume-Uni et qui gagne en popularité à travers le monde. L'idée est simple : s'abstenir de consommer de l'alcool pendant tout le mois de janvier. Cette pratique a pour but de remettre en question les habitudes de consommation, de donner un break à son corps après les excès souvent associés à la période des fêtes, et de bénéficier de plusieurs avantages pour la santé.
+
+Pour réussir votre Dry January, il est essentiel de comprendre pourquoi vous souhaitez le faire. Est-ce pour tester votre volonté, améliorer votre santé, économiser de l'argent ou simplement pour vous sentir mieux au quotidien ? Définir vos motivations personnelles peut vous aider à rester sur la bonne voie.
+
+## Stratégies pour réduire la tentation
+
+### Identifier les déclencheurs et les alternatives
+
+L'un des premiers pas pour modérer sa consommation d'alcool est d'identifier ce qui vous pousse à boire. Est-ce par habitude, pour socialiser, ou en réponse au stress ? Une fois ces déclencheurs identifiés, cherchez des alternatives plus saines pour votre corps telles que le sport, la méditation ou des activités créatives.
+
+### Planifier des activités “Sans alcool”
+
+Organisez ou participez à des activités qui ne tournent pas autour de l'alcool. Que ce soit des soirées de jeux de société, des séances de cinéma à la maison, ou des sorties en plein air, le but est de remplir votre agenda avec des loisirs qui ne comprennent pas la notion de consommation de substances psychoactives.
+
+### Soutien de votre entourage
+
+Faites savoir à votre entourage que vous participez au Dry January. Le soutien de vos amis et de votre famille peut être un facteur de succès dans votre essai de participer à cette campagne. De plus, vous pourriez inspirer d'autres personnes à se joindre à vous dans ce défi.
+
+## Utiliser l'App Oz Ensemble pour maitriser votre consommation
+
+### Auto-évaluez vos habitudes de consommation.
+
+L’application vous permet d’évaluer votre situation et votre niveau de risque grâce aux tests et bilans personnalisés fiables mis à disposition gratuitement.
+
+### Définissez vos objectifs et mesurez vos gains au fil du temps.
+
+L’application vous permet de vous fixer des objectifs et de suivre votre réduction de consommation d’alcool grâce à un agenda de consommation. Au fil du temps, découvrez également vos économies en euros et les calories évitées.
+
+### Réalisez des activités stimulantes.
+
+L’application propose des exercices à réaliser en autonomie pour accroître votre motivation à changer vos habitudes et vous aider à arrêter de boire ou à réduire votre consommation.
+
+### Trouvez des conseils pertinents.
+
+Vous trouverez dans cette application des étapes à suivre, des conseils et des informations spécifiques validées scientifiquement pour vous accompagner. Ces articles sont élaborés par des professionnels de l’équipe Oz Ensemble pour vous apprendre à gérer les situations difficiles et vous aider à tenir vos objectifs pour réduire votre consommation ou dire stop à l’alcool.
+
+### Échanger gratuitement avec un professionnel.
+
+S’il vous faut plus d’aide, n’hésitez pas à consulter gratuitement et anonymement nos professionnels de santé en visio. Vous pourrez prendre un rendez-vous à distance avec un professionnel de l’addiction de l’équipe clinique Oz Ensemble.
+
+## Ressources et Informations
+
+Pour ceux qui désirent approfondir leur connaissance sur les effets de l'alcool et les stratégies de réduction de consommation, l'application fournit de nombreuses ressources informatives. Vous pouvez ainsi vous informer et rester motivé grâce à des conseils pratiques et scientifiques.
+
+Pour plus d'informations sur le Dry January et des témoignages inspirants, n'hésitez pas à visiter [France Info](https://www.francetvinfo.fr/sante/drogue-addictions/defi-de-janvier-48-addictologues-a-soutenir-le-gouvernement-a-soutenir-le-mois-sans-alcool_6238209.html) pour découvrir des reportages sur le sujet. Pour vous informer sur le sujet du Dry January, vous pouvez également suivre cette [vidéo](https://www.youtube.com/watch?v=8zj-JEeflIE&ab_channel=C%C3%A0vous).
+Le Dry January est une opportunité de repenser sa relation avec l'alcool, d'améliorer sa santé et de découvrir de nouvelles activités enrichissantes. Avec les conseils et astuces présentés, ainsi que le soutien de l'application Oz Ensemble, vous êtes bien armés pour faire de ce défi personnel une réussite. Bonne chance !

package.json

@@ -10,10 +10,17 @@
     "@mui/material": "^5.11.6",
     "@next/font": "13.1.6",
     "@socialgouv/matomo-next": "^1.2.2",
+    "@types/mdx": "^2.0.10",
+    "fs": "^0.0.1-security",
+    "gray-matter": "^4.0.3",
     "next": "13.1.6",
+    "next-compose-plugins": "^2.2.1",
+    "next-mdx-remote": "^4.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-icons": "^4.7.1"
+    "react-icons": "^4.7.1",
+    "rehype": "^13.0.1",
+    "remark": "^15.0.1"
   },
   "scripts": {
     "dev": "next dev",

pages/_app.js

@@ -31,7 +31,7 @@ class MyApp extends App {
             key="index"
           />
           <meta charset="UTF-8" />
-          <title key="download">Télécharger OzEnsemble</title>
+          <title key="download">Télécharger Oz Ensemble</title>
           <meta property="og:url" content={`${ROOT_URL}/download`} />
           <meta property="og:image" content="/images/logo_oz.png" />
           <meta property="og:type" content="article" />

pages/blog/[blog].js

@@ -0,0 +1,87 @@
+import React from "react"
+import Navigation from "../../components/Navigation"
+import Footer from "../../components/Footer"
+import { serialize } from "next-mdx-remote/serialize"
+import { MDXRemote } from "next-mdx-remote"
+import Head from "next/head"
+import fs from "fs"
+import path from "path"
+import matter from "gray-matter"
+import { HiChevronLeft } from "react-icons/hi"
+import styles from "../../style/bloga.module.css"
+
+const Blog = ({ mdxSource, data }) => {
+  return (
+    <>
+      <Head>
+        <title>{data.title} | Blog | Oz Ensemble</title>
+        <meta name="description" content={data.description} />
+        <meta property="og:title" content={data.title} />
+        <meta property="og:description" content={data.description} />
+        <meta property="og:image" content={data.image} />
+      </Head>
+      <Navigation />
+      <div className="p-4 lg:pt-16 sm:mx-20 xl:mx-auto xl:w-[1100px]">
+        <div className="mb-6 text-oz-pink">
+          <a
+            className="flex items-center text-primary-1-2 hover:text-primary"
+            href="/blog"
+          >
+            <HiChevronLeft className="mr-1 text-base lg:text-xl" />
+            <span className="lg:text-xl">Retour</span>
+          </a>
+        </div>
+        <h2 className="font-bold text-4xl lg:text-4xl text-oz-blue p-4 md:px-16">
+          {data.title}
+        </h2>
+        <p className="lg:text-base text-gray-400 p-4 md:px-16 mb-10">
+          {data.date}
+        </p>
+        {data.image && (
+          <img
+            className="w-full h-auto rounded-3xl"
+            src={data.image}
+            alt={data.title}
+          />
+        )}
+      </div>
+
+      <div
+        className={`p-10 sm:rounded-xl md:rounded-3xl sm:mx-20 xl:mx-auto xl:w-[1100px] mb-12 text-base ${styles.blogContent}`}
+      >
+        <MDXRemote {...mdxSource} />
+      </div>
+      <Footer />
+    </>
+  )
+}
+
+export async function getStaticProps({ params }) {
+  const filePath = path.join(process.cwd(), "content", `${params.blog}.mdx`)
+  const fileContents = fs.readFileSync(filePath, "utf-8")
+  const { content, data } = matter(fileContents)
+  const mdxSource = await serialize(content)
+
+  return {
+    props: {
+      mdxSource,
+      data,
+    },
+  }
+}
+
+export async function getStaticPaths() {
+  const directoryPath = path.join(process.cwd(), "content")
+  const filenames = fs.readdirSync(directoryPath)
+
+  const paths = filenames.map((filename) => ({
+    params: { blog: filename.replace(".mdx", "") },
+  }))
+
+  return {
+    paths,
+    fallback: false,
+  }
+}
+
+export default Blog

pages/blog/index.js

@@ -0,0 +1,72 @@
+import React from "react"
+import fs from "fs"
+import path from "path"
+import matter from "gray-matter"
+import { serialize } from "next-mdx-remote/serialize"
+import Head from "next/head"
+import Navigation from "../../components/Navigation"
+import Footer from "../../components/Footer"
+import BlogCard from "../../components/BlogCard"
+
+const Index = ({ posts }) => {
+  return (
+    <>
+      <Head>
+        <title>Blog | Oz Ensemble</title>
+        <meta property="og:title" content="Blog | Oz EEnsemble" />
+      </Head>
+      <div className="flex flex-col min-h-screen">
+        <Navigation />
+        <div className="flex-grow py-16 mx-[10%] sm:mx-20 h-auto">
+          <div className="w-full mx-auto xl:w-[1100px]">
+            <h3 className="mb-16 text-4xl xl:text-5xl font-bold text-center lg:text-4xl text-oz-blue">
+              Nos derniers posts
+            </h3>
+
+            <div className="grid grid-cols-1 gap-6 lg:grid-cols-3 text-center">
+              {posts
+                .sort((a, b) => a.order - b.order)
+                .map((post) => (
+                  <BlogCard
+                    key={post.slug}
+                    imageUrl={post.image}
+                    title={post.title}
+                    date={post.date}
+                    articleUrl={`/blog/${post.slug}`}
+                  />
+                ))}
+            </div>
+          </div>
+        </div>
+        <Footer />
+      </div>
+    </>
+  )
+}
+
+export async function getStaticProps() {
+  const files = fs.readdirSync(path.join(process.cwd(), "content"))
+
+  const posts = await Promise.all(
+    files
+      .filter((fn) => fn.endsWith(".mdx"))
+      .map(async (filename) => {
+        const filePath = path.join(process.cwd(), "content", filename)
+        const rawContent = fs.readFileSync(filePath, "utf8")
+        const { content, data } = matter(rawContent)
+        const mdxSource = await serialize(content)
+
+        return {
+          ...data,
+          slug: filename.replace(".mdx", ""),
+          mdxSource,
+        }
+      })
+  )
+
+  return {
+    props: { posts },
+  }
+}
+
+export default Index

pages/download-link.js

@@ -15,10 +15,10 @@ const download = () => {
   return (
     <Head>
       <meta charset="UTF-8" />
-      <title>Télécharger OzEnsemble</title>
+      <title>Télécharger Oz Ensemble</title>
       <meta
         property="og:title"
-        content="Télécharger OzEnsemble"
+        content="Télécharger Oz Ensemble"
         key="download"
       />
       <meta

pages/download.js

@@ -15,10 +15,10 @@ const download = () => {
   return (
     <Head>
       <meta charset="UTF-8" />
-      <title>Télécharger OzEnsemble</title>
+      <title>Télécharger Oz Ensemble</title>
       <meta
         property="og:title"
-        content="Télécharger OzEnsemble"
+        content="Télécharger Oz Ensemble"
         key="download"
       />
       <meta