diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
new file mode 100644
index 0000000..51dd82e
--- /dev/null
+++ b/docs/.vitepress/config.mts
@@ -0,0 +1,61 @@
+import { defineConfig } from 'vitepress';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+ title: 'Codepicker Docs',
+ base: process.env.BASE_URL ?? '/',
+ description:
+ 'Pick code into Markdown. Apply Markdown to code. Built for LLMs and quick backups.',
+ locales: {
+ es: { label: 'Español', lang: 'es' },
+ },
+ themeConfig: {
+ // https://vitepress.dev/reference/default-theme-config
+ nav: [
+ { text: 'Home', link: '/es' },
+ { text: 'Guías', link: '/es/getting-started' },
+ ],
+ sidebar: {
+ '/es/': [
+ {
+ text: 'Introducción',
+ items: [
+ { text: '¿Qué es esto?', link: '/es/01_intro' },
+ { text: 'Primeros Pasos', link: '/es/02_getting-started' },
+ { text: 'Uso Básico', link: '/es/03_usage' },
+ { text: 'Ejemplo Práctico', link: '/es/usage-example' },
+ { text: 'Preguntas Frecuentes', link: '/es/faq' },
+ { text: 'Contribuir', link: '/es/contributing' },
+ ],
+ },
+ {
+ text: 'Comandos',
+ items: [
+ { text: 'Pick', link: '/es/commands/pick' },
+ { text: 'Apply', link: '/es/commands/apply' },
+ ],
+ },
+ {
+ text: 'Conceptos',
+ items: [
+ { text: 'Formato Codepick', link: '/es/concepts/codepick-format' },
+ ],
+ },
+ {
+ text: 'Guías Avanzadas',
+ items: [
+ { text: 'Opciones Avanzadas', link: '/es/guides/advanced-options' },
+ {
+ text: 'Flujo de Trabajo con LLMs',
+ link: '/es/guides/llm-workflow',
+ },
+ { text: 'Scripting e instalación', link: '/es/installation' },
+ ],
+ },
+ ],
+ },
+ socialLinks: [
+ { icon: 'github', link: 'https://github.com/rodnye/codepicker' },
+ ],
+ },
+});
diff --git a/docs/assets/copy_deepseek_response.jpg b/docs/assets/copy_deepseek_response.jpg
new file mode 100755
index 0000000..6f72840
Binary files /dev/null and b/docs/assets/copy_deepseek_response.jpg differ
diff --git a/website/static/img/logo.png b/docs/assets/logo.png
similarity index 100%
rename from website/static/img/logo.png
rename to docs/assets/logo.png
diff --git a/docs/assets/waiting_deepseek_response.png b/docs/assets/waiting_deepseek_response.png
new file mode 100644
index 0000000..3084310
Binary files /dev/null and b/docs/assets/waiting_deepseek_response.png differ
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/intro.mdx b/docs/es/01_intro.md
similarity index 61%
rename from website/i18n/es/docusaurus-plugin-content-docs/intro.mdx
rename to docs/es/01_intro.md
index 3cbfe2a..4331e66 100644
--- a/website/i18n/es/docusaurus-plugin-content-docs/intro.mdx
+++ b/docs/es/01_intro.md
@@ -1,13 +1,19 @@
----
-sidebar_position: 1
-slug: /intro
----
-
# Introducción a Codepicker
-**Codepicker** es una herramienta CLI bidireccional que transforma tu base de código en Markdown estructurado, y viceversa. Está diseñada específicamente para hacer que trabajar con Modelos de Lenguaje Grande (LLMs) en proyectos reales sea **rápido, predecible y sin fricciones**.
+**Codepicker** es una poderosa herramienta CLI bidireccional que transforma tu código fuente en Markdown estructurado, y viceversa. Está diseñada específicamente para hacer que trabajar con Modelos de Lenguaje Grande (LLMs) en proyectos reales sea **rápido, predecible y sin límites**.
+
+> Puedes hechar un vistazo a este [Ejemplo rápido](./usage-example)
+
+## Características
-## ¿Por qué Codepicker?
+- ⚡ **Contexto Instantáneo**: Copia secciones completas del proyecto con el flag `-c`.
+- 🔄 **Flujo Bidireccional**: El comando `apply` convierte Markdown de vuelta a archivos en tu disco.
+- 🧠 **Tolerante al Ruido**: Ignora explicaciones y texto extra, manteniendo solo el código válido.
+- 🛡️ **Envoltorio Inteligente**: Previene bloques de código rotos ajustando el número de comillas invertidas.
+- 🎯 **Controles de Precisión**: Limita líneas, añade números, usa rutas absolutas.
+- 📄 **Modo Documentación (`-D`)**: Ayuda a los LLMs a seguir el formato Codepick correctamente.
+- 📦 **Seguro con Binarios**: Evita volcar contenido ilegible de archivos binarios.
+- 🙈 **Consciente de `.gitignore`**: Respeta tu repositorio por defecto.
Trabajar con chats de LLMs en bases de código existentes suele ser un proceso tedioso:
@@ -19,16 +25,15 @@ Trabajar con chats de LLMs en bases de código existentes suele ser un proceso t
Incluso con agentes de IDE, a menudo estás limitado a su flujo de trabajo específico. **Codepicker** elimina esta fricción, permitiéndote mover el contexto dentro y fuera de tu proyecto con un par de comandos.
-## Características Principales
+## ¿Por qué dices "Bidireccional"?
-- ⚡ **Contexto Instantáneo**: Copia secciones completas del proyecto con el flag `-c`.
-- 🔄 **Flujo Bidireccional**: El comando `apply` convierte Markdown de vuelta a archivos en tu disco.
-- 🧠 **Tolerante al Ruido**: Ignora explicaciones y texto extra, manteniendo solo el código válido.
-- 🛡️ **Envoltorio Inteligente**: Previene bloques de código rotos ajustando el número de comillas invertidas.
-- 🎯 **Controles de Precisión**: Limita líneas, añade números, usa rutas absolutas.
-- 📄 **Modo Documentación (`-D`)**: Ayuda a los LLMs a seguir el formato Codepick correctamente.
-- 📦 **Seguro con Binarios**: Evita volcar contenido ilegible de archivos binarios.
-- 🙈 **Consciente de `.gitignore`**: Respeta tu repositorio por defecto.
+Esta no es la primera herramienta que permite recolectar contexto para la IA. Un ejemplo popular es [Repomix](https://repomix.com) que hace algo similar,
+exporta todo tu proyecto a un archivo `repomix-output.xml` y luego... ya?
+
+Ese archivo puedes subirlo a ChatGPT y pedirle "Revisa que problemas puede tener mi código". Pero imagina que ChatGPT te sugiera algunos cambios,
+tendrías que aplicarlos manualmente.
+
+Esto no ocurre con CODEPICKER, cuando la IA te dice el contenido a cambiar de un archivo, puedes insertarlo automaticamente con un solo comando!
## ¿Cómo funciona?
@@ -43,4 +48,4 @@ console.log('Hola Mundo');
Este formato es perfectamente parseable y, a diferencia de los diffs o formatos de respuesta tradicionales, empaqueta el contenido completo del archivo, eliminando ambigüedades.
-Todo en orden? Dirígete a la sección de [Primeros Pasos](/docs/getting-started).
+Todo en orden? Dirígete a la sección de [Primeros Pasos](./02_getting-started).
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/getting-started.mdx b/docs/es/02_getting-started.md
similarity index 80%
rename from website/i18n/es/docusaurus-plugin-content-docs/getting-started.mdx
rename to docs/es/02_getting-started.md
index 9757c44..ef4fcc3 100644
--- a/website/i18n/es/docusaurus-plugin-content-docs/getting-started.mdx
+++ b/docs/es/02_getting-started.md
@@ -1,8 +1,3 @@
----
-sidebar_position: 2
-slug: /getting-started
----
-
# Primeros Pasos
Instalar y configurar Codepicker es extremadamente sencillo. Sigue estos pasos para empezar a optimizar tu flujo de trabajo con LLMs.
@@ -46,6 +41,7 @@ Esto buscará todos los archivos `.ts` en la carpeta `src`, los convertirá al f
## Siguientes Pasos
-- Aprende a usar el comando [Pick](/docs/commands/pick) en detalle.
-- Descubre cómo aplicar los cambios con [Apply](/docs/commands/apply).
-- Entiende el [Formato Codepick](/docs/concepts/codepick-format).
+- ¿Aprender rápido a usar esto? Mira este [Ejemplo práctico](./usage-example.md)
+- Aprende a usar el comando [Pick](./commands/pick) en detalle.
+- Descubre cómo aplicar los cambios con [Apply](./commands/apply).
+- Entiende el [Formato Codepick](./concepts/codepick-format).
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/usage.md b/docs/es/03_usage.md
similarity index 96%
rename from website/i18n/es/docusaurus-plugin-content-docs/usage.md
rename to docs/es/03_usage.md
index fdd98da..5bb112c 100644
--- a/website/i18n/es/docusaurus-plugin-content-docs/usage.md
+++ b/docs/es/03_usage.md
@@ -1,9 +1,3 @@
----
-sidebar_position: 3
-title: Uso básico
-description: Aprende a extraer y aplicar código con Codepicker.
----
-
# Uso básico
Codepicker se divide en dos comandos principales:
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/commands/apply.mdx b/docs/es/commands/apply.md
similarity index 96%
rename from website/i18n/es/docusaurus-plugin-content-docs/commands/apply.mdx
rename to docs/es/commands/apply.md
index 8884996..9b8c165 100644
--- a/website/i18n/es/docusaurus-plugin-content-docs/commands/apply.mdx
+++ b/docs/es/commands/apply.md
@@ -1,8 +1,3 @@
----
-sidebar_position: 4
-slug: /commands/apply
----
-
# Comando Apply
El comando `apply` toma un documento Markdown (o el contenido del portapapeles) y extrae los bloques de código para escribirlos o actualizarlos en tu sistema de archivos.
@@ -31,6 +26,8 @@ codepicker apply [opciones] [archivo-dump]
codep apply -c
```
+> Puedes hechar un vistazo a este [Ejemplo práctico](../usage-example)
+
## Ejemplos Prácticos
### Aplicar desde el Portapapeles
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/commands/pick.mdx b/docs/es/commands/pick.md
similarity index 100%
rename from website/i18n/es/docusaurus-plugin-content-docs/commands/pick.mdx
rename to docs/es/commands/pick.md
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/concepts/codepick-format.mdx b/docs/es/concepts/codepick-format.md
similarity index 70%
rename from website/i18n/es/docusaurus-plugin-content-docs/concepts/codepick-format.mdx
rename to docs/es/concepts/codepick-format.md
index 57befe9..806de3f 100644
--- a/website/i18n/es/docusaurus-plugin-content-docs/concepts/codepick-format.mdx
+++ b/docs/es/concepts/codepick-format.md
@@ -1,29 +1,110 @@
----
-sidebar_position: 5
-slug: /concepts/codepick-format
----
-
# Formato Codepick
El **Formato Codepick** es una sintaxis estructurada de Markdown diseñada para incrustar contenido de archivos junto con sus rutas de destino.
Este formato es el núcleo de cómo Codepicker se comunica con los LLMs, garantizando que el contexto se preserve y se pueda aplicar de vuelta al sistema de archivos sin ambigüedades.
+## Ejemplo
+
+::: code-group
+
+````markdown [codepick-output.md]
+```ts
+// src/index.ts
+console.log('Hola');
+```
+
+```json
+// config.json
+{
+ "name": "mi-app"
+}
+```
+````
+
+:::
+
## Estructura
Cada archivo se representa como un bloque de código donde:
1. **Etiqueta de apertura**: 3 o más comillas invertidas seguidas de una extensión de lenguaje opcional.
+
+::: code-group
+
+````markdown [codepick-output.md]
+// [!code ++]
+
+```ts
+// src/index.ts
+console.log('Hola');
+```
+
+// [!code ++]
+
+```json
+// config.json
+{
+ "name": "mi-app"
+}
+```
+````
+
+:::
+
2. **Primera línea interna**: `// ruta/del/archivo.ext` (la ruta del sistema de archivos destino).
+
+::: code-group
+
+````markdown [codepick-output.md]
+```ts
+// [!code ++]
+// src/index.ts
+console.log('Hola');
+```
+
+```json
+// [!code ++]
+// config.json
+{
+ "name": "mi-app"
+}
+```
+````
+
+:::
+
3. **Contenido**: El contenido real del archivo (cualquier texto).
+
+::: code-group
+
+````markdown [codepick-output.md]
+```ts
+// src/index.ts
+// [!code ++]
+console.log('Hola');
+```
+
+```json
+// config.json
+// [!code ++:3]
+{
+ "name": "mi-app"
+}
+```
+````
+
+:::
+
4. **Etiqueta de cierre**: El mismo número de comillas invertidas que en la apertura.
-## Ejemplo
+::: code-group
-````markdown
+````markdown [codepick-output.md]
```ts
// src/index.ts
console.log('Hola');
+// [!code ++]
```
```json
@@ -31,9 +112,12 @@ console.log('Hola');
{
"name": "mi-app"
}
+// [!code ++]
```
````
+:::
+
## Reglas del Formato
- Las rutas deben comenzar con `// ` (con un espacio después de las barras).
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/contributing.md b/docs/es/contributing.md
similarity index 93%
rename from website/i18n/es/docusaurus-plugin-content-docs/contributing.md
rename to docs/es/contributing.md
index 41341cf..129348f 100644
--- a/website/i18n/es/docusaurus-plugin-content-docs/contributing.md
+++ b/docs/es/contributing.md
@@ -1,9 +1,3 @@
----
-sidebar_position: 5
-title: Contribuir
-description: Cómo contribuir al desarrollo de Codepicker.
----
-
# Contribuir
¡Gracias por tu interés en contribuir a Codepicker! Apreciamos cualquier tipo de contribución, ya sea reportando errores, mejorando la documentación o enviando código. El poder del Open Source :)
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/faq.md b/docs/es/faq.md
similarity index 93%
rename from website/i18n/es/docusaurus-plugin-content-docs/faq.md
rename to docs/es/faq.md
index d4f7317..d123707 100644
--- a/website/i18n/es/docusaurus-plugin-content-docs/faq.md
+++ b/docs/es/faq.md
@@ -1,9 +1,3 @@
----
-sidebar_position: 6
-title: Preguntas frecuentes
-description: Respuestas a las dudas más comunes sobre Codepicker.
----
-
# Preguntas frecuentes
## ¿Qué es el formato Codepick?
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/guides/advanced-options.mdx b/docs/es/guides/advanced-options.md
similarity index 97%
rename from website/i18n/es/docusaurus-plugin-content-docs/guides/advanced-options.mdx
rename to docs/es/guides/advanced-options.md
index feec789..23a9e36 100644
--- a/website/i18n/es/docusaurus-plugin-content-docs/guides/advanced-options.mdx
+++ b/docs/es/guides/advanced-options.md
@@ -1,8 +1,3 @@
----
-sidebar_position: 7
-slug: /guides/advanced-options
----
-
# Opciones Avanzadas
Codepicker ofrece una variedad de opciones avanzadas para adaptar su comportamiento a las necesidades específicas de tu proyecto y tu flujo de trabajo.
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/installation.md b/docs/es/guides/installation.md
similarity index 76%
rename from website/i18n/es/docusaurus-plugin-content-docs/installation.md
rename to docs/es/guides/installation.md
index b9180dc..ec332a8 100644
--- a/website/i18n/es/docusaurus-plugin-content-docs/installation.md
+++ b/docs/es/guides/installation.md
@@ -1,10 +1,4 @@
----
-sidebar_position: 2
-title: Instalación
-description: Cómo instalar Codepicker en tu sistema.
----
-
-# Instalación
+# Más opciones de Instalación
## Requisitos previos
@@ -48,8 +42,8 @@ Luego puedes agregar scripts en tu `package.json`:
```json
{
"scripts": {
- "pick-tests": "codepicker pick 'tests/**'",
- "pick-src": "codepicker pick 'src/**' '!**.svg'"
+ "pick:tests": "codepicker pick 'tests/**'",
+ "pick:src": "codepicker pick 'src/**' '!**.svg'"
}
}
```
@@ -66,4 +60,4 @@ O si usas `npx`, siempre obtendrás la última versión disponible.
## Solución de problemas
-Para más ayuda, consulta las [preguntas frecuentes](./faq.md).
+Para más ayuda, consulta las [preguntas frecuentes](../faq).
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/guides/llm-workflow.mdx b/docs/es/guides/llm-workflow.md
similarity index 82%
rename from website/i18n/es/docusaurus-plugin-content-docs/guides/llm-workflow.mdx
rename to docs/es/guides/llm-workflow.md
index e29ff68..b0fa4ee 100644
--- a/website/i18n/es/docusaurus-plugin-content-docs/guides/llm-workflow.mdx
+++ b/docs/es/guides/llm-workflow.md
@@ -1,8 +1,3 @@
----
-sidebar_position: 6
-slug: /guides/llm-workflow
----
-
# Flujo de Trabajo con LLMs
Codepicker brilla cuando se integra en tu flujo de trabajo diario con Modelos de Lenguaje Grande (LLMs) como ChatGPT, Claude o Gemini. Aquí te mostramos cómo sacarle el máximo provecho.
@@ -28,11 +23,11 @@ El flag `-D` (o `--include-docs`) es **crucial**. Añade la especificación del
### Paso 2: Interactuar con el LLM
-Pega el contenido en tu LLM y dale instrucciones claras:
+Pega el contenido en tu LLM y dale instrucciones:
```text
Aquí está el contexto de mi proyecto.
-Por favor, modifica la vista para añadir un botón azul con sombra moderna.
+Por favor, modifica la vista para añadir un botón con un mono en calzones bailando.
IMPORTANTE: Devuelve los archivos modificados usando estrictamente el formato Codepick.
```
@@ -50,5 +45,4 @@ codep apply -c
1. **Sé específico con los patrones**: No extraigas todo el proyecto si solo necesitas modificar un módulo específico. Esto ahorra tokens y reduce la confusión del LLM.
2. **Usa `--dry-run`**: Si no estás seguro de los cambios que el LLM propone, usa `codep apply -c --dry-run` para ver qué archivos se verían afectados antes de aplicarlos.
-3. **Controla el tamaño**: Si un archivo es muy grande, usa `-l 100` para limitar las líneas y darle al LLM solo la estructura o las partes relevantes.
-4. **Respeta el `.gitignore`**: Por defecto, Codepicker ignora `node_modules`, `.git`, etc. No uses `--no-gitignore` a menos que sea estrictamente necesario, para evitar saturar el contexto del LLM con archivos irrelevantes.
+3. **Respeta el `.gitignore`**: Por defecto, Codepicker ignora `node_modules`, `.git`, etc. No uses `--no-gitignore` a menos que sea estrictamente necesario, para evitar saturar el contexto del LLM con archivos irrelevantes.
diff --git a/docs/es/index.md b/docs/es/index.md
new file mode 100644
index 0000000..80bda9b
--- /dev/null
+++ b/docs/es/index.md
@@ -0,0 +1,24 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+ name: 'CODEPICKER'
+ text: 'Empaqueta todo tu proyecto en un solo archivo y aplica cambios en él!'
+ tagline: Hay muchas formas de trabajar y programar con IA, ¿por qué no intentas con esta?
+ actions:
+ - theme: brand
+ text: Bienvenida
+ link: /es/intro
+ - theme: alt
+ text: Primeros pasos
+ link: /es/getting-started
+
+features:
+ - title: Optimizado para IA
+ details: El código de tu proyecto se empaqueta a un archivo legible que es entendido perfectamente por modelos LLM como ChatGPT, Claude, Deepseek entre otros.
+ - title: Aplica los cambios
+ details: Cualquier respuesta de chat de IA puede ser insertada en tu proyecto con un solo comando!
+ - title: Hazte Portable
+ details: Programa donde sea y como sea, no dependes de IDEs ni agentes de código. Solo de CODEPICKER y cualquier chat de IA.
+---
diff --git a/docs/es/usage-example.md b/docs/es/usage-example.md
new file mode 100644
index 0000000..bb91d5d
--- /dev/null
+++ b/docs/es/usage-example.md
@@ -0,0 +1,107 @@
+# Ejemplo de uso
+
+Veamos un ejemplo práctico. Hasta ahora tenemos el siguiente proyecto, es un botón que al hacer click encima le suma +1 al contador:
+
+::: code-group
+
+```js [script.js]
+const counterElement = document.getElementById('counter');
+const button = document.getElementById('btnIncrement');
+
+let count = 0;
+
+button.addEventListener('click', () => {
+ count++;
+ counterElement.textContent = count;
+});
+```
+
+```html [index.html]
+
+
+
+
+
+ Counter
+
+
+
+
Counter
+
0
+
+
+
+
+
+```
+
+:::
+
+Supongamos que además del botón de aumentar, necesitamos un botón para reducir el contador. Como somos muy productivos _(\*muy vagos)_, utilizaremos Codepicker para que alguna IA lo haga. Así que ejecutamos en la terminal el comando
+
+```shell
+codepicker "**" -c
+```
+
+Esto hace que se copie en nuestro portapapeles el contenido del proyecto entero. A continuación, vayamos a Deepseek y pidamos lo que nos hace falta
+
+
+
+Cuando responda, copiamos directamente su respuesta
+
+
+
+Y ejecutamos el comando de aplicar los cambios
+
+```shell
+codepicker apply -c
+```
+
+Listo! Se acaba de insertar el cambio en todos los archivos del proyecto:
+
+::: code-group
+
+```js [script.js]
+const counterElement = document.getElementById('counter');
+const incrementButton = document.getElementById('btnIncrement');
+const decrementButton = document.getElementById('btnDecrement'); // [!code ++]
+
+let count = 0;
+
+incrementButton.addEventListener('click', () => {
+ count++;
+ counterElement.textContent = count;
+});
+
+decrementButton.addEventListener('click', () => {
+ // [!code ++:4]
+ count--;
+ counterElement.textContent = count;
+});
+```
+
+```html [index.html]
+
+
+
+
+
+ Counter
+
+
+
+ 