Add StudioSdkBannerSidebar (#6437)

Author: artf

docs/.vuepress/public/studio-banner.jpg

@@ -1,6 +1,6 @@
 <template>
   <Layout>
-    <CarbonAds slot="sidebar-top" />
+    <StudioSdkBannerSidebar slot="sidebar-top" />
   </Layout>
 </template>
 
@@ -9,13 +9,17 @@
 // var CarbonAds = require('./CarbonAds.vue').default;
 // import Layout from '@vuepress/theme-default/layouts/Layout.vue';
 // import CarbonAds from './CarbonAds.vue';
+
+// Check all the default slots:
+// https://github.com/vuejs/vuepress/blob/9fb4bb00925d9409e6732118e996411c6a82c85d/packages/%40vuepress/theme-default/layouts/Layout.vue
 import Layout from '@parent-theme/layouts/Layout.vue';
 import CarbonAds from './CarbonAds.vue';
+import StudioSdkBannerSidebar from './StudioSdkBannerSidebar.vue';
 
 export default {
   components: {
     Layout,
-    CarbonAds,
+    StudioSdkBannerSidebar,
   },
 };
 </script>

docs/.vuepress/theme/layouts/Layout.vue

@@ -0,0 +1,43 @@
+<template>
+  <a class="banner-sdk-sidebar" :href="getSdkDocsLink()">
+    <h2 class="banner-sdk-sidebar__title">Supercharge Your GrapesJS Development 🚀</h2>
+    <img class="banner-sdk-sidebar__image" :src="$withBase('/studio-banner.jpg')" alt="Studio SDK">
+    <p class="banner-sdk-sidebar__content">
+       Studio SDK is the next-level visual builder with advanced features, custom plugins, and seamless integration. Save time and build faster!
+    </p>
+  </a>
+</template>
+
+<script>
+import {  getSdkDocsLink } from './utils';
+
+export default {
+  methods: {
+    getSdkDocsLink() {
+      return getSdkDocsLink('sidebar');
+    }
+  }
+};
+</script>
+
+<style>
+.banner-sdk-sidebar {
+  padding: 1rem;
+  background-color: #f8f8f8;
+  border-radius: 5px;
+  color: inherit;
+}
+.banner-sdk-sidebar__title {
+  font-size: 0.8rem;
+}
+.banner-sdk-sidebar__image {
+  border-radius: 3px;
+  width: 100%;
+  max-width: 150px;
+  float: left;
+  margin-right: 10px;
+}
+.banner-sdk-sidebar__content {
+  font-size: 0.8rem;
+}
+</style>

docs/.vuepress/theme/layouts/StudioSdkBannerSidebar.vue

@@ -0,0 +1,7 @@
+export const getSdkUtmParams = (medium = '') => {
+    return `utm_source=grapesjs-docs&utm_medium=${medium}`;
+}
+
+export const getSdkDocsLink = (medium = '') => {
+    return `https://app.grapesjs.com/docs-sdk/overview/getting-started?${getSdkUtmParams(medium)}`;
+}