docs: update layout

Author: mrholek

packages/docs/.vuepress/theme-coreui/src/client/components/Ads.vue

@@ -0,0 +1,34 @@
+<script>
+import {h} from 'vue';
+export default {
+  props: {},
+  watch: {
+    '$route'(to, from) {
+      if (
+        to.path !== from.path
+        // Only reload if the ad has been loaded
+        // otherwise it's possible that the script is appended but
+        // the ads are not loaded yet. This would result in duplicated ads.
+        && this.$el.querySelector('#carbonads')
+      ) {
+        this.$el.innerHTML = '';
+        this.load();
+      }
+    },
+  },
+  mounted() {
+    this.load();
+  },
+  methods: {
+    load() {
+      const s = document.createElement('script');
+      s.id = '_carbonads_js';
+      s.src = `//cdn.carbonads.com/carbon.js?serve=CEAICKJY&placement=coreuiio`;
+      this.$el.appendChild(s);
+    },
+  },
+  render() {
+    return h('div');
+  },
+};
+</script>

packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue

@@ -1,11 +1,4 @@
 <template>
-  <CAlert color="light" class="d-flex align-items-baseline justify-content-center rounded-0 border-bottom mb-0">
-    <span class="me-3">
-      If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️
-    </span>
-    <CButton color="dark" component="a" href="https://github.com/coreui/coreui-vue" size="sm" target="_blank" variant="outline"><CIcon icon="cib-github" /> Star</CButton>
-    <span class="ms-3">🙏</span>
-  </CAlert>
   <CHeader class="mb-5 elevation-0 border-bottom" position="sticky">
     <CHeaderToggler class="ms-md-3" @click="$emit('toggle-sidebar')">
       <CIcon icon="cil-menu" size="lg" />

packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue

@@ -3,7 +3,7 @@
     <div class="content">
       <h1>{{ title }}</h1>
       <p class="docs-lead fs-4 fw-light">{{ description }}</p>
-      <div data-ea-publisher="coreui-io" data-ea-type="image"></div>
+      <Ads />
       <Content />
     </div>
   </div>
@@ -14,8 +14,13 @@ import { defineComponent } from 'vue'
 import { usePageFrontmatter } from '@vuepress/client'
 import type { DefaultThemeNormalPageFrontmatter } from '../../shared'
 
+import Ads from './Ads.vue'
+
 export default defineComponent({
   name: 'Page',
+  components: {
+    Ads,
+  },
   setup() {
     const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
     const title = frontmatter.value.title

packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue

@@ -5,9 +5,9 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
   >
-    <Sidebar :visible="isSidebarOpen" @visible-change="(event) => isSidebarOpen = event" />
+    <Sidebar :visible="isSidebarOpen" @visible-change="(event) => (isSidebarOpen = event)" />
     <div class="wrapper d-flex flex-column min-vh-100">
-      <Header @toggle-sidebar="toggleSidebar(!isSidebarOpen)"/>
+      <Header @toggle-sidebar="toggleSidebar(!isSidebarOpen)" />
       <div class="body flex-grow-1 px-3">
         <CContainer lg>
           <Home v-if="frontmatter.home" />
@@ -20,6 +20,33 @@
           >
             <CRow>
               <CCol :lg="9">
+                <div
+                  class="bg-info bg-opacity-10 border-start border-start-5 border-start-info p-4 pb-3 mb-5"
+                >
+                  <h3 class="mb-4">Support CoreUI Development</h3>
+                  <p>
+                    CoreUI is an MIT-licensed open source project and is completely free to use.
+                    However, the amount of effort needed to maintain and develop new features for
+                    the project is not sustainable without proper financial backing.
+                  </p>
+                  <p>You can support our Open Source software development in the following ways:</p>
+                  <ul>
+                    <li>
+                      Buy the <a href="https://coreui.io/pricing/?support=vue">CoreUI PRO</a>,
+                      and get access to PRO components, and dedicated support.
+                    </li>
+                    <li>
+                      <a href="https://opencollective.com/coreui" target="_blank"
+                        >Became a sponsor</a
+                      >, and get your logo on BACKERS.md/README.md files or each site of this
+                      documentation
+                    </li>
+                    <li>
+                      Give us a star ⭐️ on
+                      <a href="https://github.com/coreui/coreui-vue" target="_blank">Github</a>.
+                    </li>
+                  </ul>
+                </div>
                 <Page :key="page.path">
                   <template #top>
                     <slot name="page-top" />

packages/docs/.vuepress/theme-coreui/src/client/styles/_ads.scss

@@ -0,0 +1,32 @@
+#carbonads {
+  position: static;
+  display: block;
+  max-width: 400px;
+  padding: 15px 15px 15px 160px;
+  margin: 2rem 0;
+  overflow: hidden;
+  @include font-size(.8125rem);
+  line-height: 1.4;
+  text-align: left;
+  background-color: $gray-100;
+
+  a {
+    color: $gray-800;
+    text-decoration: none;
+  }
+
+  @include media-breakpoint-up(sm) {
+    @include border-radius(.5rem);
+  }
+}
+
+.carbon-img {
+  float: left;
+  margin-left: -145px;
+}
+
+.carbon-poweredby {
+  display: block;
+  margin-top: .75rem;
+  color: $gray-700 !important;
+}

packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss

@@ -1,4 +1,4 @@
-.docs-sidebar {
+.sidebar.docs-sidebar {
   --cui-sidebar-bg: #f0f4f7;
   --cui-sidebar-brand-bg: transparent;
   --cui-sidebar-brand-color: rgba(44,56,74,0.87);

packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss

@@ -1,5 +1,6 @@
 @import '@coreui/coreui/scss/coreui.scss';
 
+@import 'ads';
 @import 'anchor';
 @import 'demo';
 @import 'footer';