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/clean-code.md

@@ -7,13 +7,13 @@ publishedOn: '2022-02-23T08:00:18.758Z'
 
 Hello! 👋
 
-Have you already heard of "**Clean Code**" or "**Design Patterns**" ?
+Have you already heard of "**Clean Code**" or "**Design Patterns**"?
 
 Even if you know what it is about, this blog post will probably still be useful to you, I will share some tips and tricks to make your code more readable and maintainable in the long term.
 
 **Note:** Sources used to write this blog post are available at the [end of this post](#sources).
 
-## Definition : Clean Code
+## Definition: Clean Code
 
 A clean code is a code that is **easy** to **read** and easy to **understand**.
 
@@ -23,7 +23,7 @@ We could ask ourselves, what is **easy** to **read** and easy to **understand**
 
 It depends of many factors, and is somewhat relative to each one of us. The **perfect** Clean code **doesn't exist**, but we can try to be **as perfect as possible**.
 
-## Why is it so important ?
+## Why is it so important?
 
 Code like that works great, but it is not enough, even if the code will be read by the computer and understood by the machine, we should not forget that the code is **written by human** and will be also **read by human** not only a machine.
 

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'
       })