app/components/Highlight.tsx

@@ -64,9 +64,14 @@ export const Highlight: ParentComponent<Props> = (_props) => {
 	};
 
 	return (
-		<div class={clsx("group flex items-start px-4 py-2 w-full", props.class)}>
+		<div
+			class={clsx(
+				"group relative flex items-start px-4 py-2 w-full",
+				props.class,
+			)}
+		>
 			<button
-				class="absolute cursor-pointer z-10 top-2 right-2 text-slate-500 bg-slate-200/10 rounded-md hover:bg-linear-to-r hover:from-violet-400/30 hover:via-violet-400 hover:to-violet-400/30 p-px hover:text-violet-300"
+				class="absolute cursor-pointer top-0 right-2 text-slate-500 bg-slate-200/10 rounded-md hover:bg-linear-to-r hover:from-violet-400/30 hover:via-violet-400 hover:to-violet-400/30 p-px hover:text-violet-300"
 				type="button"
 				onClick={handleCopyToClipboard}
 			>
@@ -108,7 +113,7 @@ export const Highlight: ParentComponent<Props> = (_props) => {
 				)}
 			>
 				<code
-					class={clsx("leading-6", props.withLineNumbers ? "px-4" : "pr-4")}
+					class={clsx("px-4", "leading-6")}
 					innerHTML={highlightedCode()}
 					{...rest}
 				>

app/components/Snippet.tsx

@@ -18,7 +18,6 @@ type SnippetTab = {
 	name: string;
 	codeLanguage: string;
 	code: string;
-	withLineNumbers?: boolean;
 };
 
 type SnippetProps = {
@@ -96,7 +95,7 @@ export function Snippet(props: SnippetProps) {
 								props.dark && "dark text-white",
 							)}
 							language={selectedTab().codeLanguage}
-							withLineNumbers={selectedTab().withLineNumbers}
+							withLineNumbers
 						>
 							{selectedTab().code}
 						</Highlight>

app/pages/docs/react/initialisation/+Page.mdx

@@ -1,111 +0,0 @@
----
-title: Initialisation d'un projet React
-description: Initialisons un nouveau projet React, avec ou sans TypeScript.
-tags: [Frontend, React, JavaScript, TypeScript, Bibliothèque, Interface utilisateur (UI), Vite, Vike]
----
-
-import Callout from "@/components/Callout";
-import tabs from "./tabs";
-
-Allez, on se lance dans la création d'un projet React ! 🚀
-
-L'article sera très court, car il n'y a pas grand chose à dire sur la création d'un projet React.  
-Tu vas voir à quel point c'est simple !
-
-## 👴 Ancienne méthode _(CRA)_
-
-
-<Callout type="warning" title="Dépréciation de `create-react-app`">
-  Sur cette courte section on va parler d'une méthode qui est **dépréciée**.
-  Ne l'utilise donc pas pour créer de nouveaux projets !
-</Callout>
-
-Il y a encore quelques mois/années, on passait régulièrement par le **CRA**, ou `create-react-app`, pour initialiser un projet React.  
-L'avantage que proposait cette méthode était de nous fournir un projet prêt à l'emploi, avec une structure de fichiers déjà en place, et des dépendances déjà installées.
-
-Cependant, cette méthode est désormais dépréciée. Au delà d'être dépréciée, cette méthode a même été **totalement retirée** de la documentation officielle de React.
-
-À la place, la documentation nous propose plutôt d'utiliser :
-
-- [Next.js _(App Router)_](https://react.dev/learn/creating-a-react-app#nextjs-app-router)
-- [React Router _(v7)_](https://react.dev/learn/creating-a-react-app#react-router-v7)
-- [Expo _(pour les applications natives)_](https://react.dev/learn/creating-a-react-app#expo)
-- [Vite](https://react.dev/learn/build-a-react-app-from-scratch#vite)
-- [Parcel](https://react.dev/learn/build-a-react-app-from-scratch#parcel)
-- [Rsbuild](https://react.dev/learn/build-a-react-app-from-scratch#rsbuild)
-
-Mais dans cet article, je vais plutôt te montrer comment initialiser un projet React avec Vite et par la suite : [Vike](https://vike.dev/).
-
-Et si tu te demandes "pourquoi" _(à juste titre !)_, c'est tout simplement car il s'agit d'une solution plus légère, plus flexible et qui est en constante amélioration par la communauté !
-
-## 🏃 Vite
-
-Vite est un outil de développement web _(frontend)_ créé par [Evan You](https://evanyou.me/), le créateur de Vue.js.  
-Et si tu connais Vue.js, tu sais déjà qu'on parle d'un outil de qualité !
-
-L'objectif principal derrière Vite, c'est d'améliorer considérablement la rapidité de développement de nos applications web, avec notamment un serveur de développement ultra-rapide, et une compilation de production optimisée.
-
-On peut notamment comparer Vite à Webpack, Grunt ou encore Gulp, mais en beaucoup plus rapide et plus simple à utiliser.  
-Beaucoup moins "usine à gaz", beaucoup plus "plug-and-play".
-
-Et si on voyait comment initialiser un projet React avec Vite ?  
-C'est parti ! 🚀
-
-## 👷 Initialisation
-
-Avant de commencer, assure-toi d'avoir Node.js installé sur ta machine.
-Si ce n'est pas le cas, tu peux le télécharger ici.
-
-Prépare toi maintenant pour la partie la plus difficile de cet article...
-Ouvre ton terminal, et tape la commande suivante :
-
-<tabs.reactInit />
-
-Tu vas ensuite devoir répondre à quelques questions, notamment le nom de ton projet, le template que tu souhaites utiliser _(React, Vue, Vanilla, etc.)_, et si tu souhaites utiliser TypeScript.
-
-Je te laisse la liberté de répondre comme tu veux à ces questions, mais pour un projet React, tu vas devoir choisir le template `react` _(logique non ?)_.
-
-Et voilà, c'est tout !  
-... oui j'ai menti, c'était vraiment pas difficile. 😅
-
-## 🚀 Lancement
-
-Une fois que tu as répondu à toutes les questions, tu vas devoir te rendre dans le dossier de ton projet, et lancer le serveur de développement :
-
-<tabs.reactInstall />
-
-<Callout type="warning" title="Installation des dépendances">
-  Pense à installer les dépendances de ton projet avant de lancer le moindre script _(comme `dev`, `build` etc)_, sinon ça ne va pas très bien se passer !
-</Callout>
-
-Tu auras ensuite un message dans ton terminal qui t'indiquera l'adresse à laquelle tu pourras accéder à ton application.  
-En général, il s'agit de http://localhost:4173 _(le port peut varier)_.
-
-Et voilà, tu as maintenant un projet React initialisé avec Vite ! 🎉
-
-Par contre je préfère te prévenir, avec cette solution on va davantage s'orienter sur des applications **CSR** _(Client-Side Rendering)_, mais on pourra également voir comment faire du **SSR** _(Server-Side Rendering)_ ou du **SSG** _(Static Site Generation)_ avec **Vike**.
-
-## 💪 Vike
-
-**Vike**, ou anciennement `vite-plugin-ssr`, est un **framework** basé sur Vite qui va nous permettre de créer des applications web avec presque n'importe quelle bibliothèque _(React, Vue, Svelte, etc.)_.
-
-Dans notre cas, on s'en servira comme alternative au géant du SSR React : Next.js.
-
-L'énorme avantage de Vike au delà de pouvoir utiliser n'importe quel framework/bibliothèque UI _(et même un framework maison ou du vanilla JS !)_, c'est que tout comme Vite, il est **extrêmement plus léger** et **flexible**.
-
-Au niveau des fonctionnalités natives, on va retrouver un peu la même chose que Next.js, avec notamment :
-
-- De quoi gérer le rendu à effectuer _(SSR, SSG, CSR)_
-- Un système de layouts
-- Un système de routage
-- Un système pour séparer la logique front et la logique back
-
-Et bien d'autres !
-
-Mais on se réserve ça pour un autre article, car il est nécessaire de bien comprendre comment fonctionne React 😉.
-
-## Conclusion
-
-Tu l'auras remarqué, initialiser un projet React avec Vite est vraiment très simple !
-
-On parle ici d'une simple petite commande et de questions auxquelles répondre, et le tour est joué 🚀

app/pages/docs/react/initialisation/tabs.tsx

@@ -1,60 +0,0 @@
-import { Snippet } from "@/components/Snippet";
-
-const reactInitSnippets = [
-	{
-		name: "NPM",
-		codeLanguage: "bash",
-		code: "npm init vite",
-	},
-	{
-		name: "Yarn",
-		codeLanguage: "bash",
-		code: "yarn create vite",
-	},
-	{
-		name: "PNPM",
-		codeLanguage: "bash",
-		code: "pnpm create vite",
-	},
-	{
-		name: "Bun",
-		codeLanguage: "bash",
-		code: "bun create vite",
-	},
-];
-
-const reactInstallSnippets = [
-	{
-		name: "NPM",
-		codeLanguage: "bash",
-		code: `cd mon-projet
-npm install
-npm run dev`,
-	},
-	{
-		name: "Yarn",
-		codeLanguage: "bash",
-		code: `cd mon-projet
-yarn install
-yarn dev`,
-	},
-	{
-		name: "PNPM",
-		codeLanguage: "bash",
-		code: `cd mon-projet
-pnpm install
-pnpm dev`,
-	},
-	{
-		name: "Bun",
-		codeLanguage: "bash",
-		code: `cd mon-projet
-bun install
-bun dev`,
-	},
-];
-
-export default {
-	reactInit: () => <Snippet snippets={reactInitSnippets} />,
-	reactInstall: () => <Snippet snippets={reactInstallSnippets} />,
-};

app/pages/docs/react/tabs.tsx

@@ -4,7 +4,6 @@ const reactTodoListSnippets = [
 	{
 		name: "App.tsx",
 		codeLanguage: "tsx",
-		withLineNumbers: true,
 		code: `import TodoList from "./TodoList";
 import React from "react";
 
@@ -20,7 +19,6 @@ const App = () => {
 	{
 		name: "TodoList.tsx",
 		codeLanguage: "tsx",
-		withLineNumbers: true,
 		code: `import TodoListItem from "./TodoListItem";
 import React from "react";
 
@@ -67,7 +65,6 @@ export default TodoList;`,
 	{
 		name: "TodoListItem.tsx",
 		codeLanguage: "tsx",
-		withLineNumbers: true,
 		code: `import React from "react";
 
 interface TodoListItemProps {

app/partials/HeroSection.tsx

@@ -11,7 +11,6 @@ const snippets = [
 	{
 		name: "memento-dev.config.js",
 		codeLanguage: "javascript",
-		withLineNumbers: true,
 		code: `export default {
 	role: "developer",
 	qualifications: [
@@ -24,7 +23,6 @@ const snippets = [
 	{
 		name: "package.json",
 		codeLanguage: "json",
-		withLineNumbers: true,
 		code: `{
 	"name": "memento-dev",
 	"version": "2.0.0",