chore: prettier

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/core-web-vitals", "plugin:jest-dom/recommended"]
+  "extends": ["next/core-web-vitals", "plugin:jest-dom/recommended", "prettier"]
 }

.github/workflows/unit-test.yaml

@@ -13,4 +13,4 @@ jobs:
         with:
           node-version: 18
       - run: npm i
-      - run: npm run test
+      - run: npm run test

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc

@@ -0,0 +1 @@
+{}

README.md

@@ -1,13 +1,15 @@
 [![Unit tests](https://github.com/emiliosheinz/emiliosheinz.com/actions/workflows/unit-test.yaml/badge.svg)](https://github.com/emiliosheinz/emiliosheinz.com/actions/workflows/unit-test.yaml)
 
 # 🧙🏼‍♂️ emiliosheinz.com
+
 This repository is the home of all the code for my personal portfolio website. Here, you can discover more about me, my professional background, past experiences, and explore my blog posts.
 
 ## :computer: Preview
 
 <img width="1470" alt="Application preview" src="https://github.com/emiliosheinz/emiliosheinz.com/assets/103655828/6d23f93b-5257-4541-a92e-f4a1d6878c26">
 
 ## :fire: Used technologies
+
 - Next.js
 - React.js
 - Tailwind CSS

contentlayer.config.ts

@@ -1,54 +1,54 @@
-import { defineDocumentType, makeSource } from 'contentlayer/source-files'
-import rehypePrettyCode, { Options } from 'rehype-pretty-code'
+import { defineDocumentType, makeSource } from "contentlayer/source-files";
+import rehypePrettyCode, { Options } from "rehype-pretty-code";
 
 export const Post = defineDocumentType(() => ({
-  name: 'Post',
+  name: "Post",
   filePathPattern: `**/*.mdx`,
-  contentType: 'mdx',
+  contentType: "mdx",
   fields: {
-    title: { type: 'string', required: true },
-    publishedAt: { type: 'date', required: true },
-    description: { type: 'string', required: true },
+    title: { type: "string", required: true },
+    publishedAt: { type: "date", required: true },
+    description: { type: "string", required: true },
   },
   computedFields: {
     url: {
-      type: 'string',
-      resolve: post => post._raw.flattenedPath,
+      type: "string",
+      resolve: (post) => post._raw.flattenedPath,
     },
     image: {
-      type: 'string',
-      resolve: post => `/images/${post._raw.flattenedPath}/cover.webp`,
+      type: "string",
+      resolve: (post) => `/images/${post._raw.flattenedPath}/cover.webp`,
     },
     slug: {
-      type: 'string',
-      resolve: post => post._raw.sourceFileName.replace(/\.mdx$/, ''),
+      type: "string",
+      resolve: (post) => post._raw.sourceFileName.replace(/\.mdx$/, ""),
     },
   },
-}))
+}));
 
 export const Experience = defineDocumentType(() => ({
-  name: 'Experience',
+  name: "Experience",
   filePathPattern: `**/*.mdx`,
-  contentType: 'mdx',
+  contentType: "mdx",
   fields: {
-    title: { type: 'string', required: true },
-    company: { type: 'string', required: true },
-    employmentType: { type: 'string', required: true },
-    startDate: { type: 'date', required: true },
-    endDate: { type: 'date' },
-    skills: { type: 'list', required: true, of: { type: 'string' } },
+    title: { type: "string", required: true },
+    company: { type: "string", required: true },
+    employmentType: { type: "string", required: true },
+    startDate: { type: "date", required: true },
+    endDate: { type: "date" },
+    skills: { type: "list", required: true, of: { type: "string" } },
   },
-}))
+}));
 
 const rehypePrettyCodeOptions: Options = {
-  theme: 'dracula',
+  theme: "dracula",
   keepBackground: false,
-}
+};
 
 export default makeSource({
-  contentDirPath: './src/data',
+  contentDirPath: "./src/data",
   documentTypes: [Post, Experience],
   mdx: {
     rehypePlugins: [[rehypePrettyCode, rehypePrettyCodeOptions]],
   },
-})
+});

jest.config.mjs

@@ -1,36 +1,36 @@
-import nextJest from 'next/jest.js'
+import nextJest from "next/jest.js";
 
 const createJestConfig = nextJest({
-  dir: './',
-})
+  dir: "./",
+});
 
 const commonTestConfig = {
-  setupFilesAfterEnv: ['<rootDir>/src/config/jest.setup.ts'],
+  setupFilesAfterEnv: ["<rootDir>/src/config/jest.setup.ts"],
   moduleNameMapper: {
-    '^~/(.*)$': '<rootDir>/src/$1',
+    "^~/(.*)$": "<rootDir>/src/$1",
   },
-}
+};
 
 const clientTestConfig = {
   ...commonTestConfig,
-  displayName: 'client',
-  testEnvironment: 'jest-environment-jsdom',
-  testMatch: ['**/__tests__/client/*.[jt]s?(x)', '**/__tests__/*.[jt]s?(x)'],
-}
+  displayName: "client",
+  testEnvironment: "jest-environment-jsdom",
+  testMatch: ["**/__tests__/client/*.[jt]s?(x)", "**/__tests__/*.[jt]s?(x)"],
+};
 
 const serverTestConfig = {
   ...commonTestConfig,
-  displayName: 'server',
-  testEnvironment: 'node',
-  testMatch: ['**/__tests__/server/*.[jt]s?(x)'],
-}
+  displayName: "server",
+  testEnvironment: "node",
+  testMatch: ["**/__tests__/server/*.[jt]s?(x)"],
+};
 
 /** @type {import('jest').Config} */
 const config = {
   projects: [
     await createJestConfig(clientTestConfig)(),
     await createJestConfig(serverTestConfig)(),
   ],
-}
+};
 
-export default config
+export default config;

next.config.js

@@ -1,11 +1,11 @@
-const { withContentlayer } = require('next-contentlayer')
+const { withContentlayer } = require("next-contentlayer");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
     // Follows TailwindCSS screens breakpoints
     deviceSizes: [640, 768, 1024, 1280, 1536],
   },
-}
+};
 
-module.exports = withContentlayer(nextConfig)
+module.exports = withContentlayer(nextConfig);

package.json

@@ -40,8 +40,10 @@
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.10",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jest-dom": "^5.1.0",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0"
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "3.3.3"
   }
 }

postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: {
-    'tailwindcss/nesting': {},
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/app/experiences/page.tsx

@@ -1,25 +1,25 @@
-import { Metadata } from 'next'
-import { ExperienceCard } from '~/components/experience-card'
+import { Metadata } from "next";
+import { ExperienceCard } from "~/components/experience-card";
 
-import { experiences } from '~/content/experiences'
+import { experiences } from "~/content/experiences";
 
 export const metadata: Metadata = {
-  title: 'Experience',
-}
+  title: "Experience",
+};
 
 export default function ExperiencesPage() {
   return (
-    <div className='flex flex-col gap-8'>
-      <h1 className='font-bold text-4xl sm:text-5xl mb-2 sm:mb-5'>
+    <div className="flex flex-col gap-8">
+      <h1 className="font-bold text-4xl sm:text-5xl mb-2 sm:mb-5">
         Experience
       </h1>
-      {experiences.map(experience => (
+      {experiences.map((experience) => (
         <ExperienceCard
           {...experience}
           key={experience.title}
           description={experience.body}
         />
       ))}
     </div>
-  )
+  );
 }

src/app/globals.css

@@ -20,7 +20,7 @@
   }
 
   ::-webkit-scrollbar-corner {
-    background: rgba(0,0,0,0);
+    background: rgba(0, 0, 0, 0);
   }
 
   .mdx-article {

src/app/layout.tsx

@@ -1,40 +1,40 @@
-import './globals.css'
+import "./globals.css";
 
-import type { Metadata } from 'next'
-import { SpeedInsights } from '@vercel/speed-insights/next'
-import { Analytics } from '@vercel/analytics/react'
-import { Toaster } from 'react-hot-toast'
+import type { Metadata } from "next";
+import { SpeedInsights } from "@vercel/speed-insights/next";
+import { Analytics } from "@vercel/analytics/react";
+import { Toaster } from "react-hot-toast";
 
-import { Roboto_Mono } from 'next/font/google'
-import { Header } from '~/components/header'
-import { classNames } from '~/utils/css.utils'
-import { CommandBar } from '~/components/command-bar'
+import { Roboto_Mono } from "next/font/google";
+import { Header } from "~/components/header";
+import { classNames } from "~/utils/css.utils";
+import { CommandBar } from "~/components/command-bar";
 
 const robotoMono = Roboto_Mono({
-  subsets: ['latin'],
-  display: 'swap',
+  subsets: ["latin"],
+  display: "swap",
   preload: true,
-})
+});
 
-const title = 'Emilio Heinzmann'
+const title = "Emilio Heinzmann";
 const ogDescription =
-  'As an experienced Software Engineer graduated with a B.Sc. degree in Computer Science, I have been working on the development of applications that are daily accessed by thousands of users since 2019. I bring ideas to life through lines of code.'
+  "As an experienced Software Engineer graduated with a B.Sc. degree in Computer Science, I have been working on the development of applications that are daily accessed by thousands of users since 2019. I bring ideas to life through lines of code.";
 
 export const metadata: Metadata = {
-  metadataBase: new URL('https://emiliosheinz.com'),
+  metadataBase: new URL("https://emiliosheinz.com"),
   title: {
     default: title,
     template: `%s | ${title}`,
   },
   description: ogDescription,
   openGraph: {
     title,
-    type: 'website',
+    type: "website",
     siteName: title,
-    locale: 'en-US',
+    locale: "en-US",
     description: ogDescription,
-    images: '/images/profile.png',
-    url: 'https://emiliosheinz.com',
+    images: "/images/profile.png",
+    url: "https://emiliosheinz.com",
   },
   robots: {
     index: true,
@@ -46,40 +46,40 @@ export const metadata: Metadata = {
   },
   twitter: {
     title,
-    images: '/images/profile.png',
-    card: 'summary_large_image',
+    images: "/images/profile.png",
+    card: "summary_large_image",
   },
-}
+};
 
 type RootLayoutProps = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 function CustomToaster() {
   return (
     <Toaster
-      position='bottom-center'
+      position="bottom-center"
       toastOptions={{
         style: {
-          backgroundColor: '#1A1A1A',
-          color: '#FFFFFF',
+          backgroundColor: "#1A1A1A",
+          color: "#FFFFFF",
         },
       }}
     />
-  )
+  );
 }
 
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html
-      lang='en'
+      lang="en"
       className={classNames(
         robotoMono.className,
-        'bg-codGray-500 text-white scroll-smooth'
+        "bg-codGray-500 text-white scroll-smooth",
       )}
     >
       <CommandBar>
-        <body className='pb-10 pt-32 lg:pt-48 px-5 max-w-6xl m-auto'>
+        <body className="pb-10 pt-32 lg:pt-48 px-5 max-w-6xl m-auto">
           <Header />
           {children}
           <CustomToaster />
@@ -88,5 +88,5 @@ export default function RootLayout({ children }: RootLayoutProps) {
         </body>
       </CommandBar>
     </html>
-  )
+  );
 }