docs: improve layout

Author: mrholek

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

@@ -0,0 +1,48 @@
+<template>
+  <div
+    v-if="pro_component"
+    class="bg-danger bg-opacity-10 border-start border-start-5 border-start-danger p-4 pb-3 mb-5"
+  >
+    <h3 class="mb-4">CoreUI PRO Component</h3>
+    <p>
+      To use this component you must have a CoreUI PRO license. Buy the
+      <a href="https://coreui.io/pricing/?framework=vue&docs=coreui-banner-pro">CoreUI PRO</a>
+      and get access to all PRO components, features, templates, and dedicated support.
+    </p>
+  </div>
+  <div
+    v-else
+    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/?framework=vue&docs=coreui-banner-pro">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>
+</template>
+
+<script setup lang="ts">
+import { usePageFrontmatter } from '@vuepress/client'
+import type { DefaultThemePageFrontmatter } from '../../shared'
+
+const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
+const pro_component = frontmatter.value.pro_component
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <template v-if="frameworks">
+    <h2>Other frameworks</h2>
+    <p>
+      CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
+      components. To learn more please visit the following pages.
+    </p>
+    <ul>
+      <template v-for="framework in frameworks">
+        <template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
+          <li v-if="el !== 'vue'" :key="index">
+            <a :href="otherFrameworks[framework][el]"
+              >{{ el[0].toUpperCase() + el.slice(1) }} {{ humanize(framework) }}</a
+            >
+          </li>
+        </template>
+      </template>
+    </ul>
+  </template>
+</template>
+<script setup lang="ts">
+import { usePageFrontmatter } from '@vuepress/client'
+import jsonData from '../components/other_frameworks.json'
+import type { DefaultThemePageFrontmatter } from '../../shared'
+
+const props = defineProps({
+  pro_component: Boolean,
+})
+const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
+  const frameworks = frontmatter.value.other_frameworks
+  ? frontmatter.value.other_frameworks.split(', ')
+  : false
+const otherFrameworks = JSON.parse(JSON.stringify(jsonData))
+
+const humanize = (text: string) => {
+  const string = text
+    .split('-')
+    .reduce(
+      (accumulator, currentValue) =>
+        accumulator + ' ' + currentValue[0].toUpperCase() + currentValue.slice(1),
+    )
+  return string[0].toUpperCase() + string.slice(1)
+}
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
+    <button
+      class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none docs-toc-toggle d-md-none"
+      type="button"
+      :aria-expanded="visible ? true : false"
+      aria-controls="tocContents"
+      @click="toggleVisible()"
+    >
+      On this page
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon d-md-none ms-2"
+        aria-hidden="true"
+        viewBox="0 0 512 512"
+      >
+        <polygon
+          fill="var(--ci-primary-color, currentColor)"
+          points="256 382.627 60.687 187.313 83.313 164.687 256 337.372 428.687 164.687 451.313 187.313 256 382.627"
+          class="ci-primary"
+        />
+      </svg>
+    </button>
+    <strong class="d-none d-md-block h6 mb-2 pb-2 border-bottom">On this page</strong>
+    <CCollapse class="docs-toc-collapse" id="tocContents" :visible="visible">
+      <Toc />
+    </CCollapse>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const visible = ref(false)
+const toggleVisible = () => {
+  visible.value = !visible.value
+}
+</script>