claudiocoder · claudiocoder · Feb 12, 2025 · Feb 12, 2025 · Feb 12, 2025
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = { reactStrictMode: true }
+const nextConfig = {
+  reactStrictMode: true,
+  i18n: { locales: ['es'], defaultLocale: 'es' },
+}
 
 module.exports = nextConfig
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,11 +23,10 @@
     "next-mdx-remote": "^5.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "rehype-highlight": "^7.0.2",
     "sharp": "^0.33.3"
   },
   "devDependencies": {
-    "eslint": "^9",
-    "typescript": "^5",
     "@eslint/eslintrc": "^3",
     "@testing-library/react": "^16.2.0",
     "@types/node": "^20",
@@ -36,6 +35,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.6.0",
     "autoprefixer": "^10.4.14",
+    "eslint": "^9",
     "eslint-config-next": "^15.1.6",
     "eslint-config-prettier": "^9.0.0",
     "jsdom": "^24.0.0",
@@ -44,6 +44,7 @@
     "rehype-code-titles": "^1.2.0",
     "rehype-pretty-code": "^0.12.1",
     "tailwindcss": "^3.4.1",
+    "typescript": "^5",
     "vitest": "^1.6.0"
   }
 }
diff --git a/public/blog/git.webp b/public/blog/git.webp
diff --git a/public/blog/gitmergeterminal.png b/public/blog/gitmergeterminal.png
diff --git a/public/blog/gitrebaseterminal.png b/public/blog/gitrebaseterminal.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx
@@ -4,6 +4,7 @@ import Footer from '@/components/Footer'
 import SocialMediaScripts from '@/components/SocialMediaScripts'
 import { getPostBySlug } from '@/lib/mdx'
 import Link from 'next/link'
+import 'highlight.js/styles/atom-one-dark.css'
 
 interface BlogPageProps {
   slug: string

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -12,7 +12,7 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html>
+    <html lang='es'>
       <body className={_roboto.className}>
         <div className='my-4 lg:p-5 lg:pl-5 h-screen'>
           <div className='flex flex-col lg:flex-row column w-full'>

diff --git a/src/components/Mdx.tsx b/src/components/Mdx.tsx
@@ -8,11 +8,11 @@ export const MDXComponents = {
       target='_blank'
       rel='noopener'
       {...props}
-      className={'text-blue-700 text-2xl'}
+      className={'text-blue-700 text-xl'}
     />
   ),
   p: ({ ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
-    <p {...props} className={'text-justify'} />
+    <p {...props} className={'text-justify text-lg'} />
   ),
   blockquote: ({ ...props }: React.HTMLAttributes<HTMLQuoteElement>) => (
     <blockquote
@@ -34,4 +34,5 @@ export const MDXComponents = {
       />
     )
   },
+  h1: ({ ...props }) => <h1 {...props} className={'text-3xl font-bold'} />,
 }
diff --git a/src/content/blog/gitmergerebase.mdx b/src/content/blog/gitmergerebase.mdx
@@ -0,0 +1,116 @@
+---
+title: ¿Cuándo usar merge y cuando usar rebase?
+date: 2025-02-10
+description: Git Merge vs Git Rebase
+thumbnailUrl: /blog/git.webp  
+author: claudio_coder
+---
+
+# Git Merge
+
+<br/>
+Recuerdo mi primera entrevista de trabajo como ingeniero de software. Después de responder correctamente preguntas sobre Git, 
+como crear un repositorio, hacer un commit, un push y un pull, el entrevistador me lanzó una pregunta clave:
+<div>
+<span className="font-bold text-lg">"¿Cómo pasas tus cambios de tu rama de desarrollo a la rama principal o viceversa?"</span>
+</div>
+Mi respuesta fue un rotundo: <span className="font-bold text-lg">"No lo sé". </span>
+La solución era mucho más sencilla de lo que imaginaba, 
+solo tenía que responder <span className="font-bold text-lg">git merge</span>.
+Diez años después, sigo utilizando <span className="font-bold">git merge</span>, pero con el tiempo eh aprendido que no es la única forma de integrar cambios entre ramas. Existe otra herramienta poderosa <span className="font-bold text-lg">git rebase</span>.
+<br/>
+
+<span className="font-bold text-lg">¿Cuando usar merge y cuando usar rebase? Veamos un ejemplo práctico.</span>
+<br/><br/>
+
+> Práctica Git Merge
+
+<br/>
+```bash
+# 1. Crea un directorio llamado git-merge y entra a él.
+mkdir git-merge
+cd git-merge
+# 2. Inicializa un repositorio de git.
+git init
+# Hacemos nuestro primer cambio en file.txt, agregamndos un texto.
+echo "File 1" >> fileOne.txt
+# Hacemos nuestro primer commit.
+git add .
+git commit -m "File 1"
+```
+<br/>
+Imaginemos que ahora debemos comenzar a desarrollar una nueva funcionalidad, por lo que creamos una rama llamada feature.
+<br/>
+
+```bash
+# Creamos una rama llamada feature.
+git checkout -b feature
+# Hacemos un cambio en file.txt.
+echo "File 2" >> fileTwo.txt
+# Hacemos un commit.
+git add .
+git commit -m "File 2"
+```
+<br/>
+Mientras trabajábamos alguien más hizo un cambio en la rama principal (master) y ese cambio me interesa tenerlo en mi rama feature.
+<br/>
+
+```bash
+# Cambiamos a la rama master.
+git checkout master
+# Hacemos un cambio en file.txt.
+echo "File 3" >> fileThree.txt
+# Hacemos un commit.
+git add .
+git commit -m "File 3"
+```
+<br/>
+Para incorporar los cambios de la rama master a la rama feature, utilizamos git merge.
+<br/>
+
+```bash
+# Cambiamos a la rama feature.
+git checkout feature
+# Pasamos los cambios de la rama master a la rama feature.
+git merge master
+```
+<br/>
+Nos saldrá un mensaje indicando que debemos crear un commit de <span className="italic">merge</span>, para ello solo debemos guardar y cerrar el editor.
+<br/>
+```bash
+# Vea el historial de commits.
+git log --oneline
+```
+<br/>
+![](/blog/gitmergeterminal.png 'git merge terminal')
+<br/>
+Todo funcionó perfectamente, ahora tengo en mi rama feature los cambios de la rama <span className="italic">master</span>. Sin embargo, si observamos el historial de <span className="italic">commits</span>, veremos que se ha creado un commit de <span className="italic">merge</span>. Esto puede ser molesto, pues por cada cambio que necesite de <span className="italic">master</span>, irá creando un <span className="italic">commit</span> innecesario en mi historial. ¿Cómo puedo evitar esto? La respuesta es <span className="font-bold">git rebase</span>.
+<br/><br/>
+# Git Rebase
+<br/>
+Repitamos los mismos pasos que seguimos con git merge, pero ahora con git rebase.
+<br/>
+```bash
+# Cambiamos a la rama feature.
+git checkout feature
+# Pasamos los cambios de la rama master a la rama feature.
+git rebase master
+# Successfully rebased and updated refs/heads/feature.
+```
+<br/>
+Historial de git
+<br/>
+```bash
+# Vea el historial de commits.
+git log --oneline
+```
+<br/>
+![](/blog/gitrebaseterminal.png 'git merge terminal')
+<br/>
+# Conclusión
+<br/>
+1. 1 - Ambos comandos tienen el mismo objetivo: pasar cambios de una rama a otra.
+
+2. 2 - Debemos usar git merge cuando queremos pasar cambios de una rama privada a una rama pública (master o develop). Esto nos ayudara a mantener historial de cuando fueron integrados los cambios en la rama principal.
+
+3. 3 - Usemos git rebase cuando queremos pasar cambios de una rama pública a una rama privada (feature). Esto nos ayudara a mantener un historial lineaR y ordenado.
diff --git a/src/lib/mdx/index.ts b/src/lib/mdx/index.ts
@@ -3,6 +3,7 @@ import path from 'path'
 import { compileMDX } from 'next-mdx-remote/rsc'
 import { Blog } from '../models/Blog'
 import { MDXComponents } from '@/components/Mdx'
+import rehypeHighlight from 'rehype-highlight'
 
 const rootDirectory = path.join(process.cwd(), 'src', 'content', 'blog')
 export const getPostBySlug = async (slug: string) => {
@@ -14,7 +15,10 @@ export const getPostBySlug = async (slug: string) => {
   const { frontmatter, content } = await compileMDX<Blog>({
     source: fileContent,
     components: MDXComponents,
-    options: { parseFrontmatter: true },
+    options: {
+      parseFrontmatter: true,
+      mdxOptions: { remarkPlugins: [], rehypePlugins: [rehypeHighlight] },
+    },
   })
 
   return { meta: { ...frontmatter, slug: realSlug }, content }