🔨 setting up eslint & prettier

.eslintrc.cjs

@@ -0,0 +1,25 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  plugins: ['jsx-a11y'],
+  extends: ['plugin:astro/recommended', 'plugin:jsx-a11y/recommended'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+    ecmaVersion: 'latest'
+  },
+  overrides: [
+    {
+      files: ['*.astro'],
+      parser: 'astro-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        extraFileExtensions: ['.astro']
+      },
+      rules: {
+        // override/add rules settings here, such as:
+        // "astro/no-set-html-directive": "error"
+      }
+    }
+  ]
+}

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+bun lint

.vscode/settings.json

@@ -7,5 +7,25 @@
   },
   "yaml.schemas": {
     "https://json.schemastore.org/github-workflow.json": "file:///home/jamerrq/dev/astro/jamerrq.dev/.github/workflows/deploy.yml"
-  }
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "astro",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.formatOnSave": true,
+  "cSpell.words": [
+    "astro"
+  ],
+  "cSpell.ignorePaths": [
+    "package-lock.json",
+    "node_modules",
+    "vscode-extension",
+    ".git/objects",
+    ".vscode",
+    ".vscode-insiders",
+    "package.json"
+  ]
 }

package.json

@@ -16,10 +16,18 @@
     "build": "astro check && astro build",
     "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
     "astro": "astro",
-    "lint": "eslint --ext .js,.astro src"
+    "lint": "prettier --write \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\" && eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\""
   },
   "type": "module",
   "devDependencies": {
+    "@typescript-eslint/parser": "^6.17.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-astro": "^0.31.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "husky": "^8.0.3",
+    "prettier": "^3.1.1",
+    "prettier-config-standard": "^7.0.0",
+    "prettier-plugin-astro": "^0.12.3",
     "sass": "^1.69.6",
     "tailwindcss-debug-screens": "^2.2.1"
   }

prettier.config.cjs

@@ -0,0 +1,14 @@
+/** @type {import("prettier").Config} */
+module.exports = {
+  // i am just using the standard config, change if you need something else
+  ...require('prettier-config-standard'),
+  plugins: [require.resolve('prettier-plugin-astro')],
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro'
+      }
+    }
+  ]
+}

public/fonts/FiraMonoNerd/readme.md

@@ -1,8 +1,8 @@
-
 # Nerd Fonts
 
 This is an archived font from a Nerd Fonts release.
 
 For more information see:
-* https://github.com/ryanoasis/nerd-fonts/
-* https://github.com/ryanoasis/nerd-fonts/releases/latest/
+
+- https://github.com/ryanoasis/nerd-fonts/
+- https://github.com/ryanoasis/nerd-fonts/releases/latest/

src/components/about-me-card.astro

@@ -28,45 +28,54 @@ const ABOUT_ME_STYLES = [
   '[&>p]:font-fira',
   '[&>p]:text-base',
   'text-slate-900',
-  'dark:text-slate-300',
+  'dark:text-slate-300'
 ].join(' ')
 ---
 
-<article class={ABOUT_ME_STYLES} title="Get to know me">
+<article class={ABOUT_ME_STYLES} title='Get to know me'>
   <h1>About Me</h1>
-  <div class="flex items-center p-2 justify-around w-full font-merriweather responsive-text-xxs">
+  <div
+    class='flex items-center p-2 justify-around w-full font-merriweather responsive-text-xxs'
+  >
     <div>
-      <p class="">
-        <p class="font-fira inline">
-          
-        </p>
+      <p class=''>
+        <p class='font-fira inline'></p>
         My name is Jamer José, I'm a Math Engineer from
-        <a href="https://www.eafit.edu.co/" rel="noopener noreferrer" target="_blank" class="text-blue-800 dark:text-blue-300">
+        <a
+          href='https://www.eafit.edu.co/'
+          rel='noopener noreferrer'
+          target='_blank'
+          class='text-blue-800 dark:text-blue-300'
+        >
           EAFIT University
         </a>.
       </p>
       <p>
-        <p class="font-fira inline">
-          󰜐
-        </p>
+        <p class='font-fira inline'>󰜐</p>
         Currently working as part time Backend Developer at
-        <a href="https://www.linkedin.com/showcase/dium-team/about/" rel="noopener noreferrer" target="_blank" class="text-blue-800 dark:text-blue-300">
+        <a
+          href='https://www.linkedin.com/showcase/dium-team/about/'
+          rel='noopener noreferrer'
+          target='_blank'
+          class='text-blue-800 dark:text-blue-300'
+        >
           Dium
         </a>.
       </p>
       <p>
-        <p class="font-fira inline">
-          󰮮
-        </p>
-        Big fan of the open source and the web, as well as the great possibilities they offer.
+        <p class='font-fira inline'>󰮮</p>
+        Big fan of the open source and the web, as well as the great possibilities
+        they offer.
       </p>
       <p>
-        <p class="font-fira inline">
-          
-        </p>
+        <p class='font-fira inline'></p>
         My goal is to build quality software that is secure and scalable.
       </p>
     </div>
-    <img src="/me2.webp" alt="" class="w-[15%] h-auto rounded-sm border-2 border-slate-300 hidden lg:block">
+    <img
+      src='/me2.webp'
+      alt=''
+      class='w-[15%] h-auto rounded-sm border-2 border-slate-300 hidden lg:block'
+    />
   </div>
 </article>

src/components/bento.astro

@@ -1,32 +1,32 @@
 ---
-import AboutMe from './about-me-card.astro';
-import Title from './title.astro';
-import Experience from './experience.astro';
-import Buttons from './buttons.astro';
-import TechStack from './tech-stack.astro';
-import Featured from './featured.astro';
-import Blog from './blog.astro';
-import Socials from './socials.astro';
+import AboutMe from './about-me-card.astro'
+import Title from './title.astro'
+import Experience from './experience.astro'
+import Buttons from './buttons.astro'
+import TechStack from './tech-stack.astro'
+import Featured from './featured.astro'
+import Blog from './blog.astro'
+import Socials from './socials.astro'
 
 const BENTO_STYLES = [
-	'bg-[#1b383c]',
+  'bg-[#1b383c]',
   'grid',
-	'items-center',
-	'justify-center',
-	'w-[95dvw]',
-	'h-[95dvh]',
-	'content-center',
-	'rounded-sm',
-	'shadow-xl',
-	'border-2',
+  'items-center',
+  'justify-center',
+  'w-[95dvw]',
+  'h-[95dvh]',
+  'content-center',
+  'rounded-sm',
+  'shadow-xl',
+  'border-2',
   'grid-cols-6',
   'grid-rows-6',
   'gap-3',
-  'p-3',
-].join(' ');
+  'p-3'
+].join(' ')
 ---
 
-<div class={BENTO_STYLES} id="bento-grid">
+<div class={BENTO_STYLES} id='bento-grid'>
   <AboutMe />
   <Buttons />
   <TechStack />

src/components/blog.astro

@@ -25,11 +25,11 @@ const BLOG_STYLES = [
   'dark:text-teal-300',
   'hover:scale-[1.02]',
   'hover:duration-200',
-  'hover:ease-in-out',
-].join(' ');
+  'hover:ease-in-out'
+].join(' ')
 ---
 
-<a class={BLOG_STYLES} title="Personal Blog" href="/blog">
+<a class={BLOG_STYLES} title='Personal Blog' href='/blog'>
   <p>Blog</p>
-  <p class="font-fira font-thin"></p>
+  <p class='font-fira font-thin'></p>
 </a>