feat: improve prose components and optmize lessons images

apps/app/components/atoms/LeftMenuCourseItem.vue

@@ -32,13 +32,17 @@ const { data: currentLesson } = await useAsyncData(course.Id, () =>
     class="group flex cursor-pointer items-center gap-3 rounded p-[6px] pr-3 text-sm font-medium text-zinc-700 hover:bg-zinc-100"
   >
     <div class="h-[48px] min-w-[48px] overflow-hidden rounded">
-      <img
+      <nuxt-img
+        :quality="85"
+        format="webp"
+        width="96"
+        height="96"
         :src="course.image"
         :alt="course.title"
         class="h-full w-full object-cover object-center transition-all group-hover:scale-110"
       />
     </div>
-    <div class="flex-1">
+    <div class="flex-1 min-w-0">
       <div class="mb-1 min-w-0 truncate overflow-ellipsis">
         {{ course.title }}
       </div>

apps/app/components/content/ProseCode.vue

@@ -1,6 +1,7 @@
 <!-- eslint-disable no-unused-vars -->
 <script setup lang="ts">
 import { useClipboard } from "@vueuse/core";
+
 const {
   code = "",
   language = null,
@@ -15,8 +16,20 @@ const {
   meta?: string;
 }>();
 
+const box: Ref<HTMLElement | null> = ref(null);
+
+const hasExpand = ref(true);
+const expanded = ref(false);
+
 const source = ref(code);
 const { copy, copied } = useClipboard({ source });
+
+onMounted(() => {
+  if (box.value && box.value?.offsetHeight < 400) {
+    hasExpand.value = false;
+    expanded.value = true;
+  }
+});
 </script>
 
 <template>
@@ -33,9 +46,23 @@ const { copy, copied } = useClipboard({ source });
       class="absolute right-1 opacity-0 transition-all group-hover:opacity-100"
       :class="{ 'top-[6px]': !filename, 'top-1': filename }"
     />
-    <div class="overflow-x-auto py-3 text-sm font-medium">
+    <div
+      class="overflow-x-auto overflow-y-hidden py-3 text-sm font-medium [&>pre]:w-fit [&>pre]:min-w-full"
+      ref="box"
+      :class="{ 'max-h-[400px]': !expanded, 'max-h-fit': expanded }"
+    >
       <slot />
     </div>
+    <div
+      v-if="hasExpand"
+      @click="
+        hasExpand = false;
+        expanded = true;
+      "
+      class="absolute bottom-0 left-0 w-full h-[70px] rounded-bl-lg rounded-br-lg bg-gradient-to-t from-white flex items-center justify-center text-sm text-gray-500 cursor-pointer hover:text-gray-950 transition"
+    >
+      Clique aqui para expandir
+    </div>
   </div>
 </template>
 

apps/app/components/content/ProseCodeInline.vue

@@ -1,6 +1,6 @@
 <template>
   <code
-    class="rounded border border-zinc-200 bg-zinc-50 px-[6px] py-[1px] font-mono text-sm font-semibold break-all"
+    class="rounded border border-zinc-200 bg-zinc-50 px-[6px] py-[1px] font-mono text-sm font-semibold"
     ><slot
   /></code>
 </template>

apps/app/components/content/ProseImg.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { withTrailingSlash, withLeadingSlash, joinURL } from "ufo";
+
+const {
+  src = "",
+  alt = "",
+  width = "undefined",
+  height = "undefined",
+} = defineProps<{
+  src?: string;
+  alt?: string;
+  width?: string | number | undefined;
+  height?: string | number | undefined;
+}>();
+
+const refinedSrc = computed(() => {
+  if (src?.startsWith("/") && !src.startsWith("//")) {
+    const _base = withLeadingSlash(
+      withTrailingSlash(useRuntimeConfig().app.baseURL)
+    );
+    if (_base !== "/" && !src.startsWith(_base)) {
+      return joinURL(_base, src);
+    }
+  }
+  return src;
+});
+</script>
+
+<template>
+  <nuxt-img
+    format="webp"
+    quality="80"
+    :src="refinedSrc"
+    :alt="alt"
+    :width="width"
+    :height="height"
+    densities="x1 x1"
+  />
+</template>

packages/assets/styles/popper.css

@@ -1,13 +1,3 @@
-/* @layer base {
-  .v-popper--theme-tooltip .v-popper__wrapper .v-popper__inner {
-    @apply bg-white text-zinc-950 border border-zinc-300 shadow text-sm;
-  }
-
-  .v-popper--theme-tooltip .v-popper__wrapper .v-popper__arrow-container {
-    @apply hidden;
-  }
-} */
-
 .v-popper--theme-tooltip .v-popper__wrapper .v-popper__inner {
   background: white;
   color: #09090B;