Skip to content

Commit 212cf89

Browse files
authored
✨ - Improve prettier format styles (#21)
1 parent 1bd25e8 commit 212cf89

19 files changed

+431
-257
lines changed

.prettierrc

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
{
2-
"tabWidth": 2
2+
"semi": false,
3+
"singleQuote": true,
4+
"tabWidth": 2,
5+
"useTabs": false,
6+
"printWidth": 80,
7+
"jsxSingleQuote": true,
8+
"arrowParens": "avoid",
9+
"trailingComma": "es5"
310
}

contentlayer.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const Blog = defineDocumentType(() => ({
1616
computedFields: {
1717
slug: {
1818
type: 'string',
19-
resolve: (post) => post._raw.sourceFileName.replace('.mdx', ''),
19+
resolve: post => post._raw.sourceFileName.replace('.mdx', ''),
2020
},
2121
},
2222
}))

package-lock.json

Lines changed: 198 additions & 54 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
"build": "next build",
88
"start": "next start",
99
"lint": "next lint",
10-
"format": "prettier --write 'src/**/*.{ts,tsx}'",
11-
"format:fix": "prettier --write 'src/**/*.{ts,tsx}'"
10+
"format": "prettier --check .",
11+
"format:fix": "prettier --write ."
1212
},
1313
"dependencies": {
1414
"@fortawesome/fontawesome-svg-core": "^6.3.0",

posts/blog/resources_developers.mdx

Lines changed: 61 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,24 @@ author: Por claudio_coder
88

99
![](/blog/apps.png 'Image generated by OpenAI DALL-E')
1010

11-
<p className="text-xs text-center mx-auto text-gray-600 italic">Image created with OpenAI</p>
11+
<p className='text-xs text-center mx-auto text-gray-600 italic'>
12+
Image created with OpenAI
13+
</p>
1214
<br />
1315
<br />
14-
# [Codecademy](https://www.codecademy.com/)
15-
> Gratis y versión de pago | Inglés
16+
# [Codecademy](https://www.codecademy.com/) > Gratis y versión de pago | Inglés
1617
<br />
17-
Codecademy fue el primer sitio web donde empecé a aprender a programar. Te enseña a programar de forma
18-
interactiva, con ejercicios donde tendrás que cumplir retos para poder avanzar al siguiente tema, ofrece cursos
19-
de **HTML & CSS (Básico e Intermedio), Javascript, Python, Ruby, PHP, Java, SQL, Bash/Shell, Swift, C++, R, C#, Go, Kotlin,
20-
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
21-
gratis te permite acceder a todos los cursos, pero no te permite acceder a los proyectos de certificación. En lo personal,
22-
nunca he necesitado pagar la versión de pago para aprender un tema, pero si eres un nuevo programador y quieres mejorar tu
23-
portafolio, la versión de pago te ayudaría a crear proyectos que puedas mostrar a tus futuros empleadores. Una ventaja de
24-
Codecademy es que al terminar cada curso te da un certificado de finalización.
18+
Codecademy fue el primer sitio web donde empecé a aprender a programar. Te enseña
19+
a programar de forma interactiva, con ejercicios donde tendrás que cumplir retos
20+
para poder avanzar al siguiente tema, ofrece cursos de **HTML & CSS (Básico e Intermedio),
21+
Javascript, Python, Ruby, PHP, Java, SQL, Bash/Shell, Swift, C++, R, C#, Go, Kotlin,
22+
y Sass** y todos los años agregan nuevos temas a su catálogo. Ofrece una versión
23+
gratis y una versión de pago, la versión gratis te permite acceder a todos los cursos,
24+
pero no te permite acceder a los proyectos de certificación. En lo personal, nunca
25+
he necesitado pagar la versión de pago para aprender un tema, pero si eres un nuevo
26+
programador y quieres mejorar tu portafolio, la versión de pago te ayudaría a crear
27+
proyectos que puedas mostrar a tus futuros empleadores. Una ventaja de Codecademy
28+
es que al terminar cada curso te da un certificado de finalización.
2529
<br />
2630
![](/blog/codecademy.png 'https://www.codecademy.com/')
2731
<br />
@@ -32,15 +36,19 @@ Codecademy es que al terminar cada curso te da un certificado de finalización.
3236
> Versión de pago | Inglés
3337
3438
<br />
35-
Frontend Masters es la plataforma que actualmente utilizo para mantenerme actualizado en mi carrera profesional y una de
36-
mis favoritas en los últimos meses. Dentro de su catálogo ofrece cursos de programación enfocada en el desarrollo web Frontend, que
37-
abarca temas desde los básicos de **HTML, CSS y JavaScript** hasta conceptos más avanzados como **React, Vue, Angular, Astro, Remix,
38-
GraphQL, entre otros,** además también podrás encontrar cursos de Backend con **NodeJS, Python, PHP y hasta
39-
cursos de diseño UI/UX.** Todos los cursos son impartidos por expertos de la industria que trabajan en empresas como **Netflix,
40-
Google, Stripe.** Uno de mis cursos favoritos es el de Qwik, impartido por su creador, Misko Hevery. A pesar de que
41-
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.
42-
Una de las razones por las que recomiendo Frontend Masters es que sus cursos son breves y concisos, lo que te permite aplicar
43-
rápidamente lo aprendido en tus proyectos profesionales al finalizarlos.
39+
Frontend Masters es la plataforma que actualmente utilizo para mantenerme actualizado
40+
en mi carrera profesional y una de mis favoritas en los últimos meses. Dentro de
41+
su catálogo ofrece cursos de programación enfocada en el desarrollo web Frontend,
42+
que abarca temas desde los básicos de **HTML, CSS y JavaScript** hasta conceptos
43+
más avanzados como **React, Vue, Angular, Astro, Remix, GraphQL, entre otros,** además
44+
también podrás encontrar cursos de Backend con **NodeJS, Python, PHP y hasta cursos
45+
de diseño UI/UX.** Todos los cursos son impartidos por expertos de la industria que
46+
trabajan en empresas como **Netflix, Google, Stripe.** Uno de mis cursos favoritos
47+
es el de Qwik, impartido por su creador, Misko Hevery. A pesar de que los cursos
48+
se imparten en inglés, son muy visuales y fáciles de entender, incluso con un nivel
49+
básico o intermedio de inglés. Una de las razones por las que recomiendo Frontend
50+
Masters es que sus cursos son breves y concisos, lo que te permite aplicar rápidamente
51+
lo aprendido en tus proyectos profesionales al finalizarlos.
4452
<br />
4553
![](/blog/frontendmasters.jpg 'https://frontendmasters.com/')
4654
<br />
@@ -51,12 +59,15 @@ rápidamente lo aprendido en tus proyectos profesionales al finalizarlos.
5159
> Versión de pago, pero con cursos gratis, ofrece bootcamps y certificaciones | Español
5260
5361
<br />
54-
Código Facilito fue una de las primeras plataformas de educación en línea en español que conocí. Gracias a CodigoFacilito,
55-
elegi mi carrera profesional como Frontend Developer. Iniciaron como un canal de YouTube donde subían tutoriales de programación,
56-
y ahora son una **plataforma de educación en línea con cursos frontend, backend, Mobile y diseño**. Código Facilito es ideal
57-
para aquellos que quieren aprender desde cero e ir avanzando hasta un nivel intermedio, suficiente para poder trabajar como
58-
desarrollador junior. Durante todo el año, ofrecen bootcamps de diferentes temas que podrás tomar haciendo un mínimo pago.
59-
Al finalizar el bootcamp, obtendrás un certificado de finalización. Excelente si lo que quieres en aprender o reforzar temas
62+
Código Facilito fue una de las primeras plataformas de educación en línea en español
63+
que conocí. Gracias a CodigoFacilito, elegi mi carrera profesional como Frontend
64+
Developer. Iniciaron como un canal de YouTube donde subían tutoriales de programación,
65+
y ahora son una **plataforma de educación en línea con cursos frontend, backend,
66+
Mobile y diseño**. Código Facilito es ideal para aquellos que quieren aprender desde
67+
cero e ir avanzando hasta un nivel intermedio, suficiente para poder trabajar como
68+
desarrollador junior. Durante todo el año, ofrecen bootcamps de diferentes temas
69+
que podrás tomar haciendo un mínimo pago. Al finalizar el bootcamp, obtendrás un
70+
certificado de finalización. Excelente si lo que quieres en aprender o reforzar temas
6071
específicos de programación.
6172
<br />
6273
![](/blog/codigo_facilito.jpg 'https://codigofacilito.com/')
@@ -67,28 +78,34 @@ específicos de programación.
6778
> Versión de pago, pero con cursos gratis | Español
6879
6980
<br />
70-
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
71-
de programación, sino también de negocios, marketing, diseño, entre otros. Personalmente, he tomado varios cursos de programación
72-
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
73-
construyendo un proyecto al mismo tiempo que aprendes la tecnología. Al finalizar, tendrás un proyecto básico que podrás
74-
mostrar en tu portafolio y mejorar con los cursos siguientes que tomes. Al completar cada curso, tendrás que realizar un
75-
examen para obtener tu certificado de finalización. Esto es muy útil para reforzar los conocimientos aprendidos, y si no
76-
pasas el examen, puedes volver a revisar los temas que aprendiste e intentarlo cuantas veces sea necesario. Personalmente,
77-
he tomado **cursos de Inglés, React, JavaScript, Blockchain y diseño**, y todos son muy completos y fáciles de entender.
81+
Platzi es una de las plataformas de educación en línea más populares en Latinoamérica.
82+
En Platzi, no solo encontrarás cursos de programación, sino también de negocios,
83+
marketing, diseño, entre otros. Personalmente, he tomado varios cursos de programación
84+
en Platzi y me han parecido muy buenos. Una de las cosas que más me gusta de Platzi
85+
es que en la mayoría de sus cursos, irás construyendo un proyecto al mismo tiempo
86+
que aprendes la tecnología. Al finalizar, tendrás un proyecto básico que podrás mostrar
87+
en tu portafolio y mejorar con los cursos siguientes que tomes. Al completar cada
88+
curso, tendrás que realizar un examen para obtener tu certificado de finalización.
89+
Esto es muy útil para reforzar los conocimientos aprendidos, y si no pasas el examen,
90+
puedes volver a revisar los temas que aprendiste e intentarlo cuantas veces sea necesario.
91+
Personalmente, he tomado **cursos de Inglés, React, JavaScript, Blockchain y diseño**,
92+
y todos son muy completos y fáciles de entender.
7893
<br />
7994
![](/blog/platzi.jpg 'https://codigofacilito.com/')
8095
<br />
8196
<br />
82-
# [Treehouse](https://teamtreehouse.com/)
83-
> Versión de pago | Inglés
97+
# [Treehouse](https://teamtreehouse.com/) > Versión de pago | Inglés
8498
<br />
85-
Treehouse es una plataforma de educación en línea que ofrece cursos de programación y diseño. Aunque no he utilizado la
86-
plataforma por mucho tiempo, he disfrutado mucho del contenido de sus cursos. Treehouse ofrece trayectorias de carrera
87-
ya predefinidas; lo único que debes hacer es elegir el área en la que te quieres especializar, y ellos te darán
88-
el orden para tomar los cursos. Lo que más me gusta de Treehouse es la calidad de sus cursos: son muy completos y
89-
fáciles de entender, además de contar con una excelente edición. Treehouse cuenta con una versión de pago llamada
90-
Techdegree, que te brinda acceso a proyectos de certificación y asesoría personalizada durante todo tu proceso de
91-
aprendizaje. **Si no tienes idea por dónde empezar en el mundo de la programación, Treehouse es una excelente opción para
92-
dar tus primeros pasos.**
99+
Treehouse es una plataforma de educación en línea que ofrece cursos de
100+
programación y diseño. Aunque no he utilizado la plataforma por mucho tiempo, he
101+
disfrutado mucho del contenido de sus cursos. Treehouse ofrece trayectorias de
102+
carrera ya predefinidas; lo único que debes hacer es elegir el área en la que te
103+
quieres especializar, y ellos te darán el orden para tomar los cursos. Lo que
104+
más me gusta de Treehouse es la calidad de sus cursos: son muy completos y
105+
fáciles de entender, además de contar con una excelente edición. Treehouse
106+
cuenta con una versión de pago llamada Techdegree, que te brinda acceso a
107+
proyectos de certificación y asesoría personalizada durante todo tu proceso de
108+
aprendizaje. **Si no tienes idea por dónde empezar en el mundo de la
109+
programación, Treehouse es una excelente opción para dar tus primeros pasos.**
93110
<br />
94111
![](/blog/treehouse.png 'https://codigofacilito.com/')

src/app/[slug]/page.tsx

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,62 @@
1-
import { allBlogs } from "contentlayer/generated";
2-
import { notFound } from "next/navigation";
3-
import { format, parseISO } from "date-fns";
4-
import Footer from "@/components/Footer";
5-
import { Mdx } from "@/components/Mdx";
6-
import metadata from "@/utils/metadata";
1+
import { allBlogs } from 'contentlayer/generated'
2+
import { notFound } from 'next/navigation'
3+
import { format, parseISO } from 'date-fns'
4+
import Footer from '@/components/Footer'
5+
import { Mdx } from '@/components/Mdx'
6+
import metadata from '@/utils/metadata'
77

88
type Props = {
99
params: {
10-
slug: string;
11-
};
12-
};
10+
slug: string
11+
}
12+
}
1313

1414
const getDocFromParams = ({ params }: Props) => {
15-
const doc = allBlogs.find((doc) => doc.slug === params.slug);
15+
const doc = allBlogs.find(doc => doc.slug === params.slug)
1616

17-
return doc ?? null;
18-
};
17+
return doc ?? null
18+
}
1919

2020
export const generateMetadata = async ({ params }: Props) => {
21-
const doc = await getDocFromParams({ params });
21+
const doc = await getDocFromParams({ params })
2222
if (!doc) {
23-
return {};
23+
return {}
2424
}
2525
return metadata({
2626
title: doc.title,
2727
description: doc.description,
2828
path: `/${doc.slug}`,
2929
image: `/${doc.thumbnailUrl}`,
30-
});
31-
};
30+
})
31+
}
3232

3333
const BlogPage = async ({ params }: Props) => {
34-
const post = await getDocFromParams({ params });
34+
const post = await getDocFromParams({ params })
3535

3636
if (!post) {
37-
notFound();
37+
notFound()
3838
}
3939

4040
return (
41-
<div className="flex flex-col my-8 sm:px-[5%]">
42-
<div className="sm:pl-[5%] sm:pr-[15%] mb-4 sm:mb-8">
43-
<h1 className="text-2xl sm:text-4xl font-black">{post.title}</h1>
41+
<div className='flex flex-col my-8 sm:px-[5%]'>
42+
<div className='sm:pl-[5%] sm:pr-[15%] mb-4 sm:mb-8'>
43+
<h1 className='text-2xl sm:text-4xl font-black'>{post.title}</h1>
4444
<time
4545
dateTime={post.date}
46-
className="my-2 block text-sm w-full text-gray-600 text-left"
46+
className='my-2 block text-sm w-full text-gray-600 text-left'
4747
>
48-
{format(parseISO(post.date), "MMMM dd, yyyy")}
48+
{format(parseISO(post.date), 'MMMM dd, yyyy')}
4949
</time>
50-
<p className="text-gray-500 italic text-sm">{post.author}</p>
50+
<p className='text-gray-500 italic text-sm'>{post.author}</p>
5151
</div>
52-
<div className="sm:pl-[5%] sm:pr-[15%] h-[70vh] mb-4 overflow-auto">
52+
<div className='sm:pl-[5%] sm:pr-[15%] h-[70vh] mb-4 overflow-auto'>
5353
<Mdx code={post.body.code} />
5454
</div>
55-
<div className="pt-6 pl-[5%]">
55+
<div className='pt-6 pl-[5%]'>
5656
<Footer />
5757
</div>
5858
</div>
59-
);
60-
};
59+
)
60+
}
6161

62-
export default BlogPage;
62+
export default BlogPage

src/app/layout.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
1-
import { _roboto } from "@/utils/fonts";
2-
import { config } from "@fortawesome/fontawesome-svg-core";
3-
import "@fortawesome/fontawesome-svg-core/styles.css";
4-
import "@/styles/globals.css";
5-
import ProfileContainer from "@/components/ProfileContainer";
6-
import GoogleAnalytics from "@/components/GoogleAnalytics";
7-
config.autoAddCss = false;
1+
import { _roboto } from '@/utils/fonts'
2+
import { config } from '@fortawesome/fontawesome-svg-core'
3+
import '@fortawesome/fontawesome-svg-core/styles.css'
4+
import '@/styles/globals.css'
5+
import ProfileContainer from '@/components/ProfileContainer'
6+
import GoogleAnalytics from '@/components/GoogleAnalytics'
7+
config.autoAddCss = false
88

99
export default function RootLayout({
1010
// Layouts must accept a children prop.
1111
// This will be populated with nested layouts or pages
1212
children,
1313
}: {
14-
children: React.ReactNode;
14+
children: React.ReactNode
1515
}) {
1616
return (
17-
<html lang="es">
17+
<html lang='es'>
1818
<body className={_roboto.className}>
19-
<div className="p-5 sm:pl-5 h-screen">
20-
<div className="flex flex-col sm:flex-row column w-full">
21-
<div className="w-full sm:w-1/5 flex justify-center mb-8">
19+
<div className='p-5 sm:pl-5 h-screen'>
20+
<div className='flex flex-col sm:flex-row column w-full'>
21+
<div className='w-full sm:w-1/5 flex justify-center mb-8'>
2222
<ProfileContainer />
2323
</div>
24-
<div className="w-full sm:w-4/5 flex justify-center sm:justify-start">
25-
<div className="w-[100%]">{children}</div>
24+
<div className='w-full sm:w-4/5 flex justify-center sm:justify-start'>
25+
<div className='w-[100%]'>{children}</div>
2626
</div>
2727
</div>
2828
</div>
2929
<GoogleAnalytics />
3030
</body>
3131
</html>
32-
);
32+
)
3333
}

src/app/loading.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
export default function Loading() {
22
// You can add any UI inside Loading, including a Skeleton.
3-
return <div>Loading...</div>;
3+
return <div>Loading...</div>
44
}

src/app/page.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
import { Metadata } from "next";
2-
import { allBlogs } from "contentlayer/generated";
3-
import { compareDesc } from "date-fns";
4-
import PostCard from "@/components/PostCard";
1+
import { Metadata } from 'next'
2+
import { allBlogs } from 'contentlayer/generated'
3+
import { compareDesc } from 'date-fns'
4+
import PostCard from '@/components/PostCard'
55

66
export const metadata: Metadata = {
77
title: `Claudio's Page`,
8-
description: "Claudio Coder Blog",
8+
description: 'Claudio Coder Blog',
99
icons: {
10-
icon: "images/favicon.ico",
10+
icon: 'images/favicon.ico',
1111
},
12-
};
12+
}
1313

1414
export default function Home() {
1515
const posts = allBlogs.sort((a, b) =>
16-
compareDesc(new Date(a.date), new Date(b.date)),
17-
);
16+
compareDesc(new Date(a.date), new Date(b.date))
17+
)
1818

1919
return (
2020
<>
21-
<div className="sm:m-8">
22-
<h1 className="mb-6 sm:mb-8 text-3xl font-black">Blog</h1>
23-
<div className="flex flex-wrap gap-5">
21+
<div className='sm:m-8'>
22+
<h1 className='mb-6 sm:mb-8 text-3xl font-black'>Blog</h1>
23+
<div className='flex flex-wrap gap-5'>
2424
{posts.map((post, idx) => (
2525
<PostCard key={idx} {...post} />
2626
))}
2727
</div>
2828
</div>
2929
</>
30-
);
30+
)
3131
}

src/components/Footer.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import Link from "next/link";
1+
import Link from 'next/link'
22

33
export default function Footer() {
44
return (
5-
<div className="p-2 border-l-4 text-gray-500">
5+
<div className='p-2 border-l-4 text-gray-500'>
66
<Link
7-
href="/"
8-
className="font-bold underline underline-offset-4 text-gray-500"
7+
href='/'
8+
className='font-bold underline underline-offset-4 text-gray-500'
99
>
1010
Regresar
1111
</Link>
1212
</div>
13-
);
13+
)
1414
}

0 commit comments

Comments
 (0)