chore(repo): add husky pre-push

brunocroh · Jun 1, 2024 · 27f0c9c · 27f0c9c
1 parent 97f9adb
commit 27f0c9c
Show file tree

Hide file tree

Showing 10 changed files with 401 additions and 139 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -10,8 +10,7 @@
   "plugins": ["tailwindcss"],
   "rules": {
     "@next/next/no-html-link-for-pages": "off",
-    "tailwindcss/no-custom-classname": "off",
-    "tailwindcss/classnames-order": "error"
+    "tailwindcss/no-custom-classname": "off"
   },
   "settings": {
     "tailwindcss": {

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+pnpm run lint
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -0,0 +1 @@
+pnpm run build
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,23 +1,17 @@
 /** @type {import('prettier').Config} */
 module.exports = {
-  endOfLine: "lf",
+  endOfLine: 'lf',
   semi: false,
   singleQuote: true,
   tabWidth: 2,
-  trailingComma: "es5",
-  importOrderSeparation: false,
-  importOrderSortSpecifiers: true,
-  importOrderBuiltinModulesToTop: true,
-  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
-  importOrderMergeDuplicateImports: true,
-  importOrderCombineTypeAndValueImports: true,
+  trailingComma: 'es5',
   plugins: [
-    "@trivago/prettier-plugin-sort-imports",
-    "prettier-plugin-tailwindcss",
+    '@trivago/prettier-plugin-sort-imports',
+    'prettier-plugin-tailwindcss',
   ],
-  importOrder: ["^react", "^next", "<THIRD_PARTY_MODULES>", "^@", "^[./]"],
+  importOrder: ['^react', '^next', '<THIRD_PARTY_MODULES>', '^@', '^[./]'],
   importOrderSeparation: false,
   importOrderSortSpecifiers: true,
   importOrderCaseInsensitive: true,
-  tailwindConfig: "./apps/web/tailwind.config.ts",
+  tailwindConfig: './apps/web/tailwind.config.ts',
 }
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -1,20 +1,21 @@
+import type { Metadata } from 'next'
+import Image from 'next/image'
+import { GeistSans } from 'geist/font/sans'
+import { Header } from '@/components/header'
 import { GoogleAnalytics } from '@next/third-parties/google'
-import "./globals.css";
-import { GeistSans } from "geist/font/sans";
-import Image from "next/image";
-import { Header } from "@/components/header";
-import type { Metadata } from 'next';
+import './globals.css'
 
 export const metadata: Metadata = {
   title: 'Bolhadev.chat',
-  description: 'A free way for Brazilian developers to improve their English skills.',
+  description:
+    'A free way for Brazilian developers to improve their English skills.',
   metadataBase: new URL('https://bolhadev.chat'),
-};
+}
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
 }): JSX.Element {
   return (
     <html lang="en" className={GeistSans.className}>
@@ -25,12 +26,12 @@ export default function RootLayout({
           alt="Purple light ray"
           width="1000"
           height="800"
-          className="animate-in fade-in slide-in-from-bottom-1 absolute -z-10 size-full"
-          style={{ color: "transparent", animationDuration: "10s" }}
+          className="size-full absolute -z-10 animate-in fade-in slide-in-from-bottom-1"
+          style={{ color: 'transparent', animationDuration: '10s' }}
         />
         {children}
       </body>
       <GoogleAnalytics gaId="G-STY9BKWKT4" />
     </html>
-  );
+  )
 }
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -1,40 +1,48 @@
-import React from "react";
-import Link from "next/link";
-
-import { ChevronRight, Dumbbell, Heart, MessageCircle, PiggyBank } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { InfoCard } from "./components/info-card";
+import React from 'react'
+import Link from 'next/link'
+import {
+  ChevronRight,
+  Dumbbell,
+  Heart,
+  MessageCircle,
+  PiggyBank,
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { InfoCard } from './components/info-card'
 
 const infoCardContent = [
   {
     icon: MessageCircle,
-    content: 'The most effective way to improve your English is through speaking.'
+    content:
+      'The most effective way to improve your English is through speaking.',
   },
   {
     icon: Dumbbell,
-    content: 'Enhance your English skills quickly by practicing a little every day.'
+    content:
+      'Enhance your English skills quickly by practicing a little every day.',
   },
   {
     icon: Heart,
-    content: 'Show respect, patience, and kindness to everyone.'
+    content: 'Show respect, patience, and kindness to everyone.',
   },
   {
     icon: PiggyBank,
-    content: "And best of all, it's completely free."
-  }
+    content: "And best of all, it's completely free.",
+  },
 ]
 
-
 export default function Page(): JSX.Element {
   return (
     <main className="flex flex-col">
       <section className="flex w-full flex-col lg:container lg:flex-row-reverse">
         <div className="z-10 mt-16 flex w-full flex-col justify-center p-10 lg:w-1/2">
-          <h2
-            className="text-slate-6 w-full text-center text-[3rem] leading-10">
+          <h2 className="text-slate-6 w-full text-center text-[3rem] leading-10">
             Practice English for free
           </h2>
-          <h3 className="my-4 text-center text-[1rem] text-slate-400">The quickest path to learn English is speaking it regularly. Just find someone to chat with.</h3>
+          <h3 className="my-4 text-center text-[1rem] text-slate-400">
+            The quickest path to learn English is speaking it regularly. Just
+            find someone to chat with.
+          </h3>
           <div className="flex w-full justify-center">
             <Link href={`room/queue`}>
               <Button className="h-12 min-w-max rounded-full text-base font-semibold text-black">
@@ -48,9 +56,9 @@ export default function Page(): JSX.Element {
           <video
             className="-z-20 w-full max-w-2xl"
             style={{
-              display: "block",
-              width: "700px",
-              height: "500px",
+              display: 'block',
+              width: '700px',
+              height: '500px',
             }}
             playsInline
             loop={true}
@@ -61,19 +69,23 @@ export default function Page(): JSX.Element {
         </div>
       </section>
       <section
-        style={{boxShadow: "0px -20px 44px -60px rgb(255 255 255)"}}
-        className="border-slate-6 relative mt-10 flex flex-col items-center overflow-hidden rounded-3xl border-t px-6 py-12 lg:container sm:mx-5 sm:py-24 md:mx-10 lg:mx-auto">
+        style={{ boxShadow: '0px -20px 44px -60px rgb(255 255 255)' }}
+        className="border-slate-6 relative mt-10 flex flex-col items-center overflow-hidden rounded-3xl border-t px-6 py-12 lg:container sm:mx-5 sm:py-24 md:mx-10 lg:mx-auto"
+      >
         <div
           aria-hidden="true"
           className="center pointer-events-none absolute -top-1 left-1/2 -z-20 h-[200px] w-full max-w-[200px] -translate-x-1/2 -translate-y-1/2 md:max-w-[400px]"
           style={{
-            background: "conic-gradient(from 90deg at 50% 50%, #00000000 50%, #000 50%),radial-gradient(rgba(200,200,200,0.1) 0%, transparent 80%)"
+            background:
+              'conic-gradient(from 90deg at 50% 50%, #00000000 50%, #000 50%),radial-gradient(rgba(200,200,200,0.1) 0%, transparent 80%)',
           }}
-          />
+        />
         <div className="mt-10 flex w-full flex-col flex-wrap items-center justify-center gap-10 md:flex-row">
-          {infoCardContent.map((card, i) => <InfoCard icon={card.icon} content={card.content} key={i}/>)}
+          {infoCardContent.map((card, i) => (
+            <InfoCard icon={card.icon} content={card.content} key={i} />
+          ))}
         </div>
       </section>
     </main>
-  );
+  )
 }