chore(release): 3.3.1 [skip ci]

.devcontainer/Dockerfile

@@ -1 +0,0 @@
-FROM mcr.microsoft.com/devcontainers/javascript-node:20

.devcontainer/compose.yaml

@@ -1,9 +0,0 @@
-services:
-  workspace:
-    build:
-      context: "./"
-      dockerfile: "./Dockerfile"
-    volumes:
-      - "..:/workspace:cached"
-    command: "sleep infinity"
-    network_mode: "host"

.devcontainer/devcontainer.json

@@ -1,24 +0,0 @@
-{
-  "name": "theoludwig",
-  "dockerComposeFile": "./compose.yaml",
-  "service": "workspace",
-  "workspaceFolder": "/workspace",
-  "customizations": {
-    "vscode": {
-      "settings": {
-        "remote.autoForwardPorts": false,
-        "remote.localPortHost": "allInterfaces"
-      }
-    },
-    "extensions": [
-      "editorconfig.editorconfig",
-      "esbenp.prettier-vscode",
-      "dbaeumer.vscode-eslint",
-      "davidanson.vscode-markdownlint",
-      "bradlc.vscode-tailwindcss",
-      "mikestead.dotenv",
-      "ms-azuretools.vscode-docker"
-    ]
-  },
-  "remoteUser": "node"
-}

.eslintrc.json

@@ -3,13 +3,9 @@
   "extends": [
     "conventions",
     "next/core-web-vitals",
-    "plugin:tailwindcss/recommended",
+    "plugin:tailwindcss/recommended"
-    "prettier"
   ],
-  "plugins": ["prettier"],
+  "plugins": ["import", "promise", "unicorn"],
-  "parserOptions": {
-    "project": "./tsconfig.json"
-  },
   "settings": {
     "tailwindcss": {
       "callees": ["classNames"]
@@ -19,7 +15,6 @@
     }
   },
   "rules": {
-    "prettier/prettier": "error",
     "react/self-closing-comp": [
       "error",
       {
@@ -33,7 +28,11 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx"],
-      "parser": "@typescript-eslint/parser"
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint"],
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      }
     }
   ]
 }

.github/workflows/build.yml

@@ -10,7 +10,7 @@ jobs:
   build:
     runs-on: "ubuntu-latest"
     steps:
-      - uses: "actions/checkout@v4.1.1"
+      - uses: "actions/checkout@v4.1.6"
 
       - name: "Setup Node.js"
         uses: "actions/setup-node@v4.0.2"

.github/workflows/lint.yml

@@ -10,7 +10,7 @@ jobs:
   lint:
     runs-on: "ubuntu-latest"
     steps:
-      - uses: "actions/checkout@v4.1.1"
+      - uses: "actions/checkout@v4.1.6"
 
       - name: "Setup Node.js"
         uses: "actions/setup-node@v4.0.2"
@@ -37,6 +37,6 @@ jobs:
         run: "npm run lint:prettier"
 
       - name: "lint:dotenv"
-        uses: "dotenv-linter/action-dotenv-linter@v2.18.0"
+        uses: "dotenv-linter/action-dotenv-linter@v2.21.0"
         with:
           github_token: ${{ secrets.github_token }}

.github/workflows/release.yml

@@ -8,7 +8,7 @@ jobs:
   release:
     runs-on: "ubuntu-latest"
     steps:
-      - uses: "actions/checkout@v4.1.1"
+      - uses: "actions/checkout@v4.1.6"
         with:
           fetch-depth: 0
           persist-credentials: false

.github/workflows/test.yml

@@ -10,7 +10,7 @@ jobs:
   test-unit:
     runs-on: "ubuntu-latest"
     steps:
-      - uses: "actions/checkout@v4.1.1"
+      - uses: "actions/checkout@v4.1.6"
 
       - name: "Setup Node.js"
         uses: "actions/setup-node@v4.0.2"
@@ -27,7 +27,7 @@ jobs:
   test-e2e:
     runs-on: "ubuntu-latest"
     steps:
-      - uses: "actions/checkout@v4.1.1"
+      - uses: "actions/checkout@v4.1.6"
 
       - name: "Setup Node.js"
         uses: "actions/setup-node@v4.0.2"

.gitpod.yml

@@ -1,10 +0,0 @@
-image: "gitpod/workspace-full"
-
-tasks:
-  - before: "cp .env.example .env"
-    init: "npm clean-install"
-    command: "npm run dev"
-
-ports:
-  - port: 3000
-    onOpen: "open-preview"

CONTRIBUTING.md

@@ -29,8 +29,6 @@ The commit message guidelines adheres to [Conventional Commits](https://www.conv
 
 ## Getting Started
 
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/theoludwig/theoludwig)
-
 ### Prerequisites
 
 - [Node.js](https://nodejs.org/) >= 20.0.0
@@ -66,6 +64,6 @@ npm run dev
 docker compose up --build
 ```
 
-### Services started
+### Service started
 
-- `website`: <http://127.0.0.1:3000>
+`website`: <http://127.0.0.1:3000>

app/globals.css

@@ -62,15 +62,17 @@ code {
 code .line::before {
   content: counter(step);
   counter-increment: step;
-  width: 1rem;
+  margin-right: 1rem;
-  margin-right: 1.5rem;
-  display: inline-block;
   text-align: right;
   color: rgba(133, 133, 133, 0.8);
   word-wrap: normal;
   word-break: normal;
 }
 
+code .line:last-child {
+  display: none;
+}
+
 .katex .base {
   display: inline !important;
   white-space: normal !important;

blog/BlogPostContent.tsx

@@ -1,22 +1,22 @@
+import { faLink } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { nodeTypes } from "@mdx-js/mdx"
+import rehypeShikiFromHighlighter from "@shikijs/rehype/core"
+import { MDXRemote } from "next-mdx-remote/rsc"
+import { cookies } from "next/headers"
 import Image from "next/image"
 import Link from "next/link"
-import { cookies } from "next/headers"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faLink } from "@fortawesome/free-solid-svg-icons"
-import { MDXRemote } from "next-mdx-remote/rsc"
-import { nodeTypes } from "@mdx-js/mdx"
-import rehypeRaw from "rehype-raw"
-import remarkGfm from "remark-gfm"
-import rehypeSlug from "rehype-slug"
-import remarkMath from "remark-math"
 import rehypeKatex from "rehype-katex"
-import { getHighlighter } from "shiki"
+import rehypeRaw from "rehype-raw"
+import rehypeSlug from "rehype-slug"
+import remarkGfm from "remark-gfm"
+import remarkMath from "remark-math"
+import { getHighlighterCore } from "shiki/core"
 
 import "katex/dist/katex.min.css"
 
-import { getTheme } from "@/theme/theme.server"
-import { remarkSyntaxHighlightingPlugin } from "@/blog/remarkSyntaxHighlightingPlugin"
 import { BlogPostComments } from "@/blog/BlogPostComments"
+import { getTheme } from "@/theme/theme.server"
 
 const Heading = (
   props: React.DetailedHTMLProps<
@@ -26,14 +26,14 @@ const Heading = (
 ): JSX.Element => {
   const { children, id = "" } = props
   return (
-    <h2 {...props} className="group">
+    <h2 {...props}>
-      <Link
+      <Link href={`#${id}`} className="group relative hover:no-underline">
-        href={`#${id}`}
+        <FontAwesomeIcon
-        className="invisible !text-black group-hover:visible dark:!text-white"
+          className="absolute bottom-2 left-[-26px] mr-2 hidden size-4 !text-black group-hover:inline dark:!text-white"
-      >
+          icon={faLink}
-        <FontAwesomeIcon className="mr-2 inline size-4" icon={faLink} />
+        />
-      </Link>
         {children}
+      </Link>
     </h2>
   )
 }
@@ -50,8 +50,19 @@ export const BlogPostContent = async (
   const cookiesStore = cookies()
   const theme = getTheme()
 
-  const highlighter = await getHighlighter({
+  const highlighter = await getHighlighterCore({
-    theme: `${theme}-plus`,
+    themes: [
+      import("shiki/themes/light-plus.mjs"),
+      import("shiki/themes/dark-plus.mjs"),
+    ],
+    langs: [
+      import("shiki/langs/markdown.mjs"),
+      import("shiki/langs/shell.mjs"),
+      import("shiki/langs/javascript.mjs"),
+      import("shiki/langs/typescript.mjs"),
+      import("shiki/langs/python.mjs"),
+    ],
+    loadWasm: import("shiki/wasm"),
   })
 
   return (
@@ -61,15 +72,18 @@ export const BlogPostContent = async (
           source={content}
           options={{
             mdxOptions: {
-              remarkPlugins: [
+              remarkPlugins: [remarkGfm, remarkMath],
-                remarkGfm,
-                [remarkSyntaxHighlightingPlugin, { highlighter }],
-                remarkMath,
-              ],
               rehypePlugins: [
                 rehypeSlug,
                 [rehypeRaw, { passThrough: nodeTypes }],
                 rehypeKatex,
+                [
+                  rehypeShikiFromHighlighter,
+                  highlighter,
+                  {
+                    theme: `${theme}-plus`,
+                  },
+                ],
               ],
             },
           }}

blog/posts/git-ultimate-guide.md

@@ -154,6 +154,17 @@ git reset --soft <branch>
 # (by first being on the branch where you want to apply the commit)
 git cherry-pick <commit>
 
+# To avoid creating duplicated commits with cherry-pick, we can use rebase after cherry-pick.
+# <target-branch> being the commit where you want to apply the commit to cherry-pick.
+# <from-branch> being the branch where the commit to cherry-pick is.
+git rebase <target-branch> <from-branch>
+
+# If, by mistake, you have started a branch from the wrong base branch, you can rebase the branch on the correct base branch.
+# For example, if you have started a branch `feature-2` from `feature` instead of `develop`, you can rebase the branch on `develop`.
+git rebase --onto <new-base-branch> <old-base-branch> <branch>
+# For example:
+git rebase --onto develop feature feature-2
+
 # To list all commits that differ between two branches
 git log <branch1>..<branch2> # commits in branch2 that are not in branch1 (branch2 ahead of branch1, branch2 behind branch1)
 git log <branch2>..<branch1> # commits in branch1 that are not in branch2 (branch1 ahead of branch2, branch1 behind branch2)
@@ -245,6 +256,32 @@ There are many ways to organize the work, but the most popular ones are:
 
 They are called **Git workflows**, or **Git branching strategies**.
 
+## Tips and tricks
+
+### `diff-commits` alias
+
+The `git diff` command allows you to compare the changes between two commits, branches, etc.
+
+Sometimes, you want to compare what commits have been made between two branches, without looking at the changes in the files, to do so, we can create an `alias` in `.gitconfig`:
+
+```sh
+[alias]
+  diff-commits = !sh -c 'echo -n "Commits in $2 not in $1 \\(" && printf "%d" $(git cherry -v $1 $2 | wc -l) && echo "\\)" && git cherry -v $1 $2 && echo "" && echo -n "Commits in $1 not in $2 \\(" && printf "%d" $(git cherry -v $2 $1 | wc -l) && echo "\\)" && git cherry -v $2 $1' -
+```
+
+With this alias, we can compare the commits between `main` and `develop` branches for example:
+
+```sh
+$ git diff-commits main develop
+
+Commits in develop not in main (2)
++ 9b80e0724df8454b43bc3935a1bffb67615572d7 feat: new feature
++ 50721f8ecb60ff023bdccc1873ec1e20ee0b21a0 feat: new feature 2
+
+Commits in main not in develop (1)
+- f7bb9d2af7763e0a311099e880e8bf7d6b51bf4d fix: urgent hotfix
+```
+
 ## Conclusion
 
 `git` is the tool that every programmer should know to do collaborative work (not only, `git` is also very powerful even when working alone) and keep track of changes across a set of files.

blog/remarkSyntaxHighlightingPlugin.ts

@@ -1,32 +0,0 @@
-import type { Plugin, Transformer } from "unified"
-import type { Literal, Node } from "unist"
-import { visit } from "unist-util-visit"
-import type { Highlighter } from "shiki"
-
-export interface RemarkSyntaxHighlightingPluginOptions {
-  highlighter: Highlighter
-}
-
-export interface RemarkSyntaxHighlightingNode extends Node {
-  lang: string
-  meta: string
-  children: undefined
-  value: string
-  data: Record<string, unknown>
-}
-
-export const remarkSyntaxHighlightingPlugin: Plugin<
-  [RemarkSyntaxHighlightingPluginOptions],
-  Literal
-> = (options) => {
-  const transformer: Transformer<RemarkSyntaxHighlightingNode> = (tree) => {
-    visit<RemarkSyntaxHighlightingNode, string>(tree, "code", (node) => {
-      node.type = "html"
-      node.children = undefined
-      node.value = options.highlighter.codeToHtml(node.value, {
-        lang: node.lang,
-      })
-    })
-  }
-  return transformer
-}

components/Header/Locales/LocaleFlag.tsx

@@ -1,7 +1,5 @@
-import Image from "next/image"
-
-import type { CookiesStore } from "@/utils/constants"
 import { useI18n } from "@/i18n/i18n.client"
+import type { CookiesStore } from "@/utils/constants"
 
 export interface LocaleFlagProps {
   locale: string
@@ -14,17 +12,8 @@ export const LocaleFlag = (props: LocaleFlagProps): JSX.Element => {
   const i18n = useI18n(cookiesStore)
 
   return (
-    <>
+    <p data-cy="locale-flag-text" className="mx-2 text-lg font-semibold">
-      <Image
-        quality={100}
-        width={35}
-        height={35}
-        src={`/images/locales/${locale}.svg`}
-        alt={locale}
-      />
-      <p data-cy="locale-flag-text" className="mx-2 text-base">
       {i18n.translate(`common.${locale}`)}
     </p>
-    </>
   )
 }

components/Header/SwitchTheme.tsx

@@ -58,7 +58,7 @@ export const SwitchTheme = (props: SwitchThemeProps): JSX.Element => {
         </div>
         <div
           className={classNames(
-            "absolute top-[1px] box-border size-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out",
+            "absolute top-px box-border size-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out",
             {
               "left-[27px]": theme === "dark",
               "left-0": theme === "light",
@@ -70,7 +70,7 @@ export const SwitchTheme = (props: SwitchThemeProps): JSX.Element => {
           data-cy="switch-theme-input"
           type="checkbox"
           aria-label="Dark mode toggle"
-          className="absolute m-[-1px] hidden size-[1px] overflow-hidden border-0 p-0"
+          className="absolute -m-px hidden size-px overflow-hidden border-0 p-0"
           defaultChecked
         />
       </div>

components/Header/index.tsx

@@ -17,7 +17,7 @@ export const Header = (): JSX.Element => {
       <h1>
         <Link
           href="/"
-          className="flex items-center justify-center transition-all duration-300 ease-in-out hover:scale-[1.03]"
+          className="flex items-center justify-center transition-all duration-300 ease-in-out hover:scale-105"
         >
           <Image
             quality={100}

curriculum-vitae/package.json

@@ -13,9 +13,9 @@
     "modern-normalize": "2.0.0"
   },
   "devDependencies": {
-    "@types/node": "20.12.7",
+    "@types/node": "20.12.12",
-    "date-and-time": "3.1.1",
+    "date-and-time": "3.3.0",
-    "vite": "5.2.8",
+    "vite": "5.2.11",
     "vite-plugin-html": "3.2.2"
   }
 }

cypress/e2e/pages/blog/[slug].cy.ts

@@ -3,7 +3,6 @@ describe("Page /blog/[slug]", () => {
     cy.visit("/blog/hello-world")
     cy.get("[data-cy=locale-flag-text]").should("not.exist")
     cy.get("main h1").should("have.text", "👋 Hello, world!")
-    cy.get(".prose a:visible").should("have.attr", "target", "_blank")
   })
 
   it("should redirect to /404 if the blog post doesn't exist", () => {

i18n/translations/en-US/common.json

@@ -1,6 +1,6 @@
 {
-  "en-US": "English",
+  "en-US": "🇺🇸 English",
-  "fr-FR": "French",
+  "fr-FR": "🇫🇷 French",
   "all-rights-reserved": "All rights reserved",
   "home": "Home"
 }

i18n/translations/fr-FR/common.json

@@ -1,6 +1,6 @@
 {
-  "en-US": "Anglais",
+  "en-US": "🇺🇸 Anglais",
-  "fr-FR": "Français",
+  "fr-FR": "🇫🇷 Français",
   "all-rights-reserved": "Tous droits réservés",
   "home": "Accueil"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "theoludwig",
-  "version": "3.2.5",
+  "version": "3.3.1",
   "private": true,
   "repository": {
     "type": "git",
@@ -13,7 +13,8 @@
   "scripts": {
     "dev": "next dev",
     "start": "next start",
-    "build": "npm run curriculum-vitae:build && next build",
+    "build": "npm run build:curriculum-vitae && next build",
+    "build:curriculum-vitae": "node ./curriculum-vitae/build.js",
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
     "lint:markdown": "markdownlint-cli2",
@@ -24,77 +25,72 @@
     "test:html-w3c-validator": "start-server-and-test \"start\" \"http://127.0.0.1:3000\" \"html-w3c-validator\"",
     "test:e2e": "start-server-and-test \"start\" http://127.0.0.1:3000 \"cypress run\"",
     "test:dev": "start-server-and-test \"dev\" \"http://127.0.0.1:3000\" \"cypress open\"",
-    "curriculum-vitae:build": "node ./curriculum-vitae/build.js",
     "release": "semantic-release",
     "postinstall": "husky"
   },
   "dependencies": {
-    "@fontsource/montserrat": "5.0.17",
+    "@fontsource/montserrat": "5.0.18",
     "@formatjs/intl-localematcher": "0.5.4",
     "@fortawesome/fontawesome-svg-core": "6.5.2",
     "@fortawesome/free-brands-svg-icons": "6.5.2",
     "@fortawesome/free-solid-svg-icons": "6.5.2",
-    "@fortawesome/react-fontawesome": "0.2.0",
+    "@fortawesome/react-fontawesome": "0.2.2",
     "@giscus/react": "3.0.0",
-    "clsx": "2.1.0",
+    "@shikijs/rehype": "1.6.0",
-    "date-and-time": "3.1.1",
+    "clsx": "2.1.1",
+    "date-and-time": "3.3.0",
     "gray-matter": "4.0.3",
     "html-react-parser": "5.1.10",
-    "i18n-js": "4.3.2",
+    "i18n-js": "4.4.3",
     "katex": "0.16.10",
     "negotiator": "0.6.3",
     "next": "14.1.0",
-    "next-mdx-remote": "4.4.1",
+    "next-mdx-remote": "5.0.0",
-    "react": "18.2.0",
+    "react": "18.3.1",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
     "read-pkg": "9.0.1",
-    "rehype-katex": "6.0.3",
+    "rehype-katex": "7.0.0",
-    "rehype-raw": "6.1.1",
+    "rehype-raw": "7.0.0",
-    "rehype-slug": "5.1.0",
+    "rehype-slug": "6.0.0",
-    "remark-gfm": "3.0.1",
+    "remark-gfm": "4.0.0",
-    "remark-math": "5.1.1",
+    "remark-math": "6.0.0",
-    "sharp": "0.33.3",
+    "sharp": "0.33.4",
-    "shiki": "0.14.7",
+    "shiki": "1.6.0",
-    "unified": "10.1.2",
-    "unist-util-visit": "5.0.0",
     "universal-cookie": "7.1.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.1.0",
+    "@commitlint/cli": "19.2.2",
-    "@commitlint/config-conventional": "19.1.0",
+    "@commitlint/config-conventional": "19.2.2",
     "@saithodev/semantic-release-backmerge": "4.0.1",
     "@semantic-release/git": "10.0.1",
-    "@tailwindcss/typography": "0.5.12",
+    "@tailwindcss/typography": "0.5.13",
     "@total-typescript/ts-reset": "0.5.1",
     "@tsconfig/strictest": "2.0.5",
     "@types/negotiator": "0.6.3",
-    "@types/node": "20.12.7",
+    "@types/node": "20.12.12",
-    "@types/react": "18.2.78",
+    "@types/react": "18.3.2",
-    "@types/unist": "3.0.2",
+    "@typescript-eslint/eslint-plugin": "7.10.0",
-    "@typescript-eslint/eslint-plugin": "7.6.0",
+    "@typescript-eslint/parser": "7.10.0",
-    "@typescript-eslint/parser": "7.6.0",
     "autoprefixer": "10.4.19",
     "curriculum-vitae": "file:./curriculum-vitae",
-    "cypress": "13.7.3",
+    "cypress": "13.10.0",
     "editorconfig-checker": "5.1.5",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
-    "eslint-config-conventions": "14.1.0",
+    "eslint-config-conventions": "14.2.0",
     "eslint-config-next": "14.1.0",
-    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-tailwindcss": "3.14.2",
+    "eslint-plugin-tailwindcss": "3.17.0",
-    "eslint-plugin-unicorn": "51.0.1",
+    "eslint-plugin-unicorn": "53.0.0",
-    "html-w3c-validator": "1.6.1",
+    "html-w3c-validator": "1.6.2",
     "husky": "9.0.11",
-    "lint-staged": "15.2.2",
+    "lint-staged": "15.2.4",
     "markdownlint-cli2": "0.13.0",
     "markdownlint-rule-relative-links": "2.3.2",
     "postcss": "8.4.38",
     "prettier": "3.2.5",
-    "prettier-plugin-tailwindcss": "0.5.13",
+    "prettier-plugin-tailwindcss": "0.5.14",
-    "semantic-release": "23.0.8",
+    "semantic-release": "23.1.1",
     "start-server-and-test": "2.0.3",
     "tailwindcss": "3.4.3",
     "typescript": "5.4.5"