feat(gui-v2): add social icons to sidebar navigation on overview

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/components/general/Share.vue

@@ -0,0 +1,293 @@
+<script lang="ts" setup>
+interface Props {
+  url: string
+  socialMedias: string[]
+  title?: string
+  summary: string
+  hashTags?: string
+  css?: string
+  iconClass?: string
+  width?: string
+}
+
+const {
+  url,
+  socialMedias,
+  title = 'NocoDB',
+  summary,
+  hashTags = '',
+  css = '',
+  iconClass = '',
+  width = '45px',
+} = defineProps<Props>()
+
+const summaryArr = [
+  'Instant #Rest & #GraphQL APIs on any #SQL Database (Supports : MySQL, PostgresSQL, MsSQL, SQLite, MariaDB) #nocodb ',
+  'Instantly generate #Rest & #GraphQL APIs on any #SQL Database (Supports : MySQL, PostgresSQL, MsSQL, SQLite, MariaDB) #nocodb',
+  'Instant #serverless Rest & #GraphQL APIs on any Database #nocodb',
+  'Instant APIs on any SQL Database (Supports : #REST #GraphQL #MySQL, #PostgresSQL, #MsSQL, #SQLite, #MariaDB) #nocodb',
+  'Generate Instant APIs on any SQL Database (Supports : #REST #GraphQL #MySQL, #PostgresSQL, #MsSQL, #SQLite, #MariaDB) #nocodb',
+]
+
+const shareUrl = computed(() => encodeURIComponent(url))
+
+const encodedTitle = computed(() => encodeURIComponent(title || 'NocoDB'))
+
+const encodedSummary = computed(() => encodeURIComponent(summary || summaryArr[Math.floor(Math.random() * summaryArr.length)]))
+
+const fbHashTags = computed(() => hashTags && `%23${hashTags}`)
+
+const openUrl = (url: string) => {
+  window.open(url, '_blank')
+}
+</script>
+
+<template>
+  <div>
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('twitter')"
+      href="#"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="openUrl(`https://twitter.com/intent/tweet?url=${shareUrl}&text=${encodedSummary}&hashtags=${hashTags}`)"
+    >
+      <img
+        src="/social/twitter.png"
+        class="img-responsive"
+        alt="Twitter"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+      />
+    </a>
+
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('linkedin')"
+      href="#"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="
+        openUrl(`https://www.linkedin.com/shareArticle?mini=true&url=${shareUrl}&title=${encodedTitle}&summary=${encodedSummary}`)
+      "
+    >
+      <img
+        src="/social/linkedin.png"
+        class="img-responsive"
+        alt="Linkedin"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+      />
+    </a>
+
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('facebook')"
+      href="#"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="
+        openUrl(
+          `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&title=${encodedTitle}&summary=${encodedSummary}&quote=${encodedTitle}&hashtag=${fbHashTags}`,
+        )
+      "
+    >
+      <img
+        src="/social/facebook.png"
+        class="img-responsive"
+        alt="Facebook"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+      />
+    </a>
+
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('reddit')"
+      href="#"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="openUrl(`https://www.reddit.com/submit?url=${shareUrl}&title=${encodedSummary}`)"
+    >
+      <img src="/social/reddit.png" class="img-responsive" alt="Reddit" :width="width" :style="css" title="Social Media Share" />
+    </a>
+
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('pinterest')"
+      href="#"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="openUrl(`https://pinterest.com/pin/create/button/?url=${shareUrl}&description==${encodedSummary}`)"
+    >
+      <img
+        src="/social/pinterest.png"
+        class="img-responsive"
+        alt="Printrest"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+      />
+    </a>
+
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('whatsapp')"
+      href="#"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="openUrl(`https://api.whatsapp.com/send?text=${encodedSummary}%0D%0A${shareUrl}`)"
+    >
+      <img
+        src="/social/whatsapp.png"
+        class="img-responsive"
+        alt="Whatsapp"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+      />
+    </a>
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('telegram')"
+      href="#"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="openUrl(`https://telegram.me/share/url?url=${shareUrl}&text=${encodedSummary}`)"
+    >
+      <img
+        src="/social/png/telegram.png"
+        class="img-responsive"
+        alt="Telegram"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+      />
+    </a>
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('wechat')"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="openUrl(`https://www.addtoany.com/add_to/wechat?linkurl=${shareUrl}&linkname=${encodedTitle}`)"
+    >
+      <img
+        src="/social/png/wechat.png"
+        class="img-responsive"
+        alt="Wechat"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+      />
+    </a>
+    <a v-if="!socialMedias || !socialMedias.length || socialMedias.includes('line')" href="#" :class="iconClass" class="px-2">
+      <img
+        src="/social/png/line.png"
+        class="img-responsive"
+        alt="Line"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+        @click.prevent="openUrl(`http://line.me/R/msg/text/?${encodedTitle}%0D%0A${shareUrl}`)"
+      />
+    </a>
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('odnoklassniki')"
+      href="#"
+      :class="iconClass"
+      class="px-2"
+    >
+      <img
+        src="/social/png/odnoklassniki.png"
+        class="img-responsive"
+        alt="Odnoklassniki"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+        @click.prevent="
+          openUrl(`https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=${shareUrl}&st.comments=${encodedSummary}`)
+        "
+      />
+    </a>
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('weibo')"
+      href="#"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="openUrl(`http://service.weibo.com/share/share.php?url=${shareUrl})&title=${encodedTitle}`)"
+    >
+      <img
+        src="/social/png/weibo.png"
+        class="img-responsive"
+        alt="Weibo"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+      />
+    </a>
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('renren')"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="
+        openUrl(
+          `http://widget.renren.com/dialog/share?resourceUrl=${shareUrl}&srcUrl=${shareUrl}&title=${encodedTitle}&description=${encodedSummary}`,
+        )
+      "
+    >
+      <img
+        src="/social/png/renren.png"
+        class="img-responsive"
+        alt="Renren"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+      />
+    </a>
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('douban')"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="openUrl(`http://www.douban.com/recommend/?url=${shareUrl}&title=${encodedTitle}`)"
+    >
+      <img
+        src="/social/png/douban.png"
+        class="img-responsive"
+        alt="Douban"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+      />
+    </a>
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('vk')"
+      href="#"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="
+        openUrl(`https://vk.com/share.php?url=${shareUrl})&title=${encodedTitle}&description=${encodedSummary}&noparse=true`)
+      "
+    >
+      <img src="/social/png/vk.png" class="img-responsive" alt="VK" :width="width" :style="css" title="Social Media Share" />
+    </a>
+    <a
+      v-if="!socialMedias || !socialMedias.length || socialMedias.includes('wykop')"
+      :class="iconClass"
+      class="px-2"
+      @click.prevent="openUrl(`https://www.addtoany.com/add_to/wykop?linkurl=${shareUrl}&linkname=${encodedTitle}`)"
+    >
+      <img
+        src="/social/png/wykop.jpg"
+        class="img-responsive"
+        alt="Wykop"
+        :width="width"
+        :style="css"
+        title="Social Media Share"
+      />
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.img-responsive {
+  width: 30px;
+}
+.small .img-responsive {
+  width: 25px;
+}
+</style>

packages/nc-gui-v2/components/general/Social.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { useColors } from '#imports'
+import MdiDiscord from '~icons/mdi/discord'
+import MdiReddit from '~icons/mdi/reddit'
+import MdiTwitter from '~icons/mdi/twitter'
+import MdiCalendarMonth from '~icons/mdi/calendar-month'
+import BxBxlDiscourse from '~icons/bx/bxl-discourse'
+
+const { locale } = useI18n()
+const { colors } = useColors()
+
+const open = (url: string) => {
+  window.open(url, '_blank')
+}
+
+const isZhLang = $computed(() => locale.value.startsWith('zh'))
+</script>
+
+<template>
+  <div class="wrapper">
+    <div v-if="isZhLang">
+      <p class="caption grey--text block mb-3 text-center pt-2">Please share a word about us</p>
+      <general-share
+        class="flex justify-center mb-2"
+        url="https://github.com/nocodb/nocodb"
+        :social-medias="['renren', 'douban', 'weibo', 'wechat']"
+      />
+
+      <v-divider />
+
+      <div class="text-center caption grey--text mt-3 mb-1">
+        Built with Vue JS<br /><img src="vue.svg" class="vue-icon mt-1 mb-n1" alt="vue.js" width="30" />
+      </div>
+    </div>
+
+    <template v-else>
+      <div class="flex justify-end">
+        <v-list width="100%" class="py-0 flex-shrink-1 text-left elevation-0 rounded-sm community-card item active" dense>
+          <v-list-item>
+            <div class="flex justify-space-between d-100 pr-2">
+              <MdiDiscord
+                v-t="['e:community:discord']"
+                class="icon"
+                :color="colors[0]"
+                @click="open('https://discord.gg/5RgZmkW')"
+              />
+              <BxBxlDiscourse
+                v-t="['e:community:discourse']"
+                class="icon"
+                :color="colors[0]"
+                @click="open('https://community.nocodb.com/')"
+              />
+              <MdiReddit
+                v-t="['e:community:reddit']"
+                class="icon"
+                color="#ff4600"
+                @click="open('https://www.reddit.com/r/NocoDB/')"
+              />
+              <MdiTwitter
+                v-t="['e:community:twitter']"
+                class="icon"
+                :color="colors[1]"
+                @click="open('https://twitter.com/NocoDB')"
+              />
+              <MdiCalendarMonth
+                v-t="['e:community:book-demo']"
+                class="icon"
+                :color="colors[3]"
+                @click="open('https://calendly.com/nocodb-meeting')"
+              />
+            </div>
+          </v-list-item>
+        </v-list>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.icon {
+  @apply cursor-pointer text-4xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) transition-color ease-in duration-100;
+}
+</style>

packages/nc-gui-v2/package-lock.json

@@ -17,6 +17,7 @@
       },
       "devDependencies": {
         "@antfu/eslint-config": "^0.25.2",
+        "@iconify-json/bx": "^1.1.3",
         "@iconify-json/material-symbols": "^1.1.8",
         "@iconify-json/mdi": "^1.1.25",
         "@intlify/vite-plugin-vue-i18n": "^4.0.0",
@@ -901,6 +902,15 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@iconify-json/bx": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@iconify-json/bx/-/bx-1.1.3.tgz",
+      "integrity": "sha512-Y7iKbjsf52fGd0IIjtUz8Hoz4S5PyXxRJRqskQFnDPSOUD0zRIbDom3UfTv5HGv8I0zEvJ0jpEVQlt+efkve/g==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/material-symbols": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.1.8.tgz",
@@ -13319,6 +13329,15 @@
       "dev": true,
       "peer": true
     },
+    "@iconify-json/bx": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@iconify-json/bx/-/bx-1.1.3.tgz",
+      "integrity": "sha512-Y7iKbjsf52fGd0IIjtUz8Hoz4S5PyXxRJRqskQFnDPSOUD0zRIbDom3UfTv5HGv8I0zEvJ0jpEVQlt+efkve/g==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/material-symbols": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.1.8.tgz",

packages/nc-gui-v2/package.json

@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.25.2",
+    "@iconify-json/bx": "^1.1.3",
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",
     "@intlify/vite-plugin-vue-i18n": "^4.0.0",

packages/nc-gui-v2/pages/projects/index.vue

@@ -67,11 +67,13 @@ const navDrawerOptions = [
               </v-list>
             </v-menu>
 
-            <!-- todo: implement extras component
-              <Extras class="pl-6" />
-            -->
+            <div></div>
           </div>
 
+          <v-divider class="my-1" />
+
+          <general-social />
+
           <general-sponsors :nav="true" />
         </div>
       </v-navigation-drawer>