✨ - Improve prettier format styles (#21)

Author: claudiocoder

.prettierrc

@@ -1,3 +1,10 @@
 {
-  "tabWidth": 2
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 80,
+  "jsxSingleQuote": true,
+  "arrowParens": "avoid",
+  "trailingComma": "es5"
 }

contentlayer.config.ts

@@ -16,7 +16,7 @@ export const Blog = defineDocumentType(() => ({
   computedFields: {
     slug: {
       type: 'string',
-      resolve: (post) => post._raw.sourceFileName.replace('.mdx', ''),
+      resolve: post => post._raw.sourceFileName.replace('.mdx', ''),
     },
   },
 }))

package-lock.json

@@ -7,8 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "format": "prettier --write 'src/**/*.{ts,tsx}'",
-    "format:fix": "prettier --write 'src/**/*.{ts,tsx}'"
+    "format": "prettier --check .",
+    "format:fix": "prettier --write ."
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.3.0",

package.json

@@ -8,20 +8,24 @@ author: Por claudio_coder
 
 ![](/blog/apps.png 'Image generated by OpenAI DALL-E')
 
-<p className="text-xs text-center mx-auto text-gray-600 italic">Image created with OpenAI</p>
+<p className='text-xs text-center mx-auto text-gray-600 italic'>
+  Image created with OpenAI
+</p>
 <br />
 <br />
-# [Codecademy](https://www.codecademy.com/) 
-> Gratis y versión de pago | Inglés
+# [Codecademy](https://www.codecademy.com/) > Gratis y versión de pago | Inglés
 <br />
-Codecademy fue el primer sitio web donde empecé a aprender a programar. Te enseña a programar de forma
-interactiva, con ejercicios donde tendrás que cumplir retos para poder avanzar al siguiente tema, ofrece cursos
-de **HTML & CSS (Básico e Intermedio), Javascript, Python, Ruby, PHP, Java, SQL, Bash/Shell, Swift, C++, R, C#, Go, Kotlin,
-y Sass** y todos los años agregan nuevos temas a su catálogo. Ofrece una versión gratis y una versión de pago, la versión
-gratis te permite acceder a todos los cursos, pero no te permite acceder a los proyectos de certificación. En lo personal,
-nunca he necesitado pagar la versión de pago para aprender un tema, pero si eres un nuevo programador y quieres mejorar tu
-portafolio, la versión de pago te ayudaría a crear proyectos que puedas mostrar a tus futuros empleadores. Una ventaja de
-Codecademy es que al terminar cada curso te da un certificado de finalización.
+Codecademy fue el primer sitio web donde empecé a aprender a programar. Te enseña
+a programar de forma interactiva, con ejercicios donde tendrás que cumplir retos
+para poder avanzar al siguiente tema, ofrece cursos de **HTML & CSS (Básico e Intermedio),
+Javascript, Python, Ruby, PHP, Java, SQL, Bash/Shell, Swift, C++, R, C#, Go, Kotlin,
+y Sass** y todos los años agregan nuevos temas a su catálogo. Ofrece una versión
+gratis y una versión de pago, la versión gratis te permite acceder a todos los cursos,
+pero no te permite acceder a los proyectos de certificación. En lo personal, nunca
+he necesitado pagar la versión de pago para aprender un tema, pero si eres un nuevo
+programador y quieres mejorar tu portafolio, la versión de pago te ayudaría a crear
+proyectos que puedas mostrar a tus futuros empleadores. Una ventaja de Codecademy
+es que al terminar cada curso te da un certificado de finalización.
 <br />
 ![](/blog/codecademy.png 'https://www.codecademy.com/')
 <br />
@@ -32,15 +36,19 @@ Codecademy es que al terminar cada curso te da un certificado de finalización.
 > Versión de pago | Inglés
 
 <br />
-Frontend Masters es la plataforma que actualmente utilizo para mantenerme actualizado en mi carrera profesional y una de
-mis favoritas en los últimos meses. Dentro de su catálogo ofrece cursos de programación enfocada en el desarrollo web Frontend, que
-abarca temas desde los básicos de **HTML, CSS y JavaScript** hasta conceptos más avanzados como **React, Vue, Angular, Astro, Remix,
-GraphQL, entre otros,** además también podrás encontrar cursos de Backend con **NodeJS, Python, PHP y hasta
-cursos de diseño UI/UX.** Todos los cursos son impartidos por expertos de la industria que trabajan en empresas como **Netflix,
-Google, Stripe.** Uno de mis cursos favoritos es el de Qwik, impartido por su creador, Misko Hevery. A pesar de que
-los cursos se imparten en inglés, son muy visuales y fáciles de entender, incluso con un nivel básico o intermedio de inglés.
-Una de las razones por las que recomiendo Frontend Masters es que sus cursos son breves y concisos, lo que te permite aplicar
-rápidamente lo aprendido en tus proyectos profesionales al finalizarlos.
+Frontend Masters es la plataforma que actualmente utilizo para mantenerme actualizado
+en mi carrera profesional y una de mis favoritas en los últimos meses. Dentro de
+su catálogo ofrece cursos de programación enfocada en el desarrollo web Frontend,
+que abarca temas desde los básicos de **HTML, CSS y JavaScript** hasta conceptos
+más avanzados como **React, Vue, Angular, Astro, Remix, GraphQL, entre otros,** además
+también podrás encontrar cursos de Backend con **NodeJS, Python, PHP y hasta cursos
+de diseño UI/UX.** Todos los cursos son impartidos por expertos de la industria que
+trabajan en empresas como **Netflix, Google, Stripe.** Uno de mis cursos favoritos
+es el de Qwik, impartido por su creador, Misko Hevery. A pesar de que los cursos
+se imparten en inglés, son muy visuales y fáciles de entender, incluso con un nivel
+básico o intermedio de inglés. Una de las razones por las que recomiendo Frontend
+Masters es que sus cursos son breves y concisos, lo que te permite aplicar rápidamente
+lo aprendido en tus proyectos profesionales al finalizarlos.
 <br />
 ![](/blog/frontendmasters.jpg 'https://frontendmasters.com/')
 <br />
@@ -51,12 +59,15 @@ rápidamente lo aprendido en tus proyectos profesionales al finalizarlos.
 > Versión de pago, pero con cursos gratis, ofrece bootcamps y certificaciones | Español
 
 <br />
-Código Facilito fue una de las primeras plataformas de educación en línea en español que conocí. Gracias a CodigoFacilito,
-elegi mi carrera profesional como Frontend Developer. Iniciaron como un canal de YouTube donde subían tutoriales de programación,
-y ahora son una **plataforma de educación en línea con cursos frontend, backend, Mobile y diseño**. Código Facilito es ideal
-para aquellos que quieren aprender desde cero e ir avanzando hasta un nivel intermedio, suficiente para poder trabajar como
-desarrollador junior. Durante todo el año, ofrecen bootcamps de diferentes temas que podrás tomar haciendo un mínimo pago.
-Al finalizar el bootcamp, obtendrás un certificado de finalización. Excelente si lo que quieres en aprender o reforzar temas
+Código Facilito fue una de las primeras plataformas de educación en línea en español
+que conocí. Gracias a CodigoFacilito, elegi mi carrera profesional como Frontend
+Developer. Iniciaron como un canal de YouTube donde subían tutoriales de programación,
+y ahora son una **plataforma de educación en línea con cursos frontend, backend,
+Mobile y diseño**. Código Facilito es ideal para aquellos que quieren aprender desde
+cero e ir avanzando hasta un nivel intermedio, suficiente para poder trabajar como
+desarrollador junior. Durante todo el año, ofrecen bootcamps de diferentes temas
+que podrás tomar haciendo un mínimo pago. Al finalizar el bootcamp, obtendrás un
+certificado de finalización. Excelente si lo que quieres en aprender o reforzar temas
 específicos de programación.
 <br />
 ![](/blog/codigo_facilito.jpg 'https://codigofacilito.com/')
@@ -67,28 +78,34 @@ específicos de programación.
 > Versión de pago, pero con cursos gratis | Español
 
 <br />
-Platzi es una de las plataformas de educación en línea más populares en Latinoamérica. En Platzi, no solo encontrarás cursos
-de programación, sino también de negocios, marketing, diseño, entre otros. Personalmente, he tomado varios cursos de programación
-en Platzi y me han parecido muy buenos. Una de las cosas que más me gusta de Platzi es que en la mayoría de sus cursos, irás
-construyendo un proyecto al mismo tiempo que aprendes la tecnología. Al finalizar, tendrás un proyecto básico que podrás
-mostrar en tu portafolio y mejorar con los cursos siguientes que tomes. Al completar cada curso, tendrás que realizar un
-examen para obtener tu certificado de finalización. Esto es muy útil para reforzar los conocimientos aprendidos, y si no
-pasas el examen, puedes volver a revisar los temas que aprendiste e intentarlo cuantas veces sea necesario. Personalmente,
-he tomado **cursos de Inglés, React, JavaScript, Blockchain y diseño**, y todos son muy completos y fáciles de entender.
+Platzi es una de las plataformas de educación en línea más populares en Latinoamérica.
+En Platzi, no solo encontrarás cursos de programación, sino también de negocios,
+marketing, diseño, entre otros. Personalmente, he tomado varios cursos de programación
+en Platzi y me han parecido muy buenos. Una de las cosas que más me gusta de Platzi
+es que en la mayoría de sus cursos, irás construyendo un proyecto al mismo tiempo
+que aprendes la tecnología. Al finalizar, tendrás un proyecto básico que podrás mostrar
+en tu portafolio y mejorar con los cursos siguientes que tomes. Al completar cada
+curso, tendrás que realizar un examen para obtener tu certificado de finalización.
+Esto es muy útil para reforzar los conocimientos aprendidos, y si no pasas el examen,
+puedes volver a revisar los temas que aprendiste e intentarlo cuantas veces sea necesario.
+Personalmente, he tomado **cursos de Inglés, React, JavaScript, Blockchain y diseño**,
+y todos son muy completos y fáciles de entender.
 <br />
 ![](/blog/platzi.jpg 'https://codigofacilito.com/')
 <br />
 <br />
-# [Treehouse](https://teamtreehouse.com/) 
-> Versión de pago | Inglés
+# [Treehouse](https://teamtreehouse.com/) > Versión de pago | Inglés
 <br />
-Treehouse es una plataforma de educación en línea que ofrece cursos de programación y diseño. Aunque no he utilizado la
-plataforma por mucho tiempo, he disfrutado mucho del contenido de sus cursos. Treehouse ofrece trayectorias de carrera
-ya predefinidas; lo único que debes hacer es elegir el área en la que te quieres especializar, y ellos te darán
-el orden para tomar los cursos. Lo que más me gusta de Treehouse es la calidad de sus cursos: son muy completos y
-fáciles de entender, además de contar con una excelente edición. Treehouse cuenta con una versión de pago llamada
-Techdegree, que te brinda acceso a proyectos de certificación y asesoría personalizada durante todo tu proceso de
-aprendizaje. **Si no tienes idea por dónde empezar en el mundo de la programación, Treehouse es una excelente opción para
-dar tus primeros pasos.**
+Treehouse es una plataforma de educación en línea que ofrece cursos de
+programación y diseño. Aunque no he utilizado la plataforma por mucho tiempo, he
+disfrutado mucho del contenido de sus cursos. Treehouse ofrece trayectorias de
+carrera ya predefinidas; lo único que debes hacer es elegir el área en la que te
+quieres especializar, y ellos te darán el orden para tomar los cursos. Lo que
+más me gusta de Treehouse es la calidad de sus cursos: son muy completos y
+fáciles de entender, además de contar con una excelente edición. Treehouse
+cuenta con una versión de pago llamada Techdegree, que te brinda acceso a
+proyectos de certificación y asesoría personalizada durante todo tu proceso de
+aprendizaje. **Si no tienes idea por dónde empezar en el mundo de la
+programación, Treehouse es una excelente opción para dar tus primeros pasos.**
 <br />
 ![](/blog/treehouse.png 'https://codigofacilito.com/')

posts/blog/resources_developers.mdx

@@ -1,62 +1,62 @@
-import { allBlogs } from "contentlayer/generated";
-import { notFound } from "next/navigation";
-import { format, parseISO } from "date-fns";
-import Footer from "@/components/Footer";
-import { Mdx } from "@/components/Mdx";
-import metadata from "@/utils/metadata";
+import { allBlogs } from 'contentlayer/generated'
+import { notFound } from 'next/navigation'
+import { format, parseISO } from 'date-fns'
+import Footer from '@/components/Footer'
+import { Mdx } from '@/components/Mdx'
+import metadata from '@/utils/metadata'
 
 type Props = {
   params: {
-    slug: string;
-  };
-};
+    slug: string
+  }
+}
 
 const getDocFromParams = ({ params }: Props) => {
-  const doc = allBlogs.find((doc) => doc.slug === params.slug);
+  const doc = allBlogs.find(doc => doc.slug === params.slug)
 
-  return doc ?? null;
-};
+  return doc ?? null
+}
 
 export const generateMetadata = async ({ params }: Props) => {
-  const doc = await getDocFromParams({ params });
+  const doc = await getDocFromParams({ params })
   if (!doc) {
-    return {};
+    return {}
   }
   return metadata({
     title: doc.title,
     description: doc.description,
     path: `/${doc.slug}`,
     image: `/${doc.thumbnailUrl}`,
-  });
-};
+  })
+}
 
 const BlogPage = async ({ params }: Props) => {
-  const post = await getDocFromParams({ params });
+  const post = await getDocFromParams({ params })
 
   if (!post) {
-    notFound();
+    notFound()
   }
 
   return (
-    <div className="flex flex-col my-8 sm:px-[5%]">
-      <div className="sm:pl-[5%] sm:pr-[15%] mb-4 sm:mb-8">
-        <h1 className="text-2xl sm:text-4xl font-black">{post.title}</h1>
+    <div className='flex flex-col my-8 sm:px-[5%]'>
+      <div className='sm:pl-[5%] sm:pr-[15%] mb-4 sm:mb-8'>
+        <h1 className='text-2xl sm:text-4xl font-black'>{post.title}</h1>
         <time
           dateTime={post.date}
-          className="my-2 block text-sm w-full text-gray-600 text-left"
+          className='my-2 block text-sm w-full text-gray-600 text-left'
         >
-          {format(parseISO(post.date), "MMMM dd, yyyy")}
+          {format(parseISO(post.date), 'MMMM dd, yyyy')}
         </time>
-        <p className="text-gray-500 italic text-sm">{post.author}</p>
+        <p className='text-gray-500 italic text-sm'>{post.author}</p>
       </div>
-      <div className="sm:pl-[5%] sm:pr-[15%] h-[70vh] mb-4 overflow-auto">
+      <div className='sm:pl-[5%] sm:pr-[15%] h-[70vh] mb-4 overflow-auto'>
         <Mdx code={post.body.code} />
       </div>
-      <div className="pt-6 pl-[5%]">
+      <div className='pt-6 pl-[5%]'>
         <Footer />
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default BlogPage;
+export default BlogPage

src/app/[slug]/page.tsx

@@ -1,33 +1,33 @@
-import { _roboto } from "@/utils/fonts";
-import { config } from "@fortawesome/fontawesome-svg-core";
-import "@fortawesome/fontawesome-svg-core/styles.css";
-import "@/styles/globals.css";
-import ProfileContainer from "@/components/ProfileContainer";
-import GoogleAnalytics from "@/components/GoogleAnalytics";
-config.autoAddCss = false;
+import { _roboto } from '@/utils/fonts'
+import { config } from '@fortawesome/fontawesome-svg-core'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+import '@/styles/globals.css'
+import ProfileContainer from '@/components/ProfileContainer'
+import GoogleAnalytics from '@/components/GoogleAnalytics'
+config.autoAddCss = false
 
 export default function RootLayout({
   // Layouts must accept a children prop.
   // This will be populated with nested layouts or pages
   children,
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
 }) {
   return (
-    <html lang="es">
+    <html lang='es'>
       <body className={_roboto.className}>
-        <div className="p-5 sm:pl-5 h-screen">
-          <div className="flex flex-col sm:flex-row column w-full">
-            <div className="w-full sm:w-1/5 flex justify-center mb-8">
+        <div className='p-5 sm:pl-5 h-screen'>
+          <div className='flex flex-col sm:flex-row column w-full'>
+            <div className='w-full sm:w-1/5 flex justify-center mb-8'>
               <ProfileContainer />
             </div>
-            <div className="w-full sm:w-4/5 flex justify-center sm:justify-start">
-              <div className="w-[100%]">{children}</div>
+            <div className='w-full sm:w-4/5 flex justify-center sm:justify-start'>
+              <div className='w-[100%]'>{children}</div>
             </div>
           </div>
         </div>
         <GoogleAnalytics />
       </body>
     </html>
-  );
+  )
 }

src/app/layout.tsx

@@ -1,4 +1,4 @@
 export default function Loading() {
   // You can add any UI inside Loading, including a Skeleton.
-  return <div>Loading...</div>;
+  return <div>Loading...</div>
 }

src/app/loading.tsx

@@ -1,31 +1,31 @@
-import { Metadata } from "next";
-import { allBlogs } from "contentlayer/generated";
-import { compareDesc } from "date-fns";
-import PostCard from "@/components/PostCard";
+import { Metadata } from 'next'
+import { allBlogs } from 'contentlayer/generated'
+import { compareDesc } from 'date-fns'
+import PostCard from '@/components/PostCard'
 
 export const metadata: Metadata = {
   title: `Claudio's Page`,
-  description: "Claudio Coder Blog",
+  description: 'Claudio Coder Blog',
   icons: {
-    icon: "images/favicon.ico",
+    icon: 'images/favicon.ico',
   },
-};
+}
 
 export default function Home() {
   const posts = allBlogs.sort((a, b) =>
-    compareDesc(new Date(a.date), new Date(b.date)),
-  );
+    compareDesc(new Date(a.date), new Date(b.date))
+  )
 
   return (
     <>
-      <div className="sm:m-8">
-        <h1 className="mb-6 sm:mb-8 text-3xl font-black">Blog</h1>
-        <div className="flex flex-wrap gap-5">
+      <div className='sm:m-8'>
+        <h1 className='mb-6 sm:mb-8 text-3xl font-black'>Blog</h1>
+        <div className='flex flex-wrap gap-5'>
           {posts.map((post, idx) => (
             <PostCard key={idx} {...post} />
           ))}
         </div>
       </div>
     </>
-  );
+  )
 }

src/app/page.tsx

@@ -1,14 +1,14 @@
-import Link from "next/link";
+import Link from 'next/link'
 
 export default function Footer() {
   return (
-    <div className="p-2 border-l-4 text-gray-500">
+    <div className='p-2 border-l-4 text-gray-500'>
       <Link
-        href="/"
-        className="font-bold underline underline-offset-4 text-gray-500"
+        href='/'
+        className='font-bold underline underline-offset-4 text-gray-500'
       >
         Regresar
       </Link>
     </div>
-  );
+  )
 }