prettie and eslint rules applied in files

tarcisioandrade · Sep 27, 2023 · 412f176 · 412f176
1 parent e50db55
commit 412f176
Show file tree

Hide file tree

Showing 21 changed files with 103 additions and 98 deletions.
diff --git a/.gitignore b/.gitignore
@@ -37,5 +37,3 @@ next-env.d.ts
 
 # Contentlayer
 .contentlayer
-
-/posts
diff --git a/src/app/category/[slug]/page.tsx b/src/app/category/[slug]/page.tsx
@@ -1,9 +1,9 @@
+import React from "react";
 import { PostCard } from "@/components/post-card";
 import { Post } from "@/types/post";
 import { capitalize } from "@/utils/capitalize";
 import { allPosts } from "contentlayer/generated";
 import { Metadata } from "next";
-import React from "react";
 
 type Props = {
   params: { slug: string };
@@ -12,18 +12,18 @@ type Props = {
 export const generateMetadata = ({ params }: Props): Metadata => {
   const category = capitalize(params.slug.split("-").join(" "));
   return {
-    title: `${category} - Tarcisio Andrade`,
     category,
+    title: `${category} - Tarcisio Andrade`,
   };
 };
 
 const Page = ({ params }: Props) => {
   const posts = allPosts.filter((post) =>
     post.categories.some(
       (categ) =>
-        categ.toLowerCase().replace(/\s/g, "") ===
-        params.slug.split("-").join("")
-    )
+        categ.toLowerCase().replaceAll(/\s/g, "") ===
+        params.slug.split("-").join(""),
+    ),
   ) as Post[];
 
   const postCount = posts.length + (posts.length > 1 ? " Artigos" : " Artigo");
@@ -32,22 +32,22 @@ const Page = ({ params }: Props) => {
   return (
     <main className="main-container py-24">
       <div>
-        <span className="tracking-widest uppercase text-gray-600 text-sm mb-2">
+        <span className="mb-2 text-sm uppercase tracking-widest text-gray-600">
           Categoria
         </span>
-        <h1 className="uppercase text-4xl font-medium">{categoryToDysplay}</h1>
+        <h1 className="text-4xl font-medium uppercase">{categoryToDysplay}</h1>
       </div>
 
-      <div className="flex items-center gap-4 my-12 uppercase text-sm">
+      <div className="my-12 flex items-center gap-4 text-sm uppercase">
         <span>{postCount}</span>
-        <div className="border-b border-gray-200 dark:border-gray-800 flex-1"></div>
+        <div className="flex-1 border-b border-gray-200 dark:border-gray-800"></div>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 xl:ml-[-24px]">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:ml-[-24px]">
         {posts.map((post, i) => (
           <div
+            className="rounded-lg bg-slate-100 p-6 dark:bg-gray-800"
             key={`${post}-${i}`}
-            className="bg-slate-50 dark:bg-gray-800 rounded-lg p-6"
           >
             <PostCard {...post} />
           </div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,31 +1,33 @@
+import Footer from "@/components/footer";
 import Header from "@/components/header";
-import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
 import type { Metadata } from "next";
 import { Outfit } from "next/font/google";
-import Footer from "@/components/footer";
-import { ThemeProvider } from "@/components/theme-provider";
+
+import "./globals.css";
 
 const outfit = Outfit({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  metadataBase: new URL(process.env.DOMAIN_URL as string),
-  title: "Tarcisio Andrade Blog",
   description: "Artigos sobre react, typescript, testes e etc.",
+  metadataBase: new URL(process.env.DOMAIN_URL as string),
+  openGraph: {
+    description: "Artigos e tutoriais sobre react, typescript, testes e etc.",
+    images: "/op-default-img.png",
+    title: "Tarcisio Andrade",
+    type: "website",
+  },
   themeColor: [
     {
-      media: "(prefers-color-scheme: light)",
       color: "#fff",
+      media: "(prefers-color-scheme: light)",
     },
     {
-      media: "(prefers-color-scheme: dark)",
       color: "#0e141b",
+      media: "(prefers-color-scheme: dark)",
     },
   ],
-  openGraph: {
-    type: "website",
-    description: "Artigos e tutoriais sobre react, typescript, testes e etc.",
-    title: "Tarcisio Andrade Blog",
-  },
+  title: "Tarcisio Andrade",
 };
 
 export default function RootLayout({

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -8,17 +8,17 @@ import Link from "next/link";
 const posts = allPosts
   .filter(({ isPublished }) => isPublished)
   .sort((a, b) =>
-    compareDesc(new Date(a.publishedAt), new Date(b.publishedAt))
+    compareDesc(new Date(a.publishedAt), new Date(b.publishedAt)),
   );
 
 const categories = getUniqueCategories();
 
 export default async function Home() {
   return (
-    <main className="py-24 main-container min-h-[calc(100vh-70px-200px+6px)]">
+    <main className="main-container min-h-[calc(100vh-70px-200px+6px)] py-24">
       <div className="lg:grid lg:grid-cols-[minmax(400px,_630px)_1fr] lg:gap-20">
         <div>
-          <p className="uppercase tracking-wider text-lg text-blue-600 dark:text-amber-500 font-bold mb-8">
+          <p className="mb-8 text-lg font-bold uppercase tracking-wider text-blue-600 dark:text-amber-500">
             Publicado Recentemente
           </p>
           <div className="flex flex-col gap-12">
@@ -29,14 +29,14 @@ export default async function Home() {
         </div>
 
         <aside className="mt-16 lg:mt-0">
-          <p className="uppercase tracking-wider text-lg text-blue-600 dark:text-amber-500 font-bold">
+          <p className="text-lg font-bold uppercase tracking-wider text-blue-600 dark:text-amber-500">
             Categorias
           </p>
-          <ul className="flex flex-wrap gap-2 mt-8">
+          <ul className="mt-8 flex flex-wrap gap-2">
             {categories.map((categ, i) => (
               <li
+                className="cursor-pointer rounded-lg bg-blue-600 p-2 capitalize text-white transition-colors hover:bg-blue-600/90 dark:bg-amber-500 dark:text-background dark:hover:bg-amber-400"
                 key={`${categ}-${i}`}
-                className="bg-blue-600 dark:bg-amber-500 text-white dark:text-background rounded-lg p-2 cursor-pointer hover:bg-blue-600/90 dark:hover:bg-amber-400 transition-colors capitalize"
               >
                 <Link href={`/category/${slugger(categ)}`}>{categ}</Link>
               </li>

diff --git a/src/app/robots.ts b/src/app/robots.ts
@@ -3,8 +3,8 @@ import { MetadataRoute } from "next";
 export default function robots(): MetadataRoute.Robots {
   return {
     rules: {
-      userAgent: "*",
       allow: "/",
+      userAgent: "*",
     },
     sitemap: `${process.env.DOMAIN_URL}/sitemap.xml`,
   };

diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
@@ -6,21 +6,21 @@ const generateCategorySiteMap = (): MetadataRoute.Sitemap => {
   const cateries = getUniqueCategories();
 
   return cateries.map((categ) => ({
-    url: `${String(process.env.DOMAIN_URL)}/category/${slugger(categ)}`,
-    lastModified: new Date(),
     changeFrequency: "monthly",
+    lastModified: new Date(),
     priority: 0.8,
+    url: `${String(process.env.DOMAIN_URL)}/category/${slugger(categ)}`,
   }));
 };
 
 export default function sitemap(): MetadataRoute.Sitemap {
   const categoryMap = generateCategorySiteMap();
   return [
     {
-      url: String(process.env.DOMAIN_URL),
-      lastModified: new Date(),
       changeFrequency: "monthly",
+      lastModified: new Date(),
       priority: 1,
+      url: String(process.env.DOMAIN_URL),
     },
     ...categoryMap,
   ];

diff --git a/src/components/button-scroll-top.tsx b/src/components/button-scroll-top.tsx
@@ -1,20 +1,20 @@
 "use client";
 
+import React, { useCallback, useEffect, useState } from "react";
 import useThrottledFunction from "@/hooks/useThrottledFunction";
 import { cn } from "@/utils/cn";
 import { ChevronUp } from "lucide-react";
-import React, { useCallback, useEffect, useState } from "react";
+
+const goScrollToTop = () => {
+  window.scrollTo({
+    behavior: "smooth",
+    top: 0,
+  });
+};
 
 const ButtonScrollTop = () => {
   const [showButton, setShowButton] = useState(false);
 
-  const goScrollToTop = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth",
-    });
-  };
-
   const handleShowButton = useCallback(() => {
     const windowHeight = window.innerHeight;
     const scrollY = window.scrollY;
@@ -53,8 +53,8 @@ const ButtonScrollTop = () => {
   return (
     <div
       className={cn(
-        "hidden bg-slate-200 dark:bg-gray-900 rounded-xl fixed right-4 bottom-4 p-2 text-blue-500 dark:text-amber-500",
-        showButton && "block"
+        "fixed bottom-4 right-4 hidden rounded-xl bg-slate-200 p-2 text-blue-500 dark:bg-gray-900 dark:text-amber-500",
+        showButton && "block",
       )}
       onClick={goScrollToTop}
     >

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,20 +1,20 @@
-import Link from "next/link";
 import React from "react";
+import Link from "next/link";
 
 const Footer = () => {
   return (
-    <div className="bg-slate-100 dark:bg-gray-800 shadow-md sm:h-[200px] py-9">
-      <footer className="h-full main-container flex flex-col gap-12 sm:gap-0 sm:flex-row justify-around sm:justify-between">
+    <div className="bg-slate-100 py-9 shadow-md dark:bg-gray-800 sm:h-[200px]">
+      <footer className="main-container flex h-full flex-col justify-around gap-12 sm:flex-row sm:justify-between sm:gap-0">
         <div className="flex flex-col gap-4">
-          <Link href="/" className="text-2xl">
+          <Link className="text-2xl" href="/">
             Tarcisio Andrade
           </Link>
-          <span className="hidden sm:block text-gray-600 dark:text-gray-400 tracking-tight">
+          <span className="hidden tracking-tight text-gray-600 dark:text-gray-400 sm:block">
             © 2023, Tarcisio Andrade
           </span>
         </div>
         <div className="flex flex-col gap-4">
-          <span className="text-gray-600 dark:text-gray-400 tracking-tight">
+          <span className="tracking-tight text-gray-600 dark:text-gray-400">
             Links
           </span>
           <ul className="flex flex-col gap-2">
@@ -46,7 +46,7 @@ const Footer = () => {
             </li>
           </ul>
         </div>
-        <span className="sm:hidden text-gray-600 dark:text-gray-400 tracking-tight">
+        <span className="tracking-tight text-gray-600 dark:text-gray-400 sm:hidden">
           © 2023, Tarcisio Andrade
         </span>
       </footer>

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,11 +1,11 @@
 "use client";
 
+import React from "react";
 import { cn } from "@/utils/cn";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import React from "react";
 
 const Header = () => {
   const { setTheme, theme } = useTheme();
@@ -21,17 +21,17 @@ const Header = () => {
   return (
     <div
       className={cn(
-        "h-[70px] bg-white dark:bg-background shadow-md shadow-slate-100 dark:shadow-black/10",
-        isBlogPage && "xl:fixed xl:right-0 xl:left-0 xl:z-50"
+        "h-[70px] bg-white shadow-md shadow-slate-100 dark:bg-background dark:shadow-black/10",
+        isBlogPage && "xl:fixed xl:left-0 xl:right-0 xl:z-50",
       )}
     >
-      <header className="main-container flex items-center justify-between h-full">
-        <Link href="/" className="text-2xl">
+      <header className="main-container flex h-full items-center justify-between">
+        <Link className="text-2xl" href="/">
           Tarcisio Andrade
         </Link>
 
         <button
-          className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white focus-visible:outline-none focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 h-10 px-4 py-2 focus-visible:ring-0 focus-visible:ring-offset-0"
+          className="inline-flex h-10 items-center justify-center rounded-md px-4 py-2 text-sm font-medium ring-offset-white hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-slate-950 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:hover:bg-white/10 dark:focus-visible:ring-slate-300"
           onClick={handleTheme}
         >
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />

diff --git a/src/components/menu-toc.tsx b/src/components/menu-toc.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import React, { useCallback, useEffect, useState } from "react";
-import { cn } from "@/utils/cn";
-import { Toc } from "@/types/toc";
 import useThrottledFunction from "@/hooks/useThrottledFunction";
+import { Toc } from "@/types/toc";
+import { cn } from "@/utils/cn";
 
 type Props = {
   toc: Toc[];
@@ -16,7 +16,9 @@ const MenuToc = ({ toc }: Props) => {
     const headings = Array.from(document.querySelectorAll("h1, h2, h3"));
 
     const headingOffsets = headings.map((heading) => {
-      if (!heading.id) return;
+      if (!heading.id) {
+        return;
+      }
       const element = document.getElementById(heading.id);
       if (element) {
         return {
@@ -31,7 +33,9 @@ const MenuToc = ({ toc }: Props) => {
     const scrollPosition = window.scrollY + 240;
 
     for (let i = headingOffsets.length - 1; i >= 0; i--) {
-      if (!headingOffsets[i]) break;
+      if (!headingOffsets[i]) {
+        break;
+      }
       if (scrollPosition >= headingOffsets[i]!.offsetTop) {
         setActiveHeading(headingOffsets[i]!.id);
         break;
@@ -56,40 +60,40 @@ const MenuToc = ({ toc }: Props) => {
   }, [handleScroll, handleScrollThrottled]);
 
   return (
-    <aside className="hidden xl:block text-dark dark:text-light rounded-lg sticky top-1 max-h-[80vh] overflow-hidden overflow-y-auto">
+    <aside className="text-dark dark:text-light sticky top-1 hidden max-h-[80vh] overflow-hidden overflow-y-auto rounded-lg xl:block">
       <details open>
-        <summary className="mt-[164px] text-md font-semibold cursor-pointer uppercase tracking-widest">
+        <summary className="text-md mt-[164px] cursor-pointer font-semibold uppercase tracking-widest">
           Tabela de Conteúdo
         </summary>
         <ul className="mt-4 text-base">
           <li className="py-1">
             <a
-              href={`#introduction`}
-              data-level="one"
               className={cn(
-                "flex items-center justify-start text-gray-500 font-medium hover:text-blue-600 dark:hover:text-amber-500 transition-colors",
+                "flex items-center justify-start font-medium text-gray-500 transition-colors hover:text-blue-600 dark:hover:text-amber-500",
                 activeHeading === "introduction" &&
-                  "dark:text-amber-500 text-blue-600"
+                  "text-blue-600 dark:text-amber-500",
               )}
+              data-level="one"
+              href={`#introduction`}
             >
               Introdução
             </a>
           </li>
-          {toc.map(({ slug, level, text }) => {
+          {toc.map(({ level, slug, text }) => {
             const isActive = slug === activeHeading;
 
             return (
-              <li key={`#${slug}`} className="py-1">
+              <li className="py-1" key={`#${slug}`}>
                 <a
-                  href={`#${slug}`}
-                  data-level={level}
                   className={cn(
-                    "data-[level=two]:pl-2 data-[level=three]:pl-4 sm:data-[level=three]:pl-6 flex items-center justify-start text-gray-500 font-medium hover:text-blue-600 dark:hover:text-amber-500 transition-colors",
-                    isActive && "dark:text-amber-500 text-blue-600"
+                    "flex items-center justify-start font-medium text-gray-500 transition-colors hover:text-blue-600 data-[level=three]:pl-4 data-[level=two]:pl-2 dark:hover:text-amber-500 sm:data-[level=three]:pl-6",
+                    isActive && "text-blue-600 dark:text-amber-500",
                   )}
+                  data-level={level}
+                  href={`#${slug}`}
                 >
                   {level === "three" ? (
-                    <span className="flex w-1 h-1 rounded-full bg-dark mr-2">
+                    <span className="bg-dark mr-2 flex h-1 w-1 rounded-full">
                       &nbsp;
                     </span>
                   ) : null}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -37,5 +37,3 @@ next-env.d.ts

		# Contentlayer
		.contentlayer

		/posts