chore: upgrade next to 14 and app router and TS (#166)

* chore: upgrade next to 14 and app router

* new og images

* clean

* fix yarnrc.yml

* fix yarnrc.yml again

* .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs

* fix: compiling

* fix: upgrade node

---------

Co-authored-by: Matéo Mévollon <[email protected]>

.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "next"
+  ],
+  "rules": {
+    "react/no-unescaped-entities": "off",
+    "@next/next/no-img-element": "off"
+  }
+}

.yarnrc.yml

@@ -1,9 +1,8 @@
 nodeLinker: node-modules
 
 plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-fetch.cjs
+  - checksum: 240d225dd5bf1e25068497140ced7a3b7658a4c3754c08ea57162c9fe3335d757af0eae55555f96150a3015cdd0337852401f3fae69c1edd05221cb32f038d8c
+    path: .yarn/plugins/@yarnpkg/plugin-fetch.cjs
     spec: "https://codeberg.org/devthefuture/yarn-plugin-fetch/raw/branch/master/bundles/@yarnpkg/plugin-fetch.js"
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
 
-yarnPath: .yarn/releases/yarn-3.7.0.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-alpine as builder
+FROM node:20-alpine as builder
 
 RUN apk add --no-cache gcc autoconf automake build-base libpng-dev nasm
 
@@ -17,8 +17,8 @@ ENV NEXT_PUBLIC_MATOMO_URL="https://matomo.fabrique.social.gouv.fr/"
 ENV NODE_ENV=production
 
 ENV YARN_IGNORE_NODE=1
-RUN yarn build-static
+RUN yarn build
 
 FROM ghcr.io/socialgouv/docker/nginx:8.2.0
 
-COPY --from=builder --chown=nginx:nginx /app/out /usr/share/nginx/html
+COPY --from=builder --chown=nginx:nginx /app/out /usr/share/nginx/html

README.md

@@ -1,6 +1,6 @@
 # ozensemble-site
 
-https://ozensemble.fr
+https://ozensemble.fabrique.social.gouv.fr
 
 ## Env vars
 

app/api/healthz/route.ts

@@ -0,0 +1,5 @@
+import { NextResponse } from "next/server"
+
+export async function GET() {
+  return NextResponse.json({ message: "Hello, world!" })
+}

app/blog/[blog]/layout.tsx

@@ -0,0 +1,57 @@
+import React from "react"
+import Navigation, { DownloadPopupStandalone } from "~/components/Navigation"
+import Footer from "~/components/Footer"
+import fs from "fs"
+import path from "path"
+import matter from "gray-matter"
+import { parse } from "date-fns"
+import { fr } from "date-fns/locale"
+import type { Metadata } from "next"
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { blog: string }
+}): Promise<Metadata> {
+  // read route params
+  const filePath = path.join(process.cwd(), "content", `${params.blog}.mdx`)
+  const fileContents = fs.readFileSync(filePath, "utf-8")
+  const { data } = matter(fileContents)
+
+  const articleDate = parse(data.date, "MMMM d, yyyy", new Date(), {
+    locale: fr,
+  })
+
+  const currentDate = new Date()
+
+  if (articleDate >= currentDate) {
+    return null
+  }
+  return {
+    title: data.title,
+    description: data.description,
+    openGraph: {
+      title: data.title,
+      description: data.description,
+      images: [data.image],
+    },
+  }
+}
+
+export default function BlogLayout({ children }) {
+  return (
+    <>
+      <DownloadPopupStandalone />
+      <Navigation />
+      {children}
+      <Footer />
+    </>
+  )
+}
+
+export async function generateStaticParams() {
+  const directoryPath = path.join(process.cwd(), "content")
+  const filenames = fs.readdirSync(directoryPath)
+
+  return filenames.map((filename) => ({ blog: filename.replace(".mdx", "") }))
+}

pages/blog/[blog].js → app/blog/[blog]/page.tsx

@@ -1,22 +1,19 @@
-import React, { useState } from "react"
-import Navigation, { DownloadPopup } from "../../components/Navigation"
-import Footer from "../../components/Footer"
+import React from "react"
 import { serialize } from "next-mdx-remote/serialize"
-import { MDXRemote } from "next-mdx-remote"
-import Head from "next/head"
+import { MDXRemote } from "next-mdx-remote/rsc"
 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"
-import { ANDROID_URL, IOS_URL } from "../../constants"
-import appStorePic from "../../public/images/other/app-store-fr.png"
-import googlePlayPic from "../../public/images/other/google-play-fr.png"
+import styles from "~/style/bloga.module.css"
+import { ANDROID_URL, IOS_URL } from "~/constants"
+import appStorePic from "~/public/images/other/app-store-fr.png"
+import googlePlayPic from "~/public/images/other/google-play-fr.png"
 import { parse } from "date-fns"
 import { fr } from "date-fns/locale"
 
-const Blog = ({ mdxSource, data }) => {
-  const [showPopup, setShowPopup] = useState(false)
+export default async function Blog({ params }) {
+  const { mdxSource, data } = await getBlogPost(params)
 
   const components = {
     DownloadButtons: () => (
@@ -41,15 +38,6 @@ 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>
-      <DownloadPopup showPopup={showPopup} setShowPopup={setShowPopup} />
-      <Navigation showPopup={showPopup} setShowPopup={setShowPopup} />
       <div className="p-4 lg:pt-16 sm:mx-20 xl:mx-auto xl:w-[1100px]">
         <div className="mb-6 text-oz-pink">
           <a
@@ -78,19 +66,21 @@ const Blog = ({ mdxSource, data }) => {
       <div
         className={`p-10 sm:rounded-xl md:rounded-3xl sm:mx-20 xl:mx-auto xl:w-[1100px] mb-8 text-base ${styles.blogContent}`}
       >
-        <MDXRemote {...mdxSource} components={components} />
+        <MDXRemote components={components} source={mdxSource} />
       </div>
-
-      <Footer />
     </>
   )
 }
 
-export async function getStaticProps({ params }) {
+async function getBlogPost(params: { blog: string }) {
   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)
+  const mdxSource = await serialize(content, {
+    mdxOptions: {
+      development: false,
+    },
+  })
 
   const articleDate = parse(data.date, "MMMM d, yyyy", new Date(), {
     locale: fr,
@@ -104,25 +94,7 @@ export async function getStaticProps({ params }) {
     }
   }
   return {
-    props: {
-      mdxSource,
-      data,
-    },
+    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 → app/blog/page.tsx

@@ -1,26 +1,26 @@
-import React, { useState } from "react"
+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, { DownloadPopup } from "../../components/Navigation"
-import Footer from "../../components/Footer"
-import BlogCard from "../../components/BlogCard"
+import Navigation, { DownloadPopupStandalone } from "~/components/Navigation"
+import Footer from "~/components/Footer"
+import BlogCard from "~/components/BlogCard"
 import { parse } from "date-fns"
 import { fr } from "date-fns/locale"
 
-const Index = ({ posts }) => {
-  const [showPopup, setShowPopup] = useState(false)
+export const metadata = {
+  title: "Blog | Oz Ensemble",
+  description: "Découvrez les dernières actualités d'Oz Ensemble",
+}
+
+export default async function Blog() {
+  const posts = await getBlogPosts()
+
   return (
     <>
-      <Head>
-        <title>Blog | Oz Ensemble</title>
-        <meta property="og:title" content="Blog | Oz EEnsemble" />
-      </Head>
-      <DownloadPopup showPopup={showPopup} setShowPopup={setShowPopup} />
+      <DownloadPopupStandalone />
       <div className="flex flex-col min-h-screen">
-        <Navigation showPopup={showPopup} setShowPopup={setShowPopup} />
+        <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">
@@ -29,7 +29,6 @@ const Index = ({ posts }) => {
 
             <div className="grid grid-cols-1 gap-6 lg:grid-cols-3 text-center">
               {posts
-                .filter((post) => !post.notFound)
                 .sort((a, b) => a.order - b.order)
                 .map((post) => (
                   <BlogCard
@@ -50,7 +49,7 @@ const Index = ({ posts }) => {
   )
 }
 
-export async function getStaticProps() {
+async function getBlogPosts() {
   const files = fs.readdirSync(path.join(process.cwd(), "content"))
 
   const posts = await Promise.all(
@@ -59,31 +58,28 @@ export async function getStaticProps() {
       .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)
+        const { data } = matter(rawContent)
         const articleDate = parse(data.date, "MMMM d, yyyy", new Date(), {
           locale: fr,
         })
 
         const currentDate = new Date()
 
         if (articleDate >= currentDate) {
-          return {
-            notFound: true,
-          }
+          return null
         }
 
         return {
-          ...data,
           slug: filename.replace(".mdx", ""),
-          mdxSource,
+          order: data.order || 0,
+          image: data.image || "",
+          title: data.title || "",
+          date: data.date || "",
+          alt: data.alt || "",
         }
       })
+      .filter(Boolean)
   )
 
-  return {
-    props: { posts },
-  }
+  return posts
 }
-
-export default Index

app/download-link/page.tsx

@@ -0,0 +1,6 @@
+import DownloadPage from "~/app/download/page"
+import { metadata as metadataDownload } from "~/app/download/page"
+
+export const metadata = metadataDownload
+
+export default DownloadPage

app/download/page.tsx

@@ -0,0 +1,41 @@
+import { ANDROID_URL, IOS_URL, ROOT_URL } from "~/constants"
+import { metadata as metadataMain } from "~/app/layout"
+
+export const metadata = {
+  ...metadataMain,
+  title: "Télécharger Oz Ensemble",
+  description:
+    "Télécharger Oz Ensemble, une application mobile pour maitriser sa consommation d'alcool.",
+}
+
+export default function Download() {
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+  function redirect() {
+    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    var ios = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
+    if (ios) {
+      // window.location = myapp://element/{ELEMENT_ID};
+      window.setTimeout(() => {
+        window.location.replace('${IOS_URL}');
+      }, 25)
+      return
+    }
+    var android = /android/i.test(userAgent);
+    if (android) {
+      // window.location = myapp://element/{ELEMENT_ID};
+      window.setTimeout(() => {
+        window.location.replace('${ANDROID_URL}');
+      }, 25)
+      return
+    }
+    window.location.replace('${ROOT_URL}')
+  }
+  redirect()
+`,
+      }}
+    />
+  )
+}