Merge pull request #4 from LucasHenriqueDiniz/fix-vercel-build

fix: vercel build
LucasHenriqueDiniz · Nov 6, 2024 · eaa6af0 · eaa6af0
2 parents b032eba + 8b1e866
commit eaa6af0
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 70 deletions.
diff --git a/package.json b/package.json
@@ -56,6 +56,12 @@
     "prettier-plugin-tailwindcss": "^0.5.7",
     "tailwindcss": "^3.4.14",
     "tsx": "^4.19.2",
-    "typescript": "^5.4.0"
+    "typescript": "^5.4.0",
+    "postcss-loader": "^7.3.4",
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0",
+    "postcss": "^8.4.31",
+    "postcss-import": "^15.1.0",
+    "postcss-nesting": "^12.0.2"
   }
 }
diff --git a/vercel.json b/vercel.json
@@ -1,5 +1,6 @@
 {
   "version": 2,
   "buildCommand": "yarn build",
-  "outputDirectory": "web-client/.next"
+  "outputDirectory": "web-client/.next",
+  "framework": "nextjs"
 }
diff --git a/web-client/app/global.css b/web-client/app/global.css
@@ -1,4 +1,5 @@
 @import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/violet.css";
 
 @tailwind base;
 @tailwind components;

diff --git a/...ient/components/GithubBody/githubBody.css → ...mponents/GithubBody/GithubBody.module.css b/...ient/components/GithubBody/githubBody.css → ...mponents/GithubBody/GithubBody.module.css
@@ -1,4 +1,4 @@
-.readme-container {
+.readmeContainer {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -11,7 +11,7 @@
   height: fit-content;
 }
 
-.readme-header {
+.readmeHeader {
   line-height: 1.5;
   color: var(--fgColor-default, var(--color-fg-default));
   word-wrap: break-word;
@@ -29,7 +29,7 @@
     monospace !important;
 }
 
-.color-fg-muted {
+.colorFgMuted {
   color: var(--fgColor-muted);
   font-family: inherit;
 }
@@ -46,59 +46,57 @@
     monospace !important;
 }
 
-.profile-container {
+.profileContainer {
   --horizontalPadding: 16px;
   --verticalPadding: 24px;
   flex-grow: 1;
   padding: var(--verticalPadding) var(--horizontalPadding);
   overflow: hidden;
 }
 
-.profile-main {
+.profileMain {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   max-width: 1280px;
 }
 
 @media (min-width: 768px) {
-  .profile-main {
+  .profileMain {
     flex-direction: row;
   }
 }
 
-.profile-left-side {
+.profileLeftSide {
   padding: 0 var(--horizontalPadding);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji";
   border: 0;
   background: none;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji";
   color: var(--fgColor-default);
   transition: color 0.2s ease-out;
   margin: 0;
   box-sizing: border-box;
 }
 
 @media (min-width: 768px) {
-  .profile-left-side {
+  .profileLeftSide {
     width: 25%;
   }
 }
 
-.profile-right-side {
+.profileRightSide {
   padding: 0 var(--horizontalPadding);
   min-height: 80vh;
 }
 
 @media (min-width: 768px) {
-  .profile-right-side {
+  .profileRightSide {
     width: 75%;
   }
 }
 
-.tab-container {
+.tabContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -113,10 +111,12 @@
   transition: background-color 0.2s ease-out;
   width: 100%;
   text-align: center;
-  &:hover {
-    background-color: var(--bgColor-hover);
-  }
-  &.selected {
-    background-color: var(--bgColor-active);
-  }
+}
+
+.tab:hover {
+  background-color: var(--bgColor-hover);
+}
+
+.tab.selected {
+  background-color: var(--bgColor-active);
 }
diff --git a/web-client/components/GithubBody/GithubBody.tsx b/web-client/components/GithubBody/GithubBody.tsx
@@ -8,7 +8,7 @@ import "styles/main.css"
 import "styles/terminal.css"
 import useStore from "web-client/app/store"
 import ActionsTab from "./ActionsTab"
-import "./GithubBody.css"
+import styles from "./GithubBody.module.css"
 import MarkdownTab from "./MarkdownTab"
 
 const PreviewTab = dynamic(() => import("./PreviewTab"), { ssr: false })
@@ -20,38 +20,38 @@ const GithubBody = () => {
 
   return (
     <div className="flex h-full flex-col">
-      <div className="profile-container">
-        <main className="profile-main flex flex-1">
-          <div className="profile-left-side w-1/4 p-4">
+      <div className={styles.profileContainer}>
+        <main className={styles.profileMain}>
+          <div className={styles.profileLeftSide}>
             <SidebarContainer />
           </div>
-          <div className="profile-right-side flex-1 p-4">
-            <div className="tab-container flex justify-center space-x-4">
+          <div className={styles.profileRightSide}>
+            <div className={styles.tabContainer}>
               <button
-                className={`tab ${selectedTab === "preview" ? "selected" : ""}`}
+                className={`${styles.tab} ${selectedTab === "preview" ? styles.selected : ""}`}
                 onClick={() => setSelectedTab("preview")}
               >
                 Preview
               </button>
               <button
-                className={`tab ${selectedTab === "actions" ? "selected" : ""}`}
+                className={`${styles.tab} ${selectedTab === "actions" ? styles.selected : ""}`}
                 onClick={() => setSelectedTab("actions")}
               >
                 Actions Code
               </button>
               <button
-                className={`tab ${selectedTab === "markdown" ? "selected" : ""}`}
+                className={`${styles.tab} ${selectedTab === "markdown" ? styles.selected : ""}`}
                 onClick={() => setSelectedTab("markdown")}
               >
                 Markdown Code
               </button>
             </div>
-            <div className="readme-container flex flex-col">
-              <div className="readme-header">
+            <div className={styles.readmeContainer}>
+              <div className={styles.readmeHeader}>
                 {githubUser ?? "Username"}
-                <span className="color-fg-muted">/</span>
-                <span className="monospace">README</span>
-                <span className="color-fg-muted">.md</span>
+                <span className={styles.colorFgMuted}>/</span>
+                <span className={styles.monospace}>README</span>
+                <span className={styles.colorFgMuted}>.md</span>
               </div>
               <div className="size-full flex-1">
                 {selectedTab === "actions" && <ActionsTab />}

diff --git a/.../components/GithubFooter/githubFooter.css → ...ents/GithubFooter/GithubFooter.module.css b/.../components/GithubFooter/githubFooter.css → ...ents/GithubFooter/GithubFooter.module.css
@@ -1,4 +1,4 @@
-.footer-container {
+.footerContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -7,26 +7,26 @@
     "Segoe UI Emoji";
 }
 
-.footer-line {
+.footerLine {
   width: 100%;
   border-top: 1px solid var(--borderColor-default);
 }
 
-.footer-links {
+.footerLinks {
   display: flex;
   margin-top: 16px;
   align-items: center;
   gap: 16px;
 }
 
-.footer-links a {
+.footerLinks a {
   font-size: 14px;
   color: var(--fgColor-muted);
   transition: color 0.2s ease-out;
   text-decoration: none;
 }
 
-.footer-links a:hover {
+.footerLinks a:hover {
   text-decoration: underline;
   color: var(--link);
 }
diff --git a/web-client/components/GithubFooter/GithubFooter.tsx b/web-client/components/GithubFooter/GithubFooter.tsx
@@ -1,14 +1,14 @@
 import Image from "next/image"
 import Link from "next/link"
 import { icon } from "web-client/public"
-import "./GithubFooter.css"
+import styles from "./GithubFooter.module.css"
 
 const GithubFooter = () => {
   const currentYear = new Date().getFullYear()
   return (
-    <footer className="flex h-[100px] w-full flex-col items-center justify-center">
-      <div className="footer-line" />
-      <div className="footer-links">
+    <footer className={styles.footerContainer}>
+      <div className={styles.footerLine} />
+      <div className={styles.footerLinks}>
         <Image src={icon} alt="icon" width={30} height={30} />
         <Link href="#">© {currentYear} WeebProfile</Link>
       </div>

diff --git a/.../components/GithubHeader/GithubHeader.css → ...ents/GithubHeader/GithubHeader.module.css b/.../components/GithubHeader/GithubHeader.css → ...ents/GithubHeader/GithubHeader.module.css
@@ -1,10 +1,4 @@
-@import "@radix-ui/colors/black-alpha.css";
-@import "@radix-ui/colors/indigo.css";
-@import "@radix-ui/colors/mauve.css";
-@import "@radix-ui/colors/purple.css";
-@import "@radix-ui/colors/violet.css";
-
-.header-container {
+.headerContainer {
   z-index: 20;
   display: flex;
   justify-content: space-between;
@@ -19,7 +13,7 @@
   height: 56px;
 }
 
-.header-content {
+.headerContent {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -30,7 +24,7 @@
 
 /* --DevMenu-- */
 
-.header-button {
+.headerButton {
   display: block;
   text-decoration: none;
   user-select: none;
@@ -47,7 +41,7 @@
   outline-offset: 2px;
 }
 
-.header-button-dev {
+.headerButtonDev {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -64,26 +58,26 @@
     border-color 0.2s;
 }
 
-.header-button-dev:hover,
-.header-button:hover {
+.headerButtonDev:hover,
+.headerButton:hover {
   background-color: var(--button-background-hover);
   border-color: var(--button-border-hover);
 }
 
-.ListItemHeading {
+.listItemHeading {
   font-weight: 500;
   line-height: 1.2;
   margin-bottom: 5px;
   color: var(--violet-12);
 }
 
-.header-button-text {
+.headerButtonText {
   color: var(--mauve-11);
   line-height: 1.4;
   font-weight: initial;
 }
 
-.second-header-container {
+.secondHeaderContainer {
   background: var(--bgColor-active);
   padding: 4px 12px;
   max-width: 100vw;

diff --git a/web-client/components/GithubHeader/GithubHeader.tsx b/web-client/components/GithubHeader/GithubHeader.tsx
@@ -11,7 +11,7 @@ import Button from "../Button/Button"
 import JsonCodeBlock from "../CodeBlock/JsonCodeBlock"
 import DialogBox from "../DialogBox/DialogBox"
 import DropdownMenuComp from "./DropdownMenu/DropdownMenu"
-import "./GithubHeader.css"
+import styles from "web-client/components/GithubHeader/GithubHeader.module.css"
 
 const DevtoolsHeader = ({ open }: { open: boolean }) => {
   const { changeTheme, theme, resetConfig, resetData, pluginsData, pluginsConfig } = useStore()
@@ -70,7 +70,7 @@ const DevtoolsHeader = ({ open }: { open: boolean }) => {
   ]
 
   return (
-    <div className="second-header-container" data-open={open}>
+    <div className={styles.secondHeaderContainer} data-open={open}>
       <ul className="flex justify-start gap-4">
         {DEV_HEADER_ITEMS.map((item) => (
           <li key={item.title} className="flex items-center gap-2">
@@ -106,8 +106,8 @@ function GithubHeader() {
 
   return (
     <>
-      <header className="header-container">
-        <div className="header-content">
+      <header className={styles.headerContainer}>
+        <div className={styles.headerContent}>
           <div className="flex items-center gap-2">
             <DropdownMenuComp />
             <Link