feat: telemetry

packages/nc-gui/components/feed/Changelog/Item.vue

@@ -70,6 +70,15 @@ const renderedText = computedAsync(async () => {
         ),
   )
 })
+
+const { $e } = useNuxtApp()
+
+const expand = () => {
+  truncate.value = false
+  $e('c:nocodb:feed:changelog:expand', {
+    title: Title,
+  })
+}
 </script>
 
 <template>
@@ -131,7 +140,7 @@ const renderedText = computedAsync(async () => {
     <div class="flex flex-1 px-4 pb-3 justify-between flex-col gap-2">
       <div class="prose max-w-none" v-html="renderedText"></div>
     </div>
-    <NcButton v-if="truncate" size="small" class="w-29 mx-4 mb-3" type="text" @click="truncate = false">
+    <NcButton v-if="truncate" size="small" class="w-29 mx-4 mb-3" type="text" @click="expand">
       <div class="gap-2 flex items-center">
         Show more
         <GeneralIcon icon="arrowDown" />

packages/nc-gui/components/feed/Recents/Card.vue

@@ -26,6 +26,15 @@ const feedIcon = {
 
 const truncate = ref(true)
 
+const { $e } = useNuxtApp()
+
+const expand = () => {
+  truncate.value = false
+  $e('c:nocodb:feed:recents:expand', {
+    title: Title,
+  })
+}
+
 const renderedText = computedAsync(async () => {
   return await unified()
     .use(remarkParse)
@@ -67,7 +76,7 @@ const { width } = useWindowSize()
         />
         <div class="prose px-5 mt-5" v-html="renderedText"></div>
 
-        <NcButton v-if="truncate" size="small" class="w-29 mx-5" type="text" @click="truncate = false">
+        <NcButton v-if="truncate" size="small" class="w-29 mx-5" type="text" @click="expand">
           <div class="gap-2 flex items-center">
             Show more
             <GeneralIcon icon="arrowDown" />

packages/nc-gui/components/feed/Social.vue

@@ -1,33 +1,41 @@
 <script setup lang="ts">
+const { $e } = useNuxtApp()
+
 const socialIcons = [
   {
     name: '@nocodb',
     icon: iconMap.iconTwitter,
     link: 'https://twitter.com/nocodb',
+    e: 'c:feed::twitter-open',
   },
   {
     name: 'NocoDB',
     icon: iconMap.youtube,
+    e: 'c:feed:youtube-open',
     link: 'https://www.youtube.com/@nocodb',
   },
   {
     name: 'NocoDB',
     icon: iconMap.iconDiscord,
+    e: 'c:feed:discord-open',
     link: 'https://discord.nocodb.com',
   },
   {
     name: 'r/NocoDB',
     icon: iconMap.iconReddit,
+    e: 'c:feed:reddit-open',
     link: 'https://www.reddit.com/r/NocoDB/',
   },
   {
     name: 'Forum',
     icon: iconMap.nocodb,
+    e: 'c:feed:forum-open',
     link: 'https://community.nocodb.com/',
   },
 ]
 
-const openUrl = (url: string) => {
+const openUrl = (url: string, e: string) => {
+  $e(e)
   window.open(url, '_blank')
 }
 </script>
@@ -40,7 +48,7 @@ const openUrl = (url: string) => {
         v-for="social in socialIcons"
         :key="social.name"
         class="flex items-center social-icon-wrapper cursor-pointer rounded-lg hover:bg-gray-100 py-3 px-4 gap-2 text-gray-800"
-        @click="openUrl(social.link)"
+        @click="openUrl(social.link, social.e)"
       >
         <component :is="social.icon" class="w-5 h-5 stroke-transparent social-icon" />
         <span class="font-semibold">{{ social.name }}</span>

packages/nc-gui/components/feed/View.vue

@@ -6,6 +6,8 @@ import FeedTwitter from './Twitter.vue'
 // import FeedRoadmap from './Roadmap.vue'
 const { activeTab } = useProductFeed()
 
+const { $e } = useNuxtApp()
+
 const tabs: Array<{
   key: string
   icon: keyof typeof iconMap
@@ -43,6 +45,10 @@ const tabs: Array<{
     container: FeedTwitter,
   },
 ]
+
+const updateTab = (key: string) => {
+  $e(`c:nocodb:feed, tab:${key}`)
+}
 </script>
 
 <template>
@@ -52,7 +58,7 @@ const tabs: Array<{
     <NcTabs v-model:activeKey="activeTab" centered>
       <a-tab-pane v-for="tab in tabs" :key="tab.key" class="bg-gray-50 !h-full">
         <template #tab>
-          <div class="flex gap-2 items-center">
+          <div class="flex gap-2 items-center" @click="updateTab(tab.key)">
             <GeneralIcon
               :class="{
                 'text-brand-500': activeTab === tab.key,