Merge pull request #41 from menthorlabs/hotfix/BSM-search

Hotfix/bsm search

.github/workflows/deploy.yml

@@ -23,7 +23,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 19
+          node-version: 20.9
 
       - uses: pnpm/action-setup@v2
         with:

apps/app/components/atoms/AchievementCard.vue

@@ -40,18 +40,18 @@ const badges: Record<availableBadges, badgeState> = {
 </script>
 
 <template>
-  <div
-    v-if="disabled"
-    class="w-full h-full min-h-[190px] flex items-center justify-center"
-  >
-    <p
-      class="px-[10px] py-[2px] bg-zinc-200 font-medium text-zinc-900 text-xs rounded-3xl"
-    >
-      Não disponível
-    </p>
-  </div>
-  <div class="group rounded-md p-4 text-sm" v-if="!disabled">
+  <div class="group rounded-md p-4 text-sm">
     <div class="mb-3 aspect-square w-full rounded relative">
+      <div
+        v-if="disabled"
+        class="absolute top-0 left-0 w-full h-full flex items-center justify-center"
+      >
+        <p
+          class="px-[10px] py-[2px] bg-zinc-900/10 font-medium text-zinc-900 text-xs rounded-3xl z-10"
+        >
+          Não disponível
+        </p>
+      </div>
       <div
         v-if="!disabled"
         class="absolute w-full h-full left-0 top-0 bg-[linear-gradient(45deg,transparent_25%,rgba(256,256,256,.5)_50%,transparent_75%,transparent_100%)] overflow-hidden bg-[length:200%_200%,100%_100%] bg-[position:-100%_0,0_0] bg-no-repeat duration-0 ease-in-out transition-[background-position_0s] group-hover:bg-[position:200%_0,0_0] group-hover:duration-[1500ms]"

apps/app/components/atoms/AppIconButton.vue

@@ -3,54 +3,66 @@ const { app = "tailwind" } = defineProps<{
   app?: string;
 }>();
 
-const apps: { [key: string]: { url: string } } = {
+const apps: { [key: string]: { url: string; text: string } } = {
   vercel: {
+    text: "Vercel.com",
     url: "https://vercel.com/?utm_source=menthor.io",
   },
   vue: {
+    text: "Vue",
     url: "https://vuejs.org/?utm_source=menthor.io",
   },
   tailwind: {
+    text: "TailwindCSS",
     url: "https://tailwindcss.com/?utm_source=menthor.io",
   },
   github: {
+    text: "GitHub",
     url: "https://github.com/?utm_source=menthor.io",
   },
   ethers: {
+    text: "EthersJS",
     url: "https://ethers.org/?utm_source=menthor.io",
   },
   solidity: {
+    text: "Solidity",
     url: "https://soliditylang.org/?utm_source=menthor.io",
   },
   html: {
+    text: "HTML",
     url: "https://developer.mozilla.org/pt-BR/docs/Web/HTML?utm_source=menthor.io",
   },
   medusajs: {
+    text: "MedusaJS",
     url: "https://medusajs.com/?utm_source=menthor.io",
   },
   render: {
+    text: "Render.com",
     url: "https://render.com/?utm_source=menthor.io",
   },
   nuxt: {
+    text: "NuxtJS",
     url: "https://nuxt.com/?utm_source=menthor.io",
   },
 };
 </script>
 
 <template>
-  <nuxt-link
-    v-if="apps[app]"
-    :to="apps[app].url"
-    target="_blank"
-    external
-    class="flex h-[40px] w-[40px] min-w-[40px] cursor-pointer items-center justify-center rounded-full border border-zinc-200 bg-white/90 px-2 py-3 hover:bg-zinc-100/90"
-  >
-    <nuxt-img
-      :src="`/app/logos/${app}.svg`"
-      :alt="app"
-      class="w-full h-full object-contain object-center"
-      height="16"
-      width="auto"
-    />
-  </nuxt-link>
+  <UTooltip :text="apps[app].text" :popper="{ placement: 'top' }">
+    <nuxt-link
+      v-if="apps[app]"
+      :to="apps[app].url"
+      target="_blank"
+      external
+      class="flex h-[40px] w-[40px] min-w-[40px] cursor-pointer items-center justify-center rounded-full border border-zinc-200 bg-white/90 px-2 py-3 hover:bg-zinc-100/90"
+    >
+      <nuxt-img
+        :src="`/app/logos/${app}.svg`"
+        :alt="app"
+        class="w-full h-full object-contain object-center"
+        height="16"
+        width="auto"
+      />
+    </nuxt-link>
+  </UTooltip>
 </template>

apps/app/components/atoms/CreatorsImageCard.vue

@@ -6,6 +6,8 @@ const { fileUrl = "" } = defineProps<{
 
 const source = ref(fileUrl);
 const { copy, copied } = useClipboard({ source });
+
+defineEmits(["remove"]);
 </script>
 
 <template>
@@ -32,7 +34,7 @@ const { copy, copied } = useClipboard({ source });
       <nuxt-link external target="_blank" :to="fileUrl">
         <MIconButton icon="external-link-alt" class="!text-white" />
       </nuxt-link>
-      <MIconButton icon="times" class="!text-white" />
+      <MIconButton icon="times" class="!text-white" @click="$emit('remove')" />
     </div>
 
     <div

apps/app/components/organisms/DefaultAside.vue

@@ -3,20 +3,26 @@ const searchModalStore = useSearchModalStore();
 const route = useRoute();
 const defaultAsideStore = useDefaultAsideStore();
 
+const fullPath = computed(() => route.fullPath);
+
+const isLesson = computed(() => {
+  return !!route.meta?.lesson;
+});
+
 const queryBuilder = computed(() => {
-  return queryContent(`/${route.params?.slug ? route.params.slug[0] : ""}`);
+  return queryContent(isLesson.value ? route.params.slug[0] : "not_found");
 });
 
 const { data: navigation, refresh } = await useAsyncData(
-  route.params?.slug ? route.params.slug[0] : "navigation",
+  "aside_nav",
   () => fetchContentNavigation(queryBuilder.value),
-  {
-    watch: [route],
-  }
+  { watch: [fullPath] }
 );
 
-const isLesson = computed(() => {
-  return !!route.meta?.lesson;
+const navigationItem = computed(() => {
+  if (!navigation.value || navigation.value.length <= 0) return;
+
+  return navigation.value[0];
 });
 
 const isCreators = computed(() => {
@@ -61,9 +67,13 @@ watch(isLesson, async () => {
     </div>
     <div class="relative flex-1 overflow-auto">
       <Transition name="slide-fade">
-        <div class="px-3 py-4" v-if="isLesson && navigation && navigation[0]">
+        <div
+          class="px-3 py-4"
+          v-if="isLesson && navigationItem"
+          :key="navigationItem._id"
+        >
           <LeftMenuLessons
-            v-for="item in navigation[0].children"
+            v-for="item in navigationItem.children"
             :key="item._path"
             :navigation="item"
           />

apps/app/nuxt.config.ts

@@ -118,4 +118,4 @@ export default defineNuxtConfig({
     cssPath: "@/styles/main.css",
     viewer: false,
   },
-});
+});

apps/app/package.json

@@ -13,9 +13,11 @@
   "devDependencies": {
     "@nuxt/content": "npm:@nuxt/content-edge@latest",
     "@nuxtjs/fontaine": "^0.2.5",
-    "nuxt": "3.7.3",
-    "nuxt-schema-org": "^2.1.3",
-    "typescript": "^5.3.2"
+    "nuxt": "^3.9.3",
+    "nuxt-schema-org": "^3.3.3",
+    "nuxt-simple-robots": "^3.1.0",
+    "nuxt-simple-sitemap": "^4.4.1",
+    "typescript": "^5.3.3"
   },
   "dependencies": {
     "@clerk/clerk-js": "4.44.0",
@@ -31,7 +33,6 @@
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
     "eslint-config-custom": "workspace:*",
-    "nuxt-simple-sitemap": "^3.1.4",
     "nuxt-umami": "^2.5.2",
     "pinia": "^2.1.6",
     "splitpanes": "^3.1.5",

apps/app/pages/[...slug].vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ParsedContent } from "../../../node_modules/@nuxt/content/dist/runtime/types";
 import type { RouteLocationRaw } from "~/.nuxt/vue-router";
 definePageMeta({
   lesson: true,
@@ -37,18 +38,17 @@ const { data: surround } = await useAsyncData(`lesson-${path}-surround`, () => {
     .findSurround(`/${params.slug[0]}/${params.slug[1]}/${params.slug[2]}`);
 });
 
-useSeoMeta({
-  title: lesson.value.title,
-  ogTitle: lesson.value.title,
-  description: lesson.value.description,
-  ogDescription: lesson.value.description,
-});
-
 const previousLesson = surround.value ? surround.value[0] : null;
 const nextLesson = surround.value ? surround.value[1] : null;
 const currentLesson = lesson.value;
+const currentCourse = course.value._dir as ParsedContent;
 
-const currentCourse = course.value._dir;
+useSeoMeta({
+  title: `${currentCourse.title} - ${currentLesson.title}`,
+  ogTitle: `${currentCourse.title} - ${currentLesson.title}`,
+  description: currentLesson.description,
+  ogDescription: currentLesson.description,
+});
 
 const hasTask = computed(() => {
   return ["Content", "Image"].includes(currentLesson?.submissionContent);

apps/app/pages/creators/images.vue

@@ -1,4 +1,31 @@
 <script setup lang="ts">
+import { useMagicKeys } from "@vueuse/core";
+const { control, v } = useMagicKeys();
+const toast: { error: Function; success: Function } | undefined =
+  inject("toast");
+
+watchEffect(async () => {
+  if (control.value && v.value) {
+    const text = await navigator.clipboard.readText();
+    console.log({ text });
+    console.log("Ctrl + V have been pressed");
+
+    try {
+      const clipboardItems = await navigator.clipboard.read();
+
+      for (const clipboardItem of clipboardItems) {
+        for (const type of clipboardItem.types) {
+          const blob = await clipboardItem.getType(type);
+          const file = new File([blob], "newFile.png", { type: "image/png" });
+          uploadFile(file);
+        }
+      }
+    } catch (e) {
+      toast?.error((e as Error).message);
+    }
+  }
+});
+
 definePageMeta({
   middleware: ["auth"],
 });
@@ -11,6 +38,10 @@ onMounted(async () => {
   loading.value = false;
 });
 
+const reversedImages = computed(() => {
+  return creatorsStore.images.reverse();
+});
+
 function getSizePercentage(bytes: number) {
   const tenGigabytes = 10737418240;
 
@@ -24,6 +55,7 @@ function onInput(event: Event) {
 
   for (let i = 0; i < allFiles.length; ++i) {
     const file = allFiles[i];
+    console.log({ file });
     uploadFile(file);
   }
 }
@@ -39,6 +71,11 @@ async function uploadFile(file: File) {
     loading.value = false;
   }
 }
+
+function removeImage(fileName: string) {
+  creatorsStore.images = creatorsStore.images.filter((e) => e !== fileName);
+  creatorsStore.deleteImage(fileName);
+}
 </script>
 
 <template>
@@ -48,12 +85,18 @@ async function uploadFile(file: File) {
   >
     <h1 class="text-4xl font-extrabold mb-4">Suas imagens</h1>
     <div class="flex items-center gap-4 mb-8">
-      <MButton
-        variant="outline"
-        text="Fazer upload"
-        icon-left="cloud-arrow-up"
-        @click="($refs['creators_image'] as HTMLInputElement).click()"
-      />
+      <UTooltip
+        text="Ou cole uma imagem"
+        :shortcuts="['Ctrl', 'V']"
+        :popper="{ placement: 'top' }"
+      >
+        <MButton
+          variant="outline"
+          text="Fazer upload"
+          icon-left="cloud-arrow-up"
+          @click="($refs['creators_image'] as HTMLInputElement).click()"
+        />
+      </UTooltip>
       <input
         ref="creators_image"
         id="creators_image"
@@ -100,9 +143,10 @@ async function uploadFile(file: File) {
       v-else-if="creatorsStore.images?.length > 0"
     >
       <CreatorsImageCard
-        v-for="fileName in creatorsStore.orderedImages"
+        v-for="fileName in reversedImages"
         :key="fileName"
         :fileUrl="`https://menthor-content.s3.sa-east-1.amazonaws.com/${fileName}`"
+        @remove="removeImage(fileName)"
       />
     </div>
     <div v-else class="text-center text-sm text-zinc-500 pt-10">

apps/app/stores/api/creators.ts

@@ -8,11 +8,6 @@ export const useCreatorsStore = defineStore("creators", {
     images: [],
     filesSize: 0,
   }),
-  getters: {
-    orderedImages(state) {
-      return state.images.reverse();
-    },
-  },
   actions: {
     async getImages() {
       try {

apps/www/app.vue

@@ -1,3 +1,22 @@
+<script setup lang="ts">
+useSchemaOrg([
+  defineOrganization({
+    name: "Menthor",
+    logo: "/brand/menthor-icon-dark.svg",
+    sameAs: [
+      "https://twitter.com/menthorlabs",
+      "https://github.com/menthorlabs/menthor",
+      "https://www.linkedin.com/company/menthorlabs",
+      "https://www.instagram.com/menthorlabs/",
+    ],
+  }),
+  defineWebSite({
+    name: "Menthor",
+  }),
+  defineWebPage(),
+]);
+</script>
+
 <template>
   <NuxtLayout class="text-zinc-950 bg-white">
     <NuxtPage />