style: clean up code formatting and improve readability across components

Author: ManuelGil

eslint.config.js

@@ -1,14 +1,15 @@
-import globals from 'globals'
-import pluginJs from '@eslint/js'
-import tseslint from 'typescript-eslint'
-import pluginVue from 'eslint-plugin-vue'
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginVue from "eslint-plugin-vue";
+
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
-  { files: ['**/*.{js,mjs,cjs,ts,vue}'] },
-  { languageOptions: { globals: globals.browser } },
+  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
+  {languageOptions: { globals: globals.browser }},
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
-  ...pluginVue.configs['flat/essential'],
-  { files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },
-]
+  ...pluginVue.configs["flat/essential"],
+  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
+];

package-lock.json

@@ -25,6 +25,7 @@
     "@commitlint/config-conventional": "^19.6.0",
     "@eslint/js": "^9.19.0",
     "eslint": "^9.19.0",
+    "eslint-plugin-vue": "^9.32.0",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.3",

package.json

@@ -1,43 +1,47 @@
 ---
 const features = [
   {
-    title: "Eventos y Meetups",
-    description: "Organizamos eventos regulares donde compartimos conocimiento y experiencias sobre Vue.js."
+    title: 'Eventos y Meetups',
+    description:
+      'Organizamos eventos regulares donde compartimos conocimiento y experiencias sobre Vue.js.',
   },
   {
-    title: "Recursos y Aprendizaje",
-    description: "Accede a recursos educativos, tutoriales y proyectos prácticos para mejorar tus habilidades."
+    title: 'Recursos y Aprendizaje',
+    description:
+      'Accede a recursos educativos, tutoriales y proyectos prácticos para mejorar tus habilidades.',
   },
   {
-    title: "Networking",
-    description: "Conecta con otros desarrolladores, encuentra mentores y oportunidades laborales."
-  }
-];
+    title: 'Networking',
+    description: 'Conecta con otros desarrolladores, encuentra mentores y oportunidades laborales.',
+  },
+]
 ---
-<div class="py-16 bg-gray-50 overflow-hidden">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+<div class="overflow-hidden bg-gray-50 py-16">
+  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
     <div class="lg:text-center">
-      <h2 class="text-base text-vue-green font-semibold tracking-wide uppercase">Sobre Nosotros</h2>
-      <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+      <h2 class="text-base font-semibold uppercase tracking-wide text-vue-green">Sobre Nosotros</h2>
+      <p class="mt-2 text-3xl font-extrabold leading-8 tracking-tight text-gray-900 sm:text-4xl">
         Una comunidad apasionada por Vue.js
       </p>
       <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
-        Somos un espacio para aprender, compartir y colaborar en el ecosistema de Vue.js, JavaScript y TypeScript.
-        Nuestra misión es impulsar el crecimiento profesional de los desarrolladores en Colombia.
+        Somos un espacio para aprender, compartir y colaborar en el ecosistema de Vue.js, JavaScript
+        y TypeScript. Nuestra misión es impulsar el crecimiento profesional de los desarrolladores
+        en Colombia.
       </p>
     </div>
 
     <div class="mt-16">
       <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
-        {features.map(feature => (
-          <div class="text-center">
-            <h3 class="text-lg font-medium text-gray-900">{feature.title}</h3>
-            <p class="mt-2 text-base text-gray-500">
-              {feature.description}
-            </p>
-          </div>
-        ))}
+        {
+          features.map((feature) => (
+            <div class="text-center">
+              <h3 class="text-lg font-medium text-gray-900">{feature.title}</h3>
+              <p class="mt-2 text-base text-gray-500">{feature.description}</p>
+            </div>
+          ))
+        }
       </div>
     </div>
   </div>
-</div>
+</div>

src/components/About.astro

@@ -3,15 +3,13 @@
 ---
 
 <div class="bg-vue-green">
-  <div
-    class="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 sm:py-20 lg:px-8"
-  >
+  <div class="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 sm:py-20 lg:px-8">
     <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
       <span class="block">¡Únete a nuestra comunidad!</span>
     </h2>
     <p class="mt-4 text-lg leading-6 text-white/90">
-      Forma parte de la comunidad Vue.js más activa de Colombia y mejora tus
-      habilidades como desarrollador.
+      Forma parte de la comunidad Vue.js más activa de Colombia y mejora tus habilidades como
+      desarrollador.
     </p>
     <a
       href="https://bit.ly/3E4PWlY"