[{"data":1,"prerenderedAt":5529},["ShallowReactive",2],{"article-es-unifying-ai-context-engineering-team":3,"linked-es-unifying-ai-context-engineering-team":419,"unifying-ai-context-engineering-team-surround":5522},{"article":4,"isFallback":418},{"id":5,"title":6,"author":7,"body":8,"date":403,"description":404,"extension":405,"meta":406,"navigation":407,"path":408,"seo":409,"sitemap":410,"stem":411,"tags":412,"thumbnail":416,"__hash__":417},"es_articles/articles/es/unifying-ai-context-engineering-team.md","Una sola fuente de verdad para la IA: Cómo unificar el contexto entre múltiples herramientas","Edwin Gonzalez",{"type":9,"value":10,"toc":390},"minimark",[11,19,24,27,30,33,37,42,45,48,51,103,107,115,118,140,143,147,150,153,156,159,185,188,234,240,244,252,256,263,268,271,277,280,286,289,293,296,302,308,311,317,320,323,329,333,336,356,360,363,366,369,383,386],[12,13,14],"p",{},[15,16],"img",{"alt":17,"src":18},"AI context banner","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1781744192/ai-context-banner-hub_niri0c.png",[20,21,23],"h2",{"id":22},"introducción","Introducción",[12,25,26],{},"Hoy en día tenemos una amplia variedad de herramientas de inteligencia artificial que por supuesto nos ayudan a trabajar más rapido más eficientemente ahorrandonos un par de horas.\nPero cuando hablamos de equipos que utilizan distintas herramientas, ya sea por preferencias personales, costos o necesidades especificas, comienza a aparecer un problema menos evidente.",[12,28,29],{},"El conocimiento del equipo comienza a divagar. Comandos, skills y contextos que funcionaban bien en una herramienta no siempre funcionan en otras, por lo que se convierte en un desafío, que muchas veces se paga con altos costos como por ejemplo: Consumo excesivo de tokens, entre otros.",[12,31,32],{},"Al final, poco a poco cada miembro del equipo va terminando de construir su propio entorno de trabajo, generando duplicación de esfuerzo y por su puesto mala experiencia con la inconsistencia dentro del mismo proyecto.",[20,34,36],{"id":35},"el-problema-oculto-de-trabajar-con-múltiples-herramientas-de-ia","El problema oculto de trabajar con múltiples herramientas de IA",[38,39,41],"h3",{"id":40},"cada-herramienta-crea-sus-propias-reglas","Cada herramienta crea sus propias reglas",[12,43,44],{},"Durante el auge de las herramientas de IA, muchos equipos adoptaron una solución principal para asistir en tareas de desarrollo. Pero a medida que aparecían nuevas funcionalidades, modelos más capaces y diferentes formas de trabajar, algunos miembros del equipo comenzaron a experimentar con otras alternativas.",[12,46,47],{},"Esto parecía algo genial. Después de todo, cada desarrollador podía elegir la herramienta con la que se sentía más productivo. Pero fue ahí donde apareció un problema que no se había considerado.",[12,49,50],{},"Estas herramientas proponen su propia forma de manejar o almacenar contextos, instrucciones o reglas para ayudar a los modelos a entender mejor el proyecto y ofrecer una mejor experiencia al desarrollador.",[52,53,54,67],"table",{},[55,56,57],"thead",{},[58,59,60,64],"tr",{},[61,62,63],"th",{},"Herramienta",[61,65,66],{},"Configuración",[68,69,70,79,87,95],"tbody",{},[58,71,72,76],{},[73,74,75],"td",{},"Cursor",[73,77,78],{},".cursor/rules",[58,80,81,84],{},[73,82,83],{},"Claude Code",[73,85,86],{},".claude/CLAUDE.md",[58,88,89,92],{},[73,90,91],{},"Codex",[73,93,94],{},"instrucciones propias",[58,96,97,100],{},[73,98,99],{},"Otras herramientas",[73,101,102],{},"formatos diferentes",[38,104,106],{"id":105},"duplicación-es-costosa","Duplicación es costosa",[12,108,109,110,114],{},"Aqui comienza a aparecer un problema que inicialmente puede pasar desapercibido: ",[111,112,113],"strong",{},"la duplicación del conocimiento",".",[12,116,117],{},"La misma información termina replicándose en múltiples lugares:",[119,120,121,125,128,131,134,137],"ul",{},[122,123,124],"li",{},"Arquitectura del proyecto",[122,126,127],{},"Convenciones de código",[122,129,130],{},"Estándares de testing",[122,132,133],{},"Flujos de Git",[122,135,136],{},"Comandos reutilizables",[122,138,139],{},"Conocimiento del negocio",[12,141,142],{},"Y mantener esta información sincronizada no solo requiere tiempo, sino que también aumenta el riesgo de inconsistencias. Un cambio realizado en un lugar puede quedar desactualizado en otro, generando comportamientos distintos entre herramientas y resultados menos predecibles para el equipo.",[20,144,146],{"id":145},"solución-fuente-de-la-verdad","Solución: Fuente de la verdad",[12,148,149],{},"En base a mi experiencia, luego de encontrarme varias veces con escenarios de contextos duplicados, reglas inconsistentes y comandos que solo funcionaban en una herramienta específica, empecé a preguntarme si estaba resolviendo el problema incorrecto.",[12,151,152],{},"Al principio intentaba mantener sincronizadas las reglas y configuraciones de Cursor y Claude. Cada vez que agregaba una nueva regla o mejoraba un comando, debía replicar estos cambios en varios lugares. Esto era un proceso muy manual, repetitivo y propenso a errores.",[12,154,155],{},"La idea que terminó funcionando fue mucho más simple: dejar de considerar a las herramientas como el lugar donde vive el conocimiento.",[12,157,158],{},"En lugar de almacenar contexto, comandos y habilidades dentro de Cursor o Claude, decidí centralizar todo en un directorio dedicado dentro del repositorio:",[160,161,166],"pre",{"className":162,"code":163,"language":164,"meta":165,"style":165},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# root project\nai/\n","bash","",[167,168,169,178],"code",{"__ignoreMap":165},[170,171,174],"span",{"class":172,"line":173},"line",1,[170,175,177],{"class":176},"sHwdD","# root project\n",[170,179,181],{"class":172,"line":180},2,[170,182,184],{"class":183},"sBMFI","ai/\n",[12,186,187],{},"La diferencia es importante:",[52,189,190,200],{},[55,191,192],{},[58,193,194,197],{},[61,195,196],{},"Antes",[61,198,199],{},"Después",[68,201,202,210,218,226],{},[58,203,204,207],{},[73,205,206],{},"El conocimiento vive dentro de cada herramienta.",[73,208,209],{},"El conocimiento vive en /ai.",[58,211,212,215],{},[73,213,214],{},"Cursor tiene sus reglas.",[73,216,217],{},"Cursor consume reglas desde /ai.",[58,219,220,223],{},[73,221,222],{},"Claude tiene su contexto.",[73,224,225],{},"Claude consume contexto desde /ai.",[58,227,228,231],{},[73,229,230],{},"Los cambios deben copiarse entre herramientas.",[73,232,233],{},"Un cambio en /ai se refleja para todas.",[235,236,237],"tip",{},[12,238,239],{},"El objetivo no es que todo el equipo use la misma IA. El objetivo es que todas las IAs usen el mismo conocimiento.",[38,241,243],{"id":242},"arquitectura-propuesta","Arquitectura propuesta",[160,245,250],{"className":246,"code":248,"language":249,"meta":165},[247],"language-text","/ai\n├─ context\n│  ├─ architecture.md\n│  ├─ frontend.md\n│  └─ business-domain.md\n├─ commands\n│  ├─ review.md\n│  ├─ refactor.md\n│  └─ create-component.md\n├─ skills\n│  ├─ testing.md\n│  ├─ performance.md\n│  └─ accessibility.md\n└─ agents\n   ├─ frontend-agent.md\n   └─ reviewer-agent.md\n","text",[167,251,248],{"__ignoreMap":165},[38,253,255],{"id":254},"cómo-se-conecta-cada-herramienta","¿Cómo se conecta cada herramienta?",[12,257,258,259,262],{},"Una vez que el conocimiento del proyecto se encuentra centralizado en el directorio ",[167,260,261],{},"/ai",", las herramientas dejan de ser el lugar donde se define el contexto y pasan a ser simplemente consumidores de ese conocimiento.",[264,265,267],"h4",{"id":266},"integración-con-claude-code","Integración con Claude Code",[12,269,270],{},"En lugar de mantener un archivo CLAUDE.md grande y difícil de actualizar, podemos mantenerlo pequeño y enfocado únicamente en referenciar el contenido compartido.",[160,272,275],{"className":273,"code":274,"language":249,"meta":165},[247],".claude/\n└── CLAUDE.md\n",[167,276,274],{"__ignoreMap":165},[12,278,279],{},"Ejemplo:",[160,281,284],{"className":282,"code":283,"language":249,"meta":165},[247],"@ai/context/architecture.md\n@ai/context/frontend.md\n@ai/commands/review.md\n",[167,285,283],{"__ignoreMap":165},[12,287,288],{},"De esta forma, Claude Code consume el mismo conocimiento centralizado que utiliza el resto del equipo.",[264,290,292],{"id":291},"integración-con-cursor","Integración con Cursor",[12,294,295],{},"La misma estrategia puede aplicarse en Cursor.",[12,297,298,299,301],{},"En lugar de duplicar reglas, instrucciones y documentación dentro de ",[167,300,78],{},", las reglas pueden mantenerse mínimas y delegar el conocimiento al directorio compartido.",[160,303,306],{"className":304,"code":305,"language":249,"meta":165},[247],".cursor/\n└── rules/\n",[167,307,305],{"__ignoreMap":165},[12,309,310],{},"Las reglas pueden referenciar información proveniente de:",[160,312,315],{"className":313,"code":314,"language":249,"meta":165},[247],"/ai/context\n/ai/commands\n/ai/skills\n",[167,316,314],{"__ignoreMap":165},[12,318,319],{},"Esto permite que Cursor trabaje con la misma arquitectura, convenciones, comandos y conocimiento de negocio que otras herramientas.",[12,321,322],{},"Aqui un pequeño diagrama de referencia:",[160,324,327],{"className":325,"code":326,"language":249},[247],"                                        ┌──────────┐\n                                        │ Cursor   │\n                                        └────┬─────┘\n                                             │\n                                        ┌────▼─────┐\n                                        │ Claude   │\n                                        └────┬─────┘\n                                             │\n                                        ┌────▼─────┐\n                                        │ Codex    │\n                                        └────┬─────┘\n                                             │\n                                        ┌────▼─────┐\n                                        │  /ai     │\n                                        │ Source   │\n                                        │ of Truth │\n                                        └──────────┘\n",[167,328,326],{"__ignoreMap":165},[264,330,332],{"id":331},"beneficios","Beneficios",[12,334,335],{},"Cuando el conocimiento se encuentra centralizado, agregar una nueva herramienta deja de implicar migrar o reescribir contexto. Los beneficios son inmediatos:",[119,337,338,341,344,347,350,353],{},[122,339,340],{},"Menos duplicación de información.",[122,342,343],{},"Menor costo de mantenimiento.",[122,345,346],{},"Una única fuente de verdad.",[122,348,349],{},"Contexto consistente entre herramientas.",[122,351,352],{},"Comandos y habilidades reutilizables.",[122,354,355],{},"Incorporación más sencilla de nuevas herramientas de IA.",[20,357,359],{"id":358},"conclusión","Conclusión",[12,361,362],{},"La cantidad de herramientas de IA seguirá creciendo. Nuevos modelos aparecerán, algunas plataformas evolucionarán, otras desaparecerán y probablemente dentro de unos años estemos utilizando herramientas que hoy ni siquiera existen. Intentar estandarizar una herramienta específica es una estrategia complicada de mantener. Tarde o temprano surgirán nuevas necesidades, preferencias o restricciones que llevarán al equipo a explorar otras alternativas.",[12,364,365],{},"Las herramientas cambiarán, pero el conocimiento del equipo no debería cambiar de lugar cada vez que aparece una nueva IA. Por eso, en lugar de invertir esfuerzos en replicar contexto entre herramientas, resulta más sostenible construir una única fuente de verdad que pueda ser consumida por cualquiera de ellas.",[12,367,368],{},"Cuando el conocimiento está centralizado:",[119,370,371,374,377,380],{},[122,372,373],{},"Cambiar de herramienta deja de ser un problema.",[122,375,376],{},"Incorporar nuevas IAs requiere menos esfuerzo.",[122,378,379],{},"El equipo trabaja con reglas y contexto consistentes.",[122,381,382],{},"Se reduce la duplicación y el mantenimiento.",[12,384,385],{},"No estandarices una herramienta. Estandariza el conocimiento.",[387,388,389],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":165,"searchDepth":180,"depth":180,"links":391},[392,393,398,402],{"id":22,"depth":180,"text":23},{"id":35,"depth":180,"text":36,"children":394},[395,397],{"id":40,"depth":396,"text":41},3,{"id":105,"depth":396,"text":106},{"id":145,"depth":180,"text":146,"children":399},[400,401],{"id":242,"depth":396,"text":243},{"id":254,"depth":396,"text":255},{"id":358,"depth":180,"text":359},"2026-06-19T00:00:00.000Z","Descubre cómo unificar contexto, comandos y habilidades de IA en un único lugar para trabajar de forma consistente entre Cursor, Claude, Codex y otras herramientas, reduciendo duplicación y mejorando la colaboración entre el equipo técnico.","md",{},true,"/articles/es/unifying-ai-context-engineering-team",{"title":6,"description":404},{"loc":408},"articles/es/unifying-ai-context-engineering-team",[413,414,415],"AI-engineering","developer-experience","AI-tools","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1781745190/ai-context-thumbnail_gqqef1.png","7nTwRaTkwT4nqvRwQgmFKCUbgb9PEXHSOg4RY_My7gw",false,[420,776,1186,2030,2788],{"id":421,"title":422,"author":7,"body":423,"date":403,"description":768,"extension":405,"meta":769,"navigation":407,"path":770,"seo":771,"sitemap":772,"stem":773,"tags":774,"thumbnail":416,"__hash__":775},"en_articles/articles/en/unifying-ai-context-engineering-team.md","A single source of truth for AI: How to unify context across multiple tools",{"type":9,"value":424,"toc":756},[425,429,433,436,439,442,446,450,453,456,459,500,504,510,513,533,536,540,543,546,549,552,564,567,613,618,622,627,631,637,641,644,649,652,657,660,664,667,673,678,681,686,689,692,697,701,704,724,728,731,734,737,751,754],[12,426,427],{},[15,428],{"alt":17,"src":18},[20,430,432],{"id":431},"introduction","Introduction",[12,434,435],{},"Today we have a wide variety of artificial intelligence tools that, of course, help us work faster and more efficiently, saving us a couple of hours.\nBut when we talk about teams using different tools, whether due to personal preferences, costs, or specific needs, a less obvious problem starts to emerge.",[12,437,438],{},"The team's knowledge begins to drift. Commands, skills, and contexts that worked well in one tool don't always work in others, which turns into a challenge that often comes at a high cost: excessive token consumption, among other things.",[12,440,441],{},"In the end, little by little, each team member ends up building their own working environment, generating duplicated effort and, of course, a poor experience due to inconsistency within the same project.",[20,443,445],{"id":444},"the-hidden-problem-of-working-with-multiple-ai-tools","The hidden problem of working with multiple AI tools",[38,447,449],{"id":448},"each-tool-creates-its-own-rules","Each tool creates its own rules",[12,451,452],{},"During the rise of AI tools, many teams adopted a primary solution to assist with development tasks. But as new features, more capable models, and different ways of working appeared, some team members began experimenting with other alternatives.",[12,454,455],{},"This seemed great. After all, each developer could choose the tool they felt most productive with. But that's where a problem no one had anticipated appeared.",[12,457,458],{},"These tools propose their own way of managing or storing contexts, instructions, or rules to help models better understand the project and provide a better developer experience.",[52,460,461,471],{},[55,462,463],{},[58,464,465,468],{},[61,466,467],{},"Tool",[61,469,470],{},"Configuration",[68,472,473,479,485,492],{},[58,474,475,477],{},[73,476,75],{},[73,478,78],{},[58,480,481,483],{},[73,482,83],{},[73,484,86],{},[58,486,487,489],{},[73,488,91],{},[73,490,491],{},"custom instructions",[58,493,494,497],{},[73,495,496],{},"Other tools",[73,498,499],{},"different formats",[38,501,503],{"id":502},"duplication-is-costly","Duplication is costly",[12,505,506,507,114],{},"This is where a problem that can initially go unnoticed starts to appear: ",[111,508,509],{},"knowledge duplication",[12,511,512],{},"The same information ends up replicated across multiple places:",[119,514,515,518,521,524,527,530],{},[122,516,517],{},"Project architecture",[122,519,520],{},"Code conventions",[122,522,523],{},"Testing standards",[122,525,526],{},"Git workflows",[122,528,529],{},"Reusable commands",[122,531,532],{},"Business domain knowledge",[12,534,535],{},"And keeping this information in sync not only takes time, but also increases the risk of inconsistencies. A change made in one place can become outdated in another, generating different behaviors across tools and less predictable results for the team.",[20,537,539],{"id":538},"solution-source-of-truth","Solution: Source of truth",[12,541,542],{},"Based on my experience, after repeatedly running into scenarios of duplicated contexts, inconsistent rules, and commands that only worked in one specific tool, I started asking myself whether I was solving the wrong problem.",[12,544,545],{},"At first I tried to keep Cursor and Claude rules and configurations in sync. Every time I added a new rule or improved a command, I had to replicate those changes in multiple places. This was a very manual, repetitive, and error-prone process.",[12,547,548],{},"The idea that ended up working was much simpler: stop thinking of the tools as the place where knowledge lives.",[12,550,551],{},"Instead of storing context, commands, and skills inside Cursor or Claude, I decided to centralize everything in a dedicated directory within the repository:",[160,553,554],{"className":162,"code":163,"language":164,"meta":165,"style":165},[167,555,556,560],{"__ignoreMap":165},[170,557,558],{"class":172,"line":173},[170,559,177],{"class":176},[170,561,562],{"class":172,"line":180},[170,563,184],{"class":183},[12,565,566],{},"The difference matters:",[52,568,569,579],{},[55,570,571],{},[58,572,573,576],{},[61,574,575],{},"Before",[61,577,578],{},"After",[68,580,581,589,597,605],{},[58,582,583,586],{},[73,584,585],{},"Knowledge lives inside each tool.",[73,587,588],{},"Knowledge lives in /ai.",[58,590,591,594],{},[73,592,593],{},"Cursor has its own rules.",[73,595,596],{},"Cursor consumes rules from /ai.",[58,598,599,602],{},[73,600,601],{},"Claude has its own context.",[73,603,604],{},"Claude consumes context from /ai.",[58,606,607,610],{},[73,608,609],{},"Changes must be copied across tools.",[73,611,612],{},"A change in /ai is reflected for all of them.",[235,614,615],{},[12,616,617],{},"The goal is not for the whole team to use the same AI. The goal is for all AIs to use the same knowledge.",[38,619,621],{"id":620},"proposed-architecture","Proposed architecture",[160,623,625],{"className":624,"code":248,"language":249,"meta":165},[247],[167,626,248],{"__ignoreMap":165},[38,628,630],{"id":629},"how-does-each-tool-connect","How does each tool connect?",[12,632,633,634,636],{},"Once the project's knowledge is centralized in the ",[167,635,261],{}," directory, the tools stop being the place where context is defined and become simply consumers of that knowledge.",[264,638,640],{"id":639},"integration-with-claude-code","Integration with Claude Code",[12,642,643],{},"Instead of maintaining a large and hard-to-update CLAUDE.md file, we can keep it small and focused solely on referencing the shared content.",[160,645,647],{"className":646,"code":274,"language":249,"meta":165},[247],[167,648,274],{"__ignoreMap":165},[12,650,651],{},"Example:",[160,653,655],{"className":654,"code":283,"language":249,"meta":165},[247],[167,656,283],{"__ignoreMap":165},[12,658,659],{},"This way, Claude Code consumes the same centralized knowledge used by the rest of the team.",[264,661,663],{"id":662},"integration-with-cursor","Integration with Cursor",[12,665,666],{},"The same strategy can be applied in Cursor.",[12,668,669,670,672],{},"Instead of duplicating rules, instructions, and documentation inside ",[167,671,78],{},", the rules can be kept minimal and delegate knowledge to the shared directory.",[160,674,676],{"className":675,"code":305,"language":249,"meta":165},[247],[167,677,305],{"__ignoreMap":165},[12,679,680],{},"The rules can reference information coming from:",[160,682,684],{"className":683,"code":314,"language":249,"meta":165},[247],[167,685,314],{"__ignoreMap":165},[12,687,688],{},"This allows Cursor to work with the same architecture, conventions, commands, and business knowledge as other tools.",[12,690,691],{},"Here is a small reference diagram:",[160,693,695],{"className":694,"code":326,"language":249},[247],[167,696,326],{"__ignoreMap":165},[264,698,700],{"id":699},"benefits","Benefits",[12,702,703],{},"When knowledge is centralized, adding a new tool no longer means migrating or rewriting context. The benefits are immediate:",[119,705,706,709,712,715,718,721],{},[122,707,708],{},"Less information duplication.",[122,710,711],{},"Lower maintenance cost.",[122,713,714],{},"A single source of truth.",[122,716,717],{},"Consistent context across tools.",[122,719,720],{},"Reusable commands and skills.",[122,722,723],{},"Easier onboarding of new AI tools.",[20,725,727],{"id":726},"conclusion","Conclusion",[12,729,730],{},"The number of AI tools will keep growing. New models will appear, some platforms will evolve, others will disappear, and in a few years we'll probably be using tools that don't even exist today. Trying to standardize on a specific tool is a strategy that's hard to maintain. Sooner or later, new needs, preferences, or constraints will lead the team to explore other alternatives.",[12,732,733],{},"The tools will change, but the team's knowledge shouldn't have to move every time a new AI appears. That's why, instead of investing effort in replicating context across tools, it's more sustainable to build a single source of truth that any of them can consume.",[12,735,736],{},"When knowledge is centralized:",[119,738,739,742,745,748],{},[122,740,741],{},"Switching tools stops being a problem.",[122,743,744],{},"Onboarding new AIs requires less effort.",[122,746,747],{},"The team works with consistent rules and context.",[122,749,750],{},"Duplication and maintenance are reduced.",[12,752,753],{},"Don't standardize a tool. Standardize the knowledge.",[387,755,389],{},{"title":165,"searchDepth":180,"depth":180,"links":757},[758,759,763,767],{"id":431,"depth":180,"text":432},{"id":444,"depth":180,"text":445,"children":760},[761,762],{"id":448,"depth":396,"text":449},{"id":502,"depth":396,"text":503},{"id":538,"depth":180,"text":539,"children":764},[765,766],{"id":620,"depth":396,"text":621},{"id":629,"depth":396,"text":630},{"id":726,"depth":180,"text":727},"Discover how to unify AI context, commands, and skills in a single place to work consistently across Cursor, Claude, Codex, and other tools, reducing duplication and improving collaboration within your engineering team.",{},"/articles/en/unifying-ai-context-engineering-team",{"title":422,"description":768},{"loc":770},"articles/en/unifying-ai-context-engineering-team",[413,414,415],"qRWMcRZkF8eliY6bgQUhlfR8DDmUCwnARqfSJsCjBiU",{"id":777,"title":778,"author":7,"body":779,"date":1174,"description":1175,"extension":405,"meta":1176,"navigation":407,"path":1177,"seo":1178,"sitemap":1179,"stem":1180,"tags":1181,"thumbnail":832,"__hash__":1185},"en_articles/articles/en/broken-arch-linux.md","Broken Arch Linux: Kernel Panic - failed to read configuration 'etc/mkinitcpio.conf",{"type":9,"value":780,"toc":1169},[781,784,787,820,827,833,837,840,849,852,856,862,865,871,943,951,964,967,1025,1030,1043,1046,1057,1063,1068,1084,1087,1113,1116,1118,1125,1128,1139,1142,1163,1166],[12,782,783],{},"In this article, I will document how I resolved a critical error on Arch Linux where the system failed to generate initramfs images due to a corrupted mkinitcpio.conf file. In simpler terms, GRUB was not functioning correctly to proceed with system initialization after a faulty dependency upgrade.",[12,785,786],{},"The main error was:",[160,788,790],{"className":162,"code":789,"language":164,"meta":165,"style":165},"error: fs/fshelp.c:find_file:266: file '/initramfs-linux.img' not found\n",[167,791,792],{"__ignoreMap":165},[170,793,794,797,801,804,808,811,814,817],{"class":172,"line":173},[170,795,796],{"class":183},"error:",[170,798,800],{"class":799},"sfazB"," fs/fshelp.c:find_file:266:",[170,802,803],{"class":799}," file",[170,805,807],{"class":806},"sMK4o"," '",[170,809,810],{"class":799},"/initramfs-linux.img",[170,812,813],{"class":806},"'",[170,815,816],{"class":799}," not",[170,818,819],{"class":799}," found\n",[12,821,822,823,826],{},"and then ",[111,824,825],{},"KERNEL PANIC","!",[12,828,829],{},[15,830],{"alt":831,"src":832},"Kernel panic","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231242/kernel-panic_kwkqwr.png",[20,834,836],{"id":835},"cause-of-the-problem","Cause of the problem",[12,838,839],{},"After attempting to upgrade dependencies, for some reason (installation interruption, package corruption, or incomplete configuration), the essential file:",[160,841,843],{"className":162,"code":842,"language":164,"meta":165,"style":165},"/etc/mkinitcpio.conf\n",[167,844,845],{"__ignoreMap":165},[170,846,847],{"class":172,"line":173},[170,848,842],{"class":183},[12,850,851],{},"It was damaged/modified in the system, which made it impossible to generate an initramfs.",[20,853,855],{"id":854},"step-by-step-solution","Step by step solution",[857,858,859],"ol",{},[122,860,861],{},"Enter the chroot correctly",[12,863,864],{},"First, we mount and access the system we have installed on our disk from a live iso",[866,867,868],"warning",{},[12,869,870],{},"NOTE: You must to download and access from a live ISO",[160,872,874],{"className":162,"code":873,"language":164,"meta":165,"style":165},"mount /dev/sdXn /mnt\nmount -t proc /proc /mnt/proc\nmount --rbind /sys /mnt/sys\nmount --rbind /dev /mnt/dev\n\narch-chroot /mnt\n\n",[167,875,876,887,903,916,929,935],{"__ignoreMap":165},[170,877,878,881,884],{"class":172,"line":173},[170,879,880],{"class":183},"mount",[170,882,883],{"class":799}," /dev/sdXn",[170,885,886],{"class":799}," /mnt\n",[170,888,889,891,894,897,900],{"class":172,"line":180},[170,890,880],{"class":183},[170,892,893],{"class":799}," -t",[170,895,896],{"class":799}," proc",[170,898,899],{"class":799}," /proc",[170,901,902],{"class":799}," /mnt/proc\n",[170,904,905,907,910,913],{"class":172,"line":396},[170,906,880],{"class":183},[170,908,909],{"class":799}," --rbind",[170,911,912],{"class":799}," /sys",[170,914,915],{"class":799}," /mnt/sys\n",[170,917,919,921,923,926],{"class":172,"line":918},4,[170,920,880],{"class":183},[170,922,909],{"class":799},[170,924,925],{"class":799}," /dev",[170,927,928],{"class":799}," /mnt/dev\n",[170,930,932],{"class":172,"line":931},5,[170,933,934],{"emptyLinePlaceholder":407},"\n",[170,936,938,941],{"class":172,"line":937},6,[170,939,940],{"class":183},"arch-chroot",[170,942,886],{"class":799},[857,944,945],{"start":180},[122,946,947,948],{},"Manually create or edit  ",[167,949,950],{},"/etc/mkinitcpio.conf",[160,952,954],{"className":162,"code":953,"language":164,"meta":165,"style":165},"nano /etc/mkinitcpio.conf\n",[167,955,956],{"__ignoreMap":165},[170,957,958,961],{"class":172,"line":173},[170,959,960],{"class":183},"nano",[170,962,963],{"class":799}," /etc/mkinitcpio.conf\n",[12,965,966],{},"And I added this content (the official default Arch file):",[160,968,972],{"className":969,"code":970,"language":971,"meta":165,"style":165},"language-conf shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","MODULES=()\nBINARIES=()\nFILES=()\n\nHOOKS=(base udev autodetect microcode modconf kms keyboard keymap consolefont block filesystems fsck)\n\nCOMPRESSION=\"zstd\"\nCOMPRESSION_OPTIONS=()\n\nMODULES_DECOMPRESS=\"no\"\n","conf",[167,973,974,979,984,989,993,998,1002,1008,1014,1019],{"__ignoreMap":165},[170,975,976],{"class":172,"line":173},[170,977,978],{},"MODULES=()\n",[170,980,981],{"class":172,"line":180},[170,982,983],{},"BINARIES=()\n",[170,985,986],{"class":172,"line":396},[170,987,988],{},"FILES=()\n",[170,990,991],{"class":172,"line":918},[170,992,934],{"emptyLinePlaceholder":407},[170,994,995],{"class":172,"line":931},[170,996,997],{},"HOOKS=(base udev autodetect microcode modconf kms keyboard keymap consolefont block filesystems fsck)\n",[170,999,1000],{"class":172,"line":937},[170,1001,934],{"emptyLinePlaceholder":407},[170,1003,1005],{"class":172,"line":1004},7,[170,1006,1007],{},"COMPRESSION=\"zstd\"\n",[170,1009,1011],{"class":172,"line":1010},8,[170,1012,1013],{},"COMPRESSION_OPTIONS=()\n",[170,1015,1017],{"class":172,"line":1016},9,[170,1018,934],{"emptyLinePlaceholder":407},[170,1020,1022],{"class":172,"line":1021},10,[170,1023,1024],{},"MODULES_DECOMPRESS=\"no\"\n",[857,1026,1027],{"start":396},[122,1028,1029],{},"Regenerate the initramfs",[160,1031,1033],{"className":162,"code":1032,"language":164,"meta":165,"style":165},"mkinitcpio -P\n",[167,1034,1035],{"__ignoreMap":165},[170,1036,1037,1040],{"class":172,"line":173},[170,1038,1039],{"class":183},"mkinitcpio",[170,1041,1042],{"class":799}," -P\n",[12,1044,1045],{},"result",[160,1047,1051],{"className":1048,"code":1049,"language":1050,"meta":165,"style":165},"language-txt shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","Initcpio image generation successful\n","txt",[167,1052,1053],{"__ignoreMap":165},[170,1054,1055],{"class":172,"line":173},[170,1056,1049],{},[12,1058,1059,1060,114],{},"This confirms that the system already has a valid ",[167,1061,1062],{},"initramfs-linux.img",[857,1064,1065],{"start":918},[122,1066,1067],{},"Regenerate GRUB",[160,1069,1071],{"className":162,"code":1070,"language":164,"meta":165,"style":165},"grub-mkconfig -o /boot/grub/grub.cfg\n",[167,1072,1073],{"__ignoreMap":165},[170,1074,1075,1078,1081],{"class":172,"line":173},[170,1076,1077],{"class":183},"grub-mkconfig",[170,1079,1080],{"class":799}," -o",[170,1082,1083],{"class":799}," /boot/grub/grub.cfg\n",[12,1085,1086],{},"finally",[160,1088,1090],{"className":162,"code":1089,"language":164,"meta":165,"style":165},"exit\numount -R /mnt\nreboot\n",[167,1091,1092,1098,1108],{"__ignoreMap":165},[170,1093,1094],{"class":172,"line":173},[170,1095,1097],{"class":1096},"s2Zo4","exit\n",[170,1099,1100,1103,1106],{"class":172,"line":180},[170,1101,1102],{"class":183},"umount",[170,1104,1105],{"class":799}," -R",[170,1107,886],{"class":799},[170,1109,1110],{"class":172,"line":396},[170,1111,1112],{"class":183},"reboot\n",[12,1114,1115],{},"And the system started up without problems.",[20,1117,727],{"id":726},[12,1119,1120,1121,1124],{},"The error “failed to read configuration ",[167,1122,1123],{},"etc/mkinitcpio.conf","” usually indicates that the mkinitcpio configuration file is missing or corrupted.",[12,1126,1127],{},"The solution involves:",[119,1129,1130,1133,1136],{},[122,1131,1132],{},"Manually creating a valid file",[122,1134,1135],{},"Regenerating the initramfs",[122,1137,1138],{},"Updating GRUB",[12,1140,1141],{},"Documenting this helped me better understand how the boot process works in Arch Linux and how to handle emergencies from a Live ISO.",[1143,1144,1145,1151,1157,1160],"card",{},[12,1146,1147,1150],{},[111,1148,1149],{},"GRUB"," = Bootloader.",[12,1152,1153,1156],{},[111,1154,1155],{},"initramfs"," = Initial toolkit.",[12,1158,1159],{},"GRUB doesn't create, it only loads the initramfs.\nThe initramfs allows the kernel to find the disk and mount the actual system.",[12,1161,1162],{},"Without a proper initramfs → no boot.",[12,1164,1165],{},"It has been a pleasure to share this experience with you, see you next time!!. :)",[387,1167,1168],{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":165,"searchDepth":180,"depth":180,"links":1170},[1171,1172,1173],{"id":835,"depth":180,"text":836},{"id":854,"depth":180,"text":855},{"id":726,"depth":180,"text":727},"2025-11-25T00:00:00.000Z","Solution to the critical error in Arch Linux - Kernel Panic - initramfs images could not be generated (GRUB).",{},"/articles/en/broken-arch-linux",{"title":778,"description":1175},{"loc":1177},"articles/en/broken-arch-linux",[1182,1183,1184],"linux","arch-linux","opensource","kyRtTjt8r-bgD2Saw9p7ueFlG_r3qvPOPxdgzpcvcgs",{"id":1187,"title":1188,"author":7,"body":1189,"date":2016,"description":2017,"extension":405,"meta":2018,"navigation":407,"path":2019,"seo":2020,"sitemap":2021,"stem":2022,"tags":2023,"thumbnail":2028,"__hash__":2029},"en_articles/articles/en/coverage-of-jest-unit-tests-using-github-action.md","Coverage of Jest unit tests using GitHub actiong",{"type":9,"value":1190,"toc":2013},[1191,1194,1197,1200,1210,1215,1221,1225,1235,1347,1356,1457,1482,1544,1549,1607,1612,1749,1752,1975,1978,1981,1987,1990,2007,2010],[12,1192,1193],{},"Code coverage is an important metric for measuring the quality of your software tests. It provides a way to quantify how much of your code is being tested and helps you identify areas of your code that may not be adequately covered by your tests.",[12,1195,1196],{},"When you use Jest with GitHub Actions, you can automate the process of running your tests and getting coverage reports, making it easier to track your code coverage over time. This can help you ensure that your code is well-tested, reduce the risk of introducing bugs into your code, and make it easier to maintain your code in the future.",[12,1198,1199],{},"Additionally, having code coverage reports available in your GitHub repository can help you communicate the quality of your tests to other stakeholders, such as team members or customers. This can increase trust in your code and help build confidence in your development process.",[12,1201,1202,1203],{},"Now, we will use the following tool: ",[1204,1205,1209],"a",{"href":1206,"rel":1207},"https://www.covbot.dev/",[1208],"nofollow","Jest coverage report action",[235,1211,1212],{},[12,1213,1214],{},"It’s a tool that helps you keep track of coverage of your project. Forms a reporting comment for each PR. In addition, highlights files with reduced coverage and new files",[12,1216,1217],{},[15,1218],{"alt":1219,"src":1220},"Track code","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231244/track-code_ss1ich.webp",[20,1222,1224],{"id":1223},"how-can-we-set-up-our-project","How can we set up our project?",[857,1226,1227],{},[122,1228,1229,1230],{},"Create a new script to run all unit tests and generate a coverage report.\n",[866,1231,1232],{},[12,1233,1234],{},"NOTE: This script generates a new file with a JSON extension, so for our GitHub action to work well, this file must already be added to the project when doing our PR. Since if it is not generated an error that the file is not found.",[160,1236,1240],{"className":1237,"code":1238,"language":1239,"meta":165,"style":165},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","//package.json\n{\n  \"name\": \"my project\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"coverage\": \"jest --json --coverage --outputFile=report.json\"\n  }\n //...\n}\n","json",[167,1241,1242,1247,1252,1278,1298,1312,1332,1337,1342],{"__ignoreMap":165},[170,1243,1244],{"class":172,"line":173},[170,1245,1246],{"class":176},"//package.json\n",[170,1248,1249],{"class":172,"line":180},[170,1250,1251],{"class":806},"{\n",[170,1253,1254,1257,1261,1264,1267,1270,1273,1275],{"class":172,"line":396},[170,1255,1256],{"class":806},"  \"",[170,1258,1260],{"class":1259},"spNyl","name",[170,1262,1263],{"class":806},"\"",[170,1265,1266],{"class":806},":",[170,1268,1269],{"class":806}," \"",[170,1271,1272],{"class":799},"my project",[170,1274,1263],{"class":806},[170,1276,1277],{"class":806},",\n",[170,1279,1280,1282,1285,1287,1289,1291,1294,1296],{"class":172,"line":918},[170,1281,1256],{"class":806},[170,1283,1284],{"class":1259},"version",[170,1286,1263],{"class":806},[170,1288,1266],{"class":806},[170,1290,1269],{"class":806},[170,1292,1293],{"class":799},"1.0.0",[170,1295,1263],{"class":806},[170,1297,1277],{"class":806},[170,1299,1300,1302,1305,1307,1309],{"class":172,"line":931},[170,1301,1256],{"class":806},[170,1303,1304],{"class":1259},"scripts",[170,1306,1263],{"class":806},[170,1308,1266],{"class":806},[170,1310,1311],{"class":806}," {\n",[170,1313,1314,1317,1320,1322,1324,1326,1329],{"class":172,"line":937},[170,1315,1316],{"class":806},"    \"",[170,1318,1319],{"class":183},"coverage",[170,1321,1263],{"class":806},[170,1323,1266],{"class":806},[170,1325,1269],{"class":806},[170,1327,1328],{"class":799},"jest --json --coverage --outputFile=report.json",[170,1330,1331],{"class":806},"\"\n",[170,1333,1334],{"class":172,"line":1004},[170,1335,1336],{"class":806},"  }\n",[170,1338,1339],{"class":172,"line":1010},[170,1340,1341],{"class":176}," //...\n",[170,1343,1344],{"class":172,"line":1016},[170,1345,1346],{"class":806},"}\n",[857,1348,1349],{"start":180},[122,1350,1351,1352,1355],{},"Edit coverage reports from ",[167,1353,1354],{},"jest.config.js"," or jest script file.",[160,1357,1361],{"className":1358,"code":1359,"language":1360,"meta":165,"style":165},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","//jest.config.js\nmodule.exports = {\n  collectCoverage: true,\n  collectCoverageFrom: [\"**/*.{js,vue}\", \"!**/node_modules/**\"],\n  coverageReporters: [ \"text\", \"text-summary\"]\n}\n","js",[167,1362,1363,1368,1378,1392,1425,1453],{"__ignoreMap":165},[170,1364,1365],{"class":172,"line":173},[170,1366,1367],{"class":176},"//jest.config.js\n",[170,1369,1370,1373,1376],{"class":172,"line":180},[170,1371,1372],{"class":806},"module.exports",[170,1374,1375],{"class":806}," =",[170,1377,1311],{"class":806},[170,1379,1380,1384,1386,1390],{"class":172,"line":396},[170,1381,1383],{"class":1382},"swJcz","  collectCoverage",[170,1385,1266],{"class":806},[170,1387,1389],{"class":1388},"sfNiH"," true",[170,1391,1277],{"class":806},[170,1393,1394,1397,1399,1403,1405,1408,1410,1413,1415,1418,1420,1423],{"class":172,"line":918},[170,1395,1396],{"class":1382},"  collectCoverageFrom",[170,1398,1266],{"class":806},[170,1400,1402],{"class":1401},"sTEyZ"," [",[170,1404,1263],{"class":806},[170,1406,1407],{"class":799},"**/*.{js,vue}",[170,1409,1263],{"class":806},[170,1411,1412],{"class":806},",",[170,1414,1269],{"class":806},[170,1416,1417],{"class":799},"!**/node_modules/**",[170,1419,1263],{"class":806},[170,1421,1422],{"class":1401},"]",[170,1424,1277],{"class":806},[170,1426,1427,1430,1432,1435,1437,1439,1441,1443,1445,1448,1450],{"class":172,"line":931},[170,1428,1429],{"class":1382},"  coverageReporters",[170,1431,1266],{"class":806},[170,1433,1434],{"class":1401}," [ ",[170,1436,1263],{"class":806},[170,1438,249],{"class":799},[170,1440,1263],{"class":806},[170,1442,1412],{"class":806},[170,1444,1269],{"class":806},[170,1446,1447],{"class":799},"text-summary",[170,1449,1263],{"class":806},[170,1451,1452],{"class":1401},"]\n",[170,1454,1455],{"class":172,"line":937},[170,1456,1346],{"class":806},[857,1458,1459,1473,1479],{"start":396},[122,1460,1461,1462,1465,1466,1469,1470,1472],{},"Create a new workflow file in your project: Workflow files are stored in the ",[167,1463,1464],{},".github/workflows"," directory of your repository and define the steps that the GitHub Actions runner will take. To create a new workflow file, you can create a new ",[167,1467,1468],{},".yml"," file in the ",[167,1471,1464],{}," directory.",[122,1474,1475,1476],{},"Add a new step to your GitHub Actions workflow file.\n",[167,1477,1478],{},"(e.g, coverage.yml)",[122,1480,1481],{},"Now, we need to configure in which environment of our branches we want our GitHub action to run.",[160,1483,1487],{"className":1484,"code":1485,"language":1486,"meta":165,"style":165},"language-yml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","#coverage.yml\nname: 'coverage'\non:\n  pull_request:\n    branches:\n      - main\n      - develop\n","yml",[167,1488,1489,1494,1507,1515,1522,1529,1537],{"__ignoreMap":165},[170,1490,1491],{"class":172,"line":173},[170,1492,1493],{"class":176},"#coverage.yml\n",[170,1495,1496,1498,1500,1502,1504],{"class":172,"line":180},[170,1497,1260],{"class":1382},[170,1499,1266],{"class":806},[170,1501,807],{"class":806},[170,1503,1319],{"class":799},[170,1505,1506],{"class":806},"'\n",[170,1508,1509,1512],{"class":172,"line":396},[170,1510,1511],{"class":1388},"on",[170,1513,1514],{"class":806},":\n",[170,1516,1517,1520],{"class":172,"line":918},[170,1518,1519],{"class":1382},"  pull_request",[170,1521,1514],{"class":806},[170,1523,1524,1527],{"class":172,"line":931},[170,1525,1526],{"class":1382},"    branches",[170,1528,1514],{"class":806},[170,1530,1531,1534],{"class":172,"line":937},[170,1532,1533],{"class":806},"      -",[170,1535,1536],{"class":799}," main\n",[170,1538,1539,1541],{"class":172,"line":1004},[170,1540,1533],{"class":806},[170,1542,1543],{"class":799}," develop\n",[857,1545,1546],{"start":937},[122,1547,1548],{},"Enable permissions about our GitHub action can run.",[160,1550,1552],{"className":1484,"code":1551,"language":1486,"meta":165,"style":165},"#coverage.yml\njobs:\n  coverage:\n    permissions:\n      checks: write\n      pull-requests: write\n      contents: write\n",[167,1553,1554,1558,1565,1572,1579,1589,1598],{"__ignoreMap":165},[170,1555,1556],{"class":172,"line":173},[170,1557,1493],{"class":176},[170,1559,1560,1563],{"class":172,"line":180},[170,1561,1562],{"class":1382},"jobs",[170,1564,1514],{"class":806},[170,1566,1567,1570],{"class":172,"line":396},[170,1568,1569],{"class":1382},"  coverage",[170,1571,1514],{"class":806},[170,1573,1574,1577],{"class":172,"line":918},[170,1575,1576],{"class":1382},"    permissions",[170,1578,1514],{"class":806},[170,1580,1581,1584,1586],{"class":172,"line":931},[170,1582,1583],{"class":1382},"      checks",[170,1585,1266],{"class":806},[170,1587,1588],{"class":799}," write\n",[170,1590,1591,1594,1596],{"class":172,"line":937},[170,1592,1593],{"class":1382},"      pull-requests",[170,1595,1266],{"class":806},[170,1597,1588],{"class":799},[170,1599,1600,1603,1605],{"class":172,"line":1004},[170,1601,1602],{"class":1382},"      contents",[170,1604,1266],{"class":806},[170,1606,1588],{"class":799},[857,1608,1609],{"start":1004},[122,1610,1611],{},"It’s time to set up the final report steps.",[160,1613,1615],{"className":1484,"code":1614,"language":1486,"meta":165,"style":165}," runs-on: ubuntu-latest\n steps:\n   - uses: actions/checkout@v3\n   - uses: actions/setup-node@v3\n     with:\n       cache: 'yarn'\n   - uses: ArtiomTr/jest-coverage-report-action@v2.1.2\n     id: coverage\n     with:\n       annotations: none\n       package-manager: yarn\n       test-script: yarn coverage\n       icons: emoji \n",[167,1616,1617,1627,1634,1647,1658,1665,1679,1690,1700,1706,1716,1727,1738],{"__ignoreMap":165},[170,1618,1619,1622,1624],{"class":172,"line":173},[170,1620,1621],{"class":1382}," runs-on",[170,1623,1266],{"class":806},[170,1625,1626],{"class":799}," ubuntu-latest\n",[170,1628,1629,1632],{"class":172,"line":180},[170,1630,1631],{"class":1382}," steps",[170,1633,1514],{"class":806},[170,1635,1636,1639,1642,1644],{"class":172,"line":396},[170,1637,1638],{"class":806},"   -",[170,1640,1641],{"class":1382}," uses",[170,1643,1266],{"class":806},[170,1645,1646],{"class":799}," actions/checkout@v3\n",[170,1648,1649,1651,1653,1655],{"class":172,"line":918},[170,1650,1638],{"class":806},[170,1652,1641],{"class":1382},[170,1654,1266],{"class":806},[170,1656,1657],{"class":799}," actions/setup-node@v3\n",[170,1659,1660,1663],{"class":172,"line":931},[170,1661,1662],{"class":1382},"     with",[170,1664,1514],{"class":806},[170,1666,1667,1670,1672,1674,1677],{"class":172,"line":937},[170,1668,1669],{"class":1382},"       cache",[170,1671,1266],{"class":806},[170,1673,807],{"class":806},[170,1675,1676],{"class":799},"yarn",[170,1678,1506],{"class":806},[170,1680,1681,1683,1685,1687],{"class":172,"line":1004},[170,1682,1638],{"class":806},[170,1684,1641],{"class":1382},[170,1686,1266],{"class":806},[170,1688,1689],{"class":799}," ArtiomTr/jest-coverage-report-action@v2.1.2\n",[170,1691,1692,1695,1697],{"class":172,"line":1010},[170,1693,1694],{"class":1382},"     id",[170,1696,1266],{"class":806},[170,1698,1699],{"class":799}," coverage\n",[170,1701,1702,1704],{"class":172,"line":1016},[170,1703,1662],{"class":1382},[170,1705,1514],{"class":806},[170,1707,1708,1711,1713],{"class":172,"line":1021},[170,1709,1710],{"class":1382},"       annotations",[170,1712,1266],{"class":806},[170,1714,1715],{"class":799}," none\n",[170,1717,1719,1722,1724],{"class":172,"line":1718},11,[170,1720,1721],{"class":1382},"       package-manager",[170,1723,1266],{"class":806},[170,1725,1726],{"class":799}," yarn\n",[170,1728,1730,1733,1735],{"class":172,"line":1729},12,[170,1731,1732],{"class":1382},"       test-script",[170,1734,1266],{"class":806},[170,1736,1737],{"class":799}," yarn coverage\n",[170,1739,1741,1744,1746],{"class":172,"line":1740},13,[170,1742,1743],{"class":1382},"       icons",[170,1745,1266],{"class":806},[170,1747,1748],{"class":799}," emoji\n",[12,1750,1751],{},"In the end, you will have a complete configuration like the following:",[160,1753,1755],{"className":1484,"code":1754,"language":1486,"meta":165,"style":165},"#coverage.yml\nname: 'coverage'\non:\n  pull_request:\n    branches:\n      - main\n      - develop\njobs:\n  coverage:\n    permissions:\n      checks: write\n      pull-requests: write\n      contents: write\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          cache: 'yarn'\n      - uses: ArtiomTr/jest-coverage-report-action@v2.1.2\n        id: coverage\n        with:\n          annotations: none\n          package-manager: yarn\n          test-script: yarn coverage\n          icons: emoji\n",[167,1756,1757,1761,1773,1779,1785,1791,1797,1803,1809,1815,1821,1829,1837,1845,1855,1863,1874,1885,1893,1907,1918,1928,1935,1945,1955,1965],{"__ignoreMap":165},[170,1758,1759],{"class":172,"line":173},[170,1760,1493],{"class":176},[170,1762,1763,1765,1767,1769,1771],{"class":172,"line":180},[170,1764,1260],{"class":1382},[170,1766,1266],{"class":806},[170,1768,807],{"class":806},[170,1770,1319],{"class":799},[170,1772,1506],{"class":806},[170,1774,1775,1777],{"class":172,"line":396},[170,1776,1511],{"class":1388},[170,1778,1514],{"class":806},[170,1780,1781,1783],{"class":172,"line":918},[170,1782,1519],{"class":1382},[170,1784,1514],{"class":806},[170,1786,1787,1789],{"class":172,"line":931},[170,1788,1526],{"class":1382},[170,1790,1514],{"class":806},[170,1792,1793,1795],{"class":172,"line":937},[170,1794,1533],{"class":806},[170,1796,1536],{"class":799},[170,1798,1799,1801],{"class":172,"line":1004},[170,1800,1533],{"class":806},[170,1802,1543],{"class":799},[170,1804,1805,1807],{"class":172,"line":1010},[170,1806,1562],{"class":1382},[170,1808,1514],{"class":806},[170,1810,1811,1813],{"class":172,"line":1016},[170,1812,1569],{"class":1382},[170,1814,1514],{"class":806},[170,1816,1817,1819],{"class":172,"line":1021},[170,1818,1576],{"class":1382},[170,1820,1514],{"class":806},[170,1822,1823,1825,1827],{"class":172,"line":1718},[170,1824,1583],{"class":1382},[170,1826,1266],{"class":806},[170,1828,1588],{"class":799},[170,1830,1831,1833,1835],{"class":172,"line":1729},[170,1832,1593],{"class":1382},[170,1834,1266],{"class":806},[170,1836,1588],{"class":799},[170,1838,1839,1841,1843],{"class":172,"line":1740},[170,1840,1602],{"class":1382},[170,1842,1266],{"class":806},[170,1844,1588],{"class":799},[170,1846,1848,1851,1853],{"class":172,"line":1847},14,[170,1849,1850],{"class":1382},"    runs-on",[170,1852,1266],{"class":806},[170,1854,1626],{"class":799},[170,1856,1858,1861],{"class":172,"line":1857},15,[170,1859,1860],{"class":1382},"    steps",[170,1862,1514],{"class":806},[170,1864,1866,1868,1870,1872],{"class":172,"line":1865},16,[170,1867,1533],{"class":806},[170,1869,1641],{"class":1382},[170,1871,1266],{"class":806},[170,1873,1646],{"class":799},[170,1875,1877,1879,1881,1883],{"class":172,"line":1876},17,[170,1878,1533],{"class":806},[170,1880,1641],{"class":1382},[170,1882,1266],{"class":806},[170,1884,1657],{"class":799},[170,1886,1888,1891],{"class":172,"line":1887},18,[170,1889,1890],{"class":1382},"        with",[170,1892,1514],{"class":806},[170,1894,1896,1899,1901,1903,1905],{"class":172,"line":1895},19,[170,1897,1898],{"class":1382},"          cache",[170,1900,1266],{"class":806},[170,1902,807],{"class":806},[170,1904,1676],{"class":799},[170,1906,1506],{"class":806},[170,1908,1910,1912,1914,1916],{"class":172,"line":1909},20,[170,1911,1533],{"class":806},[170,1913,1641],{"class":1382},[170,1915,1266],{"class":806},[170,1917,1689],{"class":799},[170,1919,1921,1924,1926],{"class":172,"line":1920},21,[170,1922,1923],{"class":1382},"        id",[170,1925,1266],{"class":806},[170,1927,1699],{"class":799},[170,1929,1931,1933],{"class":172,"line":1930},22,[170,1932,1890],{"class":1382},[170,1934,1514],{"class":806},[170,1936,1938,1941,1943],{"class":172,"line":1937},23,[170,1939,1940],{"class":1382},"          annotations",[170,1942,1266],{"class":806},[170,1944,1715],{"class":799},[170,1946,1948,1951,1953],{"class":172,"line":1947},24,[170,1949,1950],{"class":1382},"          package-manager",[170,1952,1266],{"class":806},[170,1954,1726],{"class":799},[170,1956,1958,1961,1963],{"class":172,"line":1957},25,[170,1959,1960],{"class":1382},"          test-script",[170,1962,1266],{"class":806},[170,1964,1737],{"class":799},[170,1966,1968,1971,1973],{"class":172,"line":1967},26,[170,1969,1970],{"class":1382},"          icons",[170,1972,1266],{"class":806},[170,1974,1748],{"class":799},[12,1976,1977],{},"I share the final result, once you execute your GitHub action, which we can observe as our report the percentages, the number of tests, and the number of test suites that were executed at that moment.",[12,1979,1980],{},"Also mention that the report is executed again if a new commit is made to the PR.",[12,1982,1983],{},[15,1984],{"alt":1985,"src":1986},"Pull request","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231244/pull-request_jmcnhs.webp",[12,1988,1989],{},"In summary, coverage of Jest unit tests using GitHub Actions is important because it helps you:",[857,1991,1992,1995,1998,2001,2004],{},[122,1993,1994],{},"Ensure that your code is well-tested.",[122,1996,1997],{},"Reduce the risk of introducing bugs into your code.",[122,1999,2000],{},"Easily track the quality of your tests over time.",[122,2002,2003],{},"Communicate the quality of your tests to others.",[122,2005,2006],{},"Build confidence in your development process.",[12,2008,2009],{},"Thank you for reading! we read soon. 🙌🏽🙌🏽",[387,2011,2012],{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":165,"searchDepth":180,"depth":180,"links":2014},[2015],{"id":1223,"depth":180,"text":1224},"2023-02-03T00:00:00.000Z","Discover how to set up a GitHub Action to generate and visualize coverage reports for Jest unit tests.",{},"/articles/en/coverage-of-jest-unit-tests-using-github-action",{"title":1188,"description":2017},{"loc":2019},"articles/en/coverage-of-jest-unit-tests-using-github-action",[2024,2025,2026,2027],"jest","github-action","javascript","webdev","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231244/thumbnail_dwb5ue.webp","m9QjUXQANBcf9TmLNyxpQHSO9Oi-jmSseAoo7BMTaS4",{"id":2031,"title":2032,"author":7,"body":2033,"date":2776,"description":2777,"extension":405,"meta":2778,"navigation":407,"path":2779,"seo":2780,"sitemap":2781,"stem":2782,"tags":2783,"thumbnail":2786,"__hash__":2787},"en_articles/articles/en/creating-custom-routes-in-nuxt3.md","Creating Custom Routes in Nuxt3 (Without Losing Your Mind)",{"type":9,"value":2034,"toc":2773},[2035,2038,2041,2045,2048,2051,2248,2258,2261,2331,2334,2337,2409,2412,2634,2637,2768,2770],[12,2036,2037],{},"I'd like to share an experience I had a couple of days ago during a work challenge, which may have happened to you or could happen to you if you use Nuxt3. Let's jump!",[12,2039,2040],{},"In Nuxt3, the routing system is based on the file structure within the pages directory, which facilitates automatic route creation. However, being built on top of vue-router, Nuxt3 also allows for flexible custom routes. This gives you the ability to extend or modify the router's behavior to suit your project's specific needs (I needed to have dynamic routes to manage subdomains for different types of users, but end users can also use the application in embed or normal format, the latter using the same components, I just needed to modify the routes).",[20,2042,2044],{"id":2043},"so-how-do-we-achieve-this","So, how do we achieve this?",[12,2046,2047],{},"We must be located inside the app/ directory because that folder is specifically designed to extend or customize the internal behavior of the framework.",[12,2049,2050],{},"Then, we can create a router.options.ts file, using router options we can optionally override or extend your routes using a function that accepts the scanned routes and returns customized routes. The following example code.",[160,2052,2056],{"className":2053,"code":2054,"language":2055,"meta":165,"style":165},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// app/router.options.ts\n// Import the RouterConfig type for proper typing\nimport type { RouterConfig } from '@nuxt/schema'\n\nexport default {\n  // Define custom routes manually\n  routes: (_routes) => [\n    {\n      // Route name (used in programmatic navigation)\n      name: 'home',\n      // URL path\n      path: '/',\n      // Lazy-load the component\n      component: () => import('~/pages/home.vue')\n    }\n  ],\n} satisfies RouterConfig;\n// Ensures the object matches Nuxt's expected router config\n\n","ts",[167,2057,2058,2063,2068,2096,2100,2110,2115,2138,2143,2148,2164,2169,2185,2190,2218,2223,2230,2243],{"__ignoreMap":165},[170,2059,2060],{"class":172,"line":173},[170,2061,2062],{"class":176},"// app/router.options.ts\n",[170,2064,2065],{"class":172,"line":180},[170,2066,2067],{"class":176},"// Import the RouterConfig type for proper typing\n",[170,2069,2070,2074,2077,2080,2083,2086,2089,2091,2094],{"class":172,"line":396},[170,2071,2073],{"class":2072},"s7zQu","import",[170,2075,2076],{"class":2072}," type",[170,2078,2079],{"class":806}," {",[170,2081,2082],{"class":1401}," RouterConfig",[170,2084,2085],{"class":806}," }",[170,2087,2088],{"class":2072}," from",[170,2090,807],{"class":806},[170,2092,2093],{"class":799},"@nuxt/schema",[170,2095,1506],{"class":806},[170,2097,2098],{"class":172,"line":918},[170,2099,934],{"emptyLinePlaceholder":407},[170,2101,2102,2105,2108],{"class":172,"line":931},[170,2103,2104],{"class":2072},"export",[170,2106,2107],{"class":2072}," default",[170,2109,1311],{"class":806},[170,2111,2112],{"class":172,"line":937},[170,2113,2114],{"class":176},"  // Define custom routes manually\n",[170,2116,2117,2120,2122,2125,2129,2132,2135],{"class":172,"line":1004},[170,2118,2119],{"class":1096},"  routes",[170,2121,1266],{"class":806},[170,2123,2124],{"class":806}," (",[170,2126,2128],{"class":2127},"sHdIc","_routes",[170,2130,2131],{"class":806},")",[170,2133,2134],{"class":1259}," =>",[170,2136,2137],{"class":1401}," [\n",[170,2139,2140],{"class":172,"line":1010},[170,2141,2142],{"class":806},"    {\n",[170,2144,2145],{"class":172,"line":1016},[170,2146,2147],{"class":176},"      // Route name (used in programmatic navigation)\n",[170,2149,2150,2153,2155,2157,2160,2162],{"class":172,"line":1021},[170,2151,2152],{"class":1382},"      name",[170,2154,1266],{"class":806},[170,2156,807],{"class":806},[170,2158,2159],{"class":799},"home",[170,2161,813],{"class":806},[170,2163,1277],{"class":806},[170,2165,2166],{"class":172,"line":1718},[170,2167,2168],{"class":176},"      // URL path\n",[170,2170,2171,2174,2176,2178,2181,2183],{"class":172,"line":1729},[170,2172,2173],{"class":1382},"      path",[170,2175,1266],{"class":806},[170,2177,807],{"class":806},[170,2179,2180],{"class":799},"/",[170,2182,813],{"class":806},[170,2184,1277],{"class":806},[170,2186,2187],{"class":172,"line":1740},[170,2188,2189],{"class":176},"      // Lazy-load the component\n",[170,2191,2192,2195,2197,2200,2202,2205,2208,2210,2213,2215],{"class":172,"line":1847},[170,2193,2194],{"class":1096},"      component",[170,2196,1266],{"class":806},[170,2198,2199],{"class":806}," ()",[170,2201,2134],{"class":1259},[170,2203,2204],{"class":806}," import",[170,2206,2207],{"class":1401},"(",[170,2209,813],{"class":806},[170,2211,2212],{"class":799},"~/pages/home.vue",[170,2214,813],{"class":806},[170,2216,2217],{"class":1401},")\n",[170,2219,2220],{"class":172,"line":1857},[170,2221,2222],{"class":806},"    }\n",[170,2224,2225,2228],{"class":172,"line":1865},[170,2226,2227],{"class":1401},"  ]",[170,2229,1277],{"class":806},[170,2231,2232,2235,2238,2240],{"class":172,"line":1876},[170,2233,2234],{"class":806},"}",[170,2236,2237],{"class":2072}," satisfies",[170,2239,2082],{"class":183},[170,2241,2242],{"class":806},";\n",[170,2244,2245],{"class":172,"line":1887},[170,2246,2247],{"class":176},"// Ensures the object matches Nuxt's expected router config\n",[2249,2250,2251],"note",{},[12,2252,2253,2254],{},"Documentation reference: ",[1204,2255,2256],{"href":2256,"rel":2257},"https://nuxt.com/docs/guide/recipes/custom-routing#router-options",[1208],[12,2259,2260],{},"Something that cannot be seen directly in the documentation link is that if we need to override our routes manually, the automatic route system must be disabled from the pages option in our nuxt.config.ts",[160,2262,2264],{"className":2053,"code":2263,"language":2055,"meta":165,"style":165},"// nuxt.config.ts\nexport default defineNuxtConfig({\n  devtools: { enabled: true },\n  // ...our_config,\n  pages: false, // Add this code (by default is true)\n});\n",[167,2265,2266,2271,2284,2303,2308,2323],{"__ignoreMap":165},[170,2267,2268],{"class":172,"line":173},[170,2269,2270],{"class":176},"// nuxt.config.ts\n",[170,2272,2273,2275,2277,2280,2282],{"class":172,"line":180},[170,2274,2104],{"class":2072},[170,2276,2107],{"class":2072},[170,2278,2279],{"class":1096}," defineNuxtConfig",[170,2281,2207],{"class":1401},[170,2283,1251],{"class":806},[170,2285,2286,2289,2291,2293,2296,2298,2300],{"class":172,"line":396},[170,2287,2288],{"class":1382},"  devtools",[170,2290,1266],{"class":806},[170,2292,2079],{"class":806},[170,2294,2295],{"class":1382}," enabled",[170,2297,1266],{"class":806},[170,2299,1389],{"class":1388},[170,2301,2302],{"class":806}," },\n",[170,2304,2305],{"class":172,"line":918},[170,2306,2307],{"class":176},"  // ...our_config,\n",[170,2309,2310,2313,2315,2318,2320],{"class":172,"line":931},[170,2311,2312],{"class":1382},"  pages",[170,2314,1266],{"class":806},[170,2316,2317],{"class":1388}," false",[170,2319,1412],{"class":806},[170,2321,2322],{"class":176}," // Add this code (by default is true)\n",[170,2324,2325,2327,2329],{"class":172,"line":937},[170,2326,2234],{"class":806},[170,2328,2131],{"class":1401},[170,2330,2242],{"class":806},[12,2332,2333],{},"Before I go, I would like to share an extra tip that can help you organize your routes better and avoid having an extremely large file if your project will have many routes.",[12,2335,2336],{},"You can create a route-only import file (you can call it router.imports.ts).",[160,2338,2340],{"className":2053,"code":2339,"language":2055,"meta":165,"style":165},"// router.imports.ts\nexport { default as WebsiteHome } from '~~/pages/website/home.vue';\nexport { default as WebsiteAbout } from '~~/pages/website/about.vue';\n...\n...\n",[167,2341,2342,2347,2374,2400,2405],{"__ignoreMap":165},[170,2343,2344],{"class":172,"line":173},[170,2345,2346],{"class":176},"// router.imports.ts\n",[170,2348,2349,2351,2353,2355,2358,2361,2363,2365,2367,2370,2372],{"class":172,"line":180},[170,2350,2104],{"class":2072},[170,2352,2079],{"class":806},[170,2354,2107],{"class":2072},[170,2356,2357],{"class":2072}," as",[170,2359,2360],{"class":1401}," WebsiteHome",[170,2362,2085],{"class":806},[170,2364,2088],{"class":2072},[170,2366,807],{"class":806},[170,2368,2369],{"class":799},"~~/pages/website/home.vue",[170,2371,813],{"class":806},[170,2373,2242],{"class":806},[170,2375,2376,2378,2380,2382,2384,2387,2389,2391,2393,2396,2398],{"class":172,"line":396},[170,2377,2104],{"class":2072},[170,2379,2079],{"class":806},[170,2381,2107],{"class":2072},[170,2383,2357],{"class":2072},[170,2385,2386],{"class":1401}," WebsiteAbout",[170,2388,2085],{"class":806},[170,2390,2088],{"class":2072},[170,2392,807],{"class":806},[170,2394,2395],{"class":799},"~~/pages/website/about.vue",[170,2397,813],{"class":806},[170,2399,2242],{"class":806},[170,2401,2402],{"class":172,"line":918},[170,2403,2404],{"class":806},"...\n",[170,2406,2407],{"class":172,"line":931},[170,2408,2404],{"class":806},[12,2410,2411],{},"Now we can create another barrel file for route definition (website.routes.ts)",[160,2413,2415],{"className":2053,"code":2414,"language":2055,"meta":165,"style":165},"// website.routes.ts\nimport {\n  WebsiteHome,\n  WebsiteAbout\n} from './routes.import';\n\nconst websiteChildren = [\n  {\n    name: 'WebsiteHome',\n    path: '',\n    component: WebsiteHome,\n  },\n  {\n    name: 'Website',\n    path: 'about',\n    component: WebsiteAbout,\n  },\n]\n\nexport const websiteRoutes = {\n  name: 'WebsiteRoot',\n  path: '',\n  children: websiteChildren,\n}\n",[167,2416,2417,2422,2428,2435,2440,2455,2459,2472,2477,2493,2505,2516,2521,2525,2540,2555,2565,2569,2573,2577,2591,2607,2618,2630],{"__ignoreMap":165},[170,2418,2419],{"class":172,"line":173},[170,2420,2421],{"class":176},"// website.routes.ts\n",[170,2423,2424,2426],{"class":172,"line":180},[170,2425,2073],{"class":2072},[170,2427,1311],{"class":806},[170,2429,2430,2433],{"class":172,"line":396},[170,2431,2432],{"class":1401},"  WebsiteHome",[170,2434,1277],{"class":806},[170,2436,2437],{"class":172,"line":918},[170,2438,2439],{"class":1401},"  WebsiteAbout\n",[170,2441,2442,2444,2446,2448,2451,2453],{"class":172,"line":931},[170,2443,2234],{"class":806},[170,2445,2088],{"class":2072},[170,2447,807],{"class":806},[170,2449,2450],{"class":799},"./routes.import",[170,2452,813],{"class":806},[170,2454,2242],{"class":806},[170,2456,2457],{"class":172,"line":937},[170,2458,934],{"emptyLinePlaceholder":407},[170,2460,2461,2464,2467,2470],{"class":172,"line":1004},[170,2462,2463],{"class":1259},"const",[170,2465,2466],{"class":1401}," websiteChildren ",[170,2468,2469],{"class":806},"=",[170,2471,2137],{"class":1401},[170,2473,2474],{"class":172,"line":1010},[170,2475,2476],{"class":806},"  {\n",[170,2478,2479,2482,2484,2486,2489,2491],{"class":172,"line":1016},[170,2480,2481],{"class":1382},"    name",[170,2483,1266],{"class":806},[170,2485,807],{"class":806},[170,2487,2488],{"class":799},"WebsiteHome",[170,2490,813],{"class":806},[170,2492,1277],{"class":806},[170,2494,2495,2498,2500,2503],{"class":172,"line":1021},[170,2496,2497],{"class":1382},"    path",[170,2499,1266],{"class":806},[170,2501,2502],{"class":806}," ''",[170,2504,1277],{"class":806},[170,2506,2507,2510,2512,2514],{"class":172,"line":1718},[170,2508,2509],{"class":1382},"    component",[170,2511,1266],{"class":806},[170,2513,2360],{"class":1401},[170,2515,1277],{"class":806},[170,2517,2518],{"class":172,"line":1729},[170,2519,2520],{"class":806},"  },\n",[170,2522,2523],{"class":172,"line":1740},[170,2524,2476],{"class":806},[170,2526,2527,2529,2531,2533,2536,2538],{"class":172,"line":1847},[170,2528,2481],{"class":1382},[170,2530,1266],{"class":806},[170,2532,807],{"class":806},[170,2534,2535],{"class":799},"Website",[170,2537,813],{"class":806},[170,2539,1277],{"class":806},[170,2541,2542,2544,2546,2548,2551,2553],{"class":172,"line":1857},[170,2543,2497],{"class":1382},[170,2545,1266],{"class":806},[170,2547,807],{"class":806},[170,2549,2550],{"class":799},"about",[170,2552,813],{"class":806},[170,2554,1277],{"class":806},[170,2556,2557,2559,2561,2563],{"class":172,"line":1865},[170,2558,2509],{"class":1382},[170,2560,1266],{"class":806},[170,2562,2386],{"class":1401},[170,2564,1277],{"class":806},[170,2566,2567],{"class":172,"line":1876},[170,2568,2520],{"class":806},[170,2570,2571],{"class":172,"line":1887},[170,2572,1452],{"class":1401},[170,2574,2575],{"class":172,"line":1895},[170,2576,934],{"emptyLinePlaceholder":407},[170,2578,2579,2581,2584,2587,2589],{"class":172,"line":1909},[170,2580,2104],{"class":2072},[170,2582,2583],{"class":1259}," const",[170,2585,2586],{"class":1401}," websiteRoutes ",[170,2588,2469],{"class":806},[170,2590,1311],{"class":806},[170,2592,2593,2596,2598,2600,2603,2605],{"class":172,"line":1920},[170,2594,2595],{"class":1382},"  name",[170,2597,1266],{"class":806},[170,2599,807],{"class":806},[170,2601,2602],{"class":799},"WebsiteRoot",[170,2604,813],{"class":806},[170,2606,1277],{"class":806},[170,2608,2609,2612,2614,2616],{"class":172,"line":1930},[170,2610,2611],{"class":1382},"  path",[170,2613,1266],{"class":806},[170,2615,2502],{"class":806},[170,2617,1277],{"class":806},[170,2619,2620,2623,2625,2628],{"class":172,"line":1937},[170,2621,2622],{"class":1382},"  children",[170,2624,1266],{"class":806},[170,2626,2627],{"class":1401}," websiteChildren",[170,2629,1277],{"class":806},[170,2631,2632],{"class":172,"line":1947},[170,2633,1346],{"class":806},[12,2635,2636],{},"Finally, we can use our router.options.ts with the route imports defined like this:",[160,2638,2640],{"className":2053,"code":2639,"language":2055,"meta":165,"style":165},"import type { RouterConfig } from '@nuxt/schema';\nimport { exampleRoutes } from './example.routes';\nimport { websiteRoutes } from './website.routes'\n\nexport default {\n  routes: (_routes) => [\n    exampleRoutes,\n    websiteRoutes,\n    //...\n  ],\n} satisfies RouterConfig\n\n",[167,2641,2642,2664,2686,2706,2710,2718,2734,2741,2748,2753,2759],{"__ignoreMap":165},[170,2643,2644,2646,2648,2650,2652,2654,2656,2658,2660,2662],{"class":172,"line":173},[170,2645,2073],{"class":2072},[170,2647,2076],{"class":2072},[170,2649,2079],{"class":806},[170,2651,2082],{"class":1401},[170,2653,2085],{"class":806},[170,2655,2088],{"class":2072},[170,2657,807],{"class":806},[170,2659,2093],{"class":799},[170,2661,813],{"class":806},[170,2663,2242],{"class":806},[170,2665,2666,2668,2670,2673,2675,2677,2679,2682,2684],{"class":172,"line":180},[170,2667,2073],{"class":2072},[170,2669,2079],{"class":806},[170,2671,2672],{"class":1401}," exampleRoutes",[170,2674,2085],{"class":806},[170,2676,2088],{"class":2072},[170,2678,807],{"class":806},[170,2680,2681],{"class":799},"./example.routes",[170,2683,813],{"class":806},[170,2685,2242],{"class":806},[170,2687,2688,2690,2692,2695,2697,2699,2701,2704],{"class":172,"line":396},[170,2689,2073],{"class":2072},[170,2691,2079],{"class":806},[170,2693,2694],{"class":1401}," websiteRoutes",[170,2696,2085],{"class":806},[170,2698,2088],{"class":2072},[170,2700,807],{"class":806},[170,2702,2703],{"class":799},"./website.routes",[170,2705,1506],{"class":806},[170,2707,2708],{"class":172,"line":918},[170,2709,934],{"emptyLinePlaceholder":407},[170,2711,2712,2714,2716],{"class":172,"line":931},[170,2713,2104],{"class":2072},[170,2715,2107],{"class":2072},[170,2717,1311],{"class":806},[170,2719,2720,2722,2724,2726,2728,2730,2732],{"class":172,"line":937},[170,2721,2119],{"class":1096},[170,2723,1266],{"class":806},[170,2725,2124],{"class":806},[170,2727,2128],{"class":2127},[170,2729,2131],{"class":806},[170,2731,2134],{"class":1259},[170,2733,2137],{"class":1401},[170,2735,2736,2739],{"class":172,"line":1004},[170,2737,2738],{"class":1401},"    exampleRoutes",[170,2740,1277],{"class":806},[170,2742,2743,2746],{"class":172,"line":1010},[170,2744,2745],{"class":1401},"    websiteRoutes",[170,2747,1277],{"class":806},[170,2749,2750],{"class":172,"line":1016},[170,2751,2752],{"class":176},"    //...\n",[170,2754,2755,2757],{"class":172,"line":1021},[170,2756,2227],{"class":1401},[170,2758,1277],{"class":806},[170,2760,2761,2763,2765],{"class":172,"line":1718},[170,2762,2234],{"class":806},[170,2764,2237],{"class":2072},[170,2766,2767],{"class":183}," RouterConfig\n",[12,2769,1165],{},[387,2771,2772],{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":165,"searchDepth":180,"depth":180,"links":2774},[2775],{"id":2043,"depth":180,"text":2044},"2025-05-05T00:00:00.000Z","Learn how to create custom routes in Nuxt 3 without losing your mind, how to disable automatic routing, and how to organize your route files with a clean architecture.",{},"/articles/en/creating-custom-routes-in-nuxt3",{"title":2032,"description":2777},{"loc":2779},"articles/en/creating-custom-routes-in-nuxt3",[2784,2785,2026,2027],"nuxt3","vue","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231246/creating-custom-routes-in-nuxt3_brrrmq.webp","uwtvgF3lh1OBLbpkxOKHwwub_ofXihqCNTaVLHLC4vo",{"id":2789,"title":2790,"author":7,"body":2791,"date":5511,"description":5512,"extension":405,"meta":5513,"navigation":407,"path":5514,"seo":5515,"sitemap":5516,"stem":5517,"tags":5518,"thumbnail":5520,"__hash__":5521},"en_articles/articles/en/effortlessly-build-and-test-your-frontend-applications-with-vitepress.md","Effortlessly Build and Test Your Frontend Applications with VitePress: A Step-by-Step Tutorial to Create a Blog",{"type":9,"value":2792,"toc":5505},[2793,2796,2799,2803,2811,2833,2838,2850,2855,2885,2890,2895,3002,3007,3054,3059,3345,3349,3352,3355,3362,3367,3937,3942,3962,3966,3971,4207,4212,4597,4602,5071,5082,5482,5485,5494,5500,5502],[12,2794,2795],{},"First of all, we must talk about what is vitepress. VitePress is a modern static site generator based on the Vite front-end build tool. It is designed to be fast and efficient, making it a great choice for building small to medium-sized websites and blogs. With its easy-to-use interface and compatibility with a wide range of technologies, including Vue.js, JavaScript, and CSS, VitePress is a versatile option for front-end development.",[12,2797,2798],{},"Here’s how to get started with VitePress:",[20,2800,2802],{"id":2801},"installation","Installation",[857,2804,2805,2808],{},[122,2806,2807],{},"Install Node.js and yarn or npm if you haven’t already.",[122,2809,2810],{},"Create a new folder project.",[160,2812,2814],{"className":162,"code":2813,"language":164,"meta":165,"style":165},"mkdir vitepress-project && cd vitepress-project\n",[167,2815,2816],{"__ignoreMap":165},[170,2817,2818,2821,2824,2827,2830],{"class":172,"line":173},[170,2819,2820],{"class":183},"mkdir",[170,2822,2823],{"class":799}," vitepress-project",[170,2825,2826],{"class":806}," &&",[170,2828,2829],{"class":1096}," cd",[170,2831,2832],{"class":799}," vitepress-project\n",[857,2834,2835],{"start":396},[122,2836,2837],{},"Initialize our project with your preferred package manager.",[160,2839,2841],{"className":162,"code":2840,"language":164,"meta":165,"style":165},"yarn init\n",[167,2842,2843],{"__ignoreMap":165},[170,2844,2845,2847],{"class":172,"line":173},[170,2846,1676],{"class":183},[170,2848,2849],{"class":799}," init\n",[857,2851,2852],{"start":918},[122,2853,2854],{},"Now, install some packages including vitePress. (These last 4 will help create our collection of JSON pages).",[160,2856,2858],{"className":162,"code":2857,"language":164,"meta":165,"style":165},"yarn add vitepress vue nodemon gray-matter remove-markdown concurrently\n",[167,2859,2860],{"__ignoreMap":165},[170,2861,2862,2864,2867,2870,2873,2876,2879,2882],{"class":172,"line":173},[170,2863,1676],{"class":183},[170,2865,2866],{"class":799}," add",[170,2868,2869],{"class":799}," vitepress",[170,2871,2872],{"class":799}," vue",[170,2874,2875],{"class":799}," nodemon",[170,2877,2878],{"class":799}," gray-matter",[170,2880,2881],{"class":799}," remove-markdown",[170,2883,2884],{"class":799}," concurrently\n",[857,2886,2887],{"start":931},[122,2888,2889],{},"Set up our scripts in package.json.",[866,2891,2892],{},[12,2893,2894],{},"NOTE: Every time we run our development environment, the data collection mentioned below will be updated.",[160,2896,2898],{"className":1237,"code":2897,"language":1239,"meta":165,"style":165},"{\n  ...\n  \"scripts\": {\n    \"dev\": \"concurrently \\\"nodemon --watch blog -e md collection.mjs\\\" && vitepress dev\",\n    \"build\": \"node collection.mjs && vitepress build\",\n    \"preview\": \"vitepress preview\"\n  },\n  ...\n}\n",[167,2899,2900,2904,2909,2921,2952,2972,2990,2994,2998],{"__ignoreMap":165},[170,2901,2902],{"class":172,"line":173},[170,2903,1251],{"class":806},[170,2905,2906],{"class":172,"line":180},[170,2907,2908],{"class":1401},"  ...\n",[170,2910,2911,2913,2915,2917,2919],{"class":172,"line":396},[170,2912,1256],{"class":806},[170,2914,1304],{"class":1259},[170,2916,1263],{"class":806},[170,2918,1266],{"class":806},[170,2920,1311],{"class":806},[170,2922,2923,2925,2928,2930,2932,2934,2937,2940,2943,2945,2948,2950],{"class":172,"line":918},[170,2924,1316],{"class":806},[170,2926,2927],{"class":183},"dev",[170,2929,1263],{"class":806},[170,2931,1266],{"class":806},[170,2933,1269],{"class":806},[170,2935,2936],{"class":799},"concurrently ",[170,2938,2939],{"class":1401},"\\\"",[170,2941,2942],{"class":799},"nodemon --watch blog -e md collection.mjs",[170,2944,2939],{"class":1401},[170,2946,2947],{"class":799}," && vitepress dev",[170,2949,1263],{"class":806},[170,2951,1277],{"class":806},[170,2953,2954,2956,2959,2961,2963,2965,2968,2970],{"class":172,"line":931},[170,2955,1316],{"class":806},[170,2957,2958],{"class":183},"build",[170,2960,1263],{"class":806},[170,2962,1266],{"class":806},[170,2964,1269],{"class":806},[170,2966,2967],{"class":799},"node collection.mjs && vitepress build",[170,2969,1263],{"class":806},[170,2971,1277],{"class":806},[170,2973,2974,2976,2979,2981,2983,2985,2988],{"class":172,"line":937},[170,2975,1316],{"class":806},[170,2977,2978],{"class":183},"preview",[170,2980,1263],{"class":806},[170,2982,1266],{"class":806},[170,2984,1269],{"class":806},[170,2986,2987],{"class":799},"vitepress preview",[170,2989,1331],{"class":806},[170,2991,2992],{"class":172,"line":1004},[170,2993,2520],{"class":806},[170,2995,2996],{"class":172,"line":1010},[170,2997,2908],{"class":1401},[170,2999,3000],{"class":172,"line":1016},[170,3001,1346],{"class":806},[857,3003,3004],{"start":937},[122,3005,3006],{},"Create our first views.",[160,3008,3010],{"className":162,"code":3009,"language":164,"meta":165,"style":165},"echo '# Hello from Index' > index.md\nmkdir blog && echo '# Hello from First Article' > blog/first_article.md\n",[167,3011,3012,3030],{"__ignoreMap":165},[170,3013,3014,3017,3019,3022,3024,3027],{"class":172,"line":173},[170,3015,3016],{"class":1096},"echo",[170,3018,807],{"class":806},[170,3020,3021],{"class":799},"# Hello from Index",[170,3023,813],{"class":806},[170,3025,3026],{"class":806}," >",[170,3028,3029],{"class":799}," index.md\n",[170,3031,3032,3034,3037,3039,3042,3044,3047,3049,3051],{"class":172,"line":180},[170,3033,2820],{"class":183},[170,3035,3036],{"class":799}," blog",[170,3038,2826],{"class":806},[170,3040,3041],{"class":1096}," echo",[170,3043,807],{"class":806},[170,3045,3046],{"class":799},"# Hello from First Article",[170,3048,813],{"class":806},[170,3050,3026],{"class":806},[170,3052,3053],{"class":799}," blog/first_article.md\n",[857,3055,3056],{"start":1004},[122,3057,3058],{},"It is also possible to configure our project, for SEO, and themes, among others. Here is an example:",[160,3060,3062],{"className":1358,"code":3061,"language":1360,"meta":165,"style":165},"// .vitepress/config.js\nconst META_TITLE = 'Blog VitePress';\n\nexport default {\n  lang: 'es',\n  title: META_TITLE,\n  description: 'A new website',\n  themeConfig: {\n    siteTitle: false,\n    socialLinks: [\n      { icon: 'github', link: '' },\n    ]\n  },\n  head: [\n    ['link', { rel: 'icon', type: 'image/x-icon', href: '/vite.ico' }],\n    ['link', { rel: 'icon', type: 'image/png', href: '/vite.png' }],\n  ],\n}\n",[167,3063,3064,3069,3087,3091,3099,3115,3127,3143,3152,3163,3172,3200,3205,3209,3218,3279,3335,3341],{"__ignoreMap":165},[170,3065,3066],{"class":172,"line":173},[170,3067,3068],{"class":176},"// .vitepress/config.js\n",[170,3070,3071,3073,3076,3078,3080,3083,3085],{"class":172,"line":180},[170,3072,2463],{"class":1259},[170,3074,3075],{"class":1401}," META_TITLE ",[170,3077,2469],{"class":806},[170,3079,807],{"class":806},[170,3081,3082],{"class":799},"Blog VitePress",[170,3084,813],{"class":806},[170,3086,2242],{"class":806},[170,3088,3089],{"class":172,"line":396},[170,3090,934],{"emptyLinePlaceholder":407},[170,3092,3093,3095,3097],{"class":172,"line":918},[170,3094,2104],{"class":2072},[170,3096,2107],{"class":2072},[170,3098,1311],{"class":806},[170,3100,3101,3104,3106,3108,3111,3113],{"class":172,"line":931},[170,3102,3103],{"class":1382},"  lang",[170,3105,1266],{"class":806},[170,3107,807],{"class":806},[170,3109,3110],{"class":799},"es",[170,3112,813],{"class":806},[170,3114,1277],{"class":806},[170,3116,3117,3120,3122,3125],{"class":172,"line":937},[170,3118,3119],{"class":1382},"  title",[170,3121,1266],{"class":806},[170,3123,3124],{"class":1401}," META_TITLE",[170,3126,1277],{"class":806},[170,3128,3129,3132,3134,3136,3139,3141],{"class":172,"line":1004},[170,3130,3131],{"class":1382},"  description",[170,3133,1266],{"class":806},[170,3135,807],{"class":806},[170,3137,3138],{"class":799},"A new website",[170,3140,813],{"class":806},[170,3142,1277],{"class":806},[170,3144,3145,3148,3150],{"class":172,"line":1010},[170,3146,3147],{"class":1382},"  themeConfig",[170,3149,1266],{"class":806},[170,3151,1311],{"class":806},[170,3153,3154,3157,3159,3161],{"class":172,"line":1016},[170,3155,3156],{"class":1382},"    siteTitle",[170,3158,1266],{"class":806},[170,3160,2317],{"class":1388},[170,3162,1277],{"class":806},[170,3164,3165,3168,3170],{"class":172,"line":1021},[170,3166,3167],{"class":1382},"    socialLinks",[170,3169,1266],{"class":806},[170,3171,2137],{"class":1401},[170,3173,3174,3177,3180,3182,3184,3187,3189,3191,3194,3196,3198],{"class":172,"line":1718},[170,3175,3176],{"class":806},"      {",[170,3178,3179],{"class":1382}," icon",[170,3181,1266],{"class":806},[170,3183,807],{"class":806},[170,3185,3186],{"class":799},"github",[170,3188,813],{"class":806},[170,3190,1412],{"class":806},[170,3192,3193],{"class":1382}," link",[170,3195,1266],{"class":806},[170,3197,2502],{"class":806},[170,3199,2302],{"class":806},[170,3201,3202],{"class":172,"line":1729},[170,3203,3204],{"class":1401},"    ]\n",[170,3206,3207],{"class":172,"line":1740},[170,3208,2520],{"class":806},[170,3210,3211,3214,3216],{"class":172,"line":1847},[170,3212,3213],{"class":1382},"  head",[170,3215,1266],{"class":806},[170,3217,2137],{"class":1401},[170,3219,3220,3223,3225,3228,3230,3232,3234,3237,3239,3241,3244,3246,3248,3250,3252,3254,3257,3259,3261,3264,3266,3268,3271,3273,3275,3277],{"class":172,"line":1857},[170,3221,3222],{"class":1401},"    [",[170,3224,813],{"class":806},[170,3226,3227],{"class":799},"link",[170,3229,813],{"class":806},[170,3231,1412],{"class":806},[170,3233,2079],{"class":806},[170,3235,3236],{"class":1382}," rel",[170,3238,1266],{"class":806},[170,3240,807],{"class":806},[170,3242,3243],{"class":799},"icon",[170,3245,813],{"class":806},[170,3247,1412],{"class":806},[170,3249,2076],{"class":1382},[170,3251,1266],{"class":806},[170,3253,807],{"class":806},[170,3255,3256],{"class":799},"image/x-icon",[170,3258,813],{"class":806},[170,3260,1412],{"class":806},[170,3262,3263],{"class":1382}," href",[170,3265,1266],{"class":806},[170,3267,807],{"class":806},[170,3269,3270],{"class":799},"/vite.ico",[170,3272,813],{"class":806},[170,3274,2085],{"class":806},[170,3276,1422],{"class":1401},[170,3278,1277],{"class":806},[170,3280,3281,3283,3285,3287,3289,3291,3293,3295,3297,3299,3301,3303,3305,3307,3309,3311,3314,3316,3318,3320,3322,3324,3327,3329,3331,3333],{"class":172,"line":1865},[170,3282,3222],{"class":1401},[170,3284,813],{"class":806},[170,3286,3227],{"class":799},[170,3288,813],{"class":806},[170,3290,1412],{"class":806},[170,3292,2079],{"class":806},[170,3294,3236],{"class":1382},[170,3296,1266],{"class":806},[170,3298,807],{"class":806},[170,3300,3243],{"class":799},[170,3302,813],{"class":806},[170,3304,1412],{"class":806},[170,3306,2076],{"class":1382},[170,3308,1266],{"class":806},[170,3310,807],{"class":806},[170,3312,3313],{"class":799},"image/png",[170,3315,813],{"class":806},[170,3317,1412],{"class":806},[170,3319,3263],{"class":1382},[170,3321,1266],{"class":806},[170,3323,807],{"class":806},[170,3325,3326],{"class":799},"/vite.png",[170,3328,813],{"class":806},[170,3330,2085],{"class":806},[170,3332,1422],{"class":1401},[170,3334,1277],{"class":806},[170,3336,3337,3339],{"class":172,"line":1876},[170,3338,2227],{"class":1401},[170,3340,1277],{"class":806},[170,3342,3343],{"class":172,"line":1887},[170,3344,1346],{"class":806},[20,3346,3348],{"id":3347},"convert-our-markdown-pages-to-a-json-collection","Convert our markdown pages to a JSON collection",[12,3350,3351],{},"Why is it important? 🤔🤔",[12,3353,3354],{},"The answer is simple, the collections help us to create previews of our articles without the need to create double information. (It’s like we have an API)",[12,3356,3357,3358,3361],{},"This is possible thanks to ",[111,3359,3360],{},"nodemon, gray-matter, remove-markdown, simultaneously",". Which work together to process and convert a markdown file to a JSON file.",[857,3363,3364],{},[122,3365,3366],{},"Configure our collection data articles.",[160,3368,3370],{"className":1358,"code":3369,"language":1360,"meta":165,"style":165},"// collection.mjs\nimport fs from 'node:fs/promises';\nimport matter from 'gray-matter';\nimport removeMd from 'remove-markdown';\n\nconst articles = await fs.readdir('./blog/');\n\nconst data = await Promise.all(\n  articles.map(async (article) => {\n    const file = matter.read(`./blog/${article}`, {\n      excerpt: true,\n      excerpt_separator: ''\n    });\n\n    const { data, content, path } = file;\n    const contents = removeMd(content).trim().split(/\\r\\n|\\n|\\r/);\n\n    return {\n      ...data,\n      title: contents[0].replace(/\\s{2,}/g, '').trim(),\n      path: path.replace(/\\.md$/, '.html'),\n      description: contents.slice(1).join('').replace(/\\s{2,}/g, '').trim().substring(0, 300) + '...'\n    }\n  })\n)\n\nawait fs.writeFile('./data.json', JSON.stringify(data), 'utf-8');\n",[167,3371,3372,3377,3396,3414,3432,3436,3469,3473,3495,3521,3557,3568,3578,3587,3591,3618,3674,3678,3685,3695,3745,3784,3870,3874,3881,3885,3889],{"__ignoreMap":165},[170,3373,3374],{"class":172,"line":173},[170,3375,3376],{"class":176},"// collection.mjs\n",[170,3378,3379,3381,3384,3387,3389,3392,3394],{"class":172,"line":180},[170,3380,2073],{"class":2072},[170,3382,3383],{"class":1401}," fs ",[170,3385,3386],{"class":2072},"from",[170,3388,807],{"class":806},[170,3390,3391],{"class":799},"node:fs/promises",[170,3393,813],{"class":806},[170,3395,2242],{"class":806},[170,3397,3398,3400,3403,3405,3407,3410,3412],{"class":172,"line":396},[170,3399,2073],{"class":2072},[170,3401,3402],{"class":1401}," matter ",[170,3404,3386],{"class":2072},[170,3406,807],{"class":806},[170,3408,3409],{"class":799},"gray-matter",[170,3411,813],{"class":806},[170,3413,2242],{"class":806},[170,3415,3416,3418,3421,3423,3425,3428,3430],{"class":172,"line":918},[170,3417,2073],{"class":2072},[170,3419,3420],{"class":1401}," removeMd ",[170,3422,3386],{"class":2072},[170,3424,807],{"class":806},[170,3426,3427],{"class":799},"remove-markdown",[170,3429,813],{"class":806},[170,3431,2242],{"class":806},[170,3433,3434],{"class":172,"line":931},[170,3435,934],{"emptyLinePlaceholder":407},[170,3437,3438,3440,3443,3445,3448,3451,3453,3456,3458,3460,3463,3465,3467],{"class":172,"line":937},[170,3439,2463],{"class":1259},[170,3441,3442],{"class":1401}," articles ",[170,3444,2469],{"class":806},[170,3446,3447],{"class":2072}," await",[170,3449,3450],{"class":1401}," fs",[170,3452,114],{"class":806},[170,3454,3455],{"class":1096},"readdir",[170,3457,2207],{"class":1401},[170,3459,813],{"class":806},[170,3461,3462],{"class":799},"./blog/",[170,3464,813],{"class":806},[170,3466,2131],{"class":1401},[170,3468,2242],{"class":806},[170,3470,3471],{"class":172,"line":1004},[170,3472,934],{"emptyLinePlaceholder":407},[170,3474,3475,3477,3480,3482,3484,3487,3489,3492],{"class":172,"line":1010},[170,3476,2463],{"class":1259},[170,3478,3479],{"class":1401}," data ",[170,3481,2469],{"class":806},[170,3483,3447],{"class":2072},[170,3485,3486],{"class":183}," Promise",[170,3488,114],{"class":806},[170,3490,3491],{"class":1096},"all",[170,3493,3494],{"class":1401},"(\n",[170,3496,3497,3500,3502,3505,3507,3510,3512,3515,3517,3519],{"class":172,"line":1016},[170,3498,3499],{"class":1401},"  articles",[170,3501,114],{"class":806},[170,3503,3504],{"class":1096},"map",[170,3506,2207],{"class":1401},[170,3508,3509],{"class":1259},"async",[170,3511,2124],{"class":806},[170,3513,3514],{"class":2127},"article",[170,3516,2131],{"class":806},[170,3518,2134],{"class":1259},[170,3520,1311],{"class":806},[170,3522,3523,3526,3528,3530,3533,3535,3538,3540,3543,3545,3548,3550,3553,3555],{"class":172,"line":1021},[170,3524,3525],{"class":1259},"    const",[170,3527,803],{"class":1401},[170,3529,1375],{"class":806},[170,3531,3532],{"class":1401}," matter",[170,3534,114],{"class":806},[170,3536,3537],{"class":1096},"read",[170,3539,2207],{"class":1382},[170,3541,3542],{"class":806},"`",[170,3544,3462],{"class":799},[170,3546,3547],{"class":806},"${",[170,3549,3514],{"class":1401},[170,3551,3552],{"class":806},"}`",[170,3554,1412],{"class":806},[170,3556,1311],{"class":806},[170,3558,3559,3562,3564,3566],{"class":172,"line":1718},[170,3560,3561],{"class":1382},"      excerpt",[170,3563,1266],{"class":806},[170,3565,1389],{"class":1388},[170,3567,1277],{"class":806},[170,3569,3570,3573,3575],{"class":172,"line":1729},[170,3571,3572],{"class":1382},"      excerpt_separator",[170,3574,1266],{"class":806},[170,3576,3577],{"class":806}," ''\n",[170,3579,3580,3583,3585],{"class":172,"line":1740},[170,3581,3582],{"class":806},"    }",[170,3584,2131],{"class":1382},[170,3586,2242],{"class":806},[170,3588,3589],{"class":172,"line":1847},[170,3590,934],{"emptyLinePlaceholder":407},[170,3592,3593,3595,3597,3600,3602,3605,3607,3610,3612,3614,3616],{"class":172,"line":1857},[170,3594,3525],{"class":1259},[170,3596,2079],{"class":806},[170,3598,3599],{"class":1401}," data",[170,3601,1412],{"class":806},[170,3603,3604],{"class":1401}," content",[170,3606,1412],{"class":806},[170,3608,3609],{"class":1401}," path",[170,3611,2085],{"class":806},[170,3613,1375],{"class":806},[170,3615,803],{"class":1401},[170,3617,2242],{"class":806},[170,3619,3620,3622,3625,3627,3630,3632,3635,3637,3639,3642,3645,3647,3650,3652,3654,3657,3660,3663,3665,3668,3670,3672],{"class":172,"line":1865},[170,3621,3525],{"class":1259},[170,3623,3624],{"class":1401}," contents",[170,3626,1375],{"class":806},[170,3628,3629],{"class":1096}," removeMd",[170,3631,2207],{"class":1382},[170,3633,3634],{"class":1401},"content",[170,3636,2131],{"class":1382},[170,3638,114],{"class":806},[170,3640,3641],{"class":1096},"trim",[170,3643,3644],{"class":1382},"()",[170,3646,114],{"class":806},[170,3648,3649],{"class":1096},"split",[170,3651,2207],{"class":1382},[170,3653,2180],{"class":806},[170,3655,3656],{"class":799},"\\r\\n",[170,3658,3659],{"class":806},"|",[170,3661,3662],{"class":799},"\\n",[170,3664,3659],{"class":806},[170,3666,3667],{"class":799},"\\r",[170,3669,2180],{"class":806},[170,3671,2131],{"class":1382},[170,3673,2242],{"class":806},[170,3675,3676],{"class":172,"line":1876},[170,3677,934],{"emptyLinePlaceholder":407},[170,3679,3680,3683],{"class":172,"line":1887},[170,3681,3682],{"class":2072},"    return",[170,3684,1311],{"class":806},[170,3686,3687,3690,3693],{"class":172,"line":1895},[170,3688,3689],{"class":806},"      ...",[170,3691,3692],{"class":1401},"data",[170,3694,1277],{"class":806},[170,3696,3697,3700,3702,3704,3707,3711,3713,3715,3718,3720,3722,3725,3728,3731,3733,3735,3737,3739,3741,3743],{"class":172,"line":1909},[170,3698,3699],{"class":1382},"      title",[170,3701,1266],{"class":806},[170,3703,3624],{"class":1401},[170,3705,3706],{"class":1382},"[",[170,3708,3710],{"class":3709},"sbssI","0",[170,3712,1422],{"class":1382},[170,3714,114],{"class":806},[170,3716,3717],{"class":1096},"replace",[170,3719,2207],{"class":1382},[170,3721,2180],{"class":806},[170,3723,3724],{"class":799},"\\s",[170,3726,3727],{"class":806},"{2,}/",[170,3729,3730],{"class":3709},"g",[170,3732,1412],{"class":806},[170,3734,2502],{"class":806},[170,3736,2131],{"class":1382},[170,3738,114],{"class":806},[170,3740,3641],{"class":1096},[170,3742,3644],{"class":1382},[170,3744,1277],{"class":806},[170,3746,3747,3749,3751,3753,3755,3757,3759,3761,3764,3766,3769,3771,3773,3775,3778,3780,3782],{"class":172,"line":1920},[170,3748,2173],{"class":1382},[170,3750,1266],{"class":806},[170,3752,3609],{"class":1401},[170,3754,114],{"class":806},[170,3756,3717],{"class":1096},[170,3758,2207],{"class":1382},[170,3760,2180],{"class":806},[170,3762,3763],{"class":1401},"\\.",[170,3765,405],{"class":799},[170,3767,3768],{"class":2072},"$",[170,3770,2180],{"class":806},[170,3772,1412],{"class":806},[170,3774,807],{"class":806},[170,3776,3777],{"class":799},".html",[170,3779,813],{"class":806},[170,3781,2131],{"class":1382},[170,3783,1277],{"class":806},[170,3785,3786,3789,3791,3793,3795,3798,3800,3803,3805,3807,3810,3812,3815,3817,3819,3821,3823,3825,3827,3829,3831,3833,3835,3837,3839,3841,3843,3845,3848,3850,3852,3854,3857,3860,3863,3865,3868],{"class":172,"line":1930},[170,3787,3788],{"class":1382},"      description",[170,3790,1266],{"class":806},[170,3792,3624],{"class":1401},[170,3794,114],{"class":806},[170,3796,3797],{"class":1096},"slice",[170,3799,2207],{"class":1382},[170,3801,3802],{"class":3709},"1",[170,3804,2131],{"class":1382},[170,3806,114],{"class":806},[170,3808,3809],{"class":1096},"join",[170,3811,2207],{"class":1382},[170,3813,3814],{"class":806},"''",[170,3816,2131],{"class":1382},[170,3818,114],{"class":806},[170,3820,3717],{"class":1096},[170,3822,2207],{"class":1382},[170,3824,2180],{"class":806},[170,3826,3724],{"class":799},[170,3828,3727],{"class":806},[170,3830,3730],{"class":3709},[170,3832,1412],{"class":806},[170,3834,2502],{"class":806},[170,3836,2131],{"class":1382},[170,3838,114],{"class":806},[170,3840,3641],{"class":1096},[170,3842,3644],{"class":1382},[170,3844,114],{"class":806},[170,3846,3847],{"class":1096},"substring",[170,3849,2207],{"class":1382},[170,3851,3710],{"class":3709},[170,3853,1412],{"class":806},[170,3855,3856],{"class":3709}," 300",[170,3858,3859],{"class":1382},") ",[170,3861,3862],{"class":806},"+",[170,3864,807],{"class":806},[170,3866,3867],{"class":799},"...",[170,3869,1506],{"class":806},[170,3871,3872],{"class":172,"line":1937},[170,3873,2222],{"class":806},[170,3875,3876,3879],{"class":172,"line":1947},[170,3877,3878],{"class":806},"  }",[170,3880,2217],{"class":1401},[170,3882,3883],{"class":172,"line":1957},[170,3884,2217],{"class":1401},[170,3886,3887],{"class":172,"line":1967},[170,3888,934],{"emptyLinePlaceholder":407},[170,3890,3892,3895,3897,3899,3902,3904,3906,3909,3911,3913,3916,3918,3921,3924,3926,3928,3931,3933,3935],{"class":172,"line":3891},27,[170,3893,3894],{"class":2072},"await",[170,3896,3450],{"class":1401},[170,3898,114],{"class":806},[170,3900,3901],{"class":1096},"writeFile",[170,3903,2207],{"class":1401},[170,3905,813],{"class":806},[170,3907,3908],{"class":799},"./data.json",[170,3910,813],{"class":806},[170,3912,1412],{"class":806},[170,3914,3915],{"class":1401}," JSON",[170,3917,114],{"class":806},[170,3919,3920],{"class":1096},"stringify",[170,3922,3923],{"class":1401},"(data)",[170,3925,1412],{"class":806},[170,3927,807],{"class":806},[170,3929,3930],{"class":799},"utf-8",[170,3932,813],{"class":806},[170,3934,2131],{"class":1401},[170,3936,2242],{"class":806},[857,3938,3939],{"start":180},[122,3940,3941],{},"Now, build a new JSON file. (This command will generate one more file for our project, where it simplifies the markdown items to JSON).",[160,3943,3945],{"className":162,"code":3944,"language":164,"meta":165,"style":165},"yarn build && yarn dev\n",[167,3946,3947],{"__ignoreMap":165},[170,3948,3949,3951,3954,3956,3959],{"class":172,"line":173},[170,3950,1676],{"class":183},[170,3952,3953],{"class":799}," build",[170,3955,2826],{"class":806},[170,3957,3958],{"class":183}," yarn",[170,3960,3961],{"class":799}," dev\n",[20,3963,3965],{"id":3964},"creating-new-vue-components","Creating new Vue components",[857,3967,3968],{},[122,3969,3970],{},"Create a Hero component.",[160,3972,3975],{"className":3973,"code":3974,"language":2785,"meta":165,"style":165},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- .vitepress/components/Hero.vue -->\n\u003Cscript setup>\nimport DefaultTheme from 'vitepress/theme'\n\nconst { Layout } = DefaultTheme;\n\n\u003C/script>\n\n\u003Ctemplate #home-hero-before>\n  \u003Cdiv class=\"container\">\n    \u003Cdiv class=\"banner\">\n      \u003Cdiv class=\"banner-hero\">\u003C/div>\n      \u003Cdiv class=\"banner-hero-text\">\n        \u003Ch1>Creating a new blog\u003C/h1>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",[167,3976,3977,3982,3996,4012,4016,4034,4038,4047,4051,4066,4088,4108,4133,4152,4172,4181,4190,4199],{"__ignoreMap":165},[170,3978,3979],{"class":172,"line":173},[170,3980,3981],{"class":176},"\u003C!-- .vitepress/components/Hero.vue -->\n",[170,3983,3984,3987,3990,3993],{"class":172,"line":180},[170,3985,3986],{"class":806},"\u003C",[170,3988,3989],{"class":1382},"script",[170,3991,3992],{"class":1259}," setup",[170,3994,3995],{"class":806},">\n",[170,3997,3998,4000,4003,4005,4007,4010],{"class":172,"line":396},[170,3999,2073],{"class":2072},[170,4001,4002],{"class":1401}," DefaultTheme ",[170,4004,3386],{"class":2072},[170,4006,807],{"class":806},[170,4008,4009],{"class":799},"vitepress/theme",[170,4011,1506],{"class":806},[170,4013,4014],{"class":172,"line":918},[170,4015,934],{"emptyLinePlaceholder":407},[170,4017,4018,4020,4022,4025,4027,4029,4032],{"class":172,"line":931},[170,4019,2463],{"class":1259},[170,4021,2079],{"class":806},[170,4023,4024],{"class":1401}," Layout ",[170,4026,2234],{"class":806},[170,4028,1375],{"class":806},[170,4030,4031],{"class":1401}," DefaultTheme",[170,4033,2242],{"class":806},[170,4035,4036],{"class":172,"line":937},[170,4037,934],{"emptyLinePlaceholder":407},[170,4039,4040,4043,4045],{"class":172,"line":1004},[170,4041,4042],{"class":806},"\u003C/",[170,4044,3989],{"class":1382},[170,4046,3995],{"class":806},[170,4048,4049],{"class":172,"line":1010},[170,4050,934],{"emptyLinePlaceholder":407},[170,4052,4053,4055,4058,4061,4064],{"class":172,"line":1016},[170,4054,3986],{"class":806},[170,4056,4057],{"class":1382},"template",[170,4059,4060],{"class":806}," #",[170,4062,4063],{"class":1259},"home-hero-before",[170,4065,3995],{"class":806},[170,4067,4068,4071,4074,4077,4079,4081,4084,4086],{"class":172,"line":1021},[170,4069,4070],{"class":806},"  \u003C",[170,4072,4073],{"class":1382},"div",[170,4075,4076],{"class":1259}," class",[170,4078,2469],{"class":806},[170,4080,1263],{"class":806},[170,4082,4083],{"class":799},"container",[170,4085,1263],{"class":806},[170,4087,3995],{"class":806},[170,4089,4090,4093,4095,4097,4099,4101,4104,4106],{"class":172,"line":1718},[170,4091,4092],{"class":806},"    \u003C",[170,4094,4073],{"class":1382},[170,4096,4076],{"class":1259},[170,4098,2469],{"class":806},[170,4100,1263],{"class":806},[170,4102,4103],{"class":799},"banner",[170,4105,1263],{"class":806},[170,4107,3995],{"class":806},[170,4109,4110,4113,4115,4117,4119,4121,4124,4126,4129,4131],{"class":172,"line":1729},[170,4111,4112],{"class":806},"      \u003C",[170,4114,4073],{"class":1382},[170,4116,4076],{"class":1259},[170,4118,2469],{"class":806},[170,4120,1263],{"class":806},[170,4122,4123],{"class":799},"banner-hero",[170,4125,1263],{"class":806},[170,4127,4128],{"class":806},">\u003C/",[170,4130,4073],{"class":1382},[170,4132,3995],{"class":806},[170,4134,4135,4137,4139,4141,4143,4145,4148,4150],{"class":172,"line":1740},[170,4136,4112],{"class":806},[170,4138,4073],{"class":1382},[170,4140,4076],{"class":1259},[170,4142,2469],{"class":806},[170,4144,1263],{"class":806},[170,4146,4147],{"class":799},"banner-hero-text",[170,4149,1263],{"class":806},[170,4151,3995],{"class":806},[170,4153,4154,4157,4160,4163,4166,4168,4170],{"class":172,"line":1847},[170,4155,4156],{"class":806},"        \u003C",[170,4158,4159],{"class":1382},"h1",[170,4161,4162],{"class":806},">",[170,4164,4165],{"class":1401},"Creating a new blog",[170,4167,4042],{"class":806},[170,4169,4159],{"class":1382},[170,4171,3995],{"class":806},[170,4173,4174,4177,4179],{"class":172,"line":1857},[170,4175,4176],{"class":806},"      \u003C/",[170,4178,4073],{"class":1382},[170,4180,3995],{"class":806},[170,4182,4183,4186,4188],{"class":172,"line":1865},[170,4184,4185],{"class":806},"    \u003C/",[170,4187,4073],{"class":1382},[170,4189,3995],{"class":806},[170,4191,4192,4195,4197],{"class":172,"line":1876},[170,4193,4194],{"class":806},"  \u003C/",[170,4196,4073],{"class":1382},[170,4198,3995],{"class":806},[170,4200,4201,4203,4205],{"class":172,"line":1887},[170,4202,4042],{"class":806},[170,4204,4057],{"class":1382},[170,4206,3995],{"class":806},[857,4208,4209],{"start":180},[122,4210,4211],{},"Now it’s time to create a component to list our articles that have been created in the blog folder.",[160,4213,4215],{"className":3973,"code":4214,"language":2785,"meta":165,"style":165},"\u003C!-- .vitepress/components/ListArticles.vue -->\n\u003Cscript setup>\nimport data from '../../data.json';\nimport DefaultTheme from 'vitepress/theme';\nimport Card from './Card.vue';\n\nconst { Layout } = DefaultTheme;\n\n// sort articles\nconst articles = data.sort(\n  (a, b) => new Date(b.Updated) - new Date(a.Updated)\n)\n\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CLayout>\n    \u003Ctemplate #home-hero-after>\n      \u003Cdiv class=\"container\">\n        \u003Ch2 class=\"title\">List of recent added articles\u003C/h2>\u003Cbr>\n        \u003Cdiv class=\"article-container\">\n          \u003Cdiv v-for=\"article in articles\">\n            \u003CCard :article=\"article\" />\n          \u003C/div>\n        \u003C/div>\n      \u003C/div>\n    \u003C/template>\n  \u003C/Layout>\n\u003C/template>\n",[167,4216,4217,4222,4232,4249,4265,4283,4287,4303,4307,4312,4329,4374,4378,4382,4390,4394,4402,4411,4424,4442,4476,4495,4521,4545,4554,4563,4571,4579,4588],{"__ignoreMap":165},[170,4218,4219],{"class":172,"line":173},[170,4220,4221],{"class":176},"\u003C!-- .vitepress/components/ListArticles.vue -->\n",[170,4223,4224,4226,4228,4230],{"class":172,"line":180},[170,4225,3986],{"class":806},[170,4227,3989],{"class":1382},[170,4229,3992],{"class":1259},[170,4231,3995],{"class":806},[170,4233,4234,4236,4238,4240,4242,4245,4247],{"class":172,"line":396},[170,4235,2073],{"class":2072},[170,4237,3479],{"class":1401},[170,4239,3386],{"class":2072},[170,4241,807],{"class":806},[170,4243,4244],{"class":799},"../../data.json",[170,4246,813],{"class":806},[170,4248,2242],{"class":806},[170,4250,4251,4253,4255,4257,4259,4261,4263],{"class":172,"line":918},[170,4252,2073],{"class":2072},[170,4254,4002],{"class":1401},[170,4256,3386],{"class":2072},[170,4258,807],{"class":806},[170,4260,4009],{"class":799},[170,4262,813],{"class":806},[170,4264,2242],{"class":806},[170,4266,4267,4269,4272,4274,4276,4279,4281],{"class":172,"line":931},[170,4268,2073],{"class":2072},[170,4270,4271],{"class":1401}," Card ",[170,4273,3386],{"class":2072},[170,4275,807],{"class":806},[170,4277,4278],{"class":799},"./Card.vue",[170,4280,813],{"class":806},[170,4282,2242],{"class":806},[170,4284,4285],{"class":172,"line":937},[170,4286,934],{"emptyLinePlaceholder":407},[170,4288,4289,4291,4293,4295,4297,4299,4301],{"class":172,"line":1004},[170,4290,2463],{"class":1259},[170,4292,2079],{"class":806},[170,4294,4024],{"class":1401},[170,4296,2234],{"class":806},[170,4298,1375],{"class":806},[170,4300,4031],{"class":1401},[170,4302,2242],{"class":806},[170,4304,4305],{"class":172,"line":1010},[170,4306,934],{"emptyLinePlaceholder":407},[170,4308,4309],{"class":172,"line":1016},[170,4310,4311],{"class":176},"// sort articles\n",[170,4313,4314,4316,4318,4320,4322,4324,4327],{"class":172,"line":1021},[170,4315,2463],{"class":1259},[170,4317,3442],{"class":1401},[170,4319,2469],{"class":806},[170,4321,3599],{"class":1401},[170,4323,114],{"class":806},[170,4325,4326],{"class":1096},"sort",[170,4328,3494],{"class":1401},[170,4330,4331,4334,4336,4338,4341,4343,4345,4348,4351,4354,4356,4359,4362,4364,4366,4369,4371],{"class":172,"line":1718},[170,4332,4333],{"class":806},"  (",[170,4335,1204],{"class":2127},[170,4337,1412],{"class":806},[170,4339,4340],{"class":2127}," b",[170,4342,2131],{"class":806},[170,4344,2134],{"class":1259},[170,4346,4347],{"class":806}," new",[170,4349,4350],{"class":1096}," Date",[170,4352,4353],{"class":1401},"(b",[170,4355,114],{"class":806},[170,4357,4358],{"class":1401},"Updated) ",[170,4360,4361],{"class":806},"-",[170,4363,4347],{"class":806},[170,4365,4350],{"class":1096},[170,4367,4368],{"class":1401},"(a",[170,4370,114],{"class":806},[170,4372,4373],{"class":1401},"Updated)\n",[170,4375,4376],{"class":172,"line":1729},[170,4377,2217],{"class":1401},[170,4379,4380],{"class":172,"line":1740},[170,4381,934],{"emptyLinePlaceholder":407},[170,4383,4384,4386,4388],{"class":172,"line":1847},[170,4385,4042],{"class":806},[170,4387,3989],{"class":1382},[170,4389,3995],{"class":806},[170,4391,4392],{"class":172,"line":1857},[170,4393,934],{"emptyLinePlaceholder":407},[170,4395,4396,4398,4400],{"class":172,"line":1865},[170,4397,3986],{"class":806},[170,4399,4057],{"class":1382},[170,4401,3995],{"class":806},[170,4403,4404,4406,4409],{"class":172,"line":1876},[170,4405,4070],{"class":806},[170,4407,4408],{"class":1382},"Layout",[170,4410,3995],{"class":806},[170,4412,4413,4415,4417,4419,4422],{"class":172,"line":1887},[170,4414,4092],{"class":806},[170,4416,4057],{"class":1382},[170,4418,4060],{"class":806},[170,4420,4421],{"class":1259},"home-hero-after",[170,4423,3995],{"class":806},[170,4425,4426,4428,4430,4432,4434,4436,4438,4440],{"class":172,"line":1895},[170,4427,4112],{"class":806},[170,4429,4073],{"class":1382},[170,4431,4076],{"class":1259},[170,4433,2469],{"class":806},[170,4435,1263],{"class":806},[170,4437,4083],{"class":799},[170,4439,1263],{"class":806},[170,4441,3995],{"class":806},[170,4443,4444,4446,4448,4450,4452,4454,4457,4459,4461,4464,4466,4468,4471,4474],{"class":172,"line":1909},[170,4445,4156],{"class":806},[170,4447,20],{"class":1382},[170,4449,4076],{"class":1259},[170,4451,2469],{"class":806},[170,4453,1263],{"class":806},[170,4455,4456],{"class":799},"title",[170,4458,1263],{"class":806},[170,4460,4162],{"class":806},[170,4462,4463],{"class":1401},"List of recent added articles",[170,4465,4042],{"class":806},[170,4467,20],{"class":1382},[170,4469,4470],{"class":806},">\u003C",[170,4472,4473],{"class":1382},"br",[170,4475,3995],{"class":806},[170,4477,4478,4480,4482,4484,4486,4488,4491,4493],{"class":172,"line":1920},[170,4479,4156],{"class":806},[170,4481,4073],{"class":1382},[170,4483,4076],{"class":1259},[170,4485,2469],{"class":806},[170,4487,1263],{"class":806},[170,4489,4490],{"class":799},"article-container",[170,4492,1263],{"class":806},[170,4494,3995],{"class":806},[170,4496,4497,4500,4502,4505,4507,4509,4511,4514,4517,4519],{"class":172,"line":1930},[170,4498,4499],{"class":806},"          \u003C",[170,4501,4073],{"class":1382},[170,4503,4504],{"class":2072}," v-for",[170,4506,2469],{"class":806},[170,4508,1263],{"class":806},[170,4510,3514],{"class":1401},[170,4512,4513],{"class":806}," in ",[170,4515,4516],{"class":1401},"articles",[170,4518,1263],{"class":806},[170,4520,3995],{"class":806},[170,4522,4523,4526,4529,4532,4534,4536,4538,4540,4542],{"class":172,"line":1937},[170,4524,4525],{"class":806},"            \u003C",[170,4527,4528],{"class":1382},"Card",[170,4530,4531],{"class":806}," :",[170,4533,3514],{"class":1259},[170,4535,2469],{"class":806},[170,4537,1263],{"class":806},[170,4539,3514],{"class":1401},[170,4541,1263],{"class":806},[170,4543,4544],{"class":806}," />\n",[170,4546,4547,4550,4552],{"class":172,"line":1947},[170,4548,4549],{"class":806},"          \u003C/",[170,4551,4073],{"class":1382},[170,4553,3995],{"class":806},[170,4555,4556,4559,4561],{"class":172,"line":1957},[170,4557,4558],{"class":806},"        \u003C/",[170,4560,4073],{"class":1382},[170,4562,3995],{"class":806},[170,4564,4565,4567,4569],{"class":172,"line":1967},[170,4566,4176],{"class":806},[170,4568,4073],{"class":1382},[170,4570,3995],{"class":806},[170,4572,4573,4575,4577],{"class":172,"line":3891},[170,4574,4185],{"class":806},[170,4576,4057],{"class":1382},[170,4578,3995],{"class":806},[170,4580,4582,4584,4586],{"class":172,"line":4581},28,[170,4583,4194],{"class":806},[170,4585,4408],{"class":1382},[170,4587,3995],{"class":806},[170,4589,4591,4593,4595],{"class":172,"line":4590},29,[170,4592,4042],{"class":806},[170,4594,4057],{"class":1382},[170,4596,3995],{"class":806},[857,4598,4599],{"start":396},[122,4600,4601],{},"We can also create a single card component for each article preview.",[160,4603,4605],{"className":3973,"code":4604,"language":2785,"meta":165,"style":165},"\u003C!-- .vitepress/components/Card.vue -->\n\u003Cscript setup>\n  defineProps({\n    article: Object\n  });\n\n  const transformDate = (date) => {\n    return new Date(date).toLocaleDateString('en-US', {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric'\n    })\n  }\n\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Ca :href=\"article.path\">\n    \u003Cdiv class=\"card\">\n      \u003Cdiv class=\"card-header\">\n        \u003Cimg :src=\"article.image\" :alt=\"article.title\" />\n      \u003C/div>\n      \u003Cdiv class=\"card-body\">\n        \u003Ch4>\n          {{ article.title }}\n        \u003C/h4>\n        \u003Cp>\n          {{ article.description }}\n        \u003C/p>\n        \u003Cdiv>\n          \u003Ch5 class=\"date\">{{ transformDate(article.Updated) }}\u003C/h5>\n        \u003C/div>\n      \u003C/div>\n    \u003C/div>\n  \u003C/a>\n\u003C/template>\n",[167,4606,4607,4612,4622,4631,4641,4649,4653,4674,4706,4722,4738,4751,4757,4761,4765,4773,4777,4785,4811,4829,4848,4891,4899,4918,4926,4942,4950,4958,4971,4979,4988,5026,5035,5044,5053,5062],{"__ignoreMap":165},[170,4608,4609],{"class":172,"line":173},[170,4610,4611],{"class":176},"\u003C!-- .vitepress/components/Card.vue -->\n",[170,4613,4614,4616,4618,4620],{"class":172,"line":180},[170,4615,3986],{"class":806},[170,4617,3989],{"class":1382},[170,4619,3992],{"class":1259},[170,4621,3995],{"class":806},[170,4623,4624,4627,4629],{"class":172,"line":396},[170,4625,4626],{"class":1096},"  defineProps",[170,4628,2207],{"class":1401},[170,4630,1251],{"class":806},[170,4632,4633,4636,4638],{"class":172,"line":918},[170,4634,4635],{"class":1382},"    article",[170,4637,1266],{"class":806},[170,4639,4640],{"class":1401}," Object\n",[170,4642,4643,4645,4647],{"class":172,"line":931},[170,4644,3878],{"class":806},[170,4646,2131],{"class":1401},[170,4648,2242],{"class":806},[170,4650,4651],{"class":172,"line":937},[170,4652,934],{"emptyLinePlaceholder":407},[170,4654,4655,4658,4661,4663,4665,4668,4670,4672],{"class":172,"line":1004},[170,4656,4657],{"class":1259},"  const",[170,4659,4660],{"class":1401}," transformDate ",[170,4662,2469],{"class":806},[170,4664,2124],{"class":806},[170,4666,4667],{"class":2127},"date",[170,4669,2131],{"class":806},[170,4671,2134],{"class":1259},[170,4673,1311],{"class":806},[170,4675,4676,4678,4680,4682,4684,4686,4688,4690,4693,4695,4697,4700,4702,4704],{"class":172,"line":1010},[170,4677,3682],{"class":2072},[170,4679,4347],{"class":806},[170,4681,4350],{"class":1096},[170,4683,2207],{"class":1382},[170,4685,4667],{"class":1401},[170,4687,2131],{"class":1382},[170,4689,114],{"class":806},[170,4691,4692],{"class":1096},"toLocaleDateString",[170,4694,2207],{"class":1382},[170,4696,813],{"class":806},[170,4698,4699],{"class":799},"en-US",[170,4701,813],{"class":806},[170,4703,1412],{"class":806},[170,4705,1311],{"class":806},[170,4707,4708,4711,4713,4715,4718,4720],{"class":172,"line":1016},[170,4709,4710],{"class":1382},"      year",[170,4712,1266],{"class":806},[170,4714,807],{"class":806},[170,4716,4717],{"class":799},"numeric",[170,4719,813],{"class":806},[170,4721,1277],{"class":806},[170,4723,4724,4727,4729,4731,4734,4736],{"class":172,"line":1021},[170,4725,4726],{"class":1382},"      month",[170,4728,1266],{"class":806},[170,4730,807],{"class":806},[170,4732,4733],{"class":799},"long",[170,4735,813],{"class":806},[170,4737,1277],{"class":806},[170,4739,4740,4743,4745,4747,4749],{"class":172,"line":1718},[170,4741,4742],{"class":1382},"      day",[170,4744,1266],{"class":806},[170,4746,807],{"class":806},[170,4748,4717],{"class":799},[170,4750,1506],{"class":806},[170,4752,4753,4755],{"class":172,"line":1729},[170,4754,3582],{"class":806},[170,4756,2217],{"class":1382},[170,4758,4759],{"class":172,"line":1740},[170,4760,1336],{"class":806},[170,4762,4763],{"class":172,"line":1847},[170,4764,934],{"emptyLinePlaceholder":407},[170,4766,4767,4769,4771],{"class":172,"line":1857},[170,4768,4042],{"class":806},[170,4770,3989],{"class":1382},[170,4772,3995],{"class":806},[170,4774,4775],{"class":172,"line":1865},[170,4776,934],{"emptyLinePlaceholder":407},[170,4778,4779,4781,4783],{"class":172,"line":1876},[170,4780,3986],{"class":806},[170,4782,4057],{"class":1382},[170,4784,3995],{"class":806},[170,4786,4787,4789,4791,4793,4796,4798,4800,4802,4804,4807,4809],{"class":172,"line":1887},[170,4788,4070],{"class":806},[170,4790,1204],{"class":1382},[170,4792,4531],{"class":806},[170,4794,4795],{"class":1259},"href",[170,4797,2469],{"class":806},[170,4799,1263],{"class":806},[170,4801,3514],{"class":1401},[170,4803,114],{"class":806},[170,4805,4806],{"class":1401},"path",[170,4808,1263],{"class":806},[170,4810,3995],{"class":806},[170,4812,4813,4815,4817,4819,4821,4823,4825,4827],{"class":172,"line":1895},[170,4814,4092],{"class":806},[170,4816,4073],{"class":1382},[170,4818,4076],{"class":1259},[170,4820,2469],{"class":806},[170,4822,1263],{"class":806},[170,4824,1143],{"class":799},[170,4826,1263],{"class":806},[170,4828,3995],{"class":806},[170,4830,4831,4833,4835,4837,4839,4841,4844,4846],{"class":172,"line":1909},[170,4832,4112],{"class":806},[170,4834,4073],{"class":1382},[170,4836,4076],{"class":1259},[170,4838,2469],{"class":806},[170,4840,1263],{"class":806},[170,4842,4843],{"class":799},"card-header",[170,4845,1263],{"class":806},[170,4847,3995],{"class":806},[170,4849,4850,4852,4854,4856,4859,4861,4863,4865,4867,4870,4872,4874,4877,4879,4881,4883,4885,4887,4889],{"class":172,"line":1920},[170,4851,4156],{"class":806},[170,4853,15],{"class":1382},[170,4855,4531],{"class":806},[170,4857,4858],{"class":1259},"src",[170,4860,2469],{"class":806},[170,4862,1263],{"class":806},[170,4864,3514],{"class":1401},[170,4866,114],{"class":806},[170,4868,4869],{"class":1401},"image",[170,4871,1263],{"class":806},[170,4873,4531],{"class":806},[170,4875,4876],{"class":1259},"alt",[170,4878,2469],{"class":806},[170,4880,1263],{"class":806},[170,4882,3514],{"class":1401},[170,4884,114],{"class":806},[170,4886,4456],{"class":1401},[170,4888,1263],{"class":806},[170,4890,4544],{"class":806},[170,4892,4893,4895,4897],{"class":172,"line":1930},[170,4894,4176],{"class":806},[170,4896,4073],{"class":1382},[170,4898,3995],{"class":806},[170,4900,4901,4903,4905,4907,4909,4911,4914,4916],{"class":172,"line":1937},[170,4902,4112],{"class":806},[170,4904,4073],{"class":1382},[170,4906,4076],{"class":1259},[170,4908,2469],{"class":806},[170,4910,1263],{"class":806},[170,4912,4913],{"class":799},"card-body",[170,4915,1263],{"class":806},[170,4917,3995],{"class":806},[170,4919,4920,4922,4924],{"class":172,"line":1947},[170,4921,4156],{"class":806},[170,4923,264],{"class":1382},[170,4925,3995],{"class":806},[170,4927,4928,4931,4934,4936,4939],{"class":172,"line":1957},[170,4929,4930],{"class":806},"          {{",[170,4932,4933],{"class":1401}," article",[170,4935,114],{"class":806},[170,4937,4938],{"class":1401},"title ",[170,4940,4941],{"class":806},"}}\n",[170,4943,4944,4946,4948],{"class":172,"line":1967},[170,4945,4558],{"class":806},[170,4947,264],{"class":1382},[170,4949,3995],{"class":806},[170,4951,4952,4954,4956],{"class":172,"line":3891},[170,4953,4156],{"class":806},[170,4955,12],{"class":1382},[170,4957,3995],{"class":806},[170,4959,4960,4962,4964,4966,4969],{"class":172,"line":4581},[170,4961,4930],{"class":806},[170,4963,4933],{"class":1401},[170,4965,114],{"class":806},[170,4967,4968],{"class":1401},"description ",[170,4970,4941],{"class":806},[170,4972,4973,4975,4977],{"class":172,"line":4590},[170,4974,4558],{"class":806},[170,4976,12],{"class":1382},[170,4978,3995],{"class":806},[170,4980,4982,4984,4986],{"class":172,"line":4981},30,[170,4983,4156],{"class":806},[170,4985,4073],{"class":1382},[170,4987,3995],{"class":806},[170,4989,4991,4993,4996,4998,5000,5002,5004,5006,5009,5012,5015,5017,5019,5022,5024],{"class":172,"line":4990},31,[170,4992,4499],{"class":806},[170,4994,4995],{"class":1382},"h5",[170,4997,4076],{"class":1259},[170,4999,2469],{"class":806},[170,5001,1263],{"class":806},[170,5003,4667],{"class":799},[170,5005,1263],{"class":806},[170,5007,5008],{"class":806},">{{",[170,5010,5011],{"class":1096}," transformDate",[170,5013,5014],{"class":1401},"(article",[170,5016,114],{"class":806},[170,5018,4358],{"class":1401},[170,5020,5021],{"class":806},"}}\u003C/",[170,5023,4995],{"class":1382},[170,5025,3995],{"class":806},[170,5027,5029,5031,5033],{"class":172,"line":5028},32,[170,5030,4558],{"class":806},[170,5032,4073],{"class":1382},[170,5034,3995],{"class":806},[170,5036,5038,5040,5042],{"class":172,"line":5037},33,[170,5039,4176],{"class":806},[170,5041,4073],{"class":1382},[170,5043,3995],{"class":806},[170,5045,5047,5049,5051],{"class":172,"line":5046},34,[170,5048,4185],{"class":806},[170,5050,4073],{"class":1382},[170,5052,3995],{"class":806},[170,5054,5056,5058,5060],{"class":172,"line":5055},35,[170,5057,4194],{"class":806},[170,5059,1204],{"class":1382},[170,5061,3995],{"class":806},[170,5063,5065,5067,5069],{"class":172,"line":5064},36,[170,5066,4042],{"class":806},[170,5068,4057],{"class":1382},[170,5070,3995],{"class":806},[857,5072,5073],{"start":918},[122,5074,5075,5076,5081],{},"Create a theme entry file. It should export the theme as its default export. Also, check the ",[1204,5077,5080],{"href":5078,"rel":5079},"https://vitepress.dev/guide/extending-default-theme#layout-slots",[1208],"Layout slots"," offered by Vitepress.",[160,5083,5085],{"className":1358,"code":5084,"language":1360,"meta":165,"style":165},"//.vitepress/theme/index.js\nimport { h } from 'vue'\nimport DefaultTheme from 'vitepress/theme';\nimport Hero from '../components/Hero.vue';\nimport ListArticles from '../components/ListArticles.vue';\nimport '../main.css'\n\nexport default {\n  ...DefaultTheme,\n  Layout() {\n    return h(DefaultTheme.Layout, null, {\n      'home-hero-before': () => h(Hero),\n      'home-hero-after': () => h(ListArticles),\n      'doc-after': () => h('div', {}, [\n        h(\n          'div',\n          {\n            class: 'link',\n          },\n          [\n            h(\n              'a',\n              {\n                href: '/',\n                rel: 'noopener',\n              },\n              [h('span', '\u003C Back')]\n            ),\n          ]\n        )\n      ]),\n    })\n  }\n}\n",[167,5086,5087,5092,5111,5127,5145,5163,5174,5178,5186,5196,5205,5226,5252,5277,5309,5316,5327,5332,5347,5352,5357,5364,5375,5380,5395,5411,5416,5444,5451,5456,5461,5468,5474,5478],{"__ignoreMap":165},[170,5088,5089],{"class":172,"line":173},[170,5090,5091],{"class":176},"//.vitepress/theme/index.js\n",[170,5093,5094,5096,5098,5101,5103,5105,5107,5109],{"class":172,"line":180},[170,5095,2073],{"class":2072},[170,5097,2079],{"class":806},[170,5099,5100],{"class":1401}," h",[170,5102,2085],{"class":806},[170,5104,2088],{"class":2072},[170,5106,807],{"class":806},[170,5108,2785],{"class":799},[170,5110,1506],{"class":806},[170,5112,5113,5115,5117,5119,5121,5123,5125],{"class":172,"line":396},[170,5114,2073],{"class":2072},[170,5116,4002],{"class":1401},[170,5118,3386],{"class":2072},[170,5120,807],{"class":806},[170,5122,4009],{"class":799},[170,5124,813],{"class":806},[170,5126,2242],{"class":806},[170,5128,5129,5131,5134,5136,5138,5141,5143],{"class":172,"line":918},[170,5130,2073],{"class":2072},[170,5132,5133],{"class":1401}," Hero ",[170,5135,3386],{"class":2072},[170,5137,807],{"class":806},[170,5139,5140],{"class":799},"../components/Hero.vue",[170,5142,813],{"class":806},[170,5144,2242],{"class":806},[170,5146,5147,5149,5152,5154,5156,5159,5161],{"class":172,"line":931},[170,5148,2073],{"class":2072},[170,5150,5151],{"class":1401}," ListArticles ",[170,5153,3386],{"class":2072},[170,5155,807],{"class":806},[170,5157,5158],{"class":799},"../components/ListArticles.vue",[170,5160,813],{"class":806},[170,5162,2242],{"class":806},[170,5164,5165,5167,5169,5172],{"class":172,"line":937},[170,5166,2073],{"class":2072},[170,5168,807],{"class":806},[170,5170,5171],{"class":799},"../main.css",[170,5173,1506],{"class":806},[170,5175,5176],{"class":172,"line":1004},[170,5177,934],{"emptyLinePlaceholder":407},[170,5179,5180,5182,5184],{"class":172,"line":1010},[170,5181,2104],{"class":2072},[170,5183,2107],{"class":2072},[170,5185,1311],{"class":806},[170,5187,5188,5191,5194],{"class":172,"line":1016},[170,5189,5190],{"class":806},"  ...",[170,5192,5193],{"class":1401},"DefaultTheme",[170,5195,1277],{"class":806},[170,5197,5198,5201,5203],{"class":172,"line":1021},[170,5199,5200],{"class":1382},"  Layout",[170,5202,3644],{"class":806},[170,5204,1311],{"class":806},[170,5206,5207,5209,5211,5213,5215,5217,5219,5221,5224],{"class":172,"line":1718},[170,5208,3682],{"class":2072},[170,5210,5100],{"class":1096},[170,5212,2207],{"class":1382},[170,5214,5193],{"class":1401},[170,5216,114],{"class":806},[170,5218,4408],{"class":1401},[170,5220,1412],{"class":806},[170,5222,5223],{"class":806}," null,",[170,5225,1311],{"class":806},[170,5227,5228,5231,5233,5235,5237,5239,5241,5243,5245,5248,5250],{"class":172,"line":1729},[170,5229,5230],{"class":806},"      '",[170,5232,4063],{"class":1382},[170,5234,813],{"class":806},[170,5236,1266],{"class":806},[170,5238,2199],{"class":806},[170,5240,2134],{"class":1259},[170,5242,5100],{"class":1096},[170,5244,2207],{"class":1382},[170,5246,5247],{"class":1401},"Hero",[170,5249,2131],{"class":1382},[170,5251,1277],{"class":806},[170,5253,5254,5256,5258,5260,5262,5264,5266,5268,5270,5273,5275],{"class":172,"line":1740},[170,5255,5230],{"class":806},[170,5257,4421],{"class":1382},[170,5259,813],{"class":806},[170,5261,1266],{"class":806},[170,5263,2199],{"class":806},[170,5265,2134],{"class":1259},[170,5267,5100],{"class":1096},[170,5269,2207],{"class":1382},[170,5271,5272],{"class":1401},"ListArticles",[170,5274,2131],{"class":1382},[170,5276,1277],{"class":806},[170,5278,5279,5281,5284,5286,5288,5290,5292,5294,5296,5298,5300,5302,5304,5307],{"class":172,"line":1847},[170,5280,5230],{"class":806},[170,5282,5283],{"class":1382},"doc-after",[170,5285,813],{"class":806},[170,5287,1266],{"class":806},[170,5289,2199],{"class":806},[170,5291,2134],{"class":1259},[170,5293,5100],{"class":1096},[170,5295,2207],{"class":1382},[170,5297,813],{"class":806},[170,5299,4073],{"class":799},[170,5301,813],{"class":806},[170,5303,1412],{"class":806},[170,5305,5306],{"class":806}," {},",[170,5308,2137],{"class":1382},[170,5310,5311,5314],{"class":172,"line":1857},[170,5312,5313],{"class":1096},"        h",[170,5315,3494],{"class":1382},[170,5317,5318,5321,5323,5325],{"class":172,"line":1865},[170,5319,5320],{"class":806},"          '",[170,5322,4073],{"class":799},[170,5324,813],{"class":806},[170,5326,1277],{"class":806},[170,5328,5329],{"class":172,"line":1876},[170,5330,5331],{"class":806},"          {\n",[170,5333,5334,5337,5339,5341,5343,5345],{"class":172,"line":1887},[170,5335,5336],{"class":1382},"            class",[170,5338,1266],{"class":806},[170,5340,807],{"class":806},[170,5342,3227],{"class":799},[170,5344,813],{"class":806},[170,5346,1277],{"class":806},[170,5348,5349],{"class":172,"line":1895},[170,5350,5351],{"class":806},"          },\n",[170,5353,5354],{"class":172,"line":1909},[170,5355,5356],{"class":1382},"          [\n",[170,5358,5359,5362],{"class":172,"line":1920},[170,5360,5361],{"class":1096},"            h",[170,5363,3494],{"class":1382},[170,5365,5366,5369,5371,5373],{"class":172,"line":1930},[170,5367,5368],{"class":806},"              '",[170,5370,1204],{"class":799},[170,5372,813],{"class":806},[170,5374,1277],{"class":806},[170,5376,5377],{"class":172,"line":1937},[170,5378,5379],{"class":806},"              {\n",[170,5381,5382,5385,5387,5389,5391,5393],{"class":172,"line":1947},[170,5383,5384],{"class":1382},"                href",[170,5386,1266],{"class":806},[170,5388,807],{"class":806},[170,5390,2180],{"class":799},[170,5392,813],{"class":806},[170,5394,1277],{"class":806},[170,5396,5397,5400,5402,5404,5407,5409],{"class":172,"line":1957},[170,5398,5399],{"class":1382},"                rel",[170,5401,1266],{"class":806},[170,5403,807],{"class":806},[170,5405,5406],{"class":799},"noopener",[170,5408,813],{"class":806},[170,5410,1277],{"class":806},[170,5412,5413],{"class":172,"line":1967},[170,5414,5415],{"class":806},"              },\n",[170,5417,5418,5421,5424,5426,5428,5430,5432,5434,5436,5439,5441],{"class":172,"line":3891},[170,5419,5420],{"class":1382},"              [",[170,5422,5423],{"class":1096},"h",[170,5425,2207],{"class":1382},[170,5427,813],{"class":806},[170,5429,170],{"class":799},[170,5431,813],{"class":806},[170,5433,1412],{"class":806},[170,5435,807],{"class":806},[170,5437,5438],{"class":799},"\u003C Back",[170,5440,813],{"class":806},[170,5442,5443],{"class":1382},")]\n",[170,5445,5446,5449],{"class":172,"line":4581},[170,5447,5448],{"class":1382},"            )",[170,5450,1277],{"class":806},[170,5452,5453],{"class":172,"line":4590},[170,5454,5455],{"class":1382},"          ]\n",[170,5457,5458],{"class":172,"line":4981},[170,5459,5460],{"class":1382},"        )\n",[170,5462,5463,5466],{"class":172,"line":4990},[170,5464,5465],{"class":1382},"      ])",[170,5467,1277],{"class":806},[170,5469,5470,5472],{"class":172,"line":5028},[170,5471,3582],{"class":806},[170,5473,2217],{"class":1382},[170,5475,5476],{"class":172,"line":5037},[170,5477,1336],{"class":806},[170,5479,5480],{"class":172,"line":5046},[170,5481,1346],{"class":806},[20,5483,5484],{"id":1086},"Finally",[12,5486,5487,5488,5493],{},"Now, you can create a blog using vitePress in a very simple way. I share the ",[1204,5489,5492],{"href":5490,"rel":5491},"https://github.com/edgonzalez24/blog-vitepress",[1208],"repo Github"," so you can review the source code.",[12,5495,5496],{},[15,5497],{"alt":5498,"src":5499},"Demo Image","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231243/demo_qkllvg.webp",[12,5501,2009],{},[387,5503,5504],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":165,"searchDepth":180,"depth":180,"links":5506},[5507,5508,5509,5510],{"id":2801,"depth":180,"text":2802},{"id":3347,"depth":180,"text":3348},{"id":3964,"depth":180,"text":3965},{"id":1086,"depth":180,"text":5484},"2023-02-09T00:00:00.000Z","Learn how to build, structure, and test your frontend applications using VitePress with this step-by-step tutorial.",{},"/articles/en/effortlessly-build-and-test-your-frontend-applications-with-vitepress",{"title":2790,"description":5512},{"loc":5514},"articles/en/effortlessly-build-and-test-your-frontend-applications-with-vitepress",[5519,2785,2026,2027],"vitepress","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231242/thumbmail_egtlqh.jpg","3Sk6H4ZYgcpKJD440VmcBeEEQvb_RAX9u58Ul4bPTN0",[5523,5528],{"title":5524,"path":5525,"stem":5526,"description":5527},"Kitbag Router vs Vue Router: Is it worth using a new alternative?","/articles/en/kitbag-router-and-vue-router","articles/en/kitbag-router-and-vue-router","A powerful new alternative for routing in VueJS; it's worth switching from the official router.",null,1781748826306]