Merge pull request #3387 from nocodb/fix/gui-v2-file-paths

fix(gui-v2): image paths

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

@@ -52,7 +52,7 @@ const openUrl = (url: string) => {
       @click.prevent="openUrl(`https://twitter.com/intent/tweet?url=${shareUrl}&text=${encodedSummary}&hashtags=${hashTags}`)"
     >
       <img
-        src="~/public/social/twitter.png"
+        src="~/assets/img/social/twitter.png"
         class="img-responsive"
         alt="Twitter"
         :width="width"
@@ -71,7 +71,7 @@ const openUrl = (url: string) => {
       "
     >
       <img
-        src="~/public/social/linkedin.png"
+        src="~/assets/img/social/linkedin.png"
         class="img-responsive"
         alt="Linkedin"
         :width="width"
@@ -92,7 +92,7 @@ const openUrl = (url: string) => {
       "
     >
       <img
-        src="~/public/social/facebook.png"
+        src="~/assets/img/social/facebook.png"
         class="img-responsive"
         alt="Facebook"
         :width="width"
@@ -109,7 +109,7 @@ const openUrl = (url: string) => {
       @click.prevent="openUrl(`https://www.reddit.com/submit?url=${shareUrl}&title=${encodedSummary}`)"
     >
       <img
-        src="~/public/social/reddit.png"
+        src="~/assets/img/social/reddit.png"
         class="img-responsive"
         alt="Reddit"
         :width="width"
@@ -126,7 +126,7 @@ const openUrl = (url: string) => {
       @click.prevent="openUrl(`https://pinterest.com/pin/create/button/?url=${shareUrl}&description==${encodedSummary}`)"
     >
       <img
-        src="~/public/social/pinterest.png"
+        src="~/assets/img/social/pinterest.png"
         class="img-responsive"
         alt="Printrest"
         :width="width"
@@ -143,7 +143,7 @@ const openUrl = (url: string) => {
       @click.prevent="openUrl(`https://api.whatsapp.com/send?text=${encodedSummary}%0D%0A${shareUrl}`)"
     >
       <img
-        src="~/public/social/whatsapp.png"
+        src="~/assets/img/social/whatsapp.png"
         class="img-responsive"
         alt="Whatsapp"
         :width="width"
@@ -159,7 +159,7 @@ const openUrl = (url: string) => {
       @click.prevent="openUrl(`https://telegram.me/share/url?url=${shareUrl}&text=${encodedSummary}`)"
     >
       <img
-        src="~/public/social/png/telegram.png"
+        src="~/assets/img/social/png/telegram.png"
         class="img-responsive"
         alt="Telegram"
         :width="width"
@@ -174,7 +174,7 @@ const openUrl = (url: string) => {
       @click.prevent="openUrl(`https://www.addtoany.com/add_to/wechat?linkurl=${shareUrl}&linkname=${encodedTitle}`)"
     >
       <img
-        src="~/public/social/png/wechat.png"
+        src="~/assets/img/social/png/wechat.png"
         class="img-responsive"
         alt="Wechat"
         :width="width"
@@ -184,7 +184,7 @@ const openUrl = (url: string) => {
     </a>
     <a v-if="!socialMedias || !socialMedias.length || socialMedias.includes('line')" href="#" :class="iconClass" class="px-2">
       <img
-        src="~/public/social/png/line.png"
+        src="~/assets/img/social/png/line.png"
         class="img-responsive"
         alt="Line"
         :width="width"
@@ -200,7 +200,7 @@ const openUrl = (url: string) => {
       class="px-2"
     >
       <img
-        src="~/public/social/png/odnoklassniki.png"
+        src="~/assets/img/social/png/odnoklassniki.png"
         class="img-responsive"
         alt="Odnoklassniki"
         :width="width"
@@ -219,7 +219,7 @@ const openUrl = (url: string) => {
       @click.prevent="openUrl(`http://service.weibo.com/share/share.php?url=${shareUrl})&title=${encodedTitle}`)"
     >
       <img
-        src="~/public/social/png/weibo.png"
+        src="~/assets/img/social/png/weibo.png"
         class="img-responsive"
         alt="Weibo"
         :width="width"
@@ -238,7 +238,7 @@ const openUrl = (url: string) => {
       "
     >
       <img
-        src="~/public/social/png/renren.png"
+        src="~/assets/img/social/png/renren.png"
         class="img-responsive"
         alt="Renren"
         :width="width"
@@ -253,7 +253,7 @@ const openUrl = (url: string) => {
       @click.prevent="openUrl(`http://www.douban.com/recommend/?url=${shareUrl}&title=${encodedTitle}`)"
     >
       <img
-        src="~/public/social/png/douban.png"
+        src="~/assets/img/social/png/douban.png"
         class="img-responsive"
         alt="Douban"
         :width="width"
@@ -271,7 +271,7 @@ const openUrl = (url: string) => {
       "
     >
       <img
-        src="~/public/social/png/vk.png"
+        src="~/assets/img/social/png/vk.png"
         class="img-responsive"
         alt="VK"
         :width="width"
@@ -286,7 +286,7 @@ const openUrl = (url: string) => {
       @click.prevent="openUrl(`https://www.addtoany.com/add_to/wykop?linkurl=${shareUrl}&linkname=${encodedTitle}`)"
     >
       <img
-        src="~/public/social/png/wykop.jpg"
+        src="~/assets/img/social/png/wykop.jpg"
         class="img-responsive"
         alt="Wykop"
         :width="width"

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

@@ -9,7 +9,7 @@ const { nav = false } = defineProps<Props>()
 <template>
   <a-card class="w-[300px] shadow-sm !rounded-lg">
     <template #cover>
-      <img class="max-h-[180px] !rounded-t-lg" alt="cover" src="~/public/ants-leaf-cutter.jpeg" />
+      <img class="max-h-[180px] !rounded-t-lg" alt="cover" src="~/assets/img/ants-leaf-cutter.jpeg" />
     </template>
 
     <a-card-meta>

packages/nc-gui-v2/nuxt.config.ts

@@ -29,7 +29,7 @@ export default defineNuxtConfig({
       {
         rel: 'icon',
         type: 'image/x-icon',
-        href: './favicon-32.png',
+        href: './favicon.ico',
       },
     ],
     meta: [

packages/nc-gui/nuxt.config.js

@@ -1,24 +1,24 @@
-import MonacoEditorWebpackPlugin from 'monaco-editor-webpack-plugin'
+import MonacoEditorWebpackPlugin from 'monaco-editor-webpack-plugin';
 
 // import HtmlWebpackPlugin from 'html-webpack-plugin';
-const fs = require('fs')
+const fs = require('fs');
-const packageJson = JSON.parse(fs.readFileSync('../nc-lib-gui/package.json', 'utf8'))
+const packageJson = JSON.parse(fs.readFileSync('../nc-lib-gui/package.json', 'utf8'));
 export default {
   /*
-  ** Nuxt rendering mode
+   ** Nuxt rendering mode
-  ** See https://nuxtjs.org/api/configuration-mode
+   ** See https://nuxtjs.org/api/configuration-mode
-  */
+   */
   mode: 'spa',
   // ssr: false,
   /*
-  ** Nuxt target
+   ** Nuxt target
-  ** See https://nuxtjs.org/api/configuration-target
+   ** See https://nuxtjs.org/api/configuration-target
-  */
+   */
   target: 'server',
   /*
-  ** Headers of the page
+   ** Headers of the page
-  ** See https://nuxtjs.org/api/configuration-head
+   ** See https://nuxtjs.org/api/configuration-head
-  */
+   */
   head: {
     titleTemplate: '',
     title: 'NocoDB',
@@ -26,53 +26,53 @@ export default {
       { charset: 'utf-8' },
       {
         name: 'viewport',
-        content: 'width=device-width, initial-scale=1'
+        content: 'width=device-width, initial-scale=1',
       },
       {
         hid: 'description',
         name: 'description',
-        content: process.env.npm_package_description || ''
+        content: process.env.npm_package_description || '',
-      }
+      },
     ],
     link: [
       {
         rel: 'icon',
         type: 'image/x-icon',
-        href: './favicon-32.png'
+        href: './favicon.ico',
-      }
+      },
-    ]
+    ],
   },
   /*
-  ** Global CSS
+   ** Global CSS
-  */
+   */
   /*
-  ** Plugins to load before mounting the App
+   ** Plugins to load before mounting the App
-  ** https://nuxtjs.org/guide/plugins
+   ** https://nuxtjs.org/guide/plugins
-  */
+   */
   plugins: [
     { src: '~plugins/api.js' },
     '~/plugins/xutils.js',
     {
       src: '~plugins/localStorage.js',
-      ssr: false
+      ssr: false,
     },
     {
       src: '~plugins/confetti.js',
-      ssr: false
+      ssr: false,
     },
     {
       src: '~plugins/domPurify.js',
-      ssr: false
+      ssr: false,
     },
     {
       src: '~plugins/axiosInterceptor.js',
-      ssr: false
+      ssr: false,
     },
     '@/plugins/veeValidate',
     '@/plugins/vueTour',
     {
       src: '@/plugins/vueShortkey',
-      ssr: false
+      ssr: false,
     },
     '@/plugins/vueClipboard',
     '@/plugins/globalComponentLoader',
@@ -82,65 +82,63 @@ export default {
     '~/plugins/i18n.js',
     {
       src: '~plugins/projectLoader.js',
-      ssr: false
+      ssr: false,
     },
     {
       src: '~/plugins/tele.js',
-      ssr: false
+      ssr: false,
-    }
+    },
   ],
   /*
-  ** Auto import components
+   ** Auto import components
-  ** See https://nuxtjs.org/api/configuration-components
+   ** See https://nuxtjs.org/api/configuration-components
-  */
+   */
   // components: true,
   /*
-  ** Nuxt.js dev-modules
+   ** Nuxt.js dev-modules
-  */
+   */
-  buildModules: [
+  buildModules: ['@nuxtjs/vuetify'],
-    '@nuxtjs/vuetify'
-  ],
   /*
-  ** Nuxt.js modules
+   ** Nuxt.js modules
-  */
+   */
   modules: [
     // Doc: https://axios.nuxtjs.org/usage
     '@nuxtjs/axios',
     'vue-github-buttons/nuxt',
-    '@nuxtjs/toast'
+    '@nuxtjs/toast',
   ],
   toast: {
-    position: 'top-center'
+    position: 'top-center',
   },
   /*
-  ** Axios module configuration
+   ** Axios module configuration
-  ** See https://axios.nuxtjs.org/options
+   ** See https://axios.nuxtjs.org/options
-  */
+   */
   axios: {
-    baseURL: process.env.NC_BACKEND_URL || (process.env.NODE_ENV === 'production' ? '..' : 'http://localhost:8080')
+    baseURL: process.env.NC_BACKEND_URL || (process.env.NODE_ENV === 'production' ? '..' : 'http://localhost:8080'),
   },
   /*
-  ** vuetify module configuration
+   ** vuetify module configuration
-  ** https://github.com/nuxt-community/vuetify-module
+   ** https://github.com/nuxt-community/vuetify-module
-  */
+   */
   router: {
     mode: 'hash',
     // base: '/xc/',
-    middleware: ['auth']
+    middleware: ['auth'],
   },
   vuetify: {
     defaultAssets: {
       // font: false,
-      icons: false
+      icons: false,
     },
     optionsPath: '@/config/vuetify.options.js',
     treeShake: true,
-    customVariables: ['./config/variables.scss']
+    customVariables: ['./config/variables.scss'],
   },
   /*
-  ** Build configuration
+   ** Build configuration
-  ** See https://nuxtjs.org/api/configuration-build/
+   ** See https://nuxtjs.org/api/configuration-build/
-  */
+   */
   build: {
     parallel: true,
     plugins: [
@@ -151,21 +149,18 @@ export default {
         // e.g. Build full languages support with webpack 4.0 takes over 80 seconds
         // Languages are loaded on demand at runtime
         languages: ['sql', 'json', 'javascript'],
-        features: ['!gotoSymbol']
+        features: ['!gotoSymbol'],
-      })
+      }),
     ],
     // publicPath: process.env.NODE_ENV === 'production' ? `https://cdn.jsdelivr.net/npm/nc-lib-gui@${version}/lib/dist/` : undefined,
     publicPath: process.env.NODE_ENV === 'production' ? './_nuxt/' : undefined,
-    extend(config, {
+    extend(config, { isDev, isClient }) {
-      isDev,
-      isClient
-    }) {
       if (isDev) {
-        config.devtool = isClient ? 'source-map' : 'inline-source-map'
+        config.devtool = isClient ? 'source-map' : 'inline-source-map';
       }
 
-      config.externals = config.externals || {}
+      config.externals = config.externals || {};
-      config.externals['@microsoft/typescript-etw'] = 'FakeModule'
+      config.externals['@microsoft/typescript-etw'] = 'FakeModule';
 
       // config.plugins.push(new MonacoEditorWebpackPlugin({
       //   languages: ['javascript', 'typescript', 'json', 'mysql', 'sql', 'pgsql'],
@@ -204,12 +199,12 @@ export default {
         if (process.env.targetEnv === 'DEV') {
           // nightly build
           // e.g. 0.84.2-20220220-1250
-          packageJson.version = `${packageJson.version}-${process.env.targetVersion}`
+          packageJson.version = `${packageJson.version}-${process.env.targetVersion}`;
-          packageJson.name += '-daily'
+          packageJson.name += '-daily';
         } else {
-          packageJson.version = process.env.targetVersion
+          packageJson.version = process.env.targetVersion;
         }
-        fs.writeFileSync('../nc-lib-gui/package.json', JSON.stringify(packageJson, 0, 2))
+        fs.writeFileSync('../nc-lib-gui/package.json', JSON.stringify(packageJson, 0, 2));
 
         // config.output.publicPath = `https://cdn.jsdelivr.net/npm/nc-lib-gui@${version}/lib/dist/`;
         // const htmlWebpack = config.plugins.find(w => w instanceof HtmlWebpackPlugin);
@@ -221,18 +216,17 @@ export default {
         // };
       }
       if (!isDev) {
-        config.output.publicPath = './_nuxt/'
+        config.output.publicPath = './_nuxt/';
       }
 
-
+      return config;
-      return config
+    },
-    }
   },
   loading: {
     color: '#13f4ef',
     height: '0px',
     continuous: true,
-    duration: 3000
+    duration: 3000,
   },
   css: [
     '@/assets/style/fonts.css',
@@ -241,23 +235,23 @@ export default {
     '@mdi/font/css/materialdesignicons.css',
     '~/assets/style/style.css',
     '~/assets/style.css',
-    'material-design-icons-iconfont/dist/material-design-icons.css'
+    'material-design-icons-iconfont/dist/material-design-icons.css',
   ],
   env: {
     EE: !!process.env.EE,
-    NC_API_URL: 'https://nocodb.com'
+    NC_API_URL: 'https://nocodb.com',
   },
   pwa: {
     workbox: {
       /* workbox options */
       assetsURLPattern: './_nuxt/',
-      pagesURLPattern: './'
+      pagesURLPattern: './',
     },
     manifest: {
-      publicPath: './'
+      publicPath: './',
-    }
+    },
-  }
+  },
-}
+};
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
  *