fix: build and prerender

apps/app/app.config.ts

@@ -0,0 +1,8 @@
+export default defineAppConfig({
+  ui: {
+    tooltip: {
+      container: "z-50 group",
+      background: "bg-red-500",
+    },
+  },
+});

apps/app/app.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-useShortcuts();
+useSearchShortcuts();
 </script>
 
 <template>
-  <NuxtLayout class="z-0 text-zinc-950">
+  <NuxtLayout class="z-0 text-zinc-950 bg-white">
+    <NuxtLoadingIndicator />
     <NuxtPage />
   </NuxtLayout>
   <SearchModal />

apps/app/components/atoms/LeftMenuLessonItem.vue

@@ -28,12 +28,13 @@ function finishTask() {
       class="hidden group-hover:flex"
       v-if="!done && coursesStore.isEnrolled"
     >
-      <font-awesome-icon
-        @click="finishTask"
-        v-tooltip="`Finalizar aula`"
-        class="hover:text-zinc-950 transition-all text-zinc-500"
-        icon="check"
-      />
+      <UTooltip text="Tooltip example" :popper="{ placement: 'right' }">
+        <font-awesome-icon
+          @click="finishTask"
+          class="hover:text-zinc-950 transition-all text-zinc-500"
+          icon="check"
+        />
+      </UTooltip>
     </button>
   </div>
 </template>

apps/app/components/molecules/SearchModal.vue

@@ -66,7 +66,7 @@ function resetSearch() {
 const searchDebounce = useDebounceFn(() => {
   searchContent();
   loading.value = false;
-}, 1000);
+}, 500);
 
 async function searchContent() {
   resetNavigatedIndex();

apps/app/components/molecules/TopBar.vue

@@ -1,34 +1,20 @@
 <script setup lang="ts">
-import type { Color } from "colorthief";
-
 const router = useRouter();
 const sessionStore = useSessionStore();
 const userStore = useUserStore();
 const defaultAsideStore = useDefaultAsideStore();
-const shadowStore = useShadowStore();
-
-const shadowGenerator = (color: Array<Color>): string => {
-  return `radial-gradient(50% 50% at 50% 50%, rgba(${color[0][0]}, ${color[0][1]}, ${color[0][2]}, 0.2) 0%, rgba(${color[0][0]}, ${color[0][1]}, ${color[0][2]}, 0) 100%)`;
-};
 </script>
 
 <template>
   <div
     class="absolute left-0 top-0 flex h-[90px] w-full justify-center overflow-hidden pointer-events-none"
-    v-if="shadowStore.primaryColors && shadowStore.secondaryColors"
   >
     <div class="relative h-full w-full max-w-[1017px]">
       <div
-        class="absolute bottom-0 left-0 h-[179px] w-[678px]"
-        :style="{
-          background: shadowGenerator(shadowStore.primaryColors),
-        }"
+        class="bg-[radial-gradient(50%_50%_at_50%_50%,_rgba(236,_72,_153,_0.2)_0%,_rgba(236,_72,_153,_0)_100%)] absolute bottom-0 left-0 h-[179px] w-[678px]"
       ></div>
       <div
-        class="absolute bottom-0 right-0 h-[179px] w-[678px]"
-        :style="{
-          background: shadowGenerator(shadowStore.secondaryColors),
-        }"
+        class="bg-[radial-gradient(50%_50%_at_50%_50%,_rgba(37,_99,_235,_0.2)_0%,_rgba(28,_100,_242,_0)_100%)] absolute bottom-0 right-0 h-[179px] w-[678px]"
       ></div>
     </div>
   </div>
@@ -52,18 +38,19 @@ const shadowGenerator = (color: Array<Color>): string => {
     <div class="flex items-center gap-2">
       <!-- <MIconButton icon="bell" variant="glass" /> -->
       <div v-if="sessionStore.isConnected()">
-        <VDropdown
-          :distance="6"
-          class="h-[32px] w-[32px] cursor-pointer overflow-hidden rounded-full text-sm text-zinc-700 transition-all hover:scale-110"
-          placement="bottom-end"
-        >
-          <img
-            :src="userStore.user?.profileImageUrl"
-            alt="Profile"
-            class="h-full w-full object-cover object-center"
-          />
-          <template #popper="{ hide }">
-            <div class="min-w-[140px] py-1" @click="hide()">
+        <UPopover :popper="{ placement: 'bottom-end' }">
+          <div
+            class="h-[32px] w-[32px] cursor-pointer overflow-hidden rounded-full text-sm text-zinc-700 transition-all hover:scale-110"
+          >
+            <img
+              :src="userStore.user?.profileImageUrl"
+              alt="Profile"
+              class="h-full w-full object-cover object-center"
+            />
+          </div>
+
+          <template #panel>
+            <div class="min-w-[140px] py-1">
               <NuxtLink to="/profile">
                 <DropdownItem icon="circle-user" name="Perfil" />
               </NuxtLink>
@@ -78,7 +65,7 @@ const shadowGenerator = (color: Array<Color>): string => {
               </NuxtLink>
             </div>
           </template>
-        </VDropdown>
+        </UPopover>
       </div>
       <div v-else>
         <NuxtLink to="/sign-in">

apps/app/components/organisms/DefaultAside.vue

@@ -30,7 +30,7 @@ watch(isLesson, async () => {
 
 <template>
   <aside
-    class="bg-white z-20 md:z-0 md:bg-inherit fixed -left-[270px] transition-all top-0 h-full overflow-y-auto md:relative md:left-0 flex w-[270px] min-w-[270px] flex-col border-r border-solid border-zinc-200 overflow-hidden"
+    class="bg-white z-20 md:z-10 md:bg-inherit fixed -left-[270px] transition-all top-0 h-full overflow-y-auto md:relative md:left-0 flex w-[270px] min-w-[270px] flex-col border-r border-solid border-zinc-200 overflow-hidden"
     :class="{ 'left-0': defaultAsideStore.opened }"
   >
     <div class="w-full border-b border-solid border-zinc-200 p-3">

apps/app/composables/useShortcuts.ts → apps/app/composables/useSearchShortcuts.ts

@@ -1,5 +1,5 @@
 import { useMagicKeys, whenever } from "@vueuse/core";
-export function useShortcuts() {
+export function useSearchShortcuts() {
   const searchModalStore = useSearchModalStore();
 
   const { ctrl_k } = useMagicKeys({

apps/app/nuxt.config.ts

@@ -7,8 +7,12 @@ const siteUrl = process.env.NUXT_PUBLIC_SITE_URL || "https://menthor.io/";
 const baseURL = "/app/";
 
 export default defineNuxtConfig({
+  colorMode: {
+    preference: "light",
+  },
   experimental: {
     payloadExtraction: true,
+    inlineSSRStyles: false,
   },
   sourcemap: { server: true, client: false }, // Disable sourcemap errors
   runtimeConfig: {
@@ -25,7 +29,7 @@ export default defineNuxtConfig({
     "/profile": { ssr: true },
   },
   nitro: {
-    preset: "aws_amplify",
+    preset: "cloudflare",
     baseURL: process.env.NODE_ENV === "development" ? "/" : baseURL,
     prerender: {
       crawlLinks: true,
@@ -80,25 +84,16 @@ export default defineNuxtConfig({
       },
     },
   },
-  css: [
-    "@/styles/main.css",
-    "@/styles/font.css",
-    "@fortawesome/fontawesome-svg-core/styles.css",
-  ],
+  css: ["@/styles/font.css", "@fortawesome/fontawesome-svg-core/styles.css"],
   components: [
     { path: "../../packages/ui/src", pathPrefix: false },
     { path: "~/components", pathPrefix: false },
     { path: "~/components/content", pathPrefix: false },
   ],
-  postcss: {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  },
   modules: [
+    "@nuxt/ui",
     "nuxt-simple-sitemap",
-    "@nuxt/image-edge",
+    "@nuxt/image",
     "nuxt-schema-org",
     "@nuxtjs/fontaine",
     "@nuxt/content",
@@ -121,4 +116,7 @@ export default defineNuxtConfig({
       host: process.env.NUXT_PUBLIC_UMAMI_HOST,
     },
   },
+  tailwindcss: {
+    cssPath: "@/styles/main.css",
+  },
 });

apps/app/package.json

@@ -11,11 +11,10 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@nuxt/content": "2.8.2",
+    "@nuxt/content": "npm:@nuxt/content-edge@latest",
     "@nuxtjs/fontaine": "^0.2.5",
     "@types/node": "^20.4.6",
-    "colorthief": "^2.4.0",
-    "nuxt": "^3.8.2",
+    "nuxt": "^3.7.3",
     "nuxt-schema-org": "^2.1.3",
     "typescript": "^5.1.6"
   },
@@ -27,20 +26,16 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@nuxt/image-edge": "1.0.0-rc.2-28246613.7d120ca",
+    "@nuxt/image": "^1.1.0",
+    "@nuxt/ui": "^2.11.0",
     "@pinia/nuxt": "^0.4.11",
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
     "eslint-config-custom": "workspace:*",
-    "floating-vue": "2.0.0-beta.24",
     "nuxt-simple-sitemap": "^3.1.4",
     "nuxt-umami": "^2.5.2",
     "pinia": "^2.1.6",
     "splitpanes": "^3.1.5",
-    "tailwind-config": "workspace:*",
     "universal-cookie": "^4.0.4"
-  },
-  "resolutions": {
-    "h3": "^1.8.2"
   }
 }

apps/app/pages/index.vue

@@ -1,28 +1,12 @@
 <script setup lang="ts">
-import ColorThief, { type Color } from "colorthief";
 const userStore = useUserStore();
-const shadowStore = useShadowStore();
 
 const title = computed(() => {
   return `Olá${
     userStore.user?.firstName ? `, ${userStore.user.firstName}` : ""
   }, o que vamos aprender hoje?`;
 });
 
-const checkEnter = (param: string) => {
-  const img = new Image();
-  img.src = param;
-  img.crossOrigin = "Anonymous";
-  img.onload = () => {
-    const colorThief = new ColorThief();
-    const colors: Color[] = colorThief.getPalette(img);
-    shadowStore.setColor(colors);
-  };
-};
-const checkLeave = () => {
-  shadowStore.setDefaultColors();
-};
-
 const description =
   "Plataforma gratuita de ensino de programação web para pessoas que estão buscando o primeiro emprego na área ou que querem construir seu próprio negócio.";
 useSeoMeta({
@@ -52,8 +36,6 @@ useSeoMeta({
         <NuxtLink
           v-for="item of navigation"
           :key="item._path"
-          @mouseenter="checkEnter(item.image)"
-          @mouseleave="checkLeave()"
           :nav-item="item"
           :href="
             item.children && item.children[0].children

apps/app/tailwind.config.ts

@@ -1 +1,39 @@
-module.exports = require("../../packages/tailwind-config/tailwind.config.ts");
+import type { Config } from "tailwindcss";
+import defaultTheme from "tailwindcss/defaultTheme";
+
+export default <Partial<Config>>{
+  theme: {
+    aspectRatio: {
+      auto: "auto",
+      square: "1 / 1",
+      video: "16 / 9",
+    },
+    extend: {
+      fontFamily: {
+        sans: [
+          "Mona-Sans",
+          "Mona-Sans override",
+          ...defaultTheme.fontFamily.sans,
+        ],
+      },
+      backgroundImage: {
+        pattern: "url('/patterns/default.svg')",
+      },
+      container: {
+        center: true,
+        padding: {
+          DEFAULT: "1rem",
+          sm: "2rem",
+          md: "2.5rem",
+          lg: "2.5rem",
+        },
+      },
+      screens: {
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1190px",
+      },
+    },
+  },
+};

apps/www/nuxt.config.ts

@@ -38,7 +38,7 @@ export default defineNuxtConfig({
     },
   },
   modules: [
-    "@nuxt/image-edge",
+    "@nuxt/image",
     "nuxt-simple-sitemap",
     "nuxt-schema-org",
     "nuxt-simple-robots",

apps/www/package.json

@@ -24,7 +24,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@nuxt/image-edge": "1.0.0-rc.1-28180077.d51e794",
+    "@nuxt/image": "^1.1.0",
     "@vueuse/nuxt": "^10.3.0",
     "eslint-config-custom": "workspace:*",
     "floating-vue": "2.0.0-beta.24",