refactor: minor changes

.eslintrc.json

@@ -10,6 +10,7 @@
   },
   "rules": {
     "prettier/prettier": "error",
-    "unicorn/prefer-node-protocol": "error"
+    "unicorn/prefer-node-protocol": "error",
+    "@next/next/no-img-element": "off"
   }
 }

Dockerfile

@@ -1,15 +1,15 @@
-FROM node:16.16.0 AS dependencies
+FROM node:16.17.0 AS dependencies
 WORKDIR /usr/src/app
 COPY ./package*.json ./
 RUN npm install
 
-FROM node:16.16.0 AS builder
+FROM node:16.17.0 AS builder
 WORKDIR /usr/src/app
 COPY ./ ./
 COPY --from=dependencies /usr/src/app/node_modules ./node_modules
 RUN npm run build
 
-FROM node:16.16.0 AS runner
+FROM node:16.17.0 AS runner
 WORKDIR /usr/src/app
 ENV NODE_ENV=production
 COPY --from=builder /usr/src/app/next.config.js ./next.config.js

cypress/component/components/Footer.cy.tsx

@@ -14,5 +14,3 @@ describe('<Footer />', () => {
       )
   })
 })
-
-export {}

cypress/support/component.ts

@@ -1,6 +1,7 @@
 import { mount } from 'cypress/react'
 
 import './commands'
+import '../../styles/global.css'
 
 declare global {
   namespace Cypress {

package.json

@@ -66,20 +66,20 @@
     "@saithodev/semantic-release-backmerge": "2.1.2",
     "@semantic-release/git": "10.0.1",
     "@tailwindcss/typography": "0.5.4",
-    "@types/node": "18.7.11",
+    "@types/node": "18.7.13",
     "@types/react": "18.0.17",
     "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "5.34.0",
+    "@typescript-eslint/eslint-plugin": "5.35.1",
     "autoprefixer": "10.4.8",
     "cypress": "10.6.0",
     "editorconfig-checker": "4.0.2",
-    "eslint": "8.22.0",
+    "eslint": "8.23.0",
     "eslint-config-conventions": "3.0.0",
     "eslint-config-next": "12.2.5",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-promise": "6.0.0",
+    "eslint-plugin-promise": "6.0.1",
     "eslint-plugin-unicorn": "43.0.2",
     "html-w3c-validator": "1.2.0",
     "husky": "8.0.1",
@@ -89,10 +89,10 @@
     "postcss": "8.4.16",
     "prettier": "2.7.1",
     "prettier-plugin-tailwindcss": "0.1.13",
-    "semantic-release": "19.0.4",
+    "semantic-release": "19.0.5",
     "start-server-and-test": "1.14.0",
     "tailwindcss": "3.1.8",
-    "typescript": "4.7.4",
-    "vercel": "28.1.1"
+    "typescript": "4.8.2",
+    "vercel": "28.2.0"
   }
 }

pages/blog/[slug].tsx

@@ -37,6 +37,14 @@ const BlogPostPage: NextPage<BlogPostPageProps> = (props) => {
           <MDXRemote
             {...post.source}
             components={{
+              img: (properties) => {
+                const { src, alt, ...props } = properties
+                let source = src
+                if (src?.startsWith('../public/') ?? false) {
+                  source = src?.replace('../public/', '/')
+                }
+                return <img src={source} alt={alt} {...props} />
+              },
               a: (props: React.ComponentPropsWithoutRef<'a'>) => {
                 if (props.href?.startsWith('#') ?? false) {
                   return <a {...props} />

posts/thream-v1-0-0.md

@@ -21,7 +21,7 @@ The source code is available on [GitHub](https://github.com/Thream).
 
 The idea is that a user can create an account to authenticate with an email address, and a password, or directly use an account from another platform (currently supported: Google, GitHub, Discord). Once the user is authenticated, he/she can create and join "guilds", in other words communities, in order to discuss with other people in several channels to group discussions talking about the same subject.
 
-![The Thream app on a community page](/images/posts/thream-v1-0-0/thream-ui.png)
+![The Thream app on a community page](../public/images/posts/thream-v1-0-0/thream-ui.png)
 
 [**Thream**](https://www.thream.divlo.fr/) is a website that works on any recent browser, accessible on [thream.divlo.fr](https://www.thream.divlo.fr/).
 
@@ -33,7 +33,7 @@ The main goal is to put into **practice knowledge in web development** and compu
 
 The development of the project begins under the name of **SocialProject**, on August 20, 2020, with colors close to the image of Divlo.
 
-![SocialProject](/images/posts/thream-v1-0-0/social-project.jpg)
+![SocialProject](../public/images/posts/thream-v1-0-0/social-project.jpg)
 
 When I started the project, I had little knowledge of database design, real-time management or the architecture of such a large <abbr title="Information Technology">IT</abbr> project, so this will be accompanied by many technical problems, to which we will need to find appropriate solutions.
 
@@ -56,7 +56,7 @@ Since the project is mainly developed during free time (mainly on weekends), the
 <p className='flex flex-col items-center justify-center'>
   <img
     alt='HTTP Communication Schema'
-    src='/images/posts/thream-v1-0-0/http-communication.png'
+    src='../public/images/posts/thream-v1-0-0/http-communication.png'
   />
 </p>
 

utils/blog.ts

@@ -37,8 +37,8 @@ export const getPosts = async (): Promise<PostMetadata[]> => {
   const posts = await fs.promises.readdir(POSTS_PATH)
   const postsWithTime = await Promise.all(
     posts.map(async (postFilename) => {
-      const [slug] = postFilename.split('.')
-      const blogPostPath = path.join(POSTS_PATH, `${slug}.mdx`)
+      const [slug, extension] = postFilename.split('.')
+      const blogPostPath = path.join(POSTS_PATH, `${slug}.${extension}`)
       const blogPostContent = await fs.promises.readFile(blogPostPath, {
         encoding: 'utf8'
       })