[{"data":1,"prerenderedAt":7600},["ShallowReactive",2],{"article-es-effortlessly-build-and-test-your-frontend-applications-with-vitepress":3,"linked-es-effortlessly-build-and-test-your-frontend-applications-with-vitepress":2857,"effortlessly-build-and-test-your-frontend-applications-with-vitepress-surround":7597},{"article":4,"isFallback":2856},{"id":5,"title":6,"author":7,"body":8,"date":2843,"description":2844,"extension":1076,"meta":2845,"navigation":359,"path":2846,"seo":2847,"sitemap":2848,"stem":2849,"tags":2850,"thumbnail":2854,"__hash__":2855},"es_articles/articles/es/effortlessly-build-and-test-your-frontend-applications-with-vitepress.md","Construye y prueba tus aplicaciones frontend con VitePress sin esfuerzo: Tutorial paso a paso para crear un Blog","Edwin Gonzalez",{"type":9,"value":10,"toc":2837},"minimark",[11,15,18,23,33,67,73,86,92,122,128,134,262,267,316,321,639,643,646,649,657,662,1256,1261,1281,1285,1290,1528,1533,1919,1924,2397,2409,2811,2815,2824,2830,2833],[12,13,14],"p",{},"Primero debemos hablar sobre qué es VitePress. VitePress es un generador de sitios estáticos moderno basado en la herramienta de construcción frontend Vite. Está diseñado para ser rápido y eficiente, lo que lo convierte en una excelente opción para construir sitios web y blogs de tamaño pequeño a mediano. Con su interfaz fácil de usar y compatibilidad con una amplia gama de tecnologías, incluyendo Vue.js, JavaScript y CSS, VitePress es una opción versátil para el desarrollo frontend.",[12,16,17],{},"Así es como empezar con VitePress:",[19,20,22],"h2",{"id":21},"instalación","Instalación",[24,25,26,30],"ol",{},[27,28,29],"li",{},"Instala Node.js y yarn o npm si aún no lo has hecho.",[27,31,32],{},"Crea una nueva carpeta de proyecto.",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","mkdir vitepress-project && cd vitepress-project\n","bash","",[41,42,43],"code",{"__ignoreMap":39},[44,45,48,52,56,60,64],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"sBMFI","mkdir",[44,53,55],{"class":54},"sfazB"," vitepress-project",[44,57,59],{"class":58},"sMK4o"," &&",[44,61,63],{"class":62},"s2Zo4"," cd",[44,65,66],{"class":54}," vitepress-project\n",[24,68,70],{"start":69},3,[27,71,72],{},"Inicializa tu proyecto con tu gestor de paquetes preferido.",[34,74,76],{"className":36,"code":75,"language":38,"meta":39,"style":39},"yarn init\n",[41,77,78],{"__ignoreMap":39},[44,79,80,83],{"class":46,"line":47},[44,81,82],{"class":50},"yarn",[44,84,85],{"class":54}," init\n",[24,87,89],{"start":88},4,[27,90,91],{},"Ahora instala algunos paquetes incluyendo VitePress. (Los últimos 4 nos ayudarán a crear nuestra colección de páginas JSON).",[34,93,95],{"className":36,"code":94,"language":38,"meta":39,"style":39},"yarn add vitepress vue nodemon gray-matter remove-markdown concurrently\n",[41,96,97],{"__ignoreMap":39},[44,98,99,101,104,107,110,113,116,119],{"class":46,"line":47},[44,100,82],{"class":50},[44,102,103],{"class":54}," add",[44,105,106],{"class":54}," vitepress",[44,108,109],{"class":54}," vue",[44,111,112],{"class":54}," nodemon",[44,114,115],{"class":54}," gray-matter",[44,117,118],{"class":54}," remove-markdown",[44,120,121],{"class":54}," concurrently\n",[24,123,125],{"start":124},5,[27,126,127],{},"Configura nuestros scripts en package.json.",[129,130,131],"warning",{},[12,132,133],{},"NOTA: Cada vez que ejecutemos nuestro entorno de desarrollo, la colección de datos mencionada a continuación se actualizará.",[34,135,139],{"className":136,"code":137,"language":138,"meta":39,"style":39},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\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","json",[41,140,141,146,153,171,205,225,245,251,256],{"__ignoreMap":39},[44,142,143],{"class":46,"line":47},[44,144,145],{"class":58},"{\n",[44,147,149],{"class":46,"line":148},2,[44,150,152],{"class":151},"sTEyZ"," ...\n",[44,154,155,158,162,165,168],{"class":46,"line":69},[44,156,157],{"class":58}," \"",[44,159,161],{"class":160},"spNyl","scripts",[44,163,164],{"class":58},"\"",[44,166,167],{"class":58},":",[44,169,170],{"class":58}," {\n",[44,172,173,176,179,181,183,186,189,192,195,197,200,202],{"class":46,"line":88},[44,174,175],{"class":58}," \"",[44,177,178],{"class":50},"dev",[44,180,164],{"class":58},[44,182,167],{"class":58},[44,184,185],{"class":58}," \"",[44,187,188],{"class":54},"concurrently ",[44,190,191],{"class":151},"\\\"",[44,193,194],{"class":54},"nodemon --watch blog -e md collection.mjs",[44,196,191],{"class":151},[44,198,199],{"class":54}," && vitepress dev",[44,201,164],{"class":58},[44,203,204],{"class":58},",\n",[44,206,207,209,212,214,216,218,221,223],{"class":46,"line":124},[44,208,175],{"class":58},[44,210,211],{"class":50},"build",[44,213,164],{"class":58},[44,215,167],{"class":58},[44,217,185],{"class":58},[44,219,220],{"class":54},"node collection.mjs && vitepress build",[44,222,164],{"class":58},[44,224,204],{"class":58},[44,226,228,230,233,235,237,239,242],{"class":46,"line":227},6,[44,229,175],{"class":58},[44,231,232],{"class":50},"preview",[44,234,164],{"class":58},[44,236,167],{"class":58},[44,238,185],{"class":58},[44,240,241],{"class":54},"vitepress preview",[44,243,244],{"class":58},"\"\n",[44,246,248],{"class":46,"line":247},7,[44,249,250],{"class":58}," },\n",[44,252,254],{"class":46,"line":253},8,[44,255,152],{"class":151},[44,257,259],{"class":46,"line":258},9,[44,260,261],{"class":58},"}\n",[24,263,264],{"start":227},[27,265,266],{},"Crea nuestras primeras vistas.",[34,268,270],{"className":36,"code":269,"language":38,"meta":39,"style":39},"echo '# Hello from Index' > index.md\nmkdir blog && echo '# Hello from First Article' > blog/first_article.md\n",[41,271,272,292],{"__ignoreMap":39},[44,273,274,277,280,283,286,289],{"class":46,"line":47},[44,275,276],{"class":62},"echo",[44,278,279],{"class":58}," '",[44,281,282],{"class":54},"# Hello from Index",[44,284,285],{"class":58},"'",[44,287,288],{"class":58}," >",[44,290,291],{"class":54}," index.md\n",[44,293,294,296,299,301,304,306,309,311,313],{"class":46,"line":148},[44,295,51],{"class":50},[44,297,298],{"class":54}," blog",[44,300,59],{"class":58},[44,302,303],{"class":62}," echo",[44,305,279],{"class":58},[44,307,308],{"class":54},"# Hello from First Article",[44,310,285],{"class":58},[44,312,288],{"class":58},[44,314,315],{"class":54}," blog/first_article.md\n",[24,317,318],{"start":247},[27,319,320],{},"También es posible configurar nuestro proyecto para SEO, temas, entre otros. Aquí un ejemplo:",[34,322,326],{"className":323,"code":324,"language":325,"meta":39,"style":39},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// .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","js",[41,327,328,334,355,361,372,389,401,417,426,439,450,482,488,493,503,569,626,634],{"__ignoreMap":39},[44,329,330],{"class":46,"line":47},[44,331,333],{"class":332},"sHwdD","// .vitepress/config.js\n",[44,335,336,339,342,345,347,350,352],{"class":46,"line":148},[44,337,338],{"class":160},"const",[44,340,341],{"class":151}," META_TITLE ",[44,343,344],{"class":58},"=",[44,346,279],{"class":58},[44,348,349],{"class":54},"Blog VitePress",[44,351,285],{"class":58},[44,353,354],{"class":58},";\n",[44,356,357],{"class":46,"line":69},[44,358,360],{"emptyLinePlaceholder":359},true,"\n",[44,362,363,367,370],{"class":46,"line":88},[44,364,366],{"class":365},"s7zQu","export",[44,368,369],{"class":365}," default",[44,371,170],{"class":58},[44,373,374,378,380,382,385,387],{"class":46,"line":124},[44,375,377],{"class":376},"swJcz"," lang",[44,379,167],{"class":58},[44,381,279],{"class":58},[44,383,384],{"class":54},"es",[44,386,285],{"class":58},[44,388,204],{"class":58},[44,390,391,394,396,399],{"class":46,"line":227},[44,392,393],{"class":376}," title",[44,395,167],{"class":58},[44,397,398],{"class":151}," META_TITLE",[44,400,204],{"class":58},[44,402,403,406,408,410,413,415],{"class":46,"line":247},[44,404,405],{"class":376}," description",[44,407,167],{"class":58},[44,409,279],{"class":58},[44,411,412],{"class":54},"A new website",[44,414,285],{"class":58},[44,416,204],{"class":58},[44,418,419,422,424],{"class":46,"line":253},[44,420,421],{"class":376}," themeConfig",[44,423,167],{"class":58},[44,425,170],{"class":58},[44,427,428,431,433,437],{"class":46,"line":258},[44,429,430],{"class":376}," siteTitle",[44,432,167],{"class":58},[44,434,436],{"class":435},"sfNiH"," false",[44,438,204],{"class":58},[44,440,442,445,447],{"class":46,"line":441},10,[44,443,444],{"class":376}," socialLinks",[44,446,167],{"class":58},[44,448,449],{"class":151}," [\n",[44,451,453,456,459,461,463,466,468,471,474,476,479],{"class":46,"line":452},11,[44,454,455],{"class":58}," {",[44,457,458],{"class":376}," icon",[44,460,167],{"class":58},[44,462,279],{"class":58},[44,464,465],{"class":54},"github",[44,467,285],{"class":58},[44,469,470],{"class":58},",",[44,472,473],{"class":376}," link",[44,475,167],{"class":58},[44,477,478],{"class":58}," ''",[44,480,481],{"class":58}," },\n",[44,483,485],{"class":46,"line":484},12,[44,486,487],{"class":151}," ]\n",[44,489,491],{"class":46,"line":490},13,[44,492,250],{"class":58},[44,494,496,499,501],{"class":46,"line":495},14,[44,497,498],{"class":376}," head",[44,500,167],{"class":58},[44,502,449],{"class":151},[44,504,506,509,511,514,516,518,521,524,526,528,531,533,535,538,540,542,545,547,549,552,554,556,559,561,564,567],{"class":46,"line":505},15,[44,507,508],{"class":151}," [",[44,510,285],{"class":58},[44,512,513],{"class":54},"link",[44,515,285],{"class":58},[44,517,470],{"class":58},[44,519,520],{"class":58}," {",[44,522,523],{"class":376}," rel",[44,525,167],{"class":58},[44,527,279],{"class":58},[44,529,530],{"class":54},"icon",[44,532,285],{"class":58},[44,534,470],{"class":58},[44,536,537],{"class":376}," type",[44,539,167],{"class":58},[44,541,279],{"class":58},[44,543,544],{"class":54},"image/x-icon",[44,546,285],{"class":58},[44,548,470],{"class":58},[44,550,551],{"class":376}," href",[44,553,167],{"class":58},[44,555,279],{"class":58},[44,557,558],{"class":54},"/vite.ico",[44,560,285],{"class":58},[44,562,563],{"class":58}," }",[44,565,566],{"class":151},"]",[44,568,204],{"class":58},[44,570,572,574,576,578,580,582,584,586,588,590,592,594,596,598,600,602,605,607,609,611,613,615,618,620,622,624],{"class":46,"line":571},16,[44,573,508],{"class":151},[44,575,285],{"class":58},[44,577,513],{"class":54},[44,579,285],{"class":58},[44,581,470],{"class":58},[44,583,520],{"class":58},[44,585,523],{"class":376},[44,587,167],{"class":58},[44,589,279],{"class":58},[44,591,530],{"class":54},[44,593,285],{"class":58},[44,595,470],{"class":58},[44,597,537],{"class":376},[44,599,167],{"class":58},[44,601,279],{"class":58},[44,603,604],{"class":54},"image/png",[44,606,285],{"class":58},[44,608,470],{"class":58},[44,610,551],{"class":376},[44,612,167],{"class":58},[44,614,279],{"class":58},[44,616,617],{"class":54},"/vite.png",[44,619,285],{"class":58},[44,621,563],{"class":58},[44,623,566],{"class":151},[44,625,204],{"class":58},[44,627,629,632],{"class":46,"line":628},17,[44,630,631],{"class":151}," ]",[44,633,204],{"class":58},[44,635,637],{"class":46,"line":636},18,[44,638,261],{"class":58},[19,640,642],{"id":641},"convertir-nuestras-páginas-markdown-a-una-colección-json","Convertir nuestras páginas Markdown a una colección JSON",[12,644,645],{},"¿Por qué es importante? 🤔🤔",[12,647,648],{},"La respuesta es simple: las colecciones nos ayudan a crear vistas previas de nuestros artículos sin necesidad de duplicar información. (Es como si tuviéramos una API)",[12,650,651,652,656],{},"Esto es posible gracias a ",[653,654,655],"strong",{},"nodemon, gray-matter, remove-markdown y concurrently",", que trabajan juntos para procesar y convertir un archivo markdown a un archivo JSON.",[24,658,659],{},[27,660,661],{},"Configurar la colección de datos de artículos.",[34,663,665],{"className":323,"code":664,"language":325,"meta":39,"style":39},"// 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",[41,666,667,672,692,710,728,732,768,772,794,823,861,873,883,892,896,923,980,984,991,1002,1053,1095,1183,1189,1198,1203,1208],{"__ignoreMap":39},[44,668,669],{"class":46,"line":47},[44,670,671],{"class":332},"// collection.mjs\n",[44,673,674,677,680,683,685,688,690],{"class":46,"line":148},[44,675,676],{"class":365},"import",[44,678,679],{"class":151}," fs ",[44,681,682],{"class":365},"from",[44,684,279],{"class":58},[44,686,687],{"class":54},"node:fs/promises",[44,689,285],{"class":58},[44,691,354],{"class":58},[44,693,694,696,699,701,703,706,708],{"class":46,"line":69},[44,695,676],{"class":365},[44,697,698],{"class":151}," matter ",[44,700,682],{"class":365},[44,702,279],{"class":58},[44,704,705],{"class":54},"gray-matter",[44,707,285],{"class":58},[44,709,354],{"class":58},[44,711,712,714,717,719,721,724,726],{"class":46,"line":88},[44,713,676],{"class":365},[44,715,716],{"class":151}," removeMd ",[44,718,682],{"class":365},[44,720,279],{"class":58},[44,722,723],{"class":54},"remove-markdown",[44,725,285],{"class":58},[44,727,354],{"class":58},[44,729,730],{"class":46,"line":124},[44,731,360],{"emptyLinePlaceholder":359},[44,733,734,736,739,741,744,747,750,753,756,758,761,763,766],{"class":46,"line":227},[44,735,338],{"class":160},[44,737,738],{"class":151}," articles ",[44,740,344],{"class":58},[44,742,743],{"class":365}," await",[44,745,746],{"class":151}," fs",[44,748,749],{"class":58},".",[44,751,752],{"class":62},"readdir",[44,754,755],{"class":151},"(",[44,757,285],{"class":58},[44,759,760],{"class":54},"./blog/",[44,762,285],{"class":58},[44,764,765],{"class":151},")",[44,767,354],{"class":58},[44,769,770],{"class":46,"line":247},[44,771,360],{"emptyLinePlaceholder":359},[44,773,774,776,779,781,783,786,788,791],{"class":46,"line":253},[44,775,338],{"class":160},[44,777,778],{"class":151}," data ",[44,780,344],{"class":58},[44,782,743],{"class":365},[44,784,785],{"class":50}," Promise",[44,787,749],{"class":58},[44,789,790],{"class":62},"all",[44,792,793],{"class":151},"(\n",[44,795,796,799,801,804,806,809,812,816,818,821],{"class":46,"line":258},[44,797,798],{"class":151}," articles",[44,800,749],{"class":58},[44,802,803],{"class":62},"map",[44,805,755],{"class":151},[44,807,808],{"class":160},"async",[44,810,811],{"class":58}," (",[44,813,815],{"class":814},"sHdIc","article",[44,817,765],{"class":58},[44,819,820],{"class":160}," =>",[44,822,170],{"class":58},[44,824,825,828,831,834,837,839,842,844,847,849,852,854,857,859],{"class":46,"line":441},[44,826,827],{"class":160}," const",[44,829,830],{"class":151}," file",[44,832,833],{"class":58}," =",[44,835,836],{"class":151}," matter",[44,838,749],{"class":58},[44,840,841],{"class":62},"read",[44,843,755],{"class":376},[44,845,846],{"class":58},"`",[44,848,760],{"class":54},[44,850,851],{"class":58},"${",[44,853,815],{"class":151},[44,855,856],{"class":58},"}`",[44,858,470],{"class":58},[44,860,170],{"class":58},[44,862,863,866,868,871],{"class":46,"line":452},[44,864,865],{"class":376}," excerpt",[44,867,167],{"class":58},[44,869,870],{"class":435}," true",[44,872,204],{"class":58},[44,874,875,878,880],{"class":46,"line":484},[44,876,877],{"class":376}," excerpt_separator",[44,879,167],{"class":58},[44,881,882],{"class":58}," ''\n",[44,884,885,888,890],{"class":46,"line":490},[44,886,887],{"class":58}," }",[44,889,765],{"class":376},[44,891,354],{"class":58},[44,893,894],{"class":46,"line":495},[44,895,360],{"emptyLinePlaceholder":359},[44,897,898,900,902,905,907,910,912,915,917,919,921],{"class":46,"line":505},[44,899,827],{"class":160},[44,901,520],{"class":58},[44,903,904],{"class":151}," data",[44,906,470],{"class":58},[44,908,909],{"class":151}," content",[44,911,470],{"class":58},[44,913,914],{"class":151}," path",[44,916,563],{"class":58},[44,918,833],{"class":58},[44,920,830],{"class":151},[44,922,354],{"class":58},[44,924,925,927,930,932,935,937,940,942,944,947,950,952,955,957,960,963,966,969,971,974,976,978],{"class":46,"line":571},[44,926,827],{"class":160},[44,928,929],{"class":151}," contents",[44,931,833],{"class":58},[44,933,934],{"class":62}," removeMd",[44,936,755],{"class":376},[44,938,939],{"class":151},"content",[44,941,765],{"class":376},[44,943,749],{"class":58},[44,945,946],{"class":62},"trim",[44,948,949],{"class":376},"()",[44,951,749],{"class":58},[44,953,954],{"class":62},"split",[44,956,755],{"class":376},[44,958,959],{"class":58},"/",[44,961,962],{"class":54},"\\r\\n",[44,964,965],{"class":58},"|",[44,967,968],{"class":54},"\\n",[44,970,965],{"class":58},[44,972,973],{"class":54},"\\r",[44,975,959],{"class":58},[44,977,765],{"class":376},[44,979,354],{"class":58},[44,981,982],{"class":46,"line":628},[44,983,360],{"emptyLinePlaceholder":359},[44,985,986,989],{"class":46,"line":636},[44,987,988],{"class":365}," return",[44,990,170],{"class":58},[44,992,994,997,1000],{"class":46,"line":993},19,[44,995,996],{"class":58}," ...",[44,998,999],{"class":151},"data",[44,1001,204],{"class":58},[44,1003,1005,1008,1010,1012,1015,1019,1021,1023,1026,1028,1030,1033,1036,1039,1041,1043,1045,1047,1049,1051],{"class":46,"line":1004},20,[44,1006,1007],{"class":376}," title",[44,1009,167],{"class":58},[44,1011,929],{"class":151},[44,1013,1014],{"class":376},"[",[44,1016,1018],{"class":1017},"sbssI","0",[44,1020,566],{"class":376},[44,1022,749],{"class":58},[44,1024,1025],{"class":62},"replace",[44,1027,755],{"class":376},[44,1029,959],{"class":58},[44,1031,1032],{"class":54},"\\s",[44,1034,1035],{"class":58},"{2,}/",[44,1037,1038],{"class":1017},"g",[44,1040,470],{"class":58},[44,1042,478],{"class":58},[44,1044,765],{"class":376},[44,1046,749],{"class":58},[44,1048,946],{"class":62},[44,1050,949],{"class":376},[44,1052,204],{"class":58},[44,1054,1056,1059,1061,1063,1065,1067,1069,1071,1074,1077,1080,1082,1084,1086,1089,1091,1093],{"class":46,"line":1055},21,[44,1057,1058],{"class":376}," path",[44,1060,167],{"class":58},[44,1062,914],{"class":151},[44,1064,749],{"class":58},[44,1066,1025],{"class":62},[44,1068,755],{"class":376},[44,1070,959],{"class":58},[44,1072,1073],{"class":151},"\\.",[44,1075,1076],{"class":54},"md",[44,1078,1079],{"class":365},"$",[44,1081,959],{"class":58},[44,1083,470],{"class":58},[44,1085,279],{"class":58},[44,1087,1088],{"class":54},".html",[44,1090,285],{"class":58},[44,1092,765],{"class":376},[44,1094,204],{"class":58},[44,1096,1098,1101,1103,1105,1107,1110,1112,1115,1117,1119,1122,1124,1127,1129,1131,1133,1135,1137,1139,1141,1143,1145,1147,1149,1151,1153,1155,1157,1160,1162,1164,1166,1169,1172,1175,1177,1180],{"class":46,"line":1097},22,[44,1099,1100],{"class":376}," description",[44,1102,167],{"class":58},[44,1104,929],{"class":151},[44,1106,749],{"class":58},[44,1108,1109],{"class":62},"slice",[44,1111,755],{"class":376},[44,1113,1114],{"class":1017},"1",[44,1116,765],{"class":376},[44,1118,749],{"class":58},[44,1120,1121],{"class":62},"join",[44,1123,755],{"class":376},[44,1125,1126],{"class":58},"''",[44,1128,765],{"class":376},[44,1130,749],{"class":58},[44,1132,1025],{"class":62},[44,1134,755],{"class":376},[44,1136,959],{"class":58},[44,1138,1032],{"class":54},[44,1140,1035],{"class":58},[44,1142,1038],{"class":1017},[44,1144,470],{"class":58},[44,1146,478],{"class":58},[44,1148,765],{"class":376},[44,1150,749],{"class":58},[44,1152,946],{"class":62},[44,1154,949],{"class":376},[44,1156,749],{"class":58},[44,1158,1159],{"class":62},"substring",[44,1161,755],{"class":376},[44,1163,1018],{"class":1017},[44,1165,470],{"class":58},[44,1167,1168],{"class":1017}," 300",[44,1170,1171],{"class":376},") ",[44,1173,1174],{"class":58},"+",[44,1176,279],{"class":58},[44,1178,1179],{"class":54},"...",[44,1181,1182],{"class":58},"'\n",[44,1184,1186],{"class":46,"line":1185},23,[44,1187,1188],{"class":58}," }\n",[44,1190,1192,1195],{"class":46,"line":1191},24,[44,1193,1194],{"class":58}," }",[44,1196,1197],{"class":151},")\n",[44,1199,1201],{"class":46,"line":1200},25,[44,1202,1197],{"class":151},[44,1204,1206],{"class":46,"line":1205},26,[44,1207,360],{"emptyLinePlaceholder":359},[44,1209,1211,1214,1216,1218,1221,1223,1225,1228,1230,1232,1235,1237,1240,1243,1245,1247,1250,1252,1254],{"class":46,"line":1210},27,[44,1212,1213],{"class":365},"await",[44,1215,746],{"class":151},[44,1217,749],{"class":58},[44,1219,1220],{"class":62},"writeFile",[44,1222,755],{"class":151},[44,1224,285],{"class":58},[44,1226,1227],{"class":54},"./data.json",[44,1229,285],{"class":58},[44,1231,470],{"class":58},[44,1233,1234],{"class":151}," JSON",[44,1236,749],{"class":58},[44,1238,1239],{"class":62},"stringify",[44,1241,1242],{"class":151},"(data)",[44,1244,470],{"class":58},[44,1246,279],{"class":58},[44,1248,1249],{"class":54},"utf-8",[44,1251,285],{"class":58},[44,1253,765],{"class":151},[44,1255,354],{"class":58},[24,1257,1258],{"start":148},[27,1259,1260],{},"Ahora construye un nuevo archivo JSON. (Este comando generará un archivo más para nuestro proyecto, simplificando los elementos markdown a JSON).",[34,1262,1264],{"className":36,"code":1263,"language":38,"meta":39,"style":39},"yarn build && yarn dev\n",[41,1265,1266],{"__ignoreMap":39},[44,1267,1268,1270,1273,1275,1278],{"class":46,"line":47},[44,1269,82],{"class":50},[44,1271,1272],{"class":54}," build",[44,1274,59],{"class":58},[44,1276,1277],{"class":50}," yarn",[44,1279,1280],{"class":54}," dev\n",[19,1282,1284],{"id":1283},"creando-nuevos-componentes-vue","Creando nuevos componentes Vue",[24,1286,1287],{},[27,1288,1289],{},"Crea un componente Hero.",[34,1291,1295],{"className":1292,"code":1293,"language":1294,"meta":39,"style":39},"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","vue",[41,1296,1297,1302,1316,1332,1336,1355,1359,1368,1372,1387,1409,1429,1454,1473,1493,1502,1511,1520],{"__ignoreMap":39},[44,1298,1299],{"class":46,"line":47},[44,1300,1301],{"class":332},"\u003C!-- .vitepress/components/Hero.vue -->\n",[44,1303,1304,1307,1310,1313],{"class":46,"line":148},[44,1305,1306],{"class":58},"\u003C",[44,1308,1309],{"class":376},"script",[44,1311,1312],{"class":160}," setup",[44,1314,1315],{"class":58},">\n",[44,1317,1318,1320,1323,1325,1327,1330],{"class":46,"line":69},[44,1319,676],{"class":365},[44,1321,1322],{"class":151}," DefaultTheme ",[44,1324,682],{"class":365},[44,1326,279],{"class":58},[44,1328,1329],{"class":54},"vitepress/theme",[44,1331,1182],{"class":58},[44,1333,1334],{"class":46,"line":88},[44,1335,360],{"emptyLinePlaceholder":359},[44,1337,1338,1340,1342,1345,1348,1350,1353],{"class":46,"line":124},[44,1339,338],{"class":160},[44,1341,520],{"class":58},[44,1343,1344],{"class":151}," Layout ",[44,1346,1347],{"class":58},"}",[44,1349,833],{"class":58},[44,1351,1352],{"class":151}," DefaultTheme",[44,1354,354],{"class":58},[44,1356,1357],{"class":46,"line":227},[44,1358,360],{"emptyLinePlaceholder":359},[44,1360,1361,1364,1366],{"class":46,"line":247},[44,1362,1363],{"class":58},"\u003C/",[44,1365,1309],{"class":376},[44,1367,1315],{"class":58},[44,1369,1370],{"class":46,"line":253},[44,1371,360],{"emptyLinePlaceholder":359},[44,1373,1374,1376,1379,1382,1385],{"class":46,"line":258},[44,1375,1306],{"class":58},[44,1377,1378],{"class":376},"template",[44,1380,1381],{"class":58}," #",[44,1383,1384],{"class":160},"home-hero-before",[44,1386,1315],{"class":58},[44,1388,1389,1392,1395,1398,1400,1402,1405,1407],{"class":46,"line":441},[44,1390,1391],{"class":58}," \u003C",[44,1393,1394],{"class":376},"div",[44,1396,1397],{"class":160}," class",[44,1399,344],{"class":58},[44,1401,164],{"class":58},[44,1403,1404],{"class":54},"container",[44,1406,164],{"class":58},[44,1408,1315],{"class":58},[44,1410,1411,1414,1416,1418,1420,1422,1425,1427],{"class":46,"line":452},[44,1412,1413],{"class":58}," \u003C",[44,1415,1394],{"class":376},[44,1417,1397],{"class":160},[44,1419,344],{"class":58},[44,1421,164],{"class":58},[44,1423,1424],{"class":54},"banner",[44,1426,164],{"class":58},[44,1428,1315],{"class":58},[44,1430,1431,1434,1436,1438,1440,1442,1445,1447,1450,1452],{"class":46,"line":484},[44,1432,1433],{"class":58}," \u003C",[44,1435,1394],{"class":376},[44,1437,1397],{"class":160},[44,1439,344],{"class":58},[44,1441,164],{"class":58},[44,1443,1444],{"class":54},"banner-hero",[44,1446,164],{"class":58},[44,1448,1449],{"class":58},">\u003C/",[44,1451,1394],{"class":376},[44,1453,1315],{"class":58},[44,1455,1456,1458,1460,1462,1464,1466,1469,1471],{"class":46,"line":490},[44,1457,1433],{"class":58},[44,1459,1394],{"class":376},[44,1461,1397],{"class":160},[44,1463,344],{"class":58},[44,1465,164],{"class":58},[44,1467,1468],{"class":54},"banner-hero-text",[44,1470,164],{"class":58},[44,1472,1315],{"class":58},[44,1474,1475,1478,1481,1484,1487,1489,1491],{"class":46,"line":495},[44,1476,1477],{"class":58}," \u003C",[44,1479,1480],{"class":376},"h1",[44,1482,1483],{"class":58},">",[44,1485,1486],{"class":151},"Creating a new blog",[44,1488,1363],{"class":58},[44,1490,1480],{"class":376},[44,1492,1315],{"class":58},[44,1494,1495,1498,1500],{"class":46,"line":505},[44,1496,1497],{"class":58}," \u003C/",[44,1499,1394],{"class":376},[44,1501,1315],{"class":58},[44,1503,1504,1507,1509],{"class":46,"line":571},[44,1505,1506],{"class":58}," \u003C/",[44,1508,1394],{"class":376},[44,1510,1315],{"class":58},[44,1512,1513,1516,1518],{"class":46,"line":628},[44,1514,1515],{"class":58}," \u003C/",[44,1517,1394],{"class":376},[44,1519,1315],{"class":58},[44,1521,1522,1524,1526],{"class":46,"line":636},[44,1523,1363],{"class":58},[44,1525,1378],{"class":376},[44,1527,1315],{"class":58},[24,1529,1530],{"start":148},[27,1531,1532],{},"Ahora es el momento de crear un componente para listar nuestros artículos creados en la carpeta blog.",[34,1534,1536],{"className":1292,"code":1535,"language":1294,"meta":39,"style":39},"\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// ordenar artículos\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",[41,1537,1538,1543,1553,1570,1586,1604,1608,1624,1628,1633,1650,1696,1700,1704,1712,1716,1724,1733,1746,1764,1798,1817,1843,1867,1876,1885,1893,1901,1910],{"__ignoreMap":39},[44,1539,1540],{"class":46,"line":47},[44,1541,1542],{"class":332},"\u003C!-- .vitepress/components/ListArticles.vue -->\n",[44,1544,1545,1547,1549,1551],{"class":46,"line":148},[44,1546,1306],{"class":58},[44,1548,1309],{"class":376},[44,1550,1312],{"class":160},[44,1552,1315],{"class":58},[44,1554,1555,1557,1559,1561,1563,1566,1568],{"class":46,"line":69},[44,1556,676],{"class":365},[44,1558,778],{"class":151},[44,1560,682],{"class":365},[44,1562,279],{"class":58},[44,1564,1565],{"class":54},"../../data.json",[44,1567,285],{"class":58},[44,1569,354],{"class":58},[44,1571,1572,1574,1576,1578,1580,1582,1584],{"class":46,"line":88},[44,1573,676],{"class":365},[44,1575,1322],{"class":151},[44,1577,682],{"class":365},[44,1579,279],{"class":58},[44,1581,1329],{"class":54},[44,1583,285],{"class":58},[44,1585,354],{"class":58},[44,1587,1588,1590,1593,1595,1597,1600,1602],{"class":46,"line":124},[44,1589,676],{"class":365},[44,1591,1592],{"class":151}," Card ",[44,1594,682],{"class":365},[44,1596,279],{"class":58},[44,1598,1599],{"class":54},"./Card.vue",[44,1601,285],{"class":58},[44,1603,354],{"class":58},[44,1605,1606],{"class":46,"line":227},[44,1607,360],{"emptyLinePlaceholder":359},[44,1609,1610,1612,1614,1616,1618,1620,1622],{"class":46,"line":247},[44,1611,338],{"class":160},[44,1613,520],{"class":58},[44,1615,1344],{"class":151},[44,1617,1347],{"class":58},[44,1619,833],{"class":58},[44,1621,1352],{"class":151},[44,1623,354],{"class":58},[44,1625,1626],{"class":46,"line":253},[44,1627,360],{"emptyLinePlaceholder":359},[44,1629,1630],{"class":46,"line":258},[44,1631,1632],{"class":332},"// ordenar artículos\n",[44,1634,1635,1637,1639,1641,1643,1645,1648],{"class":46,"line":441},[44,1636,338],{"class":160},[44,1638,738],{"class":151},[44,1640,344],{"class":58},[44,1642,904],{"class":151},[44,1644,749],{"class":58},[44,1646,1647],{"class":62},"sort",[44,1649,793],{"class":151},[44,1651,1652,1655,1658,1660,1663,1665,1667,1670,1673,1676,1678,1681,1684,1686,1688,1691,1693],{"class":46,"line":452},[44,1653,1654],{"class":58}," (",[44,1656,1657],{"class":814},"a",[44,1659,470],{"class":58},[44,1661,1662],{"class":814}," b",[44,1664,765],{"class":58},[44,1666,820],{"class":160},[44,1668,1669],{"class":58}," new",[44,1671,1672],{"class":62}," Date",[44,1674,1675],{"class":151},"(b",[44,1677,749],{"class":58},[44,1679,1680],{"class":151},"Updated) ",[44,1682,1683],{"class":58},"-",[44,1685,1669],{"class":58},[44,1687,1672],{"class":62},[44,1689,1690],{"class":151},"(a",[44,1692,749],{"class":58},[44,1694,1695],{"class":151},"Updated)\n",[44,1697,1698],{"class":46,"line":484},[44,1699,1197],{"class":151},[44,1701,1702],{"class":46,"line":490},[44,1703,360],{"emptyLinePlaceholder":359},[44,1705,1706,1708,1710],{"class":46,"line":495},[44,1707,1363],{"class":58},[44,1709,1309],{"class":376},[44,1711,1315],{"class":58},[44,1713,1714],{"class":46,"line":505},[44,1715,360],{"emptyLinePlaceholder":359},[44,1717,1718,1720,1722],{"class":46,"line":571},[44,1719,1306],{"class":58},[44,1721,1378],{"class":376},[44,1723,1315],{"class":58},[44,1725,1726,1728,1731],{"class":46,"line":628},[44,1727,1391],{"class":58},[44,1729,1730],{"class":376},"Layout",[44,1732,1315],{"class":58},[44,1734,1735,1737,1739,1741,1744],{"class":46,"line":636},[44,1736,1413],{"class":58},[44,1738,1378],{"class":376},[44,1740,1381],{"class":58},[44,1742,1743],{"class":160},"home-hero-after",[44,1745,1315],{"class":58},[44,1747,1748,1750,1752,1754,1756,1758,1760,1762],{"class":46,"line":993},[44,1749,1433],{"class":58},[44,1751,1394],{"class":376},[44,1753,1397],{"class":160},[44,1755,344],{"class":58},[44,1757,164],{"class":58},[44,1759,1404],{"class":54},[44,1761,164],{"class":58},[44,1763,1315],{"class":58},[44,1765,1766,1768,1770,1772,1774,1776,1779,1781,1783,1786,1788,1790,1793,1796],{"class":46,"line":1004},[44,1767,1477],{"class":58},[44,1769,19],{"class":376},[44,1771,1397],{"class":160},[44,1773,344],{"class":58},[44,1775,164],{"class":58},[44,1777,1778],{"class":54},"title",[44,1780,164],{"class":58},[44,1782,1483],{"class":58},[44,1784,1785],{"class":151},"List of recent added articles",[44,1787,1363],{"class":58},[44,1789,19],{"class":376},[44,1791,1792],{"class":58},">\u003C",[44,1794,1795],{"class":376},"br",[44,1797,1315],{"class":58},[44,1799,1800,1802,1804,1806,1808,1810,1813,1815],{"class":46,"line":1055},[44,1801,1477],{"class":58},[44,1803,1394],{"class":376},[44,1805,1397],{"class":160},[44,1807,344],{"class":58},[44,1809,164],{"class":58},[44,1811,1812],{"class":54},"article-container",[44,1814,164],{"class":58},[44,1816,1315],{"class":58},[44,1818,1819,1822,1824,1827,1829,1831,1833,1836,1839,1841],{"class":46,"line":1097},[44,1820,1821],{"class":58}," \u003C",[44,1823,1394],{"class":376},[44,1825,1826],{"class":365}," v-for",[44,1828,344],{"class":58},[44,1830,164],{"class":58},[44,1832,815],{"class":151},[44,1834,1835],{"class":58}," in ",[44,1837,1838],{"class":151},"articles",[44,1840,164],{"class":58},[44,1842,1315],{"class":58},[44,1844,1845,1848,1851,1854,1856,1858,1860,1862,1864],{"class":46,"line":1185},[44,1846,1847],{"class":58}," \u003C",[44,1849,1850],{"class":376},"Card",[44,1852,1853],{"class":58}," :",[44,1855,815],{"class":160},[44,1857,344],{"class":58},[44,1859,164],{"class":58},[44,1861,815],{"class":151},[44,1863,164],{"class":58},[44,1865,1866],{"class":58}," />\n",[44,1868,1869,1872,1874],{"class":46,"line":1191},[44,1870,1871],{"class":58}," \u003C/",[44,1873,1394],{"class":376},[44,1875,1315],{"class":58},[44,1877,1878,1881,1883],{"class":46,"line":1200},[44,1879,1880],{"class":58}," \u003C/",[44,1882,1394],{"class":376},[44,1884,1315],{"class":58},[44,1886,1887,1889,1891],{"class":46,"line":1205},[44,1888,1497],{"class":58},[44,1890,1394],{"class":376},[44,1892,1315],{"class":58},[44,1894,1895,1897,1899],{"class":46,"line":1210},[44,1896,1506],{"class":58},[44,1898,1378],{"class":376},[44,1900,1315],{"class":58},[44,1902,1904,1906,1908],{"class":46,"line":1903},28,[44,1905,1515],{"class":58},[44,1907,1730],{"class":376},[44,1909,1315],{"class":58},[44,1911,1913,1915,1917],{"class":46,"line":1912},29,[44,1914,1363],{"class":58},[44,1916,1378],{"class":376},[44,1918,1315],{"class":58},[24,1920,1921],{"start":69},[27,1922,1923],{},"También podemos crear un componente de tarjeta individual para la vista previa de cada artículo.",[34,1925,1927],{"className":1292,"code":1926,"language":1294,"meta":39,"style":39},"\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",[41,1928,1929,1934,1944,1953,1963,1971,1975,1996,2028,2044,2060,2073,2079,2084,2088,2096,2100,2108,2134,2153,2172,2216,2224,2243,2252,2268,2276,2284,2297,2305,2314,2352,2361,2370,2379,2388],{"__ignoreMap":39},[44,1930,1931],{"class":46,"line":47},[44,1932,1933],{"class":332},"\u003C!-- .vitepress/components/Card.vue -->\n",[44,1935,1936,1938,1940,1942],{"class":46,"line":148},[44,1937,1306],{"class":58},[44,1939,1309],{"class":376},[44,1941,1312],{"class":160},[44,1943,1315],{"class":58},[44,1945,1946,1949,1951],{"class":46,"line":69},[44,1947,1948],{"class":62}," defineProps",[44,1950,755],{"class":151},[44,1952,145],{"class":58},[44,1954,1955,1958,1960],{"class":46,"line":88},[44,1956,1957],{"class":376}," article",[44,1959,167],{"class":58},[44,1961,1962],{"class":151}," Object\n",[44,1964,1965,1967,1969],{"class":46,"line":124},[44,1966,1194],{"class":58},[44,1968,765],{"class":151},[44,1970,354],{"class":58},[44,1972,1973],{"class":46,"line":227},[44,1974,360],{"emptyLinePlaceholder":359},[44,1976,1977,1980,1983,1985,1987,1990,1992,1994],{"class":46,"line":247},[44,1978,1979],{"class":160}," const",[44,1981,1982],{"class":151}," transformDate ",[44,1984,344],{"class":58},[44,1986,811],{"class":58},[44,1988,1989],{"class":814},"date",[44,1991,765],{"class":58},[44,1993,820],{"class":160},[44,1995,170],{"class":58},[44,1997,1998,2000,2002,2004,2006,2008,2010,2012,2015,2017,2019,2022,2024,2026],{"class":46,"line":253},[44,1999,988],{"class":365},[44,2001,1669],{"class":58},[44,2003,1672],{"class":62},[44,2005,755],{"class":376},[44,2007,1989],{"class":151},[44,2009,765],{"class":376},[44,2011,749],{"class":58},[44,2013,2014],{"class":62},"toLocaleDateString",[44,2016,755],{"class":376},[44,2018,285],{"class":58},[44,2020,2021],{"class":54},"en-US",[44,2023,285],{"class":58},[44,2025,470],{"class":58},[44,2027,170],{"class":58},[44,2029,2030,2033,2035,2037,2040,2042],{"class":46,"line":258},[44,2031,2032],{"class":376}," year",[44,2034,167],{"class":58},[44,2036,279],{"class":58},[44,2038,2039],{"class":54},"numeric",[44,2041,285],{"class":58},[44,2043,204],{"class":58},[44,2045,2046,2049,2051,2053,2056,2058],{"class":46,"line":441},[44,2047,2048],{"class":376}," month",[44,2050,167],{"class":58},[44,2052,279],{"class":58},[44,2054,2055],{"class":54},"long",[44,2057,285],{"class":58},[44,2059,204],{"class":58},[44,2061,2062,2065,2067,2069,2071],{"class":46,"line":452},[44,2063,2064],{"class":376}," day",[44,2066,167],{"class":58},[44,2068,279],{"class":58},[44,2070,2039],{"class":54},[44,2072,1182],{"class":58},[44,2074,2075,2077],{"class":46,"line":484},[44,2076,887],{"class":58},[44,2078,1197],{"class":376},[44,2080,2081],{"class":46,"line":490},[44,2082,2083],{"class":58}," }\n",[44,2085,2086],{"class":46,"line":495},[44,2087,360],{"emptyLinePlaceholder":359},[44,2089,2090,2092,2094],{"class":46,"line":505},[44,2091,1363],{"class":58},[44,2093,1309],{"class":376},[44,2095,1315],{"class":58},[44,2097,2098],{"class":46,"line":571},[44,2099,360],{"emptyLinePlaceholder":359},[44,2101,2102,2104,2106],{"class":46,"line":628},[44,2103,1306],{"class":58},[44,2105,1378],{"class":376},[44,2107,1315],{"class":58},[44,2109,2110,2112,2114,2116,2119,2121,2123,2125,2127,2130,2132],{"class":46,"line":636},[44,2111,1391],{"class":58},[44,2113,1657],{"class":376},[44,2115,1853],{"class":58},[44,2117,2118],{"class":160},"href",[44,2120,344],{"class":58},[44,2122,164],{"class":58},[44,2124,815],{"class":151},[44,2126,749],{"class":58},[44,2128,2129],{"class":151},"path",[44,2131,164],{"class":58},[44,2133,1315],{"class":58},[44,2135,2136,2138,2140,2142,2144,2146,2149,2151],{"class":46,"line":993},[44,2137,1413],{"class":58},[44,2139,1394],{"class":376},[44,2141,1397],{"class":160},[44,2143,344],{"class":58},[44,2145,164],{"class":58},[44,2147,2148],{"class":54},"card",[44,2150,164],{"class":58},[44,2152,1315],{"class":58},[44,2154,2155,2157,2159,2161,2163,2165,2168,2170],{"class":46,"line":1004},[44,2156,1433],{"class":58},[44,2158,1394],{"class":376},[44,2160,1397],{"class":160},[44,2162,344],{"class":58},[44,2164,164],{"class":58},[44,2166,2167],{"class":54},"card-header",[44,2169,164],{"class":58},[44,2171,1315],{"class":58},[44,2173,2174,2176,2179,2181,2184,2186,2188,2190,2192,2195,2197,2199,2202,2204,2206,2208,2210,2212,2214],{"class":46,"line":1055},[44,2175,1477],{"class":58},[44,2177,2178],{"class":376},"img",[44,2180,1853],{"class":58},[44,2182,2183],{"class":160},"src",[44,2185,344],{"class":58},[44,2187,164],{"class":58},[44,2189,815],{"class":151},[44,2191,749],{"class":58},[44,2193,2194],{"class":151},"image",[44,2196,164],{"class":58},[44,2198,1853],{"class":58},[44,2200,2201],{"class":160},"alt",[44,2203,344],{"class":58},[44,2205,164],{"class":58},[44,2207,815],{"class":151},[44,2209,749],{"class":58},[44,2211,1778],{"class":151},[44,2213,164],{"class":58},[44,2215,1866],{"class":58},[44,2217,2218,2220,2222],{"class":46,"line":1097},[44,2219,1497],{"class":58},[44,2221,1394],{"class":376},[44,2223,1315],{"class":58},[44,2225,2226,2228,2230,2232,2234,2236,2239,2241],{"class":46,"line":1185},[44,2227,1433],{"class":58},[44,2229,1394],{"class":376},[44,2231,1397],{"class":160},[44,2233,344],{"class":58},[44,2235,164],{"class":58},[44,2237,2238],{"class":54},"card-body",[44,2240,164],{"class":58},[44,2242,1315],{"class":58},[44,2244,2245,2247,2250],{"class":46,"line":1191},[44,2246,1477],{"class":58},[44,2248,2249],{"class":376},"h4",[44,2251,1315],{"class":58},[44,2253,2254,2257,2260,2262,2265],{"class":46,"line":1200},[44,2255,2256],{"class":58}," {{",[44,2258,2259],{"class":151}," article",[44,2261,749],{"class":58},[44,2263,2264],{"class":151},"title ",[44,2266,2267],{"class":58},"}}\n",[44,2269,2270,2272,2274],{"class":46,"line":1205},[44,2271,1880],{"class":58},[44,2273,2249],{"class":376},[44,2275,1315],{"class":58},[44,2277,2278,2280,2282],{"class":46,"line":1210},[44,2279,1477],{"class":58},[44,2281,12],{"class":376},[44,2283,1315],{"class":58},[44,2285,2286,2288,2290,2292,2295],{"class":46,"line":1903},[44,2287,2256],{"class":58},[44,2289,2259],{"class":151},[44,2291,749],{"class":58},[44,2293,2294],{"class":151},"description ",[44,2296,2267],{"class":58},[44,2298,2299,2301,2303],{"class":46,"line":1912},[44,2300,1880],{"class":58},[44,2302,12],{"class":376},[44,2304,1315],{"class":58},[44,2306,2308,2310,2312],{"class":46,"line":2307},30,[44,2309,1477],{"class":58},[44,2311,1394],{"class":376},[44,2313,1315],{"class":58},[44,2315,2317,2319,2322,2324,2326,2328,2330,2332,2335,2338,2341,2343,2345,2348,2350],{"class":46,"line":2316},31,[44,2318,1821],{"class":58},[44,2320,2321],{"class":376},"h5",[44,2323,1397],{"class":160},[44,2325,344],{"class":58},[44,2327,164],{"class":58},[44,2329,1989],{"class":54},[44,2331,164],{"class":58},[44,2333,2334],{"class":58},">{{",[44,2336,2337],{"class":62}," transformDate",[44,2339,2340],{"class":151},"(article",[44,2342,749],{"class":58},[44,2344,1680],{"class":151},[44,2346,2347],{"class":58},"}}\u003C/",[44,2349,2321],{"class":376},[44,2351,1315],{"class":58},[44,2353,2355,2357,2359],{"class":46,"line":2354},32,[44,2356,1880],{"class":58},[44,2358,1394],{"class":376},[44,2360,1315],{"class":58},[44,2362,2364,2366,2368],{"class":46,"line":2363},33,[44,2365,1497],{"class":58},[44,2367,1394],{"class":376},[44,2369,1315],{"class":58},[44,2371,2373,2375,2377],{"class":46,"line":2372},34,[44,2374,1506],{"class":58},[44,2376,1394],{"class":376},[44,2378,1315],{"class":58},[44,2380,2382,2384,2386],{"class":46,"line":2381},35,[44,2383,1515],{"class":58},[44,2385,1657],{"class":376},[44,2387,1315],{"class":58},[44,2389,2391,2393,2395],{"class":46,"line":2390},36,[44,2392,1363],{"class":58},[44,2394,1378],{"class":376},[44,2396,1315],{"class":58},[24,2398,2399],{"start":88},[27,2400,2401,2402,2408],{},"Crea el archivo de entrada del tema. Debe exportar el tema como su exportación predeterminada. También revisa los ",[1657,2403,2407],{"href":2404,"rel":2405},"https://vitepress.dev/guide/extending-default-theme#layout-slots",[2406],"nofollow","Layout slots"," que ofrece VitePress.",[34,2410,2412],{"className":323,"code":2411,"language":325,"meta":39,"style":39},"//.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",[41,2413,2414,2419,2439,2455,2473,2491,2502,2506,2514,2524,2533,2554,2581,2606,2638,2645,2656,2661,2676,2681,2686,2693,2704,2709,2724,2740,2745,2773,2780,2785,2790,2797,2803,2807],{"__ignoreMap":39},[44,2415,2416],{"class":46,"line":47},[44,2417,2418],{"class":332},"//.vitepress/theme/index.js\n",[44,2420,2421,2423,2425,2428,2430,2433,2435,2437],{"class":46,"line":148},[44,2422,676],{"class":365},[44,2424,520],{"class":58},[44,2426,2427],{"class":151}," h",[44,2429,563],{"class":58},[44,2431,2432],{"class":365}," from",[44,2434,279],{"class":58},[44,2436,1294],{"class":54},[44,2438,1182],{"class":58},[44,2440,2441,2443,2445,2447,2449,2451,2453],{"class":46,"line":69},[44,2442,676],{"class":365},[44,2444,1322],{"class":151},[44,2446,682],{"class":365},[44,2448,279],{"class":58},[44,2450,1329],{"class":54},[44,2452,285],{"class":58},[44,2454,354],{"class":58},[44,2456,2457,2459,2462,2464,2466,2469,2471],{"class":46,"line":88},[44,2458,676],{"class":365},[44,2460,2461],{"class":151}," Hero ",[44,2463,682],{"class":365},[44,2465,279],{"class":58},[44,2467,2468],{"class":54},"../components/Hero.vue",[44,2470,285],{"class":58},[44,2472,354],{"class":58},[44,2474,2475,2477,2480,2482,2484,2487,2489],{"class":46,"line":124},[44,2476,676],{"class":365},[44,2478,2479],{"class":151}," ListArticles ",[44,2481,682],{"class":365},[44,2483,279],{"class":58},[44,2485,2486],{"class":54},"../components/ListArticles.vue",[44,2488,285],{"class":58},[44,2490,354],{"class":58},[44,2492,2493,2495,2497,2500],{"class":46,"line":227},[44,2494,676],{"class":365},[44,2496,279],{"class":58},[44,2498,2499],{"class":54},"../main.css",[44,2501,1182],{"class":58},[44,2503,2504],{"class":46,"line":247},[44,2505,360],{"emptyLinePlaceholder":359},[44,2507,2508,2510,2512],{"class":46,"line":253},[44,2509,366],{"class":365},[44,2511,369],{"class":365},[44,2513,170],{"class":58},[44,2515,2516,2519,2522],{"class":46,"line":258},[44,2517,2518],{"class":58}," ...",[44,2520,2521],{"class":151},"DefaultTheme",[44,2523,204],{"class":58},[44,2525,2526,2529,2531],{"class":46,"line":441},[44,2527,2528],{"class":376}," Layout",[44,2530,949],{"class":58},[44,2532,170],{"class":58},[44,2534,2535,2537,2539,2541,2543,2545,2547,2549,2552],{"class":46,"line":452},[44,2536,988],{"class":365},[44,2538,2427],{"class":62},[44,2540,755],{"class":376},[44,2542,2521],{"class":151},[44,2544,749],{"class":58},[44,2546,1730],{"class":151},[44,2548,470],{"class":58},[44,2550,2551],{"class":58}," null,",[44,2553,170],{"class":58},[44,2555,2556,2559,2561,2563,2565,2568,2570,2572,2574,2577,2579],{"class":46,"line":484},[44,2557,2558],{"class":58}," '",[44,2560,1384],{"class":376},[44,2562,285],{"class":58},[44,2564,167],{"class":58},[44,2566,2567],{"class":58}," ()",[44,2569,820],{"class":160},[44,2571,2427],{"class":62},[44,2573,755],{"class":376},[44,2575,2576],{"class":151},"Hero",[44,2578,765],{"class":376},[44,2580,204],{"class":58},[44,2582,2583,2585,2587,2589,2591,2593,2595,2597,2599,2602,2604],{"class":46,"line":490},[44,2584,2558],{"class":58},[44,2586,1743],{"class":376},[44,2588,285],{"class":58},[44,2590,167],{"class":58},[44,2592,2567],{"class":58},[44,2594,820],{"class":160},[44,2596,2427],{"class":62},[44,2598,755],{"class":376},[44,2600,2601],{"class":151},"ListArticles",[44,2603,765],{"class":376},[44,2605,204],{"class":58},[44,2607,2608,2610,2613,2615,2617,2619,2621,2623,2625,2627,2629,2631,2633,2636],{"class":46,"line":495},[44,2609,2558],{"class":58},[44,2611,2612],{"class":376},"doc-after",[44,2614,285],{"class":58},[44,2616,167],{"class":58},[44,2618,2567],{"class":58},[44,2620,820],{"class":160},[44,2622,2427],{"class":62},[44,2624,755],{"class":376},[44,2626,285],{"class":58},[44,2628,1394],{"class":54},[44,2630,285],{"class":58},[44,2632,470],{"class":58},[44,2634,2635],{"class":58}," {},",[44,2637,449],{"class":376},[44,2639,2640,2643],{"class":46,"line":505},[44,2641,2642],{"class":62}," h",[44,2644,793],{"class":376},[44,2646,2647,2650,2652,2654],{"class":46,"line":571},[44,2648,2649],{"class":58}," '",[44,2651,1394],{"class":54},[44,2653,285],{"class":58},[44,2655,204],{"class":58},[44,2657,2658],{"class":46,"line":628},[44,2659,2660],{"class":58}," {\n",[44,2662,2663,2666,2668,2670,2672,2674],{"class":46,"line":636},[44,2664,2665],{"class":376}," class",[44,2667,167],{"class":58},[44,2669,279],{"class":58},[44,2671,513],{"class":54},[44,2673,285],{"class":58},[44,2675,204],{"class":58},[44,2677,2678],{"class":46,"line":993},[44,2679,2680],{"class":58}," },\n",[44,2682,2683],{"class":46,"line":1004},[44,2684,2685],{"class":376}," [\n",[44,2687,2688,2691],{"class":46,"line":1055},[44,2689,2690],{"class":62}," h",[44,2692,793],{"class":376},[44,2694,2695,2698,2700,2702],{"class":46,"line":1097},[44,2696,2697],{"class":58}," '",[44,2699,1657],{"class":54},[44,2701,285],{"class":58},[44,2703,204],{"class":58},[44,2705,2706],{"class":46,"line":1185},[44,2707,2708],{"class":58}," {\n",[44,2710,2711,2714,2716,2718,2720,2722],{"class":46,"line":1191},[44,2712,2713],{"class":376}," href",[44,2715,167],{"class":58},[44,2717,279],{"class":58},[44,2719,959],{"class":54},[44,2721,285],{"class":58},[44,2723,204],{"class":58},[44,2725,2726,2729,2731,2733,2736,2738],{"class":46,"line":1200},[44,2727,2728],{"class":376}," rel",[44,2730,167],{"class":58},[44,2732,279],{"class":58},[44,2734,2735],{"class":54},"noopener",[44,2737,285],{"class":58},[44,2739,204],{"class":58},[44,2741,2742],{"class":46,"line":1205},[44,2743,2744],{"class":58}," },\n",[44,2746,2747,2750,2753,2755,2757,2759,2761,2763,2765,2768,2770],{"class":46,"line":1210},[44,2748,2749],{"class":376}," [",[44,2751,2752],{"class":62},"h",[44,2754,755],{"class":376},[44,2756,285],{"class":58},[44,2758,44],{"class":54},[44,2760,285],{"class":58},[44,2762,470],{"class":58},[44,2764,279],{"class":58},[44,2766,2767],{"class":54},"\u003C Back",[44,2769,285],{"class":58},[44,2771,2772],{"class":376},")]\n",[44,2774,2775,2778],{"class":46,"line":1903},[44,2776,2777],{"class":376}," )",[44,2779,204],{"class":58},[44,2781,2782],{"class":46,"line":1912},[44,2783,2784],{"class":376}," ]\n",[44,2786,2787],{"class":46,"line":2307},[44,2788,2789],{"class":376}," )\n",[44,2791,2792,2795],{"class":46,"line":2316},[44,2793,2794],{"class":376}," ])",[44,2796,204],{"class":58},[44,2798,2799,2801],{"class":46,"line":2354},[44,2800,887],{"class":58},[44,2802,1197],{"class":376},[44,2804,2805],{"class":46,"line":2363},[44,2806,2083],{"class":58},[44,2808,2809],{"class":46,"line":2372},[44,2810,261],{"class":58},[19,2812,2814],{"id":2813},"finalmente","Finalmente",[12,2816,2817,2818,2823],{},"Ahora puedes crear un blog usando VitePress de una manera muy sencilla. Comparto el ",[1657,2819,2822],{"href":2820,"rel":2821},"https://github.com/edgonzalez24/blog-vitepress",[2406],"repositorio en Github"," para que puedas revisar el código fuente.",[12,2825,2826],{},[2178,2827],{"alt":2828,"src":2829},"Demo Image","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231243/demo_qkllvg.webp",[12,2831,2832],{},"¡Gracias por leer! nos vemos pronto. 🙌🏽🙌🏽",[2834,2835,2836],"style",{},"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":39,"searchDepth":148,"depth":148,"links":2838},[2839,2840,2841,2842],{"id":21,"depth":148,"text":22},{"id":641,"depth":148,"text":642},{"id":1283,"depth":148,"text":1284},{"id":2813,"depth":148,"text":2814},"2023-02-09T00:00:00.000Z","Aprende a construir, estructurar y probar tus aplicaciones frontend usando VitePress con este tutorial paso a paso.",{},"/articles/es/effortlessly-build-and-test-your-frontend-applications-with-vitepress",{"title":6,"description":2844},{"loc":2846},"articles/es/effortlessly-build-and-test-your-frontend-applications-with-vitepress",[2851,1294,2852,2853],"vitepress","javascript","webdev","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231242/thumbmail_egtlqh.jpg","_04TIPEr1xO-1eZXD7i4j6L6xBzM8B5G5O0WNtzWdIs",false,[2858,5297,6028,6826,7220],{"id":2859,"title":2860,"author":7,"body":2861,"date":2843,"description":5289,"extension":1076,"meta":5290,"navigation":359,"path":5291,"seo":5292,"sitemap":5293,"stem":5294,"tags":5295,"thumbnail":2854,"__hash__":5296},"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":2862,"toc":5283},[2863,2866,2869,2873,2881,2897,2902,2912,2917,2939,2944,2949,3045,3050,3088,3093,3351,3355,3358,3361,3368,3373,3865,3870,3886,3890,3895,4099,4104,4456,4461,4891,4900,5262,5266,5274,5278,5281],[12,2864,2865],{},"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,2867,2868],{},"Here’s how to get started with VitePress:",[19,2870,2872],{"id":2871},"installation","Installation",[24,2874,2875,2878],{},[27,2876,2877],{},"Install Node.js and yarn or npm if you haven’t already.",[27,2879,2880],{},"Create a new folder project.",[34,2882,2883],{"className":36,"code":37,"language":38,"meta":39,"style":39},[41,2884,2885],{"__ignoreMap":39},[44,2886,2887,2889,2891,2893,2895],{"class":46,"line":47},[44,2888,51],{"class":50},[44,2890,55],{"class":54},[44,2892,59],{"class":58},[44,2894,63],{"class":62},[44,2896,66],{"class":54},[24,2898,2899],{"start":69},[27,2900,2901],{},"Initialize our project with your preferred package manager.",[34,2903,2904],{"className":36,"code":75,"language":38,"meta":39,"style":39},[41,2905,2906],{"__ignoreMap":39},[44,2907,2908,2910],{"class":46,"line":47},[44,2909,82],{"class":50},[44,2911,85],{"class":54},[24,2913,2914],{"start":88},[27,2915,2916],{},"Now, install some packages including vitePress. (These last 4 will help create our collection of JSON pages).",[34,2918,2919],{"className":36,"code":94,"language":38,"meta":39,"style":39},[41,2920,2921],{"__ignoreMap":39},[44,2922,2923,2925,2927,2929,2931,2933,2935,2937],{"class":46,"line":47},[44,2924,82],{"class":50},[44,2926,103],{"class":54},[44,2928,106],{"class":54},[44,2930,109],{"class":54},[44,2932,112],{"class":54},[44,2934,115],{"class":54},[44,2936,118],{"class":54},[44,2938,121],{"class":54},[24,2940,2941],{"start":124},[27,2942,2943],{},"Set up our scripts in package.json.",[129,2945,2946],{},[12,2947,2948],{},"NOTE: Every time we run our development environment, the data collection mentioned below will be updated.",[34,2950,2951],{"className":136,"code":137,"language":138,"meta":39,"style":39},[41,2952,2953,2957,2961,2973,2999,3017,3033,3037,3041],{"__ignoreMap":39},[44,2954,2955],{"class":46,"line":47},[44,2956,145],{"class":58},[44,2958,2959],{"class":46,"line":148},[44,2960,152],{"class":151},[44,2962,2963,2965,2967,2969,2971],{"class":46,"line":69},[44,2964,157],{"class":58},[44,2966,161],{"class":160},[44,2968,164],{"class":58},[44,2970,167],{"class":58},[44,2972,170],{"class":58},[44,2974,2975,2977,2979,2981,2983,2985,2987,2989,2991,2993,2995,2997],{"class":46,"line":88},[44,2976,175],{"class":58},[44,2978,178],{"class":50},[44,2980,164],{"class":58},[44,2982,167],{"class":58},[44,2984,185],{"class":58},[44,2986,188],{"class":54},[44,2988,191],{"class":151},[44,2990,194],{"class":54},[44,2992,191],{"class":151},[44,2994,199],{"class":54},[44,2996,164],{"class":58},[44,2998,204],{"class":58},[44,3000,3001,3003,3005,3007,3009,3011,3013,3015],{"class":46,"line":124},[44,3002,175],{"class":58},[44,3004,211],{"class":50},[44,3006,164],{"class":58},[44,3008,167],{"class":58},[44,3010,185],{"class":58},[44,3012,220],{"class":54},[44,3014,164],{"class":58},[44,3016,204],{"class":58},[44,3018,3019,3021,3023,3025,3027,3029,3031],{"class":46,"line":227},[44,3020,175],{"class":58},[44,3022,232],{"class":50},[44,3024,164],{"class":58},[44,3026,167],{"class":58},[44,3028,185],{"class":58},[44,3030,241],{"class":54},[44,3032,244],{"class":58},[44,3034,3035],{"class":46,"line":247},[44,3036,250],{"class":58},[44,3038,3039],{"class":46,"line":253},[44,3040,152],{"class":151},[44,3042,3043],{"class":46,"line":258},[44,3044,261],{"class":58},[24,3046,3047],{"start":227},[27,3048,3049],{},"Create our first views.",[34,3051,3052],{"className":36,"code":269,"language":38,"meta":39,"style":39},[41,3053,3054,3068],{"__ignoreMap":39},[44,3055,3056,3058,3060,3062,3064,3066],{"class":46,"line":47},[44,3057,276],{"class":62},[44,3059,279],{"class":58},[44,3061,282],{"class":54},[44,3063,285],{"class":58},[44,3065,288],{"class":58},[44,3067,291],{"class":54},[44,3069,3070,3072,3074,3076,3078,3080,3082,3084,3086],{"class":46,"line":148},[44,3071,51],{"class":50},[44,3073,298],{"class":54},[44,3075,59],{"class":58},[44,3077,303],{"class":62},[44,3079,279],{"class":58},[44,3081,308],{"class":54},[44,3083,285],{"class":58},[44,3085,288],{"class":58},[44,3087,315],{"class":54},[24,3089,3090],{"start":247},[27,3091,3092],{},"It is also possible to configure our project, for SEO, and themes, among others. Here is an example:",[34,3094,3095],{"className":323,"code":324,"language":325,"meta":39,"style":39},[41,3096,3097,3101,3117,3121,3129,3143,3153,3167,3175,3185,3193,3217,3221,3225,3233,3287,3341,3347],{"__ignoreMap":39},[44,3098,3099],{"class":46,"line":47},[44,3100,333],{"class":332},[44,3102,3103,3105,3107,3109,3111,3113,3115],{"class":46,"line":148},[44,3104,338],{"class":160},[44,3106,341],{"class":151},[44,3108,344],{"class":58},[44,3110,279],{"class":58},[44,3112,349],{"class":54},[44,3114,285],{"class":58},[44,3116,354],{"class":58},[44,3118,3119],{"class":46,"line":69},[44,3120,360],{"emptyLinePlaceholder":359},[44,3122,3123,3125,3127],{"class":46,"line":88},[44,3124,366],{"class":365},[44,3126,369],{"class":365},[44,3128,170],{"class":58},[44,3130,3131,3133,3135,3137,3139,3141],{"class":46,"line":124},[44,3132,377],{"class":376},[44,3134,167],{"class":58},[44,3136,279],{"class":58},[44,3138,384],{"class":54},[44,3140,285],{"class":58},[44,3142,204],{"class":58},[44,3144,3145,3147,3149,3151],{"class":46,"line":227},[44,3146,393],{"class":376},[44,3148,167],{"class":58},[44,3150,398],{"class":151},[44,3152,204],{"class":58},[44,3154,3155,3157,3159,3161,3163,3165],{"class":46,"line":247},[44,3156,405],{"class":376},[44,3158,167],{"class":58},[44,3160,279],{"class":58},[44,3162,412],{"class":54},[44,3164,285],{"class":58},[44,3166,204],{"class":58},[44,3168,3169,3171,3173],{"class":46,"line":253},[44,3170,421],{"class":376},[44,3172,167],{"class":58},[44,3174,170],{"class":58},[44,3176,3177,3179,3181,3183],{"class":46,"line":258},[44,3178,430],{"class":376},[44,3180,167],{"class":58},[44,3182,436],{"class":435},[44,3184,204],{"class":58},[44,3186,3187,3189,3191],{"class":46,"line":441},[44,3188,444],{"class":376},[44,3190,167],{"class":58},[44,3192,449],{"class":151},[44,3194,3195,3197,3199,3201,3203,3205,3207,3209,3211,3213,3215],{"class":46,"line":452},[44,3196,455],{"class":58},[44,3198,458],{"class":376},[44,3200,167],{"class":58},[44,3202,279],{"class":58},[44,3204,465],{"class":54},[44,3206,285],{"class":58},[44,3208,470],{"class":58},[44,3210,473],{"class":376},[44,3212,167],{"class":58},[44,3214,478],{"class":58},[44,3216,481],{"class":58},[44,3218,3219],{"class":46,"line":484},[44,3220,487],{"class":151},[44,3222,3223],{"class":46,"line":490},[44,3224,250],{"class":58},[44,3226,3227,3229,3231],{"class":46,"line":495},[44,3228,498],{"class":376},[44,3230,167],{"class":58},[44,3232,449],{"class":151},[44,3234,3235,3237,3239,3241,3243,3245,3247,3249,3251,3253,3255,3257,3259,3261,3263,3265,3267,3269,3271,3273,3275,3277,3279,3281,3283,3285],{"class":46,"line":505},[44,3236,508],{"class":151},[44,3238,285],{"class":58},[44,3240,513],{"class":54},[44,3242,285],{"class":58},[44,3244,470],{"class":58},[44,3246,520],{"class":58},[44,3248,523],{"class":376},[44,3250,167],{"class":58},[44,3252,279],{"class":58},[44,3254,530],{"class":54},[44,3256,285],{"class":58},[44,3258,470],{"class":58},[44,3260,537],{"class":376},[44,3262,167],{"class":58},[44,3264,279],{"class":58},[44,3266,544],{"class":54},[44,3268,285],{"class":58},[44,3270,470],{"class":58},[44,3272,551],{"class":376},[44,3274,167],{"class":58},[44,3276,279],{"class":58},[44,3278,558],{"class":54},[44,3280,285],{"class":58},[44,3282,563],{"class":58},[44,3284,566],{"class":151},[44,3286,204],{"class":58},[44,3288,3289,3291,3293,3295,3297,3299,3301,3303,3305,3307,3309,3311,3313,3315,3317,3319,3321,3323,3325,3327,3329,3331,3333,3335,3337,3339],{"class":46,"line":571},[44,3290,508],{"class":151},[44,3292,285],{"class":58},[44,3294,513],{"class":54},[44,3296,285],{"class":58},[44,3298,470],{"class":58},[44,3300,520],{"class":58},[44,3302,523],{"class":376},[44,3304,167],{"class":58},[44,3306,279],{"class":58},[44,3308,530],{"class":54},[44,3310,285],{"class":58},[44,3312,470],{"class":58},[44,3314,537],{"class":376},[44,3316,167],{"class":58},[44,3318,279],{"class":58},[44,3320,604],{"class":54},[44,3322,285],{"class":58},[44,3324,470],{"class":58},[44,3326,551],{"class":376},[44,3328,167],{"class":58},[44,3330,279],{"class":58},[44,3332,617],{"class":54},[44,3334,285],{"class":58},[44,3336,563],{"class":58},[44,3338,566],{"class":151},[44,3340,204],{"class":58},[44,3342,3343,3345],{"class":46,"line":628},[44,3344,631],{"class":151},[44,3346,204],{"class":58},[44,3348,3349],{"class":46,"line":636},[44,3350,261],{"class":58},[19,3352,3354],{"id":3353},"convert-our-markdown-pages-to-a-json-collection","Convert our markdown pages to a JSON collection",[12,3356,3357],{},"Why is it important? 🤔🤔",[12,3359,3360],{},"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,3362,3363,3364,3367],{},"This is possible thanks to ",[653,3365,3366],{},"nodemon, gray-matter, remove-markdown, simultaneously",". Which work together to process and convert a markdown file to a JSON file.",[24,3369,3370],{},[27,3371,3372],{},"Configure our collection data articles.",[34,3374,3375],{"className":323,"code":664,"language":325,"meta":39,"style":39},[41,3376,3377,3381,3397,3413,3429,3433,3461,3465,3483,3505,3535,3545,3553,3561,3565,3589,3635,3639,3645,3653,3695,3731,3807,3811,3817,3821,3825],{"__ignoreMap":39},[44,3378,3379],{"class":46,"line":47},[44,3380,671],{"class":332},[44,3382,3383,3385,3387,3389,3391,3393,3395],{"class":46,"line":148},[44,3384,676],{"class":365},[44,3386,679],{"class":151},[44,3388,682],{"class":365},[44,3390,279],{"class":58},[44,3392,687],{"class":54},[44,3394,285],{"class":58},[44,3396,354],{"class":58},[44,3398,3399,3401,3403,3405,3407,3409,3411],{"class":46,"line":69},[44,3400,676],{"class":365},[44,3402,698],{"class":151},[44,3404,682],{"class":365},[44,3406,279],{"class":58},[44,3408,705],{"class":54},[44,3410,285],{"class":58},[44,3412,354],{"class":58},[44,3414,3415,3417,3419,3421,3423,3425,3427],{"class":46,"line":88},[44,3416,676],{"class":365},[44,3418,716],{"class":151},[44,3420,682],{"class":365},[44,3422,279],{"class":58},[44,3424,723],{"class":54},[44,3426,285],{"class":58},[44,3428,354],{"class":58},[44,3430,3431],{"class":46,"line":124},[44,3432,360],{"emptyLinePlaceholder":359},[44,3434,3435,3437,3439,3441,3443,3445,3447,3449,3451,3453,3455,3457,3459],{"class":46,"line":227},[44,3436,338],{"class":160},[44,3438,738],{"class":151},[44,3440,344],{"class":58},[44,3442,743],{"class":365},[44,3444,746],{"class":151},[44,3446,749],{"class":58},[44,3448,752],{"class":62},[44,3450,755],{"class":151},[44,3452,285],{"class":58},[44,3454,760],{"class":54},[44,3456,285],{"class":58},[44,3458,765],{"class":151},[44,3460,354],{"class":58},[44,3462,3463],{"class":46,"line":247},[44,3464,360],{"emptyLinePlaceholder":359},[44,3466,3467,3469,3471,3473,3475,3477,3479,3481],{"class":46,"line":253},[44,3468,338],{"class":160},[44,3470,778],{"class":151},[44,3472,344],{"class":58},[44,3474,743],{"class":365},[44,3476,785],{"class":50},[44,3478,749],{"class":58},[44,3480,790],{"class":62},[44,3482,793],{"class":151},[44,3484,3485,3487,3489,3491,3493,3495,3497,3499,3501,3503],{"class":46,"line":258},[44,3486,798],{"class":151},[44,3488,749],{"class":58},[44,3490,803],{"class":62},[44,3492,755],{"class":151},[44,3494,808],{"class":160},[44,3496,811],{"class":58},[44,3498,815],{"class":814},[44,3500,765],{"class":58},[44,3502,820],{"class":160},[44,3504,170],{"class":58},[44,3506,3507,3509,3511,3513,3515,3517,3519,3521,3523,3525,3527,3529,3531,3533],{"class":46,"line":441},[44,3508,827],{"class":160},[44,3510,830],{"class":151},[44,3512,833],{"class":58},[44,3514,836],{"class":151},[44,3516,749],{"class":58},[44,3518,841],{"class":62},[44,3520,755],{"class":376},[44,3522,846],{"class":58},[44,3524,760],{"class":54},[44,3526,851],{"class":58},[44,3528,815],{"class":151},[44,3530,856],{"class":58},[44,3532,470],{"class":58},[44,3534,170],{"class":58},[44,3536,3537,3539,3541,3543],{"class":46,"line":452},[44,3538,865],{"class":376},[44,3540,167],{"class":58},[44,3542,870],{"class":435},[44,3544,204],{"class":58},[44,3546,3547,3549,3551],{"class":46,"line":484},[44,3548,877],{"class":376},[44,3550,167],{"class":58},[44,3552,882],{"class":58},[44,3554,3555,3557,3559],{"class":46,"line":490},[44,3556,887],{"class":58},[44,3558,765],{"class":376},[44,3560,354],{"class":58},[44,3562,3563],{"class":46,"line":495},[44,3564,360],{"emptyLinePlaceholder":359},[44,3566,3567,3569,3571,3573,3575,3577,3579,3581,3583,3585,3587],{"class":46,"line":505},[44,3568,827],{"class":160},[44,3570,520],{"class":58},[44,3572,904],{"class":151},[44,3574,470],{"class":58},[44,3576,909],{"class":151},[44,3578,470],{"class":58},[44,3580,914],{"class":151},[44,3582,563],{"class":58},[44,3584,833],{"class":58},[44,3586,830],{"class":151},[44,3588,354],{"class":58},[44,3590,3591,3593,3595,3597,3599,3601,3603,3605,3607,3609,3611,3613,3615,3617,3619,3621,3623,3625,3627,3629,3631,3633],{"class":46,"line":571},[44,3592,827],{"class":160},[44,3594,929],{"class":151},[44,3596,833],{"class":58},[44,3598,934],{"class":62},[44,3600,755],{"class":376},[44,3602,939],{"class":151},[44,3604,765],{"class":376},[44,3606,749],{"class":58},[44,3608,946],{"class":62},[44,3610,949],{"class":376},[44,3612,749],{"class":58},[44,3614,954],{"class":62},[44,3616,755],{"class":376},[44,3618,959],{"class":58},[44,3620,962],{"class":54},[44,3622,965],{"class":58},[44,3624,968],{"class":54},[44,3626,965],{"class":58},[44,3628,973],{"class":54},[44,3630,959],{"class":58},[44,3632,765],{"class":376},[44,3634,354],{"class":58},[44,3636,3637],{"class":46,"line":628},[44,3638,360],{"emptyLinePlaceholder":359},[44,3640,3641,3643],{"class":46,"line":636},[44,3642,988],{"class":365},[44,3644,170],{"class":58},[44,3646,3647,3649,3651],{"class":46,"line":993},[44,3648,996],{"class":58},[44,3650,999],{"class":151},[44,3652,204],{"class":58},[44,3654,3655,3657,3659,3661,3663,3665,3667,3669,3671,3673,3675,3677,3679,3681,3683,3685,3687,3689,3691,3693],{"class":46,"line":1004},[44,3656,1007],{"class":376},[44,3658,167],{"class":58},[44,3660,929],{"class":151},[44,3662,1014],{"class":376},[44,3664,1018],{"class":1017},[44,3666,566],{"class":376},[44,3668,749],{"class":58},[44,3670,1025],{"class":62},[44,3672,755],{"class":376},[44,3674,959],{"class":58},[44,3676,1032],{"class":54},[44,3678,1035],{"class":58},[44,3680,1038],{"class":1017},[44,3682,470],{"class":58},[44,3684,478],{"class":58},[44,3686,765],{"class":376},[44,3688,749],{"class":58},[44,3690,946],{"class":62},[44,3692,949],{"class":376},[44,3694,204],{"class":58},[44,3696,3697,3699,3701,3703,3705,3707,3709,3711,3713,3715,3717,3719,3721,3723,3725,3727,3729],{"class":46,"line":1055},[44,3698,1058],{"class":376},[44,3700,167],{"class":58},[44,3702,914],{"class":151},[44,3704,749],{"class":58},[44,3706,1025],{"class":62},[44,3708,755],{"class":376},[44,3710,959],{"class":58},[44,3712,1073],{"class":151},[44,3714,1076],{"class":54},[44,3716,1079],{"class":365},[44,3718,959],{"class":58},[44,3720,470],{"class":58},[44,3722,279],{"class":58},[44,3724,1088],{"class":54},[44,3726,285],{"class":58},[44,3728,765],{"class":376},[44,3730,204],{"class":58},[44,3732,3733,3735,3737,3739,3741,3743,3745,3747,3749,3751,3753,3755,3757,3759,3761,3763,3765,3767,3769,3771,3773,3775,3777,3779,3781,3783,3785,3787,3789,3791,3793,3795,3797,3799,3801,3803,3805],{"class":46,"line":1097},[44,3734,1100],{"class":376},[44,3736,167],{"class":58},[44,3738,929],{"class":151},[44,3740,749],{"class":58},[44,3742,1109],{"class":62},[44,3744,755],{"class":376},[44,3746,1114],{"class":1017},[44,3748,765],{"class":376},[44,3750,749],{"class":58},[44,3752,1121],{"class":62},[44,3754,755],{"class":376},[44,3756,1126],{"class":58},[44,3758,765],{"class":376},[44,3760,749],{"class":58},[44,3762,1025],{"class":62},[44,3764,755],{"class":376},[44,3766,959],{"class":58},[44,3768,1032],{"class":54},[44,3770,1035],{"class":58},[44,3772,1038],{"class":1017},[44,3774,470],{"class":58},[44,3776,478],{"class":58},[44,3778,765],{"class":376},[44,3780,749],{"class":58},[44,3782,946],{"class":62},[44,3784,949],{"class":376},[44,3786,749],{"class":58},[44,3788,1159],{"class":62},[44,3790,755],{"class":376},[44,3792,1018],{"class":1017},[44,3794,470],{"class":58},[44,3796,1168],{"class":1017},[44,3798,1171],{"class":376},[44,3800,1174],{"class":58},[44,3802,279],{"class":58},[44,3804,1179],{"class":54},[44,3806,1182],{"class":58},[44,3808,3809],{"class":46,"line":1185},[44,3810,1188],{"class":58},[44,3812,3813,3815],{"class":46,"line":1191},[44,3814,1194],{"class":58},[44,3816,1197],{"class":151},[44,3818,3819],{"class":46,"line":1200},[44,3820,1197],{"class":151},[44,3822,3823],{"class":46,"line":1205},[44,3824,360],{"emptyLinePlaceholder":359},[44,3826,3827,3829,3831,3833,3835,3837,3839,3841,3843,3845,3847,3849,3851,3853,3855,3857,3859,3861,3863],{"class":46,"line":1210},[44,3828,1213],{"class":365},[44,3830,746],{"class":151},[44,3832,749],{"class":58},[44,3834,1220],{"class":62},[44,3836,755],{"class":151},[44,3838,285],{"class":58},[44,3840,1227],{"class":54},[44,3842,285],{"class":58},[44,3844,470],{"class":58},[44,3846,1234],{"class":151},[44,3848,749],{"class":58},[44,3850,1239],{"class":62},[44,3852,1242],{"class":151},[44,3854,470],{"class":58},[44,3856,279],{"class":58},[44,3858,1249],{"class":54},[44,3860,285],{"class":58},[44,3862,765],{"class":151},[44,3864,354],{"class":58},[24,3866,3867],{"start":148},[27,3868,3869],{},"Now, build a new JSON file. (This command will generate one more file for our project, where it simplifies the markdown items to JSON).",[34,3871,3872],{"className":36,"code":1263,"language":38,"meta":39,"style":39},[41,3873,3874],{"__ignoreMap":39},[44,3875,3876,3878,3880,3882,3884],{"class":46,"line":47},[44,3877,82],{"class":50},[44,3879,1272],{"class":54},[44,3881,59],{"class":58},[44,3883,1277],{"class":50},[44,3885,1280],{"class":54},[19,3887,3889],{"id":3888},"creating-new-vue-components","Creating new Vue components",[24,3891,3892],{},[27,3893,3894],{},"Create a Hero component.",[34,3896,3897],{"className":1292,"code":1293,"language":1294,"meta":39,"style":39},[41,3898,3899,3903,3913,3927,3931,3947,3951,3959,3963,3975,3993,4011,4033,4051,4067,4075,4083,4091],{"__ignoreMap":39},[44,3900,3901],{"class":46,"line":47},[44,3902,1301],{"class":332},[44,3904,3905,3907,3909,3911],{"class":46,"line":148},[44,3906,1306],{"class":58},[44,3908,1309],{"class":376},[44,3910,1312],{"class":160},[44,3912,1315],{"class":58},[44,3914,3915,3917,3919,3921,3923,3925],{"class":46,"line":69},[44,3916,676],{"class":365},[44,3918,1322],{"class":151},[44,3920,682],{"class":365},[44,3922,279],{"class":58},[44,3924,1329],{"class":54},[44,3926,1182],{"class":58},[44,3928,3929],{"class":46,"line":88},[44,3930,360],{"emptyLinePlaceholder":359},[44,3932,3933,3935,3937,3939,3941,3943,3945],{"class":46,"line":124},[44,3934,338],{"class":160},[44,3936,520],{"class":58},[44,3938,1344],{"class":151},[44,3940,1347],{"class":58},[44,3942,833],{"class":58},[44,3944,1352],{"class":151},[44,3946,354],{"class":58},[44,3948,3949],{"class":46,"line":227},[44,3950,360],{"emptyLinePlaceholder":359},[44,3952,3953,3955,3957],{"class":46,"line":247},[44,3954,1363],{"class":58},[44,3956,1309],{"class":376},[44,3958,1315],{"class":58},[44,3960,3961],{"class":46,"line":253},[44,3962,360],{"emptyLinePlaceholder":359},[44,3964,3965,3967,3969,3971,3973],{"class":46,"line":258},[44,3966,1306],{"class":58},[44,3968,1378],{"class":376},[44,3970,1381],{"class":58},[44,3972,1384],{"class":160},[44,3974,1315],{"class":58},[44,3976,3977,3979,3981,3983,3985,3987,3989,3991],{"class":46,"line":441},[44,3978,1391],{"class":58},[44,3980,1394],{"class":376},[44,3982,1397],{"class":160},[44,3984,344],{"class":58},[44,3986,164],{"class":58},[44,3988,1404],{"class":54},[44,3990,164],{"class":58},[44,3992,1315],{"class":58},[44,3994,3995,3997,3999,4001,4003,4005,4007,4009],{"class":46,"line":452},[44,3996,1413],{"class":58},[44,3998,1394],{"class":376},[44,4000,1397],{"class":160},[44,4002,344],{"class":58},[44,4004,164],{"class":58},[44,4006,1424],{"class":54},[44,4008,164],{"class":58},[44,4010,1315],{"class":58},[44,4012,4013,4015,4017,4019,4021,4023,4025,4027,4029,4031],{"class":46,"line":484},[44,4014,1433],{"class":58},[44,4016,1394],{"class":376},[44,4018,1397],{"class":160},[44,4020,344],{"class":58},[44,4022,164],{"class":58},[44,4024,1444],{"class":54},[44,4026,164],{"class":58},[44,4028,1449],{"class":58},[44,4030,1394],{"class":376},[44,4032,1315],{"class":58},[44,4034,4035,4037,4039,4041,4043,4045,4047,4049],{"class":46,"line":490},[44,4036,1433],{"class":58},[44,4038,1394],{"class":376},[44,4040,1397],{"class":160},[44,4042,344],{"class":58},[44,4044,164],{"class":58},[44,4046,1468],{"class":54},[44,4048,164],{"class":58},[44,4050,1315],{"class":58},[44,4052,4053,4055,4057,4059,4061,4063,4065],{"class":46,"line":495},[44,4054,1477],{"class":58},[44,4056,1480],{"class":376},[44,4058,1483],{"class":58},[44,4060,1486],{"class":151},[44,4062,1363],{"class":58},[44,4064,1480],{"class":376},[44,4066,1315],{"class":58},[44,4068,4069,4071,4073],{"class":46,"line":505},[44,4070,1497],{"class":58},[44,4072,1394],{"class":376},[44,4074,1315],{"class":58},[44,4076,4077,4079,4081],{"class":46,"line":571},[44,4078,1506],{"class":58},[44,4080,1394],{"class":376},[44,4082,1315],{"class":58},[44,4084,4085,4087,4089],{"class":46,"line":628},[44,4086,1515],{"class":58},[44,4088,1394],{"class":376},[44,4090,1315],{"class":58},[44,4092,4093,4095,4097],{"class":46,"line":636},[44,4094,1363],{"class":58},[44,4096,1378],{"class":376},[44,4098,1315],{"class":58},[24,4100,4101],{"start":148},[27,4102,4103],{},"Now it’s time to create a component to list our articles that have been created in the blog folder.",[34,4105,4107],{"className":1292,"code":4106,"language":1294,"meta":39,"style":39},"\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",[41,4108,4109,4113,4123,4139,4155,4171,4175,4191,4195,4200,4216,4252,4256,4260,4268,4272,4280,4288,4300,4318,4348,4366,4388,4408,4416,4424,4432,4440,4448],{"__ignoreMap":39},[44,4110,4111],{"class":46,"line":47},[44,4112,1542],{"class":332},[44,4114,4115,4117,4119,4121],{"class":46,"line":148},[44,4116,1306],{"class":58},[44,4118,1309],{"class":376},[44,4120,1312],{"class":160},[44,4122,1315],{"class":58},[44,4124,4125,4127,4129,4131,4133,4135,4137],{"class":46,"line":69},[44,4126,676],{"class":365},[44,4128,778],{"class":151},[44,4130,682],{"class":365},[44,4132,279],{"class":58},[44,4134,1565],{"class":54},[44,4136,285],{"class":58},[44,4138,354],{"class":58},[44,4140,4141,4143,4145,4147,4149,4151,4153],{"class":46,"line":88},[44,4142,676],{"class":365},[44,4144,1322],{"class":151},[44,4146,682],{"class":365},[44,4148,279],{"class":58},[44,4150,1329],{"class":54},[44,4152,285],{"class":58},[44,4154,354],{"class":58},[44,4156,4157,4159,4161,4163,4165,4167,4169],{"class":46,"line":124},[44,4158,676],{"class":365},[44,4160,1592],{"class":151},[44,4162,682],{"class":365},[44,4164,279],{"class":58},[44,4166,1599],{"class":54},[44,4168,285],{"class":58},[44,4170,354],{"class":58},[44,4172,4173],{"class":46,"line":227},[44,4174,360],{"emptyLinePlaceholder":359},[44,4176,4177,4179,4181,4183,4185,4187,4189],{"class":46,"line":247},[44,4178,338],{"class":160},[44,4180,520],{"class":58},[44,4182,1344],{"class":151},[44,4184,1347],{"class":58},[44,4186,833],{"class":58},[44,4188,1352],{"class":151},[44,4190,354],{"class":58},[44,4192,4193],{"class":46,"line":253},[44,4194,360],{"emptyLinePlaceholder":359},[44,4196,4197],{"class":46,"line":258},[44,4198,4199],{"class":332},"// sort articles\n",[44,4201,4202,4204,4206,4208,4210,4212,4214],{"class":46,"line":441},[44,4203,338],{"class":160},[44,4205,738],{"class":151},[44,4207,344],{"class":58},[44,4209,904],{"class":151},[44,4211,749],{"class":58},[44,4213,1647],{"class":62},[44,4215,793],{"class":151},[44,4217,4218,4220,4222,4224,4226,4228,4230,4232,4234,4236,4238,4240,4242,4244,4246,4248,4250],{"class":46,"line":452},[44,4219,1654],{"class":58},[44,4221,1657],{"class":814},[44,4223,470],{"class":58},[44,4225,1662],{"class":814},[44,4227,765],{"class":58},[44,4229,820],{"class":160},[44,4231,1669],{"class":58},[44,4233,1672],{"class":62},[44,4235,1675],{"class":151},[44,4237,749],{"class":58},[44,4239,1680],{"class":151},[44,4241,1683],{"class":58},[44,4243,1669],{"class":58},[44,4245,1672],{"class":62},[44,4247,1690],{"class":151},[44,4249,749],{"class":58},[44,4251,1695],{"class":151},[44,4253,4254],{"class":46,"line":484},[44,4255,1197],{"class":151},[44,4257,4258],{"class":46,"line":490},[44,4259,360],{"emptyLinePlaceholder":359},[44,4261,4262,4264,4266],{"class":46,"line":495},[44,4263,1363],{"class":58},[44,4265,1309],{"class":376},[44,4267,1315],{"class":58},[44,4269,4270],{"class":46,"line":505},[44,4271,360],{"emptyLinePlaceholder":359},[44,4273,4274,4276,4278],{"class":46,"line":571},[44,4275,1306],{"class":58},[44,4277,1378],{"class":376},[44,4279,1315],{"class":58},[44,4281,4282,4284,4286],{"class":46,"line":628},[44,4283,1391],{"class":58},[44,4285,1730],{"class":376},[44,4287,1315],{"class":58},[44,4289,4290,4292,4294,4296,4298],{"class":46,"line":636},[44,4291,1413],{"class":58},[44,4293,1378],{"class":376},[44,4295,1381],{"class":58},[44,4297,1743],{"class":160},[44,4299,1315],{"class":58},[44,4301,4302,4304,4306,4308,4310,4312,4314,4316],{"class":46,"line":993},[44,4303,1433],{"class":58},[44,4305,1394],{"class":376},[44,4307,1397],{"class":160},[44,4309,344],{"class":58},[44,4311,164],{"class":58},[44,4313,1404],{"class":54},[44,4315,164],{"class":58},[44,4317,1315],{"class":58},[44,4319,4320,4322,4324,4326,4328,4330,4332,4334,4336,4338,4340,4342,4344,4346],{"class":46,"line":1004},[44,4321,1477],{"class":58},[44,4323,19],{"class":376},[44,4325,1397],{"class":160},[44,4327,344],{"class":58},[44,4329,164],{"class":58},[44,4331,1778],{"class":54},[44,4333,164],{"class":58},[44,4335,1483],{"class":58},[44,4337,1785],{"class":151},[44,4339,1363],{"class":58},[44,4341,19],{"class":376},[44,4343,1792],{"class":58},[44,4345,1795],{"class":376},[44,4347,1315],{"class":58},[44,4349,4350,4352,4354,4356,4358,4360,4362,4364],{"class":46,"line":1055},[44,4351,1477],{"class":58},[44,4353,1394],{"class":376},[44,4355,1397],{"class":160},[44,4357,344],{"class":58},[44,4359,164],{"class":58},[44,4361,1812],{"class":54},[44,4363,164],{"class":58},[44,4365,1315],{"class":58},[44,4367,4368,4370,4372,4374,4376,4378,4380,4382,4384,4386],{"class":46,"line":1097},[44,4369,1821],{"class":58},[44,4371,1394],{"class":376},[44,4373,1826],{"class":365},[44,4375,344],{"class":58},[44,4377,164],{"class":58},[44,4379,815],{"class":151},[44,4381,1835],{"class":58},[44,4383,1838],{"class":151},[44,4385,164],{"class":58},[44,4387,1315],{"class":58},[44,4389,4390,4392,4394,4396,4398,4400,4402,4404,4406],{"class":46,"line":1185},[44,4391,1847],{"class":58},[44,4393,1850],{"class":376},[44,4395,1853],{"class":58},[44,4397,815],{"class":160},[44,4399,344],{"class":58},[44,4401,164],{"class":58},[44,4403,815],{"class":151},[44,4405,164],{"class":58},[44,4407,1866],{"class":58},[44,4409,4410,4412,4414],{"class":46,"line":1191},[44,4411,1871],{"class":58},[44,4413,1394],{"class":376},[44,4415,1315],{"class":58},[44,4417,4418,4420,4422],{"class":46,"line":1200},[44,4419,1880],{"class":58},[44,4421,1394],{"class":376},[44,4423,1315],{"class":58},[44,4425,4426,4428,4430],{"class":46,"line":1205},[44,4427,1497],{"class":58},[44,4429,1394],{"class":376},[44,4431,1315],{"class":58},[44,4433,4434,4436,4438],{"class":46,"line":1210},[44,4435,1506],{"class":58},[44,4437,1378],{"class":376},[44,4439,1315],{"class":58},[44,4441,4442,4444,4446],{"class":46,"line":1903},[44,4443,1515],{"class":58},[44,4445,1730],{"class":376},[44,4447,1315],{"class":58},[44,4449,4450,4452,4454],{"class":46,"line":1912},[44,4451,1363],{"class":58},[44,4453,1378],{"class":376},[44,4455,1315],{"class":58},[24,4457,4458],{"start":69},[27,4459,4460],{},"We can also create a single card component for each article preview.",[34,4462,4463],{"className":1292,"code":1926,"language":1294,"meta":39,"style":39},[41,4464,4465,4469,4479,4487,4495,4503,4507,4525,4555,4569,4583,4595,4601,4605,4609,4617,4621,4629,4653,4671,4689,4729,4737,4755,4763,4775,4783,4791,4803,4811,4819,4851,4859,4867,4875,4883],{"__ignoreMap":39},[44,4466,4467],{"class":46,"line":47},[44,4468,1933],{"class":332},[44,4470,4471,4473,4475,4477],{"class":46,"line":148},[44,4472,1306],{"class":58},[44,4474,1309],{"class":376},[44,4476,1312],{"class":160},[44,4478,1315],{"class":58},[44,4480,4481,4483,4485],{"class":46,"line":69},[44,4482,1948],{"class":62},[44,4484,755],{"class":151},[44,4486,145],{"class":58},[44,4488,4489,4491,4493],{"class":46,"line":88},[44,4490,1957],{"class":376},[44,4492,167],{"class":58},[44,4494,1962],{"class":151},[44,4496,4497,4499,4501],{"class":46,"line":124},[44,4498,1194],{"class":58},[44,4500,765],{"class":151},[44,4502,354],{"class":58},[44,4504,4505],{"class":46,"line":227},[44,4506,360],{"emptyLinePlaceholder":359},[44,4508,4509,4511,4513,4515,4517,4519,4521,4523],{"class":46,"line":247},[44,4510,1979],{"class":160},[44,4512,1982],{"class":151},[44,4514,344],{"class":58},[44,4516,811],{"class":58},[44,4518,1989],{"class":814},[44,4520,765],{"class":58},[44,4522,820],{"class":160},[44,4524,170],{"class":58},[44,4526,4527,4529,4531,4533,4535,4537,4539,4541,4543,4545,4547,4549,4551,4553],{"class":46,"line":253},[44,4528,988],{"class":365},[44,4530,1669],{"class":58},[44,4532,1672],{"class":62},[44,4534,755],{"class":376},[44,4536,1989],{"class":151},[44,4538,765],{"class":376},[44,4540,749],{"class":58},[44,4542,2014],{"class":62},[44,4544,755],{"class":376},[44,4546,285],{"class":58},[44,4548,2021],{"class":54},[44,4550,285],{"class":58},[44,4552,470],{"class":58},[44,4554,170],{"class":58},[44,4556,4557,4559,4561,4563,4565,4567],{"class":46,"line":258},[44,4558,2032],{"class":376},[44,4560,167],{"class":58},[44,4562,279],{"class":58},[44,4564,2039],{"class":54},[44,4566,285],{"class":58},[44,4568,204],{"class":58},[44,4570,4571,4573,4575,4577,4579,4581],{"class":46,"line":441},[44,4572,2048],{"class":376},[44,4574,167],{"class":58},[44,4576,279],{"class":58},[44,4578,2055],{"class":54},[44,4580,285],{"class":58},[44,4582,204],{"class":58},[44,4584,4585,4587,4589,4591,4593],{"class":46,"line":452},[44,4586,2064],{"class":376},[44,4588,167],{"class":58},[44,4590,279],{"class":58},[44,4592,2039],{"class":54},[44,4594,1182],{"class":58},[44,4596,4597,4599],{"class":46,"line":484},[44,4598,887],{"class":58},[44,4600,1197],{"class":376},[44,4602,4603],{"class":46,"line":490},[44,4604,2083],{"class":58},[44,4606,4607],{"class":46,"line":495},[44,4608,360],{"emptyLinePlaceholder":359},[44,4610,4611,4613,4615],{"class":46,"line":505},[44,4612,1363],{"class":58},[44,4614,1309],{"class":376},[44,4616,1315],{"class":58},[44,4618,4619],{"class":46,"line":571},[44,4620,360],{"emptyLinePlaceholder":359},[44,4622,4623,4625,4627],{"class":46,"line":628},[44,4624,1306],{"class":58},[44,4626,1378],{"class":376},[44,4628,1315],{"class":58},[44,4630,4631,4633,4635,4637,4639,4641,4643,4645,4647,4649,4651],{"class":46,"line":636},[44,4632,1391],{"class":58},[44,4634,1657],{"class":376},[44,4636,1853],{"class":58},[44,4638,2118],{"class":160},[44,4640,344],{"class":58},[44,4642,164],{"class":58},[44,4644,815],{"class":151},[44,4646,749],{"class":58},[44,4648,2129],{"class":151},[44,4650,164],{"class":58},[44,4652,1315],{"class":58},[44,4654,4655,4657,4659,4661,4663,4665,4667,4669],{"class":46,"line":993},[44,4656,1413],{"class":58},[44,4658,1394],{"class":376},[44,4660,1397],{"class":160},[44,4662,344],{"class":58},[44,4664,164],{"class":58},[44,4666,2148],{"class":54},[44,4668,164],{"class":58},[44,4670,1315],{"class":58},[44,4672,4673,4675,4677,4679,4681,4683,4685,4687],{"class":46,"line":1004},[44,4674,1433],{"class":58},[44,4676,1394],{"class":376},[44,4678,1397],{"class":160},[44,4680,344],{"class":58},[44,4682,164],{"class":58},[44,4684,2167],{"class":54},[44,4686,164],{"class":58},[44,4688,1315],{"class":58},[44,4690,4691,4693,4695,4697,4699,4701,4703,4705,4707,4709,4711,4713,4715,4717,4719,4721,4723,4725,4727],{"class":46,"line":1055},[44,4692,1477],{"class":58},[44,4694,2178],{"class":376},[44,4696,1853],{"class":58},[44,4698,2183],{"class":160},[44,4700,344],{"class":58},[44,4702,164],{"class":58},[44,4704,815],{"class":151},[44,4706,749],{"class":58},[44,4708,2194],{"class":151},[44,4710,164],{"class":58},[44,4712,1853],{"class":58},[44,4714,2201],{"class":160},[44,4716,344],{"class":58},[44,4718,164],{"class":58},[44,4720,815],{"class":151},[44,4722,749],{"class":58},[44,4724,1778],{"class":151},[44,4726,164],{"class":58},[44,4728,1866],{"class":58},[44,4730,4731,4733,4735],{"class":46,"line":1097},[44,4732,1497],{"class":58},[44,4734,1394],{"class":376},[44,4736,1315],{"class":58},[44,4738,4739,4741,4743,4745,4747,4749,4751,4753],{"class":46,"line":1185},[44,4740,1433],{"class":58},[44,4742,1394],{"class":376},[44,4744,1397],{"class":160},[44,4746,344],{"class":58},[44,4748,164],{"class":58},[44,4750,2238],{"class":54},[44,4752,164],{"class":58},[44,4754,1315],{"class":58},[44,4756,4757,4759,4761],{"class":46,"line":1191},[44,4758,1477],{"class":58},[44,4760,2249],{"class":376},[44,4762,1315],{"class":58},[44,4764,4765,4767,4769,4771,4773],{"class":46,"line":1200},[44,4766,2256],{"class":58},[44,4768,2259],{"class":151},[44,4770,749],{"class":58},[44,4772,2264],{"class":151},[44,4774,2267],{"class":58},[44,4776,4777,4779,4781],{"class":46,"line":1205},[44,4778,1880],{"class":58},[44,4780,2249],{"class":376},[44,4782,1315],{"class":58},[44,4784,4785,4787,4789],{"class":46,"line":1210},[44,4786,1477],{"class":58},[44,4788,12],{"class":376},[44,4790,1315],{"class":58},[44,4792,4793,4795,4797,4799,4801],{"class":46,"line":1903},[44,4794,2256],{"class":58},[44,4796,2259],{"class":151},[44,4798,749],{"class":58},[44,4800,2294],{"class":151},[44,4802,2267],{"class":58},[44,4804,4805,4807,4809],{"class":46,"line":1912},[44,4806,1880],{"class":58},[44,4808,12],{"class":376},[44,4810,1315],{"class":58},[44,4812,4813,4815,4817],{"class":46,"line":2307},[44,4814,1477],{"class":58},[44,4816,1394],{"class":376},[44,4818,1315],{"class":58},[44,4820,4821,4823,4825,4827,4829,4831,4833,4835,4837,4839,4841,4843,4845,4847,4849],{"class":46,"line":2316},[44,4822,1821],{"class":58},[44,4824,2321],{"class":376},[44,4826,1397],{"class":160},[44,4828,344],{"class":58},[44,4830,164],{"class":58},[44,4832,1989],{"class":54},[44,4834,164],{"class":58},[44,4836,2334],{"class":58},[44,4838,2337],{"class":62},[44,4840,2340],{"class":151},[44,4842,749],{"class":58},[44,4844,1680],{"class":151},[44,4846,2347],{"class":58},[44,4848,2321],{"class":376},[44,4850,1315],{"class":58},[44,4852,4853,4855,4857],{"class":46,"line":2354},[44,4854,1880],{"class":58},[44,4856,1394],{"class":376},[44,4858,1315],{"class":58},[44,4860,4861,4863,4865],{"class":46,"line":2363},[44,4862,1497],{"class":58},[44,4864,1394],{"class":376},[44,4866,1315],{"class":58},[44,4868,4869,4871,4873],{"class":46,"line":2372},[44,4870,1506],{"class":58},[44,4872,1394],{"class":376},[44,4874,1315],{"class":58},[44,4876,4877,4879,4881],{"class":46,"line":2381},[44,4878,1515],{"class":58},[44,4880,1657],{"class":376},[44,4882,1315],{"class":58},[44,4884,4885,4887,4889],{"class":46,"line":2390},[44,4886,1363],{"class":58},[44,4888,1378],{"class":376},[44,4890,1315],{"class":58},[24,4892,4893],{"start":88},[27,4894,4895,4896,4899],{},"Create a theme entry file. It should export the theme as its default export. Also, check the ",[1657,4897,2407],{"href":2404,"rel":4898},[2406]," offered by Vitepress.",[34,4901,4902],{"className":323,"code":2411,"language":325,"meta":39,"style":39},[41,4903,4904,4908,4926,4942,4958,4974,4984,4988,4996,5004,5012,5032,5056,5080,5110,5116,5126,5130,5144,5148,5152,5158,5168,5172,5186,5200,5204,5228,5234,5238,5242,5248,5254,5258],{"__ignoreMap":39},[44,4905,4906],{"class":46,"line":47},[44,4907,2418],{"class":332},[44,4909,4910,4912,4914,4916,4918,4920,4922,4924],{"class":46,"line":148},[44,4911,676],{"class":365},[44,4913,520],{"class":58},[44,4915,2427],{"class":151},[44,4917,563],{"class":58},[44,4919,2432],{"class":365},[44,4921,279],{"class":58},[44,4923,1294],{"class":54},[44,4925,1182],{"class":58},[44,4927,4928,4930,4932,4934,4936,4938,4940],{"class":46,"line":69},[44,4929,676],{"class":365},[44,4931,1322],{"class":151},[44,4933,682],{"class":365},[44,4935,279],{"class":58},[44,4937,1329],{"class":54},[44,4939,285],{"class":58},[44,4941,354],{"class":58},[44,4943,4944,4946,4948,4950,4952,4954,4956],{"class":46,"line":88},[44,4945,676],{"class":365},[44,4947,2461],{"class":151},[44,4949,682],{"class":365},[44,4951,279],{"class":58},[44,4953,2468],{"class":54},[44,4955,285],{"class":58},[44,4957,354],{"class":58},[44,4959,4960,4962,4964,4966,4968,4970,4972],{"class":46,"line":124},[44,4961,676],{"class":365},[44,4963,2479],{"class":151},[44,4965,682],{"class":365},[44,4967,279],{"class":58},[44,4969,2486],{"class":54},[44,4971,285],{"class":58},[44,4973,354],{"class":58},[44,4975,4976,4978,4980,4982],{"class":46,"line":227},[44,4977,676],{"class":365},[44,4979,279],{"class":58},[44,4981,2499],{"class":54},[44,4983,1182],{"class":58},[44,4985,4986],{"class":46,"line":247},[44,4987,360],{"emptyLinePlaceholder":359},[44,4989,4990,4992,4994],{"class":46,"line":253},[44,4991,366],{"class":365},[44,4993,369],{"class":365},[44,4995,170],{"class":58},[44,4997,4998,5000,5002],{"class":46,"line":258},[44,4999,2518],{"class":58},[44,5001,2521],{"class":151},[44,5003,204],{"class":58},[44,5005,5006,5008,5010],{"class":46,"line":441},[44,5007,2528],{"class":376},[44,5009,949],{"class":58},[44,5011,170],{"class":58},[44,5013,5014,5016,5018,5020,5022,5024,5026,5028,5030],{"class":46,"line":452},[44,5015,988],{"class":365},[44,5017,2427],{"class":62},[44,5019,755],{"class":376},[44,5021,2521],{"class":151},[44,5023,749],{"class":58},[44,5025,1730],{"class":151},[44,5027,470],{"class":58},[44,5029,2551],{"class":58},[44,5031,170],{"class":58},[44,5033,5034,5036,5038,5040,5042,5044,5046,5048,5050,5052,5054],{"class":46,"line":484},[44,5035,2558],{"class":58},[44,5037,1384],{"class":376},[44,5039,285],{"class":58},[44,5041,167],{"class":58},[44,5043,2567],{"class":58},[44,5045,820],{"class":160},[44,5047,2427],{"class":62},[44,5049,755],{"class":376},[44,5051,2576],{"class":151},[44,5053,765],{"class":376},[44,5055,204],{"class":58},[44,5057,5058,5060,5062,5064,5066,5068,5070,5072,5074,5076,5078],{"class":46,"line":490},[44,5059,2558],{"class":58},[44,5061,1743],{"class":376},[44,5063,285],{"class":58},[44,5065,167],{"class":58},[44,5067,2567],{"class":58},[44,5069,820],{"class":160},[44,5071,2427],{"class":62},[44,5073,755],{"class":376},[44,5075,2601],{"class":151},[44,5077,765],{"class":376},[44,5079,204],{"class":58},[44,5081,5082,5084,5086,5088,5090,5092,5094,5096,5098,5100,5102,5104,5106,5108],{"class":46,"line":495},[44,5083,2558],{"class":58},[44,5085,2612],{"class":376},[44,5087,285],{"class":58},[44,5089,167],{"class":58},[44,5091,2567],{"class":58},[44,5093,820],{"class":160},[44,5095,2427],{"class":62},[44,5097,755],{"class":376},[44,5099,285],{"class":58},[44,5101,1394],{"class":54},[44,5103,285],{"class":58},[44,5105,470],{"class":58},[44,5107,2635],{"class":58},[44,5109,449],{"class":376},[44,5111,5112,5114],{"class":46,"line":505},[44,5113,2642],{"class":62},[44,5115,793],{"class":376},[44,5117,5118,5120,5122,5124],{"class":46,"line":571},[44,5119,2649],{"class":58},[44,5121,1394],{"class":54},[44,5123,285],{"class":58},[44,5125,204],{"class":58},[44,5127,5128],{"class":46,"line":628},[44,5129,2660],{"class":58},[44,5131,5132,5134,5136,5138,5140,5142],{"class":46,"line":636},[44,5133,2665],{"class":376},[44,5135,167],{"class":58},[44,5137,279],{"class":58},[44,5139,513],{"class":54},[44,5141,285],{"class":58},[44,5143,204],{"class":58},[44,5145,5146],{"class":46,"line":993},[44,5147,2680],{"class":58},[44,5149,5150],{"class":46,"line":1004},[44,5151,2685],{"class":376},[44,5153,5154,5156],{"class":46,"line":1055},[44,5155,2690],{"class":62},[44,5157,793],{"class":376},[44,5159,5160,5162,5164,5166],{"class":46,"line":1097},[44,5161,2697],{"class":58},[44,5163,1657],{"class":54},[44,5165,285],{"class":58},[44,5167,204],{"class":58},[44,5169,5170],{"class":46,"line":1185},[44,5171,2708],{"class":58},[44,5173,5174,5176,5178,5180,5182,5184],{"class":46,"line":1191},[44,5175,2713],{"class":376},[44,5177,167],{"class":58},[44,5179,279],{"class":58},[44,5181,959],{"class":54},[44,5183,285],{"class":58},[44,5185,204],{"class":58},[44,5187,5188,5190,5192,5194,5196,5198],{"class":46,"line":1200},[44,5189,2728],{"class":376},[44,5191,167],{"class":58},[44,5193,279],{"class":58},[44,5195,2735],{"class":54},[44,5197,285],{"class":58},[44,5199,204],{"class":58},[44,5201,5202],{"class":46,"line":1205},[44,5203,2744],{"class":58},[44,5205,5206,5208,5210,5212,5214,5216,5218,5220,5222,5224,5226],{"class":46,"line":1210},[44,5207,2749],{"class":376},[44,5209,2752],{"class":62},[44,5211,755],{"class":376},[44,5213,285],{"class":58},[44,5215,44],{"class":54},[44,5217,285],{"class":58},[44,5219,470],{"class":58},[44,5221,279],{"class":58},[44,5223,2767],{"class":54},[44,5225,285],{"class":58},[44,5227,2772],{"class":376},[44,5229,5230,5232],{"class":46,"line":1903},[44,5231,2777],{"class":376},[44,5233,204],{"class":58},[44,5235,5236],{"class":46,"line":1912},[44,5237,2784],{"class":376},[44,5239,5240],{"class":46,"line":2307},[44,5241,2789],{"class":376},[44,5243,5244,5246],{"class":46,"line":2316},[44,5245,2794],{"class":376},[44,5247,204],{"class":58},[44,5249,5250,5252],{"class":46,"line":2354},[44,5251,887],{"class":58},[44,5253,1197],{"class":376},[44,5255,5256],{"class":46,"line":2363},[44,5257,2083],{"class":58},[44,5259,5260],{"class":46,"line":2372},[44,5261,261],{"class":58},[19,5263,5265],{"id":5264},"finally","Finally",[12,5267,5268,5269,5273],{},"Now, you can create a blog using vitePress in a very simple way. I share the ",[1657,5270,5272],{"href":2820,"rel":5271},[2406],"repo Github"," so you can review the source code.",[12,5275,5276],{},[2178,5277],{"alt":2828,"src":2829},[12,5279,5280],{},"Thank you for reading! we read soon. 🙌🏽🙌🏽",[2834,5282,2836],{},{"title":39,"searchDepth":148,"depth":148,"links":5284},[5285,5286,5287,5288],{"id":2871,"depth":148,"text":2872},{"id":3353,"depth":148,"text":3354},{"id":3888,"depth":148,"text":3889},{"id":5264,"depth":148,"text":5265},"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":2860,"description":5289},{"loc":5291},"articles/en/effortlessly-build-and-test-your-frontend-applications-with-vitepress",[2851,1294,2852,2853],"3Sk6H4ZYgcpKJD440VmcBeEEQvb_RAX9u58Ul4bPTN0",{"id":5298,"title":5299,"author":7,"body":5300,"date":6017,"description":6018,"extension":1076,"meta":6019,"navigation":359,"path":6020,"seo":6021,"sitemap":6022,"stem":6023,"tags":6024,"thumbnail":6026,"__hash__":6027},"en_articles/articles/en/creating-custom-routes-in-nuxt3.md","Creating Custom Routes in Nuxt3 (Without Losing Your Mind)",{"type":9,"value":5301,"toc":6014},[5302,5305,5308,5312,5315,5318,5493,5503,5506,5574,5577,5580,5652,5655,5874,5877,6008,6011],[12,5303,5304],{},"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,5306,5307],{},"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).",[19,5309,5311],{"id":5310},"so-how-do-we-achieve-this","So, how do we achieve this?",[12,5313,5314],{},"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,5316,5317],{},"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.",[34,5319,5323],{"className":5320,"code":5321,"language":5322,"meta":39,"style":39},"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",[41,5324,5325,5330,5335,5357,5361,5369,5374,5392,5397,5402,5418,5423,5437,5442,5467,5471,5477,5488],{"__ignoreMap":39},[44,5326,5327],{"class":46,"line":47},[44,5328,5329],{"class":332},"// app/router.options.ts\n",[44,5331,5332],{"class":46,"line":148},[44,5333,5334],{"class":332},"// Import the RouterConfig type for proper typing\n",[44,5336,5337,5339,5341,5343,5346,5348,5350,5352,5355],{"class":46,"line":69},[44,5338,676],{"class":365},[44,5340,537],{"class":365},[44,5342,520],{"class":58},[44,5344,5345],{"class":151}," RouterConfig",[44,5347,563],{"class":58},[44,5349,2432],{"class":365},[44,5351,279],{"class":58},[44,5353,5354],{"class":54},"@nuxt/schema",[44,5356,1182],{"class":58},[44,5358,5359],{"class":46,"line":88},[44,5360,360],{"emptyLinePlaceholder":359},[44,5362,5363,5365,5367],{"class":46,"line":124},[44,5364,366],{"class":365},[44,5366,369],{"class":365},[44,5368,170],{"class":58},[44,5370,5371],{"class":46,"line":227},[44,5372,5373],{"class":332}," // Define custom routes manually\n",[44,5375,5376,5379,5381,5383,5386,5388,5390],{"class":46,"line":247},[44,5377,5378],{"class":62}," routes",[44,5380,167],{"class":58},[44,5382,811],{"class":58},[44,5384,5385],{"class":814},"_routes",[44,5387,765],{"class":58},[44,5389,820],{"class":160},[44,5391,449],{"class":151},[44,5393,5394],{"class":46,"line":253},[44,5395,5396],{"class":58}," {\n",[44,5398,5399],{"class":46,"line":258},[44,5400,5401],{"class":332}," // Route name (used in programmatic navigation)\n",[44,5403,5404,5407,5409,5411,5414,5416],{"class":46,"line":441},[44,5405,5406],{"class":376}," name",[44,5408,167],{"class":58},[44,5410,279],{"class":58},[44,5412,5413],{"class":54},"home",[44,5415,285],{"class":58},[44,5417,204],{"class":58},[44,5419,5420],{"class":46,"line":452},[44,5421,5422],{"class":332}," // URL path\n",[44,5424,5425,5427,5429,5431,5433,5435],{"class":46,"line":484},[44,5426,1058],{"class":376},[44,5428,167],{"class":58},[44,5430,279],{"class":58},[44,5432,959],{"class":54},[44,5434,285],{"class":58},[44,5436,204],{"class":58},[44,5438,5439],{"class":46,"line":490},[44,5440,5441],{"class":332}," // Lazy-load the component\n",[44,5443,5444,5447,5449,5451,5453,5456,5458,5460,5463,5465],{"class":46,"line":495},[44,5445,5446],{"class":62}," component",[44,5448,167],{"class":58},[44,5450,2567],{"class":58},[44,5452,820],{"class":160},[44,5454,5455],{"class":58}," import",[44,5457,755],{"class":151},[44,5459,285],{"class":58},[44,5461,5462],{"class":54},"~/pages/home.vue",[44,5464,285],{"class":58},[44,5466,1197],{"class":151},[44,5468,5469],{"class":46,"line":505},[44,5470,1188],{"class":58},[44,5472,5473,5475],{"class":46,"line":571},[44,5474,631],{"class":151},[44,5476,204],{"class":58},[44,5478,5479,5481,5484,5486],{"class":46,"line":628},[44,5480,1347],{"class":58},[44,5482,5483],{"class":365}," satisfies",[44,5485,5345],{"class":50},[44,5487,354],{"class":58},[44,5489,5490],{"class":46,"line":636},[44,5491,5492],{"class":332},"// Ensures the object matches Nuxt's expected router config\n",[5494,5495,5496],"note",{},[12,5497,5498,5499],{},"Documentation reference: ",[1657,5500,5501],{"href":5501,"rel":5502},"https://nuxt.com/docs/guide/recipes/custom-routing#router-options",[2406],[12,5504,5505],{},"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",[34,5507,5509],{"className":5320,"code":5508,"language":5322,"meta":39,"style":39},"// 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",[41,5510,5511,5516,5529,5547,5552,5566],{"__ignoreMap":39},[44,5512,5513],{"class":46,"line":47},[44,5514,5515],{"class":332},"// nuxt.config.ts\n",[44,5517,5518,5520,5522,5525,5527],{"class":46,"line":148},[44,5519,366],{"class":365},[44,5521,369],{"class":365},[44,5523,5524],{"class":62}," defineNuxtConfig",[44,5526,755],{"class":151},[44,5528,145],{"class":58},[44,5530,5531,5534,5536,5538,5541,5543,5545],{"class":46,"line":69},[44,5532,5533],{"class":376}," devtools",[44,5535,167],{"class":58},[44,5537,520],{"class":58},[44,5539,5540],{"class":376}," enabled",[44,5542,167],{"class":58},[44,5544,870],{"class":435},[44,5546,481],{"class":58},[44,5548,5549],{"class":46,"line":88},[44,5550,5551],{"class":332}," // ...our_config,\n",[44,5553,5554,5557,5559,5561,5563],{"class":46,"line":124},[44,5555,5556],{"class":376}," pages",[44,5558,167],{"class":58},[44,5560,436],{"class":435},[44,5562,470],{"class":58},[44,5564,5565],{"class":332}," // Add this code (by default is true)\n",[44,5567,5568,5570,5572],{"class":46,"line":227},[44,5569,1347],{"class":58},[44,5571,765],{"class":151},[44,5573,354],{"class":58},[12,5575,5576],{},"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,5578,5579],{},"You can create a route-only import file (you can call it router.imports.ts).",[34,5581,5583],{"className":5320,"code":5582,"language":5322,"meta":39,"style":39},"// router.imports.ts\nexport { default as WebsiteHome } from '~~/pages/website/home.vue';\nexport { default as WebsiteAbout } from '~~/pages/website/about.vue';\n...\n...\n",[41,5584,5585,5590,5617,5643,5648],{"__ignoreMap":39},[44,5586,5587],{"class":46,"line":47},[44,5588,5589],{"class":332},"// router.imports.ts\n",[44,5591,5592,5594,5596,5598,5601,5604,5606,5608,5610,5613,5615],{"class":46,"line":148},[44,5593,366],{"class":365},[44,5595,520],{"class":58},[44,5597,369],{"class":365},[44,5599,5600],{"class":365}," as",[44,5602,5603],{"class":151}," WebsiteHome",[44,5605,563],{"class":58},[44,5607,2432],{"class":365},[44,5609,279],{"class":58},[44,5611,5612],{"class":54},"~~/pages/website/home.vue",[44,5614,285],{"class":58},[44,5616,354],{"class":58},[44,5618,5619,5621,5623,5625,5627,5630,5632,5634,5636,5639,5641],{"class":46,"line":69},[44,5620,366],{"class":365},[44,5622,520],{"class":58},[44,5624,369],{"class":365},[44,5626,5600],{"class":365},[44,5628,5629],{"class":151}," WebsiteAbout",[44,5631,563],{"class":58},[44,5633,2432],{"class":365},[44,5635,279],{"class":58},[44,5637,5638],{"class":54},"~~/pages/website/about.vue",[44,5640,285],{"class":58},[44,5642,354],{"class":58},[44,5644,5645],{"class":46,"line":88},[44,5646,5647],{"class":58},"...\n",[44,5649,5650],{"class":46,"line":124},[44,5651,5647],{"class":58},[12,5653,5654],{},"Now we can create another barrel file for route definition (website.routes.ts)",[34,5656,5658],{"className":5320,"code":5657,"language":5322,"meta":39,"style":39},"// 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",[41,5659,5660,5665,5671,5678,5683,5698,5702,5713,5718,5734,5745,5756,5760,5764,5779,5794,5804,5808,5813,5817,5831,5847,5858,5870],{"__ignoreMap":39},[44,5661,5662],{"class":46,"line":47},[44,5663,5664],{"class":332},"// website.routes.ts\n",[44,5666,5667,5669],{"class":46,"line":148},[44,5668,676],{"class":365},[44,5670,170],{"class":58},[44,5672,5673,5676],{"class":46,"line":69},[44,5674,5675],{"class":151}," WebsiteHome",[44,5677,204],{"class":58},[44,5679,5680],{"class":46,"line":88},[44,5681,5682],{"class":151}," WebsiteAbout\n",[44,5684,5685,5687,5689,5691,5694,5696],{"class":46,"line":124},[44,5686,1347],{"class":58},[44,5688,2432],{"class":365},[44,5690,279],{"class":58},[44,5692,5693],{"class":54},"./routes.import",[44,5695,285],{"class":58},[44,5697,354],{"class":58},[44,5699,5700],{"class":46,"line":227},[44,5701,360],{"emptyLinePlaceholder":359},[44,5703,5704,5706,5709,5711],{"class":46,"line":247},[44,5705,338],{"class":160},[44,5707,5708],{"class":151}," websiteChildren ",[44,5710,344],{"class":58},[44,5712,449],{"class":151},[44,5714,5715],{"class":46,"line":253},[44,5716,5717],{"class":58}," {\n",[44,5719,5720,5723,5725,5727,5730,5732],{"class":46,"line":258},[44,5721,5722],{"class":376}," name",[44,5724,167],{"class":58},[44,5726,279],{"class":58},[44,5728,5729],{"class":54},"WebsiteHome",[44,5731,285],{"class":58},[44,5733,204],{"class":58},[44,5735,5736,5739,5741,5743],{"class":46,"line":441},[44,5737,5738],{"class":376}," path",[44,5740,167],{"class":58},[44,5742,478],{"class":58},[44,5744,204],{"class":58},[44,5746,5747,5750,5752,5754],{"class":46,"line":452},[44,5748,5749],{"class":376}," component",[44,5751,167],{"class":58},[44,5753,5603],{"class":151},[44,5755,204],{"class":58},[44,5757,5758],{"class":46,"line":484},[44,5759,250],{"class":58},[44,5761,5762],{"class":46,"line":490},[44,5763,5717],{"class":58},[44,5765,5766,5768,5770,5772,5775,5777],{"class":46,"line":495},[44,5767,5722],{"class":376},[44,5769,167],{"class":58},[44,5771,279],{"class":58},[44,5773,5774],{"class":54},"Website",[44,5776,285],{"class":58},[44,5778,204],{"class":58},[44,5780,5781,5783,5785,5787,5790,5792],{"class":46,"line":505},[44,5782,5738],{"class":376},[44,5784,167],{"class":58},[44,5786,279],{"class":58},[44,5788,5789],{"class":54},"about",[44,5791,285],{"class":58},[44,5793,204],{"class":58},[44,5795,5796,5798,5800,5802],{"class":46,"line":571},[44,5797,5749],{"class":376},[44,5799,167],{"class":58},[44,5801,5629],{"class":151},[44,5803,204],{"class":58},[44,5805,5806],{"class":46,"line":628},[44,5807,250],{"class":58},[44,5809,5810],{"class":46,"line":636},[44,5811,5812],{"class":151},"]\n",[44,5814,5815],{"class":46,"line":993},[44,5816,360],{"emptyLinePlaceholder":359},[44,5818,5819,5821,5824,5827,5829],{"class":46,"line":1004},[44,5820,366],{"class":365},[44,5822,5823],{"class":160}," const",[44,5825,5826],{"class":151}," websiteRoutes ",[44,5828,344],{"class":58},[44,5830,170],{"class":58},[44,5832,5833,5836,5838,5840,5843,5845],{"class":46,"line":1055},[44,5834,5835],{"class":376}," name",[44,5837,167],{"class":58},[44,5839,279],{"class":58},[44,5841,5842],{"class":54},"WebsiteRoot",[44,5844,285],{"class":58},[44,5846,204],{"class":58},[44,5848,5849,5852,5854,5856],{"class":46,"line":1097},[44,5850,5851],{"class":376}," path",[44,5853,167],{"class":58},[44,5855,478],{"class":58},[44,5857,204],{"class":58},[44,5859,5860,5863,5865,5868],{"class":46,"line":1185},[44,5861,5862],{"class":376}," children",[44,5864,167],{"class":58},[44,5866,5867],{"class":151}," websiteChildren",[44,5869,204],{"class":58},[44,5871,5872],{"class":46,"line":1191},[44,5873,261],{"class":58},[12,5875,5876],{},"Finally, we can use our router.options.ts with the route imports defined like this:",[34,5878,5880],{"className":5320,"code":5879,"language":5322,"meta":39,"style":39},"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",[41,5881,5882,5904,5926,5946,5950,5958,5974,5981,5988,5993,5999],{"__ignoreMap":39},[44,5883,5884,5886,5888,5890,5892,5894,5896,5898,5900,5902],{"class":46,"line":47},[44,5885,676],{"class":365},[44,5887,537],{"class":365},[44,5889,520],{"class":58},[44,5891,5345],{"class":151},[44,5893,563],{"class":58},[44,5895,2432],{"class":365},[44,5897,279],{"class":58},[44,5899,5354],{"class":54},[44,5901,285],{"class":58},[44,5903,354],{"class":58},[44,5905,5906,5908,5910,5913,5915,5917,5919,5922,5924],{"class":46,"line":148},[44,5907,676],{"class":365},[44,5909,520],{"class":58},[44,5911,5912],{"class":151}," exampleRoutes",[44,5914,563],{"class":58},[44,5916,2432],{"class":365},[44,5918,279],{"class":58},[44,5920,5921],{"class":54},"./example.routes",[44,5923,285],{"class":58},[44,5925,354],{"class":58},[44,5927,5928,5930,5932,5935,5937,5939,5941,5944],{"class":46,"line":69},[44,5929,676],{"class":365},[44,5931,520],{"class":58},[44,5933,5934],{"class":151}," websiteRoutes",[44,5936,563],{"class":58},[44,5938,2432],{"class":365},[44,5940,279],{"class":58},[44,5942,5943],{"class":54},"./website.routes",[44,5945,1182],{"class":58},[44,5947,5948],{"class":46,"line":88},[44,5949,360],{"emptyLinePlaceholder":359},[44,5951,5952,5954,5956],{"class":46,"line":124},[44,5953,366],{"class":365},[44,5955,369],{"class":365},[44,5957,170],{"class":58},[44,5959,5960,5962,5964,5966,5968,5970,5972],{"class":46,"line":227},[44,5961,5378],{"class":62},[44,5963,167],{"class":58},[44,5965,811],{"class":58},[44,5967,5385],{"class":814},[44,5969,765],{"class":58},[44,5971,820],{"class":160},[44,5973,449],{"class":151},[44,5975,5976,5979],{"class":46,"line":247},[44,5977,5978],{"class":151}," exampleRoutes",[44,5980,204],{"class":58},[44,5982,5983,5986],{"class":46,"line":253},[44,5984,5985],{"class":151}," websiteRoutes",[44,5987,204],{"class":58},[44,5989,5990],{"class":46,"line":258},[44,5991,5992],{"class":332}," //...\n",[44,5994,5995,5997],{"class":46,"line":441},[44,5996,631],{"class":151},[44,5998,204],{"class":58},[44,6000,6001,6003,6005],{"class":46,"line":452},[44,6002,1347],{"class":58},[44,6004,5483],{"class":365},[44,6006,6007],{"class":50}," RouterConfig\n",[12,6009,6010],{},"It has been a pleasure to share this experience with you, see you next time!!. :)",[2834,6012,6013],{},"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":39,"searchDepth":148,"depth":148,"links":6015},[6016],{"id":5310,"depth":148,"text":5311},"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":5299,"description":6018},{"loc":6020},"articles/en/creating-custom-routes-in-nuxt3",[6025,1294,2852,2853],"nuxt3","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231246/creating-custom-routes-in-nuxt3_brrrmq.webp","uwtvgF3lh1OBLbpkxOKHwwub_ofXihqCNTaVLHLC4vo",{"id":6029,"title":6030,"author":7,"body":6031,"date":6814,"description":6815,"extension":1076,"meta":6816,"navigation":359,"path":6817,"seo":6818,"sitemap":6819,"stem":6820,"tags":6821,"thumbnail":6824,"__hash__":6825},"en_articles/articles/en/coverage-of-jest-unit-tests-using-github-action.md","Coverage of Jest unit tests using GitHub actiong",{"type":9,"value":6032,"toc":6811},[6033,6036,6039,6042,6050,6056,6062,6066,6076,6173,6182,6274,6299,6360,6365,6423,6428,6561,6564,6774,6777,6780,6786,6789,6806,6808],[12,6034,6035],{},"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,6037,6038],{},"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,6040,6041],{},"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,6043,6044,6045],{},"Now, we will use the following tool: ",[1657,6046,6049],{"href":6047,"rel":6048},"https://www.covbot.dev/",[2406],"Jest coverage report action",[6051,6052,6053],"tip",{},[12,6054,6055],{},"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,6057,6058],{},[2178,6059],{"alt":6060,"src":6061},"Track code","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231244/track-code_ss1ich.webp",[19,6063,6065],{"id":6064},"how-can-we-set-up-our-project","How can we set up our project?",[24,6067,6068],{},[27,6069,6070,6071],{},"Create a new script to run all unit tests and generate a coverage report.\n",[129,6072,6073],{},[12,6074,6075],{},"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.",[34,6077,6079],{"className":136,"code":6078,"language":138,"meta":39,"style":39},"//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",[41,6080,6081,6086,6090,6110,6130,6142,6160,6164,6169],{"__ignoreMap":39},[44,6082,6083],{"class":46,"line":47},[44,6084,6085],{"class":332},"//package.json\n",[44,6087,6088],{"class":46,"line":148},[44,6089,145],{"class":58},[44,6091,6092,6094,6097,6099,6101,6103,6106,6108],{"class":46,"line":69},[44,6093,157],{"class":58},[44,6095,6096],{"class":160},"name",[44,6098,164],{"class":58},[44,6100,167],{"class":58},[44,6102,185],{"class":58},[44,6104,6105],{"class":54},"my project",[44,6107,164],{"class":58},[44,6109,204],{"class":58},[44,6111,6112,6114,6117,6119,6121,6123,6126,6128],{"class":46,"line":88},[44,6113,157],{"class":58},[44,6115,6116],{"class":160},"version",[44,6118,164],{"class":58},[44,6120,167],{"class":58},[44,6122,185],{"class":58},[44,6124,6125],{"class":54},"1.0.0",[44,6127,164],{"class":58},[44,6129,204],{"class":58},[44,6131,6132,6134,6136,6138,6140],{"class":46,"line":124},[44,6133,157],{"class":58},[44,6135,161],{"class":160},[44,6137,164],{"class":58},[44,6139,167],{"class":58},[44,6141,170],{"class":58},[44,6143,6144,6146,6149,6151,6153,6155,6158],{"class":46,"line":227},[44,6145,175],{"class":58},[44,6147,6148],{"class":50},"coverage",[44,6150,164],{"class":58},[44,6152,167],{"class":58},[44,6154,185],{"class":58},[44,6156,6157],{"class":54},"jest --json --coverage --outputFile=report.json",[44,6159,244],{"class":58},[44,6161,6162],{"class":46,"line":247},[44,6163,2083],{"class":58},[44,6165,6166],{"class":46,"line":253},[44,6167,6168],{"class":332}," //...\n",[44,6170,6171],{"class":46,"line":258},[44,6172,261],{"class":58},[24,6174,6175],{"start":148},[27,6176,6177,6178,6181],{},"Edit coverage reports from ",[41,6179,6180],{},"jest.config.js"," or jest script file.",[34,6183,6185],{"className":323,"code":6184,"language":325,"meta":39,"style":39},"//jest.config.js\nmodule.exports = {\n collectCoverage: true,\n collectCoverageFrom: [\"**/*.{js,vue}\", \"!**/node_modules/**\"],\n coverageReporters: [ \"text\", \"text-summary\"]\n}\n",[41,6186,6187,6192,6201,6212,6242,6270],{"__ignoreMap":39},[44,6188,6189],{"class":46,"line":47},[44,6190,6191],{"class":332},"//jest.config.js\n",[44,6193,6194,6197,6199],{"class":46,"line":148},[44,6195,6196],{"class":58},"module.exports",[44,6198,833],{"class":58},[44,6200,170],{"class":58},[44,6202,6203,6206,6208,6210],{"class":46,"line":69},[44,6204,6205],{"class":376}," collectCoverage",[44,6207,167],{"class":58},[44,6209,870],{"class":435},[44,6211,204],{"class":58},[44,6213,6214,6217,6219,6222,6224,6227,6229,6231,6233,6236,6238,6240],{"class":46,"line":88},[44,6215,6216],{"class":376}," collectCoverageFrom",[44,6218,167],{"class":58},[44,6220,6221],{"class":151}," [",[44,6223,164],{"class":58},[44,6225,6226],{"class":54},"**/*.{js,vue}",[44,6228,164],{"class":58},[44,6230,470],{"class":58},[44,6232,185],{"class":58},[44,6234,6235],{"class":54},"!**/node_modules/**",[44,6237,164],{"class":58},[44,6239,566],{"class":151},[44,6241,204],{"class":58},[44,6243,6244,6247,6249,6252,6254,6257,6259,6261,6263,6266,6268],{"class":46,"line":124},[44,6245,6246],{"class":376}," coverageReporters",[44,6248,167],{"class":58},[44,6250,6251],{"class":151}," [ ",[44,6253,164],{"class":58},[44,6255,6256],{"class":54},"text",[44,6258,164],{"class":58},[44,6260,470],{"class":58},[44,6262,185],{"class":58},[44,6264,6265],{"class":54},"text-summary",[44,6267,164],{"class":58},[44,6269,5812],{"class":151},[44,6271,6272],{"class":46,"line":227},[44,6273,261],{"class":58},[24,6275,6276,6290,6296],{"start":69},[27,6277,6278,6279,6282,6283,6286,6287,6289],{},"Create a new workflow file in your project: Workflow files are stored in the ",[41,6280,6281],{},".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 ",[41,6284,6285],{},".yml"," file in the ",[41,6288,6281],{}," directory.",[27,6291,6292,6293],{},"Add a new step to your GitHub Actions workflow file.\n",[41,6294,6295],{},"(e.g, coverage.yml)",[27,6297,6298],{},"Now, we need to configure in which environment of our branches we want our GitHub action to run.",[34,6300,6304],{"className":6301,"code":6302,"language":6303,"meta":39,"style":39},"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",[41,6305,6306,6311,6323,6331,6338,6345,6353],{"__ignoreMap":39},[44,6307,6308],{"class":46,"line":47},[44,6309,6310],{"class":332},"#coverage.yml\n",[44,6312,6313,6315,6317,6319,6321],{"class":46,"line":148},[44,6314,6096],{"class":376},[44,6316,167],{"class":58},[44,6318,279],{"class":58},[44,6320,6148],{"class":54},[44,6322,1182],{"class":58},[44,6324,6325,6328],{"class":46,"line":69},[44,6326,6327],{"class":435},"on",[44,6329,6330],{"class":58},":\n",[44,6332,6333,6336],{"class":46,"line":88},[44,6334,6335],{"class":376}," pull_request",[44,6337,6330],{"class":58},[44,6339,6340,6343],{"class":46,"line":124},[44,6341,6342],{"class":376}," branches",[44,6344,6330],{"class":58},[44,6346,6347,6350],{"class":46,"line":227},[44,6348,6349],{"class":58}," -",[44,6351,6352],{"class":54}," main\n",[44,6354,6355,6357],{"class":46,"line":247},[44,6356,6349],{"class":58},[44,6358,6359],{"class":54}," develop\n",[24,6361,6362],{"start":227},[27,6363,6364],{},"Enable permissions about our GitHub action can run.",[34,6366,6368],{"className":6301,"code":6367,"language":6303,"meta":39,"style":39},"#coverage.yml\njobs:\n coverage:\n permissions:\n checks: write\n pull-requests: write\n contents: write\n",[41,6369,6370,6374,6381,6388,6395,6405,6414],{"__ignoreMap":39},[44,6371,6372],{"class":46,"line":47},[44,6373,6310],{"class":332},[44,6375,6376,6379],{"class":46,"line":148},[44,6377,6378],{"class":376},"jobs",[44,6380,6330],{"class":58},[44,6382,6383,6386],{"class":46,"line":69},[44,6384,6385],{"class":376}," coverage",[44,6387,6330],{"class":58},[44,6389,6390,6393],{"class":46,"line":88},[44,6391,6392],{"class":376}," permissions",[44,6394,6330],{"class":58},[44,6396,6397,6400,6402],{"class":46,"line":124},[44,6398,6399],{"class":376}," checks",[44,6401,167],{"class":58},[44,6403,6404],{"class":54}," write\n",[44,6406,6407,6410,6412],{"class":46,"line":227},[44,6408,6409],{"class":376}," pull-requests",[44,6411,167],{"class":58},[44,6413,6404],{"class":54},[44,6415,6416,6419,6421],{"class":46,"line":247},[44,6417,6418],{"class":376}," contents",[44,6420,167],{"class":58},[44,6422,6404],{"class":54},[24,6424,6425],{"start":247},[27,6426,6427],{},"It’s time to set up the final report steps.",[34,6429,6431],{"className":6301,"code":6430,"language":6303,"meta":39,"style":39}," 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",[41,6432,6433,6443,6450,6463,6474,6481,6494,6505,6515,6521,6531,6541,6551],{"__ignoreMap":39},[44,6434,6435,6438,6440],{"class":46,"line":47},[44,6436,6437],{"class":376}," runs-on",[44,6439,167],{"class":58},[44,6441,6442],{"class":54}," ubuntu-latest\n",[44,6444,6445,6448],{"class":46,"line":148},[44,6446,6447],{"class":376}," steps",[44,6449,6330],{"class":58},[44,6451,6452,6455,6458,6460],{"class":46,"line":69},[44,6453,6454],{"class":58}," -",[44,6456,6457],{"class":376}," uses",[44,6459,167],{"class":58},[44,6461,6462],{"class":54}," actions/checkout@v3\n",[44,6464,6465,6467,6469,6471],{"class":46,"line":88},[44,6466,6454],{"class":58},[44,6468,6457],{"class":376},[44,6470,167],{"class":58},[44,6472,6473],{"class":54}," actions/setup-node@v3\n",[44,6475,6476,6479],{"class":46,"line":124},[44,6477,6478],{"class":376}," with",[44,6480,6330],{"class":58},[44,6482,6483,6486,6488,6490,6492],{"class":46,"line":227},[44,6484,6485],{"class":376}," cache",[44,6487,167],{"class":58},[44,6489,279],{"class":58},[44,6491,82],{"class":54},[44,6493,1182],{"class":58},[44,6495,6496,6498,6500,6502],{"class":46,"line":247},[44,6497,6454],{"class":58},[44,6499,6457],{"class":376},[44,6501,167],{"class":58},[44,6503,6504],{"class":54}," ArtiomTr/jest-coverage-report-action@v2.1.2\n",[44,6506,6507,6510,6512],{"class":46,"line":253},[44,6508,6509],{"class":376}," id",[44,6511,167],{"class":58},[44,6513,6514],{"class":54}," coverage\n",[44,6516,6517,6519],{"class":46,"line":258},[44,6518,6478],{"class":376},[44,6520,6330],{"class":58},[44,6522,6523,6526,6528],{"class":46,"line":441},[44,6524,6525],{"class":376}," annotations",[44,6527,167],{"class":58},[44,6529,6530],{"class":54}," none\n",[44,6532,6533,6536,6538],{"class":46,"line":452},[44,6534,6535],{"class":376}," package-manager",[44,6537,167],{"class":58},[44,6539,6540],{"class":54}," yarn\n",[44,6542,6543,6546,6548],{"class":46,"line":484},[44,6544,6545],{"class":376}," test-script",[44,6547,167],{"class":58},[44,6549,6550],{"class":54}," yarn coverage\n",[44,6552,6553,6556,6558],{"class":46,"line":490},[44,6554,6555],{"class":376}," icons",[44,6557,167],{"class":58},[44,6559,6560],{"class":54}," emoji\n",[12,6562,6563],{},"In the end, you will have a complete configuration like the following:",[34,6565,6567],{"className":6301,"code":6566,"language":6303,"meta":39,"style":39},"#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",[41,6568,6569,6573,6585,6591,6597,6603,6609,6615,6621,6627,6633,6641,6649,6657,6666,6673,6683,6693,6700,6713,6723,6732,6738,6747,6756,6765],{"__ignoreMap":39},[44,6570,6571],{"class":46,"line":47},[44,6572,6310],{"class":332},[44,6574,6575,6577,6579,6581,6583],{"class":46,"line":148},[44,6576,6096],{"class":376},[44,6578,167],{"class":58},[44,6580,279],{"class":58},[44,6582,6148],{"class":54},[44,6584,1182],{"class":58},[44,6586,6587,6589],{"class":46,"line":69},[44,6588,6327],{"class":435},[44,6590,6330],{"class":58},[44,6592,6593,6595],{"class":46,"line":88},[44,6594,6335],{"class":376},[44,6596,6330],{"class":58},[44,6598,6599,6601],{"class":46,"line":124},[44,6600,6342],{"class":376},[44,6602,6330],{"class":58},[44,6604,6605,6607],{"class":46,"line":227},[44,6606,6349],{"class":58},[44,6608,6352],{"class":54},[44,6610,6611,6613],{"class":46,"line":247},[44,6612,6349],{"class":58},[44,6614,6359],{"class":54},[44,6616,6617,6619],{"class":46,"line":253},[44,6618,6378],{"class":376},[44,6620,6330],{"class":58},[44,6622,6623,6625],{"class":46,"line":258},[44,6624,6385],{"class":376},[44,6626,6330],{"class":58},[44,6628,6629,6631],{"class":46,"line":441},[44,6630,6392],{"class":376},[44,6632,6330],{"class":58},[44,6634,6635,6637,6639],{"class":46,"line":452},[44,6636,6399],{"class":376},[44,6638,167],{"class":58},[44,6640,6404],{"class":54},[44,6642,6643,6645,6647],{"class":46,"line":484},[44,6644,6409],{"class":376},[44,6646,167],{"class":58},[44,6648,6404],{"class":54},[44,6650,6651,6653,6655],{"class":46,"line":490},[44,6652,6418],{"class":376},[44,6654,167],{"class":58},[44,6656,6404],{"class":54},[44,6658,6659,6662,6664],{"class":46,"line":495},[44,6660,6661],{"class":376}," runs-on",[44,6663,167],{"class":58},[44,6665,6442],{"class":54},[44,6667,6668,6671],{"class":46,"line":505},[44,6669,6670],{"class":376}," steps",[44,6672,6330],{"class":58},[44,6674,6675,6677,6679,6681],{"class":46,"line":571},[44,6676,6349],{"class":58},[44,6678,6457],{"class":376},[44,6680,167],{"class":58},[44,6682,6462],{"class":54},[44,6684,6685,6687,6689,6691],{"class":46,"line":628},[44,6686,6349],{"class":58},[44,6688,6457],{"class":376},[44,6690,167],{"class":58},[44,6692,6473],{"class":54},[44,6694,6695,6698],{"class":46,"line":636},[44,6696,6697],{"class":376}," with",[44,6699,6330],{"class":58},[44,6701,6702,6705,6707,6709,6711],{"class":46,"line":993},[44,6703,6704],{"class":376}," cache",[44,6706,167],{"class":58},[44,6708,279],{"class":58},[44,6710,82],{"class":54},[44,6712,1182],{"class":58},[44,6714,6715,6717,6719,6721],{"class":46,"line":1004},[44,6716,6349],{"class":58},[44,6718,6457],{"class":376},[44,6720,167],{"class":58},[44,6722,6504],{"class":54},[44,6724,6725,6728,6730],{"class":46,"line":1055},[44,6726,6727],{"class":376}," id",[44,6729,167],{"class":58},[44,6731,6514],{"class":54},[44,6733,6734,6736],{"class":46,"line":1097},[44,6735,6697],{"class":376},[44,6737,6330],{"class":58},[44,6739,6740,6743,6745],{"class":46,"line":1185},[44,6741,6742],{"class":376}," annotations",[44,6744,167],{"class":58},[44,6746,6530],{"class":54},[44,6748,6749,6752,6754],{"class":46,"line":1191},[44,6750,6751],{"class":376}," package-manager",[44,6753,167],{"class":58},[44,6755,6540],{"class":54},[44,6757,6758,6761,6763],{"class":46,"line":1200},[44,6759,6760],{"class":376}," test-script",[44,6762,167],{"class":58},[44,6764,6550],{"class":54},[44,6766,6767,6770,6772],{"class":46,"line":1205},[44,6768,6769],{"class":376}," icons",[44,6771,167],{"class":58},[44,6773,6560],{"class":54},[12,6775,6776],{},"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,6778,6779],{},"Also mention that the report is executed again if a new commit is made to the PR.",[12,6781,6782],{},[2178,6783],{"alt":6784,"src":6785},"Pull request","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231244/pull-request_jmcnhs.webp",[12,6787,6788],{},"In summary, coverage of Jest unit tests using GitHub Actions is important because it helps you:",[24,6790,6791,6794,6797,6800,6803],{},[27,6792,6793],{},"Ensure that your code is well-tested.",[27,6795,6796],{},"Reduce the risk of introducing bugs into your code.",[27,6798,6799],{},"Easily track the quality of your tests over time.",[27,6801,6802],{},"Communicate the quality of your tests to others.",[27,6804,6805],{},"Build confidence in your development process.",[12,6807,5280],{},[2834,6809,6810],{},"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":39,"searchDepth":148,"depth":148,"links":6812},[6813],{"id":6064,"depth":148,"text":6065},"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":6030,"description":6815},{"loc":6817},"articles/en/coverage-of-jest-unit-tests-using-github-action",[6822,6823,2852,2853],"jest","github-action","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231244/thumbnail_dwb5ue.webp","m9QjUXQANBcf9TmLNyxpQHSO9Oi-jmSseAoo7BMTaS4",{"id":6827,"title":6828,"author":7,"body":6829,"date":7208,"description":7209,"extension":1076,"meta":7210,"navigation":359,"path":7211,"seo":7212,"sitemap":7213,"stem":7214,"tags":7215,"thumbnail":6877,"__hash__":7219},"en_articles/articles/en/broken-arch-linux.md","Broken Arch Linux: Kernel Panic - failed to read configuration 'etc/mkinitcpio.conf",{"type":9,"value":6830,"toc":7203},[6831,6834,6837,6865,6872,6878,6882,6885,6894,6897,6901,6906,6909,6914,6982,6990,7003,7006,7060,7065,7078,7081,7092,7098,7103,7119,7121,7146,7149,7153,7160,7163,7175,7178,7198,7200],[12,6832,6833],{},"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,6835,6836],{},"The main error was:",[34,6838,6840],{"className":36,"code":6839,"language":38,"meta":39,"style":39},"error: fs/fshelp.c:find_file:266: file '/initramfs-linux.img' not found\n",[41,6841,6842],{"__ignoreMap":39},[44,6843,6844,6847,6850,6852,6854,6857,6859,6862],{"class":46,"line":47},[44,6845,6846],{"class":50},"error:",[44,6848,6849],{"class":54}," fs/fshelp.c:find_file:266:",[44,6851,830],{"class":54},[44,6853,279],{"class":58},[44,6855,6856],{"class":54},"/initramfs-linux.img",[44,6858,285],{"class":58},[44,6860,6861],{"class":54}," not",[44,6863,6864],{"class":54}," found\n",[12,6866,6867,6868,6871],{},"and then ",[653,6869,6870],{},"KERNEL PANIC","!",[12,6873,6874],{},[2178,6875],{"alt":6876,"src":6877},"Kernel panic","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231242/kernel-panic_kwkqwr.png",[19,6879,6881],{"id":6880},"cause-of-the-problem","Cause of the problem",[12,6883,6884],{},"After attempting to upgrade dependencies, for some reason (installation interruption, package corruption, or incomplete configuration), the essential file:",[34,6886,6888],{"className":36,"code":6887,"language":38,"meta":39,"style":39},"/etc/mkinitcpio.conf\n",[41,6889,6890],{"__ignoreMap":39},[44,6891,6892],{"class":46,"line":47},[44,6893,6887],{"class":50},[12,6895,6896],{},"It was damaged/modified in the system, which made it impossible to generate an initramfs.",[19,6898,6900],{"id":6899},"step-by-step-solution","Step by step solution",[24,6902,6903],{},[27,6904,6905],{},"Enter the chroot correctly",[12,6907,6908],{},"First, we mount and access the system we have installed on our disk from a live iso",[129,6910,6911],{},[12,6912,6913],{},"NOTE: You must to download and access from a live ISO",[34,6915,6917],{"className":36,"code":6916,"language":38,"meta":39,"style":39},"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",[41,6918,6919,6930,6946,6959,6971,6975],{"__ignoreMap":39},[44,6920,6921,6924,6927],{"class":46,"line":47},[44,6922,6923],{"class":50},"mount",[44,6925,6926],{"class":54}," /dev/sdXn",[44,6928,6929],{"class":54}," /mnt\n",[44,6931,6932,6934,6937,6940,6943],{"class":46,"line":148},[44,6933,6923],{"class":50},[44,6935,6936],{"class":54}," -t",[44,6938,6939],{"class":54}," proc",[44,6941,6942],{"class":54}," /proc",[44,6944,6945],{"class":54}," /mnt/proc\n",[44,6947,6948,6950,6953,6956],{"class":46,"line":69},[44,6949,6923],{"class":50},[44,6951,6952],{"class":54}," --rbind",[44,6954,6955],{"class":54}," /sys",[44,6957,6958],{"class":54}," /mnt/sys\n",[44,6960,6961,6963,6965,6968],{"class":46,"line":88},[44,6962,6923],{"class":50},[44,6964,6952],{"class":54},[44,6966,6967],{"class":54}," /dev",[44,6969,6970],{"class":54}," /mnt/dev\n",[44,6972,6973],{"class":46,"line":124},[44,6974,360],{"emptyLinePlaceholder":359},[44,6976,6977,6980],{"class":46,"line":227},[44,6978,6979],{"class":50},"arch-chroot",[44,6981,6929],{"class":54},[24,6983,6984],{"start":148},[27,6985,6986,6987],{},"Manually create or edit ",[41,6988,6989],{},"/etc/mkinitcpio.conf",[34,6991,6993],{"className":36,"code":6992,"language":38,"meta":39,"style":39},"nano /etc/mkinitcpio.conf\n",[41,6994,6995],{"__ignoreMap":39},[44,6996,6997,7000],{"class":46,"line":47},[44,6998,6999],{"class":50},"nano",[44,7001,7002],{"class":54}," /etc/mkinitcpio.conf\n",[12,7004,7005],{},"And I added this content (the official default Arch file):",[34,7007,7011],{"className":7008,"code":7009,"language":7010,"meta":39,"style":39},"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",[41,7012,7013,7018,7023,7028,7032,7037,7041,7046,7051,7055],{"__ignoreMap":39},[44,7014,7015],{"class":46,"line":47},[44,7016,7017],{},"MODULES=()\n",[44,7019,7020],{"class":46,"line":148},[44,7021,7022],{},"BINARIES=()\n",[44,7024,7025],{"class":46,"line":69},[44,7026,7027],{},"FILES=()\n",[44,7029,7030],{"class":46,"line":88},[44,7031,360],{"emptyLinePlaceholder":359},[44,7033,7034],{"class":46,"line":124},[44,7035,7036],{},"HOOKS=(base udev autodetect microcode modconf kms keyboard keymap consolefont block filesystems fsck)\n",[44,7038,7039],{"class":46,"line":227},[44,7040,360],{"emptyLinePlaceholder":359},[44,7042,7043],{"class":46,"line":247},[44,7044,7045],{},"COMPRESSION=\"zstd\"\n",[44,7047,7048],{"class":46,"line":253},[44,7049,7050],{},"COMPRESSION_OPTIONS=()\n",[44,7052,7053],{"class":46,"line":258},[44,7054,360],{"emptyLinePlaceholder":359},[44,7056,7057],{"class":46,"line":441},[44,7058,7059],{},"MODULES_DECOMPRESS=\"no\"\n",[24,7061,7062],{"start":69},[27,7063,7064],{},"Regenerate the initramfs",[34,7066,7068],{"className":36,"code":7067,"language":38,"meta":39,"style":39},"mkinitcpio -P\n",[41,7069,7070],{"__ignoreMap":39},[44,7071,7072,7075],{"class":46,"line":47},[44,7073,7074],{"class":50},"mkinitcpio",[44,7076,7077],{"class":54}," -P\n",[12,7079,7080],{},"result",[34,7082,7086],{"className":7083,"code":7084,"language":7085,"meta":39,"style":39},"language-txt shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","Initcpio image generation successful\n","txt",[41,7087,7088],{"__ignoreMap":39},[44,7089,7090],{"class":46,"line":47},[44,7091,7084],{},[12,7093,7094,7095,749],{},"This confirms that the system already has a valid ",[41,7096,7097],{},"initramfs-linux.img",[24,7099,7100],{"start":88},[27,7101,7102],{},"Regenerate GRUB",[34,7104,7106],{"className":36,"code":7105,"language":38,"meta":39,"style":39},"grub-mkconfig -o /boot/grub/grub.cfg\n",[41,7107,7108],{"__ignoreMap":39},[44,7109,7110,7113,7116],{"class":46,"line":47},[44,7111,7112],{"class":50},"grub-mkconfig",[44,7114,7115],{"class":54}," -o",[44,7117,7118],{"class":54}," /boot/grub/grub.cfg\n",[12,7120,5264],{},[34,7122,7124],{"className":36,"code":7123,"language":38,"meta":39,"style":39},"exit\numount -R /mnt\nreboot\n",[41,7125,7126,7131,7141],{"__ignoreMap":39},[44,7127,7128],{"class":46,"line":47},[44,7129,7130],{"class":62},"exit\n",[44,7132,7133,7136,7139],{"class":46,"line":148},[44,7134,7135],{"class":50},"umount",[44,7137,7138],{"class":54}," -R",[44,7140,6929],{"class":54},[44,7142,7143],{"class":46,"line":69},[44,7144,7145],{"class":50},"reboot\n",[12,7147,7148],{},"And the system started up without problems.",[19,7150,7152],{"id":7151},"conclusion","Conclusion",[12,7154,7155,7156,7159],{},"The error “failed to read configuration ",[41,7157,7158],{},"etc/mkinitcpio.conf","” usually indicates that the mkinitcpio configuration file is missing or corrupted.",[12,7161,7162],{},"The solution involves:",[7164,7165,7166,7169,7172],"ul",{},[27,7167,7168],{},"Manually creating a valid file",[27,7170,7171],{},"Regenerating the initramfs",[27,7173,7174],{},"Updating GRUB",[12,7176,7177],{},"Documenting this helped me better understand how the boot process works in Arch Linux and how to handle emergencies from a Live ISO.",[2148,7179,7180,7186,7192,7195],{},[12,7181,7182,7185],{},[653,7183,7184],{},"GRUB"," = Bootloader.",[12,7187,7188,7191],{},[653,7189,7190],{},"initramfs"," = Initial toolkit.",[12,7193,7194],{},"GRUB doesn't create, it only loads the initramfs.\nThe initramfs allows the kernel to find the disk and mount the actual system.",[12,7196,7197],{},"Without a proper initramfs → no boot.",[12,7199,6010],{},[2834,7201,7202],{},"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":39,"searchDepth":148,"depth":148,"links":7204},[7205,7206,7207],{"id":6880,"depth":148,"text":6881},{"id":6899,"depth":148,"text":6900},{"id":7151,"depth":148,"text":7152},"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":6828,"description":7209},{"loc":7211},"articles/en/broken-arch-linux",[7216,7217,7218],"linux","arch-linux","opensource","kyRtTjt8r-bgD2Saw9p7ueFlG_r3qvPOPxdgzpcvcgs",{"id":7221,"title":7222,"author":7,"body":7223,"date":7585,"description":7586,"extension":1076,"meta":7587,"navigation":359,"path":7588,"seo":7589,"sitemap":7590,"stem":7591,"tags":7592,"thumbnail":7595,"__hash__":7596},"en_articles/articles/en/kitbag-router-and-vue-router.md","Kitbag Router vs Vue Router: Is it worth using a new alternative?",{"type":9,"value":7224,"toc":7572},[7225,7231,7237,7244,7247,7251,7258,7263,7277,7281,7288,7307,7313,7317,7348,7352,7399,7404,7412,7423,7427,7441,7473,7477,7515,7517,7522,7533,7537],[12,7226,7227],{},[2178,7228],{"alt":7229,"src":7230},"Thumbail image","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231245/banner_bes04k.jpg",[12,7232,7233,7236],{},[653,7234,7235],{},"Vue Router"," package has been standard for handling application routing and navigation. The community and support have been crucial and fundamental to our projects.",[12,7238,7239,7240,7243],{},"But recently, a new alternative has emerged in the community: ",[653,7241,7242],{},"Kitbag Router",". Considered a modern router written and adapted with TypeScript, it aims to improve the developer experience by offering a typed, secure, and robust tool for applications. This alternative search to eliminate routing problems and provide a more user friendly experience (UX) and developer experience (DX).",[12,7245,7246],{},"First, let's review key differences, weak points or risks, and recommendations to understand in which situations it is best to use them depending on the type of project we are working on.",[19,7248,7250],{"id":7249},"what-is-vue-router","What is Vue Router?",[12,7252,7253,7257],{},[1657,7254,7235],{"href":7255,"rel":7256},"https://router.vuejs.org/",[2406]," is the official router of the Vue ecosystem. It manages static and dynamic routes, declarative navigation, scrolling behavior, history modes, and more.",[7259,7260,7262],"h3",{"id":7261},"key-advantages-of-vue-router","Key advantages of Vue Router",[7164,7264,7265,7268,7271,7274],{},[27,7266,7267],{},"Extensive documentation, examples, and a great community.",[27,7269,7270],{},"Built-in features such as scrolling, history mode, nested routing, and others.",[27,7272,7273],{},"Maturity and stability. It's the standard, backed by the core Vue team.",[27,7275,7276],{},"Compatibility with the entire traditional Vue stack and ecosystem plugins.",[19,7278,7280],{"id":7279},"what-is-kitbag-router","What is Kitbag Router?",[12,7282,7283,7287],{},[1657,7284,7242],{"href":7285,"rel":7286},"https://router.kitbag.dev/",[2406]," is an alternative router built from scratch in TypeScript, with a focus on security, robustness, and predictability.",[2148,7289,7290,7295,7301],{},[12,7291,7292,7294],{},[653,7293,7242],{}," introduces a fresh, developer-centric approach to routing in Vue.js applications.",[12,7296,7297,7298,7300],{},"At the heart of ",[653,7299,7242],{}," lies a commitment to enhancing the developer experience. First and foremost that means type safety, but also better parameter experience, support for query, rejection handling, simple intuitive syntax, and an extensible design written with modern Typescript.",[7302,7303,7304],"blockquote",{},[12,7305,7306],{},"Kitbag router - official website",[12,7308,7309],{},[2178,7310],{"alt":7311,"src":7312},"Kitbag logo","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231245/kitbag_jufle7.webp",[7259,7314,7316],{"id":7315},"features-of-kitbag-router","Features of Kitbag router",[7164,7318,7319,7325,7331,7342],{},[27,7320,7321,7324],{},[653,7322,7323],{},"More powerful parameters",": Not just strings you can define parameters of type Number, Boolean, Date, JSON, RegExp, or even custom types. This allows routes with IDs, dates, booleans, etc.",[27,7326,7327,7330],{},[653,7328,7329],{},"Type safety",": Routes, parameters, and queries are strongly typed; if you wanto to change anything in the route configuration, TS will warn you in development.",[27,7332,7333,7336,7337],{},[653,7334,7335],{},"Reduced weight and modern design",": Kitbag Router boasts a small size, with minimal dependencies. ",[1657,7338,7341],{"href":7339,"rel":7340},"https://bundlephobia.com/package/@kitbag/router@0.20.9",[2406],"Check bundlephobia",[27,7343,7344,7347],{},[653,7345,7346],{},"Typed query parameters",": query parameters can be defined and validated just like route parameters",[19,7349,7351],{"id":7350},"advantages-of-using-kitbag-router-today","Advantages of using Kitbag Router today",[7164,7353,7354,7364,7373,7381,7390],{},[27,7355,7356,7357,7363],{},"🧰 ",[653,7358,7359],{},[7360,7361,7362],"em",{},"Automatically validated and written parameters:"," ideal for complex applications where route parameters have specific types (IDs, dates, booleans, etc.).",[27,7365,7366,7367,7372],{},"🔒 ",[653,7368,7369],{},[7360,7370,7371],{},"Fewer runtime errors due to misnamed paths or missing parameters:"," Since everything is typed, when you change paths, names, or parameters, compilation will fail if there are inconsistencies. This improves maintainability.",[27,7374,7375,7376],{},"✅ ",[653,7377,7378],{},[7360,7379,7380],{},"Easy transition to a Typescript oriented setup + modern composition",[27,7382,7383,7384,7389],{},"🌐 ",[653,7385,7386],{},[7360,7387,7388],{},"Queries + params + state + meta + hooks + prefetching"," and many modern features built in natively.",[27,7391,7392,7393,7398],{},"❌ ",[653,7394,7395],{},[7360,7396,7397],{},"Rejections",": You can assign views to handle whatever rejections you need, not only 404/not found.",[12,7400,7401],{},[653,7402,7403],{},"Some users community mention:",[2148,7405,7406],{},[12,7407,7408,7409],{},"“Type safety everywhere… amazing parameters… support for parameters in query… built in rejection handling” ",[653,7410,7411],{},"~ Reddit ~",[6051,7413,7414],{},[12,7415,7416,7417,7419,7420,7422],{},"“The new type safe ",[653,7418,7235],{}," is definitely an excellent router,” although some still prefer the original ",[653,7421,7235],{}," for its long term support.",[19,7424,7426],{"id":7425},"migrating-from-vue-router","Migrating from Vue Router",[12,7428,7429,7430,7432,7433,7435,7436],{},"If you are considering migrating from ",[653,7431,7235],{}," to ",[653,7434,7242],{},", it is important to know which features are covered or complete and what is not yet available. ",[1657,7437,7440],{"href":7438,"rel":7439},"https://router.kitbag.dev/migrating-vue-router.html",[2406],"You can check official documentation in more detail.",[7164,7442,7443,7446,7449,7452,7455,7458,7461,7464,7467,7470],{},[27,7444,7445],{},"✅ Nested routes mapping",[27,7447,7448],{},"✅ Dynamic Routing",[27,7450,7451],{},"✅ Modular, component-based router configuration",[27,7453,7454],{},"✅ Route params, query, wildcards",[27,7456,7457],{},"✅ View transition effects powered by Vue.js' transition system",[27,7459,7460],{},"✅ Fine-grained navigation control",[27,7462,7463],{},"✅ Links with automatic active CSS classes",[27,7465,7466],{},"✅ HTML5 history mode or hash mode",[27,7468,7469],{},"❌ Customizable Scroll Behavior",[27,7471,7472],{},"✅ Proper encoding for URLs",[19,7474,7476],{"id":7475},"weak-points-risks-or-why-it-might-not-be-suitable","Weak points, risks, or why it might not be suitable?",[7164,7478,7479,7488,7497,7506],{},[27,7480,7481,7482,7487],{},"🔄 ",[653,7483,7484],{},[7360,7485,7486],{},"Risk of lower adoption and small community:"," This can hinder support, documentation or integration into larger projects or those with many collaborators.",[27,7489,7490,7491,7496],{},"🧑‍💻 ",[653,7492,7493],{},[7360,7494,7495],{},"Learning curve:"," Perhaps way routes are defined is more explicit, which can feel more verbose compared to simpler definitions. Some developers in the community see this as \"more upfront work,\" especially in small projects.",[27,7498,7499,7500,7505],{},"🤔 ",[653,7501,7502],{},[7360,7503,7504],{},"Limitations for teams that do not use TypeScript:"," It requires a solid understanding of TypeScript to truly benefit from it. In teams that work primarily with JavaScript, this can become a real obstacle.",[27,7507,7508,7509,7514],{},"🔧 ",[653,7510,7511],{},[7360,7512,7513],{},"More explicit configuration = greater verbosity:"," This is a great advantage for TypeScript, but it can be tedious; defining routes can feel longer, or complex nested routes require more code.",[19,7516,7152],{"id":7151},[12,7518,7519,7521],{},[653,7520,7242],{}," is a very attractive and could be an excellent alternative, especially if you want to experiment with a new approach to routing in modern projects using Vue 3 and TypeScript, where type safety and maintainability are paramount. If you're starting a new project, it might be worth exploring it thoroughly.",[12,7523,7524,7525,7527,7528],{},"However, given that it's still relatively new and doesn't have the same adoption or maturity as ",[653,7526,7235],{},", its use should be carefully considered, along with validating compatibility requirements and the potential learning curve. I'd like to emphasize that it's an open-source project, so your input is very helpful. ",[1657,7529,7532],{"href":7530,"rel":7531},"https://github.com/kitbagjs/router",[2406],"If you're interested, you can check the official repository.",[19,7534,7536],{"id":7535},"sources-and-links-consulted","Sources and links consulted",[7164,7538,7539,7545,7551,7558,7565],{},[27,7540,7541],{},[1657,7542,7544],{"href":7285,"rel":7543},[2406],"Kitbag Router - Official documentation",[27,7546,7547],{},[1657,7548,7550],{"href":7255,"rel":7549},[2406],"Vue Router - Official documentation",[27,7552,7553],{},[1657,7554,7557],{"href":7555,"rel":7556},"https://www.reddit.com/r/vuejs/comments/1dj7h88/kitbag_router_v040_released/",[2406],"Reddit - Kitbag Router v0.4.0 Released ",[27,7559,7560],{},[1657,7561,7564],{"href":7562,"rel":7563},"https://www.reddit.com/r/javascript/comments/1conv1s/new_typesafe_vue_router/?tl=es-es",[2406],"Reddit – New Typesafe Vue Router ",[27,7566,7567],{},[1657,7568,7571],{"href":7569,"rel":7570},"https://medium.com/@stackoverfloweth/introducing-a-new-router-for-vue-6a912fdfcfff",[2406],"Medium - Introducing a new router for Vue",{"title":39,"searchDepth":148,"depth":148,"links":7573},[7574,7577,7580,7581,7582,7583,7584],{"id":7249,"depth":148,"text":7250,"children":7575},[7576],{"id":7261,"depth":69,"text":7262},{"id":7279,"depth":148,"text":7280,"children":7578},[7579],{"id":7315,"depth":69,"text":7316},{"id":7350,"depth":148,"text":7351},{"id":7425,"depth":148,"text":7426},{"id":7475,"depth":148,"text":7476},{"id":7151,"depth":148,"text":7152},{"id":7535,"depth":148,"text":7536},"2025-12-09T00:00:00.000Z","A powerful new alternative for routing in VueJS; it's worth switching from the official router.",{},"/articles/en/kitbag-router-and-vue-router",{"title":7222,"description":7586},{"loc":7588},"articles/en/kitbag-router-and-vue-router",[7593,7594],"vuejs","frontend","https://res.cloudinary.com/dhgcfzhm0/image/upload/v1779231245/thumbnail_jqapf3.jpg","zlnqvJF9W7lb1MMrPgaOnF0GP62uA82cqv4-mxQKX4Y",[7598,7599],{"title":5299,"path":6020,"stem":6023,"description":6018},{"title":7222,"path":7588,"stem":7591,"description":7586},1781748826749]