🐛 - Fix mdx, tsx and ts prettier format files (#12)

claudiocoder · web-flow · commit 7457ca21639f · 2023-12-13T00:23:53.000-06:00
diff --git a/.prettierrc b/.prettierrc
@@ -1,7 +1,3 @@
 {
-  "trailingComma": "es5",
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 120
+  "tabWidth": 2
 }
diff --git a/package.json b/package.json
@@ -7,8 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "format": "prettier --check --ignore-path .gitignore .",
-    "format:fix": "prettier --write --ignore-path .gitignore ."
+    "format": "prettier --write 'src/**/*.{ts,tsx}'",
+    "format:fix": "prettier --write 'src/**/*.{ts,tsx}'"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
diff --git a/posts/blog/resources_developers.mdx b/posts/blog/resources_developers.mdx
@@ -11,7 +11,8 @@ author: Por claudio_coder
 <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. Es un sitio web que te enseña a programar de forma
 interactiva, con ejercicios donde tendrás que cumplir retos para poder avanzar al siguiente tema. Codecademy ofrece cursos
@@ -70,7 +71,8 @@ pasas el examen, puedes volver a revisar los temas que aprendiste e intentarlo c
 he tomado cursos de Inglés, React, JavaScript, Blockchain y diseño, y todos son muy completos y fáciles de entender.
 <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
diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx
@@ -1,48 +1,51 @@
-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>
-        <time dateTime={post.date} className="my-2 block text-sm w-full text-gray-600 text-left">
-          {format(parseISO(post.date), 'MMMM dd, yyyy')}
+        <time
+          dateTime={post.date}
+          className="my-2 block text-sm w-full text-gray-600 text-left"
+        >
+          {format(parseISO(post.date), "MMMM dd, yyyy")}
         </time>
         <p className="text-gray-500 italic text-sm">{post.author}</p>
       </div>
@@ -53,7 +56,7 @@ const BlogPage = async ({ params }: Props) => {
         <Footer />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default BlogPage
+export default BlogPage;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,17 +1,17 @@
-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">
@@ -29,5 +29,5 @@ export default function RootLayout({
         <GoogleAnalytics />
       </body>
     </html>
-  )
+  );
 }
diff --git a/src/app/loading.tsx b/src/app/loading.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>;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,19 +1,21 @@
-import { Metadata } from 'next'
-import { allBlogs } from 'contentlayer/generated'
-import { compareDesc } from 'date-fns'
-import Head from 'next/head'
-import PostCard from '@/components/PostCard'
+import { Metadata } from "next";
+import { allBlogs } from "contentlayer/generated";
+import { compareDesc } from "date-fns";
+import Head from "next/head";
+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)))
+  const posts = allBlogs.sort((a, b) =>
+    compareDesc(new Date(a.date), new Date(b.date)),
+  );
 
   return (
     <>
@@ -32,5 +34,5 @@ export default function Home() {
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,11 +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">
-      <Link href="/" className="font-bold underline underline-offset-4 text-gray-500">
+      <Link
+        href="/"
+        className="font-bold underline underline-offset-4 text-gray-500"
+      >
         Regresar
       </Link>
     </div>
-  )
+  );
 }
diff --git a/src/components/GoogleAnalytics.tsx b/src/components/GoogleAnalytics.tsx
@@ -1,10 +1,13 @@
-'use client'
-import Script from 'next/script'
+"use client";
+import Script from "next/script";
 
 export default function GoogleAnalytics() {
   return (
     <>
-      <Script async src={`https://www.googletagmanager.com/gtag/js?id=G-9JLBHQ70PM`} />
+      <Script
+        async
+        src={`https://www.googletagmanager.com/gtag/js?id=G-9JLBHQ70PM`}
+      />
       <Script id="ga-script">
         {`
             window.dataLayer = window.dataLayer || [];
@@ -15,5 +18,5 @@ export default function GoogleAnalytics() {
         `}
       </Script>
     </>
-  )
+  );
 }
diff --git a/src/components/Mdx.tsx b/src/components/Mdx.tsx
@@ -1,16 +1,26 @@
-import { useMDXComponent } from 'next-contentlayer/hooks'
-import Image from 'next/image'
+import { useMDXComponent } from "next-contentlayer/hooks";
+import Image from "next/image";
 interface Props {
-  code: string
+  code: string;
 }
 
 const components = {
   a: ({ ...props }: React.HTMLAttributes<HTMLAnchorElement>) => (
-    <a target="_blank" rel="noopener" {...props} className={'text-blue-700 text-2xl'} />
+    <a
+      target="_blank"
+      rel="noopener"
+      {...props}
+      className={"text-blue-700 text-2xl"}
+    />
+  ),
+  p: ({ ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
+    <p {...props} className={"text-justify"} />
   ),
-  p: ({ ...props }: React.HTMLAttributes<HTMLParagraphElement>) => <p {...props} className={'text-justify'} />,
   blockquote: ({ ...props }: React.HTMLAttributes<HTMLQuoteElement>) => (
-    <blockquote {...props} className={'border-l-4 border-red-400 mt-2 pl-4 italic'} />
+    <blockquote
+      {...props}
+      className={"border-l-4 border-red-400 mt-2 pl-4 italic"}
+    />
   ),
   img: ({ ...props }) => {
     return (
@@ -20,18 +30,20 @@ const components = {
         src={props.src}
         alt={props.alt}
         {...props}
-        className={'mx-auto shadow-[0_5px_15px_rgba(0,0,0,0.35)] mb-2 rounded-lg'}
+        className={
+          "mx-auto shadow-[0_5px_15px_rgba(0,0,0,0.35)] mb-2 rounded-lg"
+        }
       />
-    )
+    );
   },
-}
+};
 
 export function Mdx({ code }: Props) {
-  const Component = useMDXComponent(code)
+  const Component = useMDXComponent(code);
 
   return (
     <div className="prose prose-slate flex-1">
       <Component components={components} />
     </div>
-  )
+  );
 }
diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx
@@ -1,25 +1,36 @@
-import Link from 'next/link'
-import Image from 'next/image'
-import { Blog } from 'contentlayer/generated'
-import { format, parseISO } from 'date-fns'
-import { _roboto } from '@/utils/fonts'
+import Link from "next/link";
+import Image from "next/image";
+import { Blog } from "contentlayer/generated";
+import { format, parseISO } from "date-fns";
+import { _roboto } from "@/utils/fonts";
 
 const PostCard = (post: Blog) => {
   return (
     <div className="w-[100%] sm:w-[40%] shadow-[0_5px_15px_rgba(0,0,0,0.35)] rounded-md flex items-center bg-slate-50 rounded-l-lg">
       <div className="rounded-l-lg">
-        <Image width={180} height={150} src={post.thumbnailUrl} alt={post.title} className="rounded-l-lg" />
+        <Image
+          width={180}
+          height={150}
+          src={post.thumbnailUrl}
+          alt={post.title}
+          className="rounded-l-lg"
+        />
       </div>
       <div className="flex flex-col items-start px-3">
-        <h2 className={`${_roboto.className} mb-5 text-base sm:text-xl font-bold w-full text-left`}>
+        <h2
+          className={`${_roboto.className} mb-5 text-base sm:text-xl font-bold w-full text-left`}
+        >
           <Link href={post.slug}>{post.title}</Link>
         </h2>
-        <time dateTime={post.date} className="mb-2 block text-xs w-full text-gray-600 text-right">
-          {format(parseISO(post.date), 'MMMM dd, yyyy')}
+        <time
+          dateTime={post.date}
+          className="mb-2 block text-xs w-full text-gray-600 text-right"
+        >
+          {format(parseISO(post.date), "MMMM dd, yyyy")}
         </time>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default PostCard
+export default PostCard;
diff --git a/src/components/ProfileContainer.tsx b/src/components/ProfileContainer.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
-import Image from 'next/image'
-import { _roboto, _khula } from '@/utils/fonts'
-import SocialNetwork from './SocialNetworkContainer'
-import profileImage from '../assets/profile.jpg'
+import React from "react";
+import Image from "next/image";
+import { _roboto, _khula } from "@/utils/fonts";
+import SocialNetwork from "./SocialNetworkContainer";
+import profileImage from "../assets/profile.jpg";
 
 const ProfileContainer = () => {
   return (
@@ -18,14 +18,20 @@ const ProfileContainer = () => {
             height={200}
           />
         </div>
-        <h1 className={`${_roboto.className} text-xl font-bold mb-1 text-center`}>Hola, mi nombre es Claudio!</h1>
-        <h2 className={`${_khula.className} text-base mb-5 text-center`}>Software Developer</h2>
+        <h1
+          className={`${_roboto.className} text-xl font-bold mb-1 text-center`}
+        >
+          Hola, mi nombre es Claudio!
+        </h1>
+        <h2 className={`${_khula.className} text-base mb-5 text-center`}>
+          Software Developer
+        </h2>
         <div>
           <SocialNetwork></SocialNetwork>
         </div>
       </div>
     </>
-  )
-}
+  );
+};
 
-export default ProfileContainer
+export default ProfileContainer;
diff --git a/src/components/SocialNetworkContainer.tsx b/src/components/SocialNetworkContainer.tsx
diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts
diff --git a/src/utils/fonts.ts b/src/utils/fonts.ts
diff --git a/src/utils/metadata.ts b/src/utils/metadata.ts

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,3 @@`
`1`	`1`	`{`
`2`		`- "trailingComma": "es5",`
`3`		`- "tabWidth": 2,`
`4`		`- "semi": false,`
`5`		`- "singleQuote": true,`
`6`		`- "printWidth": 120`
	`2`	`+ "tabWidth": 2`
`7`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`export default function Loading() {`
`2`	`2`	`// You can add any UI inside Loading, including a Skeleton.`
`3`		`- return <div>Loading...</div>`
	`3`	`+ return <div>Loading...</div>;`
`4`	`4`	`}`